All Purpose Design Critique

Several weeks ago we called for submissions so we’d have some design fodder to showcase the following principals. We’ve been pumping a few of these out, but we still have room for a couple more. Read the details and send us your content.

This is part of a series called Design Critique.

One Size Fits Most

As a designer, I have lots of friends and colleagues that want me to look over something they have put together. This is usually prefaced with them asking me, “Do you like this?”

Those are lethal words—and in my older years I’ve learned that the correct answer is a question back, “Do YOU like it?” that’s when you get the real information you need.

They either gush with how much they love it (making your response an enthusiastic Yes! That’s great! Look what you did there with that type! How clever!!”) or;

They launch into what they don’t like, or what isn’t working—that’s something you can work with.

There is a difference between “show and tell” and “give me your professional opinion”.
Learn the difference and keep your friends.

A couple of my friends are really interested in how to make something better. They are both engineers—but they want to have the best presentation because the understand the power of well presented information. It makes selling your idea or point of view easier. I could wax poetic about the power of design to persuade, but we’ll leave that for another day (and yes, it’s proven to bring in more money, win projects, etc—it’s not just “looking pretty).

Anyway, back to my two engineer friends—I’ve given their work the same critique I’ve given a thousand times, which makes me realize that there kind of is an All Purpose Design Critique—a set of principals you can distill down to improve anything from a memo to a website suite.

The Overall Elements on a Page

Spacing & Size

Spacing & Size and Grid (next section) are one of the biggest things that take good work to great. It’s what gives everything that extra polish. These items are so slight that the untrained eye won’t be able to pick them out, but people will “feel like” the design is more complete or polished. In my opinion that is what great information design is—the design isn’t decoration, it gets out of the way to serve up the data in the most useful, intelligent way. Making all the spaces and all the sizes consistent is the key.

• All of your headings? The same size, with the same space above and below them.
• All of your body copy? The same size, with the same space between lines and a different space after paragraphs.
• All of your margins? You guessed it, the same size. The edges of the page are either equidistant or follow the same spacing regulations on every page of a book or catalog (normally with the inside edge next to the spine [the gutter] smaller than the outside edges an the bottom larger than the top—want to really design geek out on page cannons?). This goes the same for spacing between columns, around images and around any other element on the page.

Keeping sizes and spacing the same makes your design feel polished.

And what’s the best way to get all of this spacing the same? Using a strong grid…

Grid

In all of my layouts I use two grids — one is simply a grid over the entire page (all graphics programs will allow you to view a grid). On top of that I use a grid broken into columns. Like many designers, I use the 960 grid for web page layouts. Everything I do lines up on both grids — the document grid and the page layout grid. You can see that everything is either 1 column wide, 2 columns wide or 3.

Aligning everything to a grid adds structure and support. 

Focus, Line & Fill

I will cover this topic more extensively in the blog post: Why Web Design is like a Good Flower Arrangement. You can see in the grid example that we have focus (an image), line (the columns) and fill (the type). These different elements help the project all come together, and when something feels wrong you can always ask “do I have a focus, a line and a fill?”

The elements of Focus, Line and Fill round out a design.

Follow Known Behavior

As humans we have a great ability to learn and reapply this knowledge time and time again. At this point in life there are things you just know. Things like – to adjust a seat in any car there is going to be some kind of lever under the seat in front or on the side. To use a toaster you will push down a lever. Now imagine that you get in a car and to move the seats you have to open a special compartment and be presented with a series of switches. Or you put your toast in the slots of a toaster, but you have a dial and a button only.

Follow known behavior—your user should not have to be reeducated to complete simple tasks. 

We are used to small type under images supporting the picture they are next to. We are used to bullet points distilling information. We are used to larger type introducing a new section. We are used to logos on a web page taking us to the homepage. We are used to phone numbers displayed as (###) ###-#### or ###.###.####. Follow what is already known and spend your time solving more interesting problems.

Dealing with information

Ok, so your page is setup, your content is ready to go, but how do you put it together in a way that people will understand it? What are the other small elements that push a design from meh to great.

Hierarchy

The hierarchy of a page is listing the most important thing first, the second important thing next and so on. Hierarchy refers to both information and structure. In this blog post the heading “Dealing with Information” has the subheading “Hierarchy”. Not only does the information follow this flow, but the structure does as well—the heading is larger and darker (we say this “has more weight”), the subheading is smaller, but still clearly stands out from the body copy. This is also why photo credits and copyright information are generally at the bottom and very small — they are important, but someone needs to be looking for them to see them, because the most important elemtn of this post is the title: All Purpose Design Critique and the least important is where the photos came from.

Put content and structure in a logical hierarchy, adding more weight to the more important items.

Line Breaks

This is especially true in headings, but break up your information as you would say it. I still remember an 8th grade class election when someone got up to speak about a candidate and said:

I think you should vote for Sheri because she is really easy

to get along with. 

Of course, being 8th graders we were in an uproar between the few seconds pause between “easy” and “to get along with. Break up your information where eyou break up your thoughts.

Line breaks are thought breaks.

In the above example, if that was a heading and you didn’t have a lot of space you could do it like this:

I think you should
vote for Sheri
because she is
really easy to get along with

And then you could turn this into a fancy heading:

This also distills to the main idea: Vote for Sheri and what could be her campaign slogan: Really easy to get along with. This is also a good example of hierarchy.

Incremental Stepping

When choosing shades of colors (such as 100% black is dark black, 50% black is gray) do it in large increments – like 10, 20, 30. Most people can’t tell the difference between 50% and 52% gray, but they can see 50% and 60%.

The same thing goes for typefaces—a heading set in 18pt and a subheading in 14pt are discernible, 18pt and 17pt are not.

Choose larger increments for shading and size so people can see the difference easily. 

More Similar or More Different

Similar to incremental stepping, putting things in a series either need to more similar so they go together, or more different so they stand apart. This is a difficult one to explain, so here are some pictures (imagine if these are a poster series):

This is one of the critiques we continually gave design students at the AIGA Portfolio Review. Either keep everything in a collection very similar, or make them wildly different with only a few elements to tie them together. You are trying to avoid something looking like a mistake—in one instance we saw a series where only one had a drop shadow around of the logo, did the designer accidentally hit a filter button? Why is only this one of five different?

Make items in a series either more similar or more different.

Limit Typefaces

Limit the number of typefaces you use, for the greatest flexibility choose one with many fonts (designers call these a multiple-master). What’s the difference? A typeface is an entire family of weights and styles: bold, italic, bold italic. A font is a single weight/style of a typeface: bold. A good rule of thumb is to limit your typefaces to no more than 2, often a serif typeface and a san-seif. One used for headings, one used for the body. In the Vote for Sheri example there is only one typeface (Archer) but different fonts (thin italic, bold, thin and book italic).

Limit the number of typefaces you use. 

And never use Comic Sans, it makes you look unprofessional and moronic.

Making It That Much Better

Ok, you are coming down the home stretch, your design is almost done but it’s lacking…something… Maybe it’s one of these things?

Color Story

The color story is how your piece ties together, having a defined color palette keeps all the reds the same brick color, the greens all the same grass color and (YAY!) those two colors actually also go really well together. For inspiration you can always look to nature, because nature is never wrong:

There are some great color story websites out there, like ColorSchemer, COLOURLovers, and Kuler.

Create and stay true to a color story.

Better Images

Use great images in your designs, you can get the perfect thing for free or next to nothing.

Try a Flickr Advanced Search

Be sure to go to the ‘Advanced’ tab and select:

• Only search within Creative Commons-licensed content
• Find content to use commercially
• Find content to modify, adapt, or build upon

• Big Stock Photos
• Stock Fresh
• Shutterstock
• iStock Photo – this used to be the be all and end all, but they have since significantly raised their prices and it’s extremely difficult to filter the low price options. /lament/

Depth

Sometimes your design just needs a little more umph. Most of these are more advanced (if done wrong they look really cheap, so proeeed with caution):

• Drop shadows— this is the illusion of a shadow in your design.
• Gradient — this can be a very subtle.
• Keylines — these are very thin outlines to help set off design.

Create depth in your design.

Cheat Sheet

1. Keeping sizes and spacing the same makes your design feel polished.
2. Aligning everything to a grid adds structure and support.
3. The elements of Focus, Line and FIll round out a design.
4. Follow known behavior—your user should not have to be reeducated to complete simple tasks.
5. Put content and structure in a logical hierarchy, adding more weight to the more important items.
6. Line breaks are thought breaks.
7. Choose larger increments for shading and size so people can see the difference easily.
8. Make items in a series either more similar or more different.
9. Limit the number of typefaces you use.
10. Create and stay true to a color story.
11. Use awesome images in your design.
12. Create depth in your design.

Stay tuned or sign up to receive blog posts via email (top right column of the blog) to see these items in practice.

This work includes the photo “Design Blog Sociale – 23 June 2008 – Vitamin Packaging by Robert Ferrell D,” available under a Creative Commons Attribution license, © SOCIALisBETTER.
This work includes the photo “Eggplant,” available under a Creative Commons Attribution license, © quinn.anya.

How to Properly Cite Creative Commons Works

I use a lot of photos from Flickr on this blog. I think posts are more interesting if they have a photo, and I think the best way to find photos is Advanced Flickr Search:

I always turn on

• Only search within Creative Commons-licensed content
  • Find content to use commercially
  • Find content to modify, adapt, or build upon

I had previously just linked ‘Photo Credit’ to the source photo but a great article on Understanding Copyright And Licenses from Smashing Magazine changed my sinning ways. The proper way to attribute is:

This work includes the photo “Photo’s Title,” available under a Creative Commons Attribution license, © Author’s Name.

Check out the entire article and go forth and cite.

Letterpress Handbook Mobile App

We are so excited to announce that our Letterpress Handbook mobile app just cleared the iTunes store!

We have been working with our friends at The Mandate Press for a while on different web projects and initiatives, somewhere along the line this app came up and we derailed our original projects to get this designed and developed.

Take a look and download our free app (and we’d really appreciate some good ratings/feedback!).

We also want to give a shout out to our friend Dave who is doing a lot of mobile development work with us. He is super patient and methodical, you just can’t ruffle this guy’s feathers. Even when I was in actual tears over the retina display icons. He is a pleasure to work with and we’re looking forward to all the projects we are tied together on. Through the gnashing of teeth and the “yeah, replace this entire section from scratch…again…for the 5th time” he has been a great partner. Thanks!

We are working on several mobile apps right now for iPhone, iPad, Android Mobile and Android Tablet, once a few more of these clear we’ll share our “How to” knowledge with designers and developers. In the meantime you can take a look at our Why Build a Mobile App presentation.

Google+ ❤ Microsoft Office

Or at least they have the same taste in decorating…

(G+ icons from here)

PS, Follow me on Google+

Gamer Nostalgia Posters

Our friend Riley Florence created this series of old-school nintendo hero posters and is funding them on Kickstarter.

Take a look and if you are interested in owning a poster visit the Kickstart page and plunk down your cash.  Nice work Riley!

P.S. We submitted your work somewhere else too, we’ll let you know if it shows up

Update: DING! Here it is on the Egotist: Local Designer Pays Homage to NES Greats