Experience imparts value

As a consultant, it is interesting when talking with prospective clients to see if they want a “second set of hands” or if they want advice to help them address a business need. In my past life, as a management consultant in the software business, I sought the second type of assignments. The more problem-solving, the better.

Camera lens with eye
An eye for, and the skills for, digital graphic design

In my role as a freelance creative professional, I still seek, and truly enjoy, “value-added” assignments where I can solve problems. I am still a consultant. The difference is, now I have lots of business and marketing expertise plus I have an eye for, and possess, Web and graphic design skills.

 

 

As Web design guru Jeffrey Zeldman so aptly says,

a beginning consultant brings skills, an experienced consultant brings value.”

He goes on to say that to survive as an independent consultant at any age, and to remain meaningful in the digital design world, you must bring something different to the table. You must bring value.

Develop style guides for your design projects

Whether you are developing a 50-page Website, a small mobile phone app or an annual report for a corporate client, you should get in the habit of developing a style guide.

Branding and style guides are important for projects large and small. They help to provide consistent messages about an organization and provide a degree of professionalism. Creative Bloq has a good post on this topic, with examples of thirteen style guides for famous organizations.

Client project style guide

The client’s goal was to refresh their brand and their Web site to draw more customers to their wellness practice and retail establishment. I prepared a simple style guide, using Adobe Illustrator. The Style Guide displays the brand, color chips for main and accent colors, typography and usage examples:

Nature's Garden Style Guide
Style Guide for rebranding and web project

Here is how the styles look when applied to a “mobile first” Website design. Note how the colors and the leaf motif are repeated throughout the page. The design works well on a smartphone, on a tablet or on a large HD screen.

Responsive Home page on mobile device
Responsive Home page on mobile device

 

Nature's Garden home page on large HD monitor, colorful watercolor floral banner with logo and Welcome page on pale green bamboo patterned background
Responsive Home Page on large HD monitor

University style guide

On a whim, I researched my alma mater’s color and brand guidelines. The Miami University was established in 1809 by a charter signed by George Washington and has a long-standing with the Miami Indians in southwestern Ohio. 

It was interesting to find that Miami University uses different reds for print, online and merchandise. And there are lots of formal and informal logos in different styles and sizes for print, Web and merchandise use. Certain “vintage” logos require special permission from the University,

Here is the “M” spirit mark often used on sportswear and signs.

The Miami University Spirit Mark
The Miami University Spirit Mark

The branding guidelines also link to the school’s Web standards. These standards cover fonts, graphic elements, headers, footers, etc. It was interesting to see the fonts used; Adelle, Gotham, Promesh and Adobe Bembo. 

The Promesh font is new to me and it works well for athletic wear and athletic posters. You can download Promesh One and Promesh Two here.

Designing and building a user interface (UX)

If you have ever designed a Web site, an app or a software User Interface (UX), then you know that it is part art, and part science. The process takes several steps and you may go through several versions of a design before arriving at the final design. Your interface will help users solve certain problems. Therefore, getting the right people involved and keeping them engaged throughout the process is critical.

UX Distilling

Designers are asked to perform minor miracles by transforming large amounts of information into simplified communicative designs.
—Daniel O’Sullivan

Designing a User Interface (UX) is like distilling a fine bourbon
Designing a User Interface (UX) is like distilling a fine bourbon

Daniel O’Sullivan wrote an InVision blog post about UX Distilling. He likens designing and building a great (UX) to distilling a fine bourbon. O’Sullivan uses a five-step process: identify components | gather requirements | outline | mockup | refine.

Step 1: Identify Components

Identify which ingredients are needed

  • navigation
  • features
  • metrics

Step 2: Gather Requirements

Carefully choose the finest ingredients.

  • for each of the identified components in Step 1
  • focus on helpful and positive metrics vs. all metrics

Step 3: Outline (Design)

Combine the ingredients and distill.

  • know your tools; you don’t have to know how to code, but you have to understand how code works
  • use proper color theory
  • identify iconography

Step 4: Mockup

Beautifully bottle the bourbon.

  • use Photoshop, Illustrator or other tools

Step 5: Refine

Serve and enjoy, and serve and enjoy.

  • use prototyping tools
  • conduct UX testing
  • build
  • an iterative process

My Take

O’Sullivan’s summary of the process is easy to digest and makes perfect sense. I have managed many software business requirements and implementation projects over the last 20 years and follow a similar process. In the early days, I used PowerPoints and crude drawing tools to create mockups. Today, Photoshop, Illustrator and prototyping tools make the process much easier.

To get the full story, watch at least the first 20-25 minutes of the video presentation.

Size matters

Your body text is too small

When coding our client project, I needed to make several adjustments in heading and body text size. As a recent blog post by Christian Miller (aka Xtian Miller) says, you can make body text too small, but nobody complains if it is too large. The benefits of using LARGER body text include:

  1. easier to read from a distance
  2. improved readability
  3. improved usability
  4. increased visual impact

Miller says that the majority of Web sites use 15-18 px body text… which brings to mind the (rhetorical?) question that I posed in class on Thursday–which units to use, points or pixels, when sizing text? I started to use ems and % for line height in my last few Web projects. I like using these relative measurements rather than fixed measurements, once the base font size is defined. I can also use these relative units for font height, for example, headings and other text used for highlights and emphasis.

Miller also writes that “Mobile First” designs can cause designers to be afraid of using larger body text. He provides examples of several sites that use 20 px or larger body text, including Jeffrey Zeldman’s.

What is minimalist design?

I like minimalist design, but I really did not know exactly what it was until I read this blog post, Minimalist Design: 25 Beautiful Examples and Practical Tips.

Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose.”

Worth reading… and I look forward to applying some of the design principles in the future.