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.
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.
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.
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:
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 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 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.
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
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.
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:
easier to read from a distance
improved readability
improved usability
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.
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.
