Web Design Elements Continued

According to Patrick McNeil, there are 10 Web Design Elements that you Shouldn’t Overlook. They are:

1. Links
2. Forms
3. Button Behavior
4. Form Validation
5. Status Messages: Errors, Warnings, Confirmations, etc.
6. Extending the Background on Larger Screens
7. Base HTML Elements
8. Website Emails
9. Page Stretching
10. Animations: Pop-ups, Tooltips, Transitions, etc.

Designers who keep the above elements in mind, plan and design for them, will come out further ahead. Aside from keeping the developers guessing, it gives the designer more control over the design of the finer details. You’ll be creating a higher quality product, and in the long run, you’ll also reduce the cost of production. Let’s take a look at the above elements in more detail.


Links
Include the following states for ALL links on your website: 

• Normal - default state of a link
• Visited - link whose target HAS been visited
• Active - link being clicked by user
• Hover - when user mouses over link

Forms
Two of the most important considerations when laying out a form are:

• Form label - description of the forms purpose
• Input fields and labels - plan for how these fields will be styled and oriented relative to the fields (inside box, above, left, etc.)

Button Behavior
The four states of a button are:

• Default - default state of a button
• Hover - when user mouses over the button
• Click - button that HAS been clicked
• Disabled - typically used for a validation process

Form Validation
This is the critical point where the website communicates the user requirements and errors in a form. There are three things to consider:

• Required Fields - these fields should be clearly indicated (usually by asterisk).
• Real-time Validation - informs the user of any problems with the data they entered
• Post-back Validation - happens after the user submitted the form

Status Messages: Errors, Warnings, Confirmations, etc.
Users typically need feedback after performing actions on websites. Be sure to consider actions that a user might go through on your website and plan for the messages that will need to be communicated.


Extending the Background on Larger Screens
If you’re not using a simple background for your website, e.g. solid color, then you need to think about how your site will look on larger screens. If you’re using an image or pattern/textured background, and you’ve designed it to a 960 pixel width, be sure to design and communicate with the developer what it will look like beyond the 960 pixel width. Does the image fade? Does it extend? etc.


Base HTML Elements
For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. Here are the base elements to always plan for: 

• Paragraphs 
• Headings 1 through 6
• Unordered and Ordered Lists
• Tabular Data
• Form Fields
• Images 
• Bold and Italicized text

Website Emails
Carefully review the contents of the website at the planning stage to look for any emails that might be sent. Some of the most common are:

• Mailing list sign-up confirmation
• Registration confirmation
• Form-completion confirmation (e.g. contact form)
• Order verification after a purchase

Page Stretching
How will the design of your website “stretch” to accommodate additional content? Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.


Animations: Pop-ups, Tooltips, Transitions, etc.
Each of these animated elements has a distinct visual style that must be accommodated all on its own. Some of the most common places animations show up are in:

• Tooltips - those pop-ups when users mouse over elements.
• Image rotators - slideshow transitions and styles.
• Lightbox - you can style not only the lightbox itself, but also the transition to it.