Design Guidelines

It’s not just about doing good work, it’s about explaining your work and selling it, about giving it the proper context so that other people can understand it and feel good about it and tell other people. It’s like building consensus and buy-in. That sounds reductionist and cheap, but there’s value to that. Explain your work. You can do it in few words, but you really get to the heart and soul and reason of why you made certain choices in a design. That’s something I learned from Robert… how to articulate choices. I consider it invaluable information.

People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.

- do not mix 2 typefaces from the same family: bodoni + didot, garamond + bembo, futura + gotham…
- do not mix 2 typefaces with a strong personality: antique olive + vendome, sansa + cooper black…
- do not mix 2 script types: mistral + bello, machiarge + kinescope…
- do not think that to look “modern” you HAVE to take recent types: you might look incredibly modern by pairing a gill sans with a baskerville, if done correctly.
- try to superimpose your faces to check if their x-height and kerning fit together, it helps giving a feeling of homogeneity.
- the odd couple sans-serif (titles-text) is very basic, though very efficient. in case of a doubt, stick to it. get away from it if you absolutely know what you are doing.
- check out the families of types containing serif and sans under the same name: fedra, meta, frutiger (new!), rotis… the problem: most of these types are actually rooted in a consensus, they are not expressing much. It’s cool for a bank report or an informative brochure, but might be weak for a magazine.

dr

The simplest way to achieve simplicity is through thoughtful reduction.

Rather than the position of the baseline being determined in relation to a text box, baseline grid determines it in relation to the page, and, when it’s on, overides any leading value applied within text boxes.

It’s a good way to get the type in adjacent columns to line up with one another.

If you set 9/10, but the grid is 14, you get 9/14. If you set 9/14.5, you get 9/28.

A good trick is to set the grid to half your leading. That way you can do stuff like applying extra between-paragraph leading with a value equal to the baseline grid.

Nick Shinn

A regular rhythm in music helps people keep track, a regular rhythm in type makes things easier for whoever’s experiencing the content. Assumptions can be made—often subconsciously—regarding where a piece of content is going to be, purely on the basis of the rhythm. Searching and disorientation are both reduced, and the speed in which content can be accessed and digested is increased. Figure 1, below, shows a comparison of a page with arbitrary values with one that has considered vertical rhythm. The difference is subtle, but the image with text aligned to a baseline grid is neater and easier to read.

Craig Grannell

A well-designed and humane interface does not need to be split into beginner and expert subsystems

You give participants a stack of randomly shuffled cards, each with an item written on it, and then ask the participants to sort the cards into groups that make sense to them. The idea is to get a sense of how users naturally categorize different concepts so that you can structure your interface’s categorization scheme accordingly. You perform a card sort when you want to understand how to categorize or organize a set of elements—an issue usually related to early-stage IA design.

Task elicitation is similar to web analytics, but gives users specific task prompts, such as:

Suppose you want to buy a new sofa. Where on this page would you click to find information about the sofa?

There are many variations on this type of tool: Some tools automatically monitor user behaviors; some ask users to manually indicate when they’ve accomplished a task. Task elicitation is the most direct way to gather performance feedback on a particular task, which is why it’s also the most popular.

To develop a sense of design use the three “eyes”:

1. Visual-eyes: Examine closely all types of printed material, i.e. physically see/look at what everyone else is/has done. (What catches or eludes your attention, and why?)
2. Critic-eyes: Separate the good from the bad. (What provokes the ad? What motivates you? Those things that don’t catch your eye — why?)
3. Analy-eyes: Select the element that makes it a good design.

There are three essential qualities needed to become a competent designer:

1. Vision: To be able to detect an idea and then to toss it around in your head (objects, tones, shapes, colours — everything around you).
2. Imagination: To be able to use an idea effectively, i.e. brainstorm the idea and bring it to a state where it can work.
3. Judgement: To be able to assess the idea’s value and correct place and use, i.e. limitations always arise after you come up with an idea.

1. Details a great designer maketh. If there’s one thing I’ve repeated over the course of my career more than anything else, it’s this simple philosophy: If you have time and talent to care for the smaller details, it almost always means you’ve already cared for the bigger details. Meaning, if you have time and talent to readjust the logo positioning 1px or 1pt to the left or right, it likely means you’ve already solidified usability, cross-browser compatibility, primary headline, and so on. I’m amazed by works that continue to impress as you dig deeper into the details.
2. There’s a point at which quality becomes too costly. Find that point with every project. Having expounded on importance of details, allow me to counterbalance with a brief discussion about the cost of quality. You’ll inevitably hit a point on every project when we all say, “If I just do this or that improvement, it’ll be much more impressive as a portfolio piece.” At that point, you’re essentially designing off the clock. If you (and your employer) can afford the time, more power to you. If not, however, the cost of the additional quality is both too expensive and unnoticeable by the client and its audience — time to stop and move on. (Economics majors: Think law of decreasing margins.)
3. Those who code XHTML/CSS as well as they design will always have an edge over those who only design. For those of you who already code well, this is a no-brainer. You’re able to foresee potential layout and coding issues while the comp is still in Photoshop or Fireworks or even Illustrator. The benefits of such are rarely overrated, as time, er, money is saved and frustration is minimized.
4. Communicate, don’t decorate. How often are you caught up in adding imagery and typography — even details —that have little or no relevance to the project at hand? No worries, I still struggle too. But the sooner you and I learn to communicate with our designs using only what’s necessary and relevant, rather than decorate for the mere purpose of decorating, the sooner we’ll find our designs touch the consumer’s heart, rather than just satisfy the designer’s eye. Think of it this way: Every element added to a design, whether print or web, decreases the importance of every other element already on the page. You better be sure, then, that the additional element enhances rather than detracts.
5. When you hit a snag in CSS, strip down to the base ID and work up. Imagine this: The div containing your masthead image wraps improperly in IE, but displays perfectly in other browsers. While not all that difficult to imagine, it’s quite frustrating. Apart from coding from the start in Firefox, I’ve found it useful to comment out everything except the container div, for example. Once I’m positive the container div is working, I uncomment in the next div. Once that div is working properly in tandem with the container div, I uncomment the next div. And so on. A simple technique, no doubt, but often a useful one.
6. Rock. Paper. Trimmer. Forget scissors. Get yourself a quality paper trimmer. I can’t even begin to tell you how valuable a good paper trimmer is when prototyping print work. So much so, in fact, that I’ve wasted an entire point just on paper trimmers. What to look for? A rotary blade trimmer that can handle up to 11” × 17” prints. (And if you’re wondering, I use one similar to this.)
7. Give me one canvas, two fonts, and I’ll make something that sings. Type. Typography. Fonts. Typefaces. Whatever floats your boat. The important thing is this: Typography can make or break a piece. Typeface selection is crucial. Try testing your type savvy by creating a print ad using only two typefaces. No color, no photography, no logo. Just you and the type. Then submit it for peer review. You’ll quickly discover how well — or how poorly — you choose typefaces.
8. Chunking. The limitations of a weblog article don’t allow for an elaborate description of chunking. Suffice it to say someday I’ll write an article on the topic. For now, refer to portions of this outline PDF. Summarized in one sentence, “chunking” a brand increases consumer recollection. It’s the reason you can identify a BMW based solely on the front kidney grill, or the reason you can identify an iPod based solely on the white case.

Why not ten things, you ask? I’ve always been taught to deliver only what needs to be delivered to make a point. Nothing more, nothing less. Perhaps that’s number nine.