10 Web Design and Layout Principles Every Designer Should Know

I recently gave a presentation at the South Florida User Experience Meetup on the top 10 web design and layout principles you should know when designing your website. Below is a summary as well as the presentation with some screen shot examples for those who could not attend.

1. Visual Call to Action
Get your visitors attention on your website’s goal.

• One primary action you want your visitors to take.
• Use contrast and size to catch attention.
• The action text should be clear and obvious.
• Located near the top of pageabove the fold.

2. Organized Layout
Importance based structure and scan-ability.

• Convey information about what’s important.
• Lead the user into content there looking for.
• Improves scan-ability.
• Use header tags (h1, h2, h3, etc…) appropriately.
• Provides visual breaks, groups, and chunks.
• Use alignment, date, subject, etc to create sections.
• Size and color to convey priority and importance.

3. Accessibility
508 Compliance = websites should work for everyone, that includes people with disabilities.

• Use ALT tags on images for screen readers
• Ensure HTML is ordered by hierarchy.
• Improve readability for those with low-vision through size and contrast
• Options to increase font size
• Avoid pop-ups
• Use proper input-field/labeling
• Don’t use color as a sole indicator for differentiation
• Design for smaller screen sizes, then scale.

4. Affordances
Indicate where you can take an action.

• Links should not be the same color as your text
• Buttons should appear beveled or have a hover to differentiate them from plain graphics.
• Form items should be grayed out if they are not clickable.
• Mouse icon should change to indicate when something is clickable.
• Textures and patterns can imply grips when things can be dragged.

5. Assistance
Don’t leave me hanging, give me some help.

• Provide an FAQ or help section
• Try to avoid allowing errors, but when they occur explain:
• What’s wrong
• What you need from the user
• How they need to do it
• Instructions should be clear, specific and to the point.
• Provide good defaults and constant feedback.

6. Real-World Mental Model
We throw things away in the trash, we do not re-allocate disk space.

• Avoid fancy, industry, or techie terms. Use Layman’s terms.
• When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase.
• Design concepts to be consistent with how they work in everyday life.
• Similar in functionality, language and appearance.

7. Keep it Simple
The simplest explanation or strategy tends to be the best one –Occam’s Razor

• 80/20 Rule
• Avoid excessive text or explanation
• Forms shouldn’t ask for unnecessary\additional information.
• Reduce clutter, and appreciate white space like a pause in a sentence.
• Be upfront, clear, and to the point. The rest is unnecessary.
• Focus on the core goals and tasks.

8. Suitable Graphics
We tend to look at smiling faces, and products. Our eyes seem to jump over the rest resulting in just more stuff on the page we have to get past.

• Put thought into your graphics.
• Stick to a color scheme.
• Avoid overly generic clip art just to add to the page.
• Every image and graphic should have a specific purpose.
• Stick to a themeor consistency in appearance. (all sketchy, or all photos etc)
• Focus on your product or offering.

9. Navigation
Where am I? Where can I go?

• Take advantage of standards, and place the navigation near the top, or down the left side.
• Clean, clear, simple labels, easy to read and see.
• Highlight the visitors current location vs. other locations.
• Provide feedback when in sub-levels as to the visitors location and how to get back.
• Should be easy to see how much information the site offers, how deep each level is.

10. Delight
There’s just something fun about this.

• Once you have everything else figured out, add a smile.
• Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc.
• Little fun interactions used sparingly.
• Take the user away from the mundane.
• Pleasant surprises.