Not too long ago I had a conversation with a graphic designer who was tasked with designing a website. Web Design is out of her area of immediate expertise, and she asked me if I had any pointers that I could share with her. After I sent her my email, I realized that I’ve said this before — and I’ll probably say it again. So, in case my mother, or anyone else, asks my thoughts on how to design a website,  here are seven rules that I’ll mouth off.

F is for F-shape

The eye moves in an F-shape on the web page. The hottest spot on the page is the upper left, the coldest spot is the middle right.  The last place the eye lands is the bottom right. This is why all navigations, regardless of whether the language reads right-to-left, are left-to-right horizontal, or left side top-to-bottom. Don’t break that rule. The trend today is centered horizontal navigations. When it’s a small website, it’s the best way to go. It leaves you with more room for work. Everything in the website design should support this physiological fact. The F-shape is how you show the user importance, take disgusting advantage of this principle. Design websites to follow the F-shape. http://www.useit.com/alertbox/reading_pattern.html

A Good Looking Header on Your Shoulders

Your header is at the top, and it tells the user where they are. The header is the first thing the eye sees. Get it right or they’ll leave.  Logo at the top, above navigation.  Center the logo, or put it in the upper left corner. If you have other universal elements, like a search box or an “Español” link, put those in the upper right, opposite of the left-side logo. Users have come to expect that, even Wikipedia got on board; follow the trends.

Don’t get cute with navigation.  Absolutely no Mystery meat navigation. Some people would say that’s a key qualifier for a web page that sucks: It should be obvious where your navigation is and where it takes you. Keep your headers simple and easy to read.

Rainbows are for Unicorns, not Web Pages.

One color for links, one color for paragraph text. Link color should not match the color of any other text on the page.  Ever. Ever. That’s how users get confused. It is okay for navigation to share color with something else on the page, so long as it’s obvious  that it’s navigation.

The old, “yellow on white background” is somewhat obvious, but how about blue on a black background? Ever try a orange with red? Don’t throw colors together. Built a palette first. Be very intentional with how you match colors. I rely heavily on kuler.adobe.com for helping me build color palettes, as this is a weakness of mine.

Be mindful of the cultural implications of color. Be careful with red — and avoid using it in plain text. Red is an attention grabber. Often with software, red means warning. If your website is themed red, that’s fine, but make sure you’ve accounted for how you’ll be able to grab attention if you need it. Color on the web page tells me if it was done by a pro or an amateur.

Isn’t that red annoying?

F is for Fitt’s Law

The bigger something is – a button or navigation, the easier it is to click and the faster they can click on it. Make buttons big. Woot.com is a perfect example. The bigger the navigation or the bigger your call-to-action button is, the faster someone is getting to where they want to be.

Call to Action Like You Call Your Mother

Consistent and frequent Calls-to-Action are good, but don’t ask someone to do 7 things on a page. On every page, every user should be told to do something with a Call-to-Action at least once: Order Now, Register, Learn More, Call us. If someone landed on a page, they should know what they’re supposed to do now that they’ve gotten there. That’s bounce-rate vs. exit rate. They bounce to another page, but they exit when they’re finished. If someone gets on a page, and doesn’t know why they’re there, they’ll leave.

Please, absolutely no more than three CTA’s per page —and they shouldn’t be the same size. The most important CTA should be the largest. The CTA should be like a link; different and distinct in color and shape from everything else. When the user gets to the web page, within 1/4 second she should know what to do, now that she’s there.

Read some techniques for Calls-to-Action

F isn’t For Fold

The fold is the point on the page where the user needs to scroll to see more content.  You’ll hear some folks say “don’t put anything important below the fold, users don’t see it”. That’s not true. So long as you indicate there’s stuff below the fold, you’re fine. Look at http://www.ilchiro.org/. I did some usability consulting for them. Ultimately, they broke my rule, so when you visit, you don’t catch there’s anything below the fold. My initial design lined up Current Publications and previous headlines. My intent was that the picture on the right get cut off – forcing the user to want to scroll down.
A vertical fold on a web page is fine. A horizontal fold isn’t.

Don’t Build a SteakHouse for a Vegetarian Chef

Don’t design something if you don’t know what you’re putting in it. Content before design. Content before Design. I swear that most website designs and redesigns go in the wrong order; design it, then write the content. That’s not a good idea. Architects don’t do it, web designers shouldn’t, either.  Know your content first. Design the site to support the content you already have. If it’s a new site, and they don’t have any of their own content, write it yourself.