When it comes to designing and building websites, it never seems to happen fast enough.
Given this fast pace, many small details that are eventually required to build the website are often left out of the design process. While these details might be minor, they are what take a website from nice to truly awesome.
These details are often easy to miss because they don’t drive the overall look and feel of the website. The problem is that as your development team works through the design, it will be forced to design and create these elements for you anyway.
You could adjust the production cycle so that the developers have time to return these assets to you, but why not just get it all done up front so that the process is that much cleaner?
Even worse, the development team might decide to forge ahead and just create the assets as they go.
While many developers have a keen eye for design, the creative who is charged with designing the website should ultimately be the one who plans for these elements. Planning ahead for the subtlest nuances can have a profound impact on the quality of the final product.
Every element covered in this article stems from a question that a developer would ask the designer if an element were missing from the design.
Let’s dig into the 10 key elements to keep in mind as you polish your website.
1. Links
While styling the various states of a link is indeed rather basic, you might be surprised by just how often all of the extra details are overlooked. Include the following states for all links on the page:
- Normal
This is the default state of a link; i.e. one that is not being hovered over or being clicked or pointing to a URL that the user has already visited. This is the link format that the majority of designers always cover. - Visited
This is a link that is not being hovered over or clicked but whose target has been visited by the user. - Active
An active link is one that is currently being clicked by the user. Most developers will replicate the hover state here if a style is not provided to them. - Hover
Finally, the hover state is what the link looks like when the user mouses over it. This and the normal states are the ones most designers prepare for.
One detail that is frequently overlooked is that these various states need to be planned for all regions of a website. For example, many websites have dark body copy against a light background, but the contrast is reversed in the footer. You need to plan for all of the various contexts of links found throughout the page.
On , for example, we see basic red links inside the content region and basic white links in the footer below. Again, a tiny detail but important nonetheless.
2. Forms
For many designers, the configuration of forms is critical and impossible to overlook. Yet, for many others, it seems to come as a distant afterthought.
The problem with the latter attitude is that forms often represent the only real way to convert visitors into customers. And without proper planning and design, the usability of these forms could fall flat, crippling the only conversion point of the website. Preparing for these elements is essential, even if they seem much less pressing to clients than color, branding and images.
Two of the most important considerations when laying out a form are:
- Form label
Forms typically collect personal data that users are reluctant to give out. As such, properly informing users of the exact purpose of the form is wise. - Input fields and labels
Secondly, plan for how the input fields of the form will be laid out on the page and how the labels for those fields will be styled and oriented relative to the fields.
When left to their defaults, forms can look awkward. But with proper preparation, the website will look seamless and be much more effective. Let’s look at a great example that must have started with good planning:
This business-critical form on was clearly well thought out. The entire mission and purpose of the page has been carefully considered. From the title and introduction to the layout of each set of fields, with their labels and control styles, this form is a model of planning.
Planning for forms actually leads us to several other considerations…
3. Button behavior
Buttons can be used throughout a website for various purposes, but they too seem to be often neglected, as do the various states of a button. The four states of a button are:
- Default
This is the default state of a button, waiting to be clicked. Most designers cover this one but miss the others. - Hover
The hover state is seen when the user mouses over the button. This state is helpful to indicate to the user that the button is an actionable item. - Click
Once the user clicks the button, this state visually indicates to them that they have clicked it. Providing this visual cue can help minimize the frustration of users. - Disabled
The disabled state of a button is perhaps the least used but can be very helpful to developers. Seldom is this state planned unless the designer has prepared a validation process for the form (see the next section).
Much like the various states of links, be sure to consider the various states of the buttons used throughout your website. From pop-up log-in forms to search fields to newsletter sign-up forms, all of these buttons will need corresponding styles.
4. Form validation
An important related detail is form validation. This is the critical point where the website communicates the user requirements and errors in a form. There are three core things to consider:
- Required fields
All required fields should be indicated. Most often, this is done with an asterisk, as seen on :
- Real-time validation
Some validation can be done in real time as the user completes the form. This kind of validation informs the user as quickly as possible of any problems with the data they have inputted. This can be accomplished very well with this :
- Post-back validation
This kind of validation happens after the user has submitted the form. The style used for real-time validation is often repeated here, but another option is to group all errors into a single message, as seen on :
5. Status messages: errors, warnings, confirmations, etc.
Users will usually need some sort of feedback after performing an action on your website. The most likely scenario is after submitting a form, but many other events could occur as well. Carefully consider your website and the actions that users might take, and plan for the messages that the website will need to communicate.
On , we see a validation message that could easily serve as a global style for error messages. And with a slight change in colors and icons, it could also be used for subtler warning or even confirmation messages:
6. Extending the background on larger screens
Depending on the style of the website, the background elements could be a trouble spot for your developers. Most backgrounds are simple and don’t require much preparation, but some are complicated by gradients, patterns and imagery.
Considering that big monitors are becoming more and more commonplace and that most designs are planned for a 960-pixel-wide baseline, a lot of screen real estate is left open. If your background includes anything remotely complicated, it behooves you to plan how it will extend to fill larger screens.
In the example that I built below, I had to accommodate for a wood texture that extended in all directions. Not the sort of thing you want a heavy-handed developer tackling.
7. Base HTML elements
For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. But on many marketing-oriented websites that have a busy layout and a distinct visual style, the base elements are forgotten. And of course, the developer never gets far into creating a website before having to produce a standard page template anyway.
Here are the base elements to always plan for: paragraphs, headings 1 through 6, unordered and ordered lists, tabular data, form fields, images, and bold and italicized text.
On many websites I work on, I put together a style guide to aid the developers, something like this:
8. Website emails
One thing I don’t see any designer plan for is website-generated emails. Such a basic element is easy to miss because it is not typically the core focus of the website. And yet email is a powerful tool that can promote and extend a service.
My suggestion is to 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 (such as for a contact form),
- Order verification after a purchase.
If you really want to blow the minds of your clients and developers, prepare an email marketing template for the website, too. You’ll provide users with a seamless transition from the website to the inbox, and you’ll maintain careful control over the branding in its various forms.
9. Page stretching
The question of how a design will stretch to accommodate changing content is also rarely dealt with but could be critical, depending on the style of the website. Let’s look at an example where this could have been messed up:
has a tight home page. This design does not allow for much movement or change in the content. Everything has a specific size and placement. So what happens if the owners decide to really lengthen the welcome message or add an image? Fortunately, they have planned for this. As you can see in this mock-up, I have edited the page to include double the text. The page extends perfectly and accommodates for it:
Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.
10. Animations: pop-ups, tooltips, transitions, etc.
On a standard HTML and CSS website (i.e. without Flash), animations and transitions are so easy to overlook. And when overlooked, they will often not even be accommodated at all. So, if animations are critical, your best bet is to provide developers with a sample of how they should work so that the product functions as it should.
Some of the most common places animations crop up are in:
- Tooltips
Those little pop-ups when users mouse over elements. - Image rotators
Home page slideshows are all the rage, and a wide range of options is available for transitions and styles. - Lightbox
You can style not only the lightbox itself, but also the transition to it.
Each of these animated elements has a distinct visual style that must be accommodated all on its own.
Why should I care?
Many of the elements presented here seem more helpful to the developers than the designers. To be fair, this is partially true: if you prepare all of these elements ahead of time, the developers will love you. These are the kinds of things that developers get tired of asking for or of having to figure out on their own.
Still, by doing all of this work ahead of time, you keep developers from guessing, and you thus maintain control of the design. And by maintaining control of the design, you have a much greater chance of being able to add the kind of polish that turns an ordinary website into an outstanding one. Some designers refer to this as the secret sauce that makes their designs sing.
And if that isn’t motivation enough, consider this. Designers who plan ahead this well and deliver a package this complete are just fundamentally more valuable. They not only create a higher-quality product, but they also reduce the cost of production. This means there is more room for profit, which of course makes everyone happy.
So, keep all of these finer details in mind, and have fun planning your website. Frankly, these details are half the fun of designing for the web, that ever-changing medium that accommodates user interaction and changing content.
No comments:
Post a Comment