Design Guidelines

Yesterday, Sierra (one of the WS interns) and I sat down in our usual way to work on a design mockup/comp for the website redesign. The way we decided to start this time was to look at a bunch college websites and critique them. We came up with a bunch of things that we liked and disliked about them and ultimately -- although it wasn't our intention -- some guidelines about what makes a good design in general. I'm sure this is documented more elegantly in many design books, but here's what we came up with. Keep in mind that none of the ideas are independent of one another, so I may repeat myself.

People-oriented

• Information should be relevant to the user and organized and layed out in a person-friendly fashion. We may work with computers, but we don't work for them.
• The design should have a personal touch, appealing to our sensibilities and evoking emotion. Many college websites had the "smiling faces" pictures which were effective.
• Cater to your audience. The college sites we found most effective focused on who the user is, rather than how the colleges were organized.

Simplicity

• Overall, the design should be clear and uncluttered.
• Elements that have different meaning or function should be cleanly separated.
• Less is more - say what you mean, briefly.

Focus

• Our eyes are naturally drawn to the center. Put the most important information in the center, and use visual elements to draw our attention there.


• Properly weight elements. Items that have more importance or hierarchical rank should appear larger or bolder or more saturated than ones with less significance. You'd be surprised how many times this principle is violated, even though it seems self-evident.


• Avoid distractions. Don't put in a flashy, animated dancing carrot that draws the user's attention away from the primary content.


• Make interface highlights (e.g. rollovers or page markers) subtle but meaningful.

Consistency

• Make your primary and your secondary interface elements (e.g. front page and secondary pages) retain similarities so that the user doesn't have to learn a new interface every time.
• Function should be correlated with appearance. If a button is in one interface, and has the same function in another interface, make it look the same.
• Make your navigation consistent, for the love of Pete. This goes back to the first point.
• I hate to borrow it too heavily, but use convention instead of configuration. In other words, give your user one way and one way only to achieve a certain result and make identical elements mean the same thing everywhere. The less they have to learn, the better.

Semantics

• Make visual elements relevant to the context. If a page is about Faculty, have an image of an instructor in front of the classroom. If I'm on a page about International Student services, don't show me just any old picture of the campus.
• Forge cognitive associations through consistency and iconography. Our brains largely discover meaning through association, so exploit it.
• Don't be too wordy, use non-textual clues instead. It can be tiring to read a lot of text just to find out I'm on the Art department page. Show someone painting a canvas instead. This relates to simplicity and focus as well.

I never thought of myself as a designer, but I think I can tell a good design from a bad design. And now I have a rubrick to guide me in my own web designs!