10 Web Design Elements that You Shouldn’t Overlook

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 Full Moon BBQ, 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 Awesome 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 Please Start From the Beginning:
  • 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 jQuery validation plug-in:
  • 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 Moo:

 

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 Life Today, 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:

Full Moon BBQ 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.


Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s latest book project is The Designer’s Web Handbook; it includes many additional topics along the lines of this article. You can find out more about it on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

What do you design for that everyone else seems to forget? Have you ever presented extras like these to your clients? What sorts of thing do you find developers always asking you to add to a design?

0 shares
  • http://fabulouswatches.com Michele

    Good stuff. I’m surprised at how different browsers treat the same web page differently. Something to consider.

    • http://nevillebarrettjr.com Neville

      Even across different versions of the same browser. IE7, IE8, IE9 can show a page completely different…

      • http://www.risingartistry.com Chris Fleming

        IE is on its way out. 7 years ago it made up 80% of the market, not it’s only 26%. Unfortunately we still need to develop with IE in mind, but in the not so distant future this may not be the case. With that said don’t waste too much time tinkering with hacks to fix IE since these hacks and problems may become obsolete in a few years. Then again many websites in general will be obsolete in a few years, so plan for now but keep the future and your production in mind.

  • http://designcouch.com Jesse

    GREAT article. Simple stuff, to be sure, but when you’re not the designer and the developer (as I usually am) I can imagine it would be easy to overlook a lot of these. The one I notice a lot is the background scaling issue – it’s one of my pet peeves, but it’s surprising how often is shows up in large scale, otherwise well designed/coded sites.

  • http://www.slabcreative.com/blog SLAB

    Status messages are so important, there is nothing worse than submitting a form, getting an error and not knowing how to fix it. Great points in this article.

  • http://machoarts.com suraj

    Personally I love to play with buttons and forms, because these things can help to make design more attractive, you covered very important points, thanks for the tips!

  • http://www.namase.com Rajesh

    GREAT article. I like it, thanks for sharing :)

  • http://mulvid.com Danny Mulvihill

    The :focus pseudo class is another one to keep in mind for links. I usually just use the same style as used for the :hover state. This way for users who like to tab around they can see which link is ‘selected’.

  • http://essexwebsitedesigners.co.uk Tony

    Great list. My favourite if the form validation. With jQuery now it is extremely simple to utilize the library to include proper form validation on your site. A curent project of mine didnt have validation and the feedback was all the same, no one wants to post through to another page just to find your made a mistake and have to start over. simple form validation easily gives you much more control over your visitors and vastly improves their experience. Enough said I think ;-)

  • http://www.luzio.com Gian Luzio

    Great points made. It is all the basics but so many sites get it wrong. Great to put them in one article. Thanks :)

  • http://www.omis.ca Carlos

    Great stuff… thanks for posting.

  • http://www.fluxspark.co.uk Flux Spark

    The hyperlink styles are always overlooked until the very end IMO. I now define the hyperlink colours at the start of a new job.

  • http://nevillebarrettjr.com Neville

    Great post! I have noticed a lot of older sites with background issues. That definitely is something designers should keep in mind when developing a site. Thanks for sharing this!

  • http://www.ulisesart.com Ulises Bolivar

    interesante aporte

  • http://www.kissinternet.co.uk/domains web hosting

    Great work please keep it up!

  • http://www.triplebytes.com Lee

    Very useful article for web designers. Appreciate it…keep up the good work.
    Thanks!

  • http://www.absolutewebdesign.co.uk Web design

    Great article, when you read through it you realise how spot on the writer has been, so many small elements can take the polish off an otherwise fine job if you don’t cover all the bases!

  • http://www.designbastard.com designbastard.com

    intresting info on web elements, thank you for sharing.

  • http://www.krisbradbury.co.uk/ Kris

    Good stuff, thanks for sharing :-D

  • http://www.russellgillman.co.uk Russell Gillman Freelance Web Designer London

    Great article. It’s nice to see someone paying so much attention to the finer details of site usability and web design :-)

  • http://www.logicdesign.co.uk Logic DEsign

    Some thing that rearly bugs me with form design are sites that use the spry framework through lazyness over jquery.

    The lable goes inside the text box so when you click into the input the message disapears and if its friday you forget what the box is for!

  • http://www.findferry.co.uk/ Find Ferry

    Thanks :-) Great tips in this article.

  • http://www.refresj.nl/ internetbureau

    Great article!!

  • Alex

    haha, I will forward this to our graphics department… just what i’m always complaining about :D

  • http://www.justinwhall.com Justin W Hall

    Visited links are almost never used anymore. IN most cases, it’s best to not insult the users intelligence ;)

  • http://www.b3net.com website design orange county

    I had a fair idea about the Links and Forums, but you really provided a good idea about the animations and the pop-ups. But, I didn’t get the clear idea about the extending of the background. However…THANKS!!
    I will ask all my department mates to go through this :)

  • http://www.b3net.com website design orange county

    Forgot to mention, the tips were really helpful and I think now I will manage my works more efficiently..;)

  • http://patriktotero.com Patrik

    Great article! This has been my constant headache. I think the problem is that the majority of designers have very little or no knowledge of HTML/Javascript, accessibility and/or user interaction. I have yet to come across a good designer that understands “web design” as apposed to just “design”.

    Of course I’m not referring to all designers (I know there are super awesome designers out there). I’m just saying I still have to come across one.

  • http://www.matthewfedak.co.uk Matthew Fedak

    Another good one web developers / web designers / CMS users forget all too often is using upper-case text instead of just applying a test transform upper-case style rule to the necessary tags. Had a client recently who didn’t know how to do this via css and like his product titles in upper-case text so got his secretary to manually go through all 300 hundred headings and update. Its bad for readability and seo I think too.

    • http://www.justinwhall.com Justin W Hall

      You are suggesting that one should NOT use CSS to adjust case???? Read up my friend. The very reason CSS exists is so one DOES NOT have to do what the secretary did.

  • http://volosites.com/ Mike

    On the Full Moon BBQ, btw, the flyout menus are passé. Fewer and fewer sites use these. They are hard to maneuver on ordinary laptops with touchpads and also on touchscreen devices that do not have a sense of “hover”. I would recommend changing that.

  • http://ashish4design.wordpress.com Ashish

    Wow, what a gr8 article.

    Points described are really very noticeable. Very important things of a web page design is mentioned which really got neglected by the designers usually…

    thanks!

  • http://www.wabbaly.com Sergiu

    This article hits the spot! Refreshing.
    I have to admit that I forget about some of this details, my bad.

  • Jan Pluta

    Great to see some people care about the finished product of a website, too many webpages these days are simply thrown out into the world and expected to be successes even though they don’t take into consideration these points. Good article, will remember for the future :)

  • http://www.austinbusinessconsultants.com Austin Web Design

    Great Stuff. How about the W3C MarkUp Validation? It is also one thing to to consider. Anyway, I love how you detailed each element and explained your points. Thanks! This is really helpful.

  • http://www.bluestar-uk.com Ash

    Great article and very useful, forms are all too often overlooked.

  • http://www.webpixelkonsum.de Ralph

    Your article is helpful to improve the quality of websites.

  • http://www.risingartistry.com Chris Fleming

    Don’t forget about font choice, many people chose to only use a default sans serif. Why would you do this when you have so many options and methods for nearly all users to see? Granted you usually need to pay a license fee to display these on you site, but there are free ones available.

  • http://www.alltechnetworks.com Sumit Khaneja

    Your list of elements helps in polishing the website. Very useful & noticeable tips.

  • http://www.isotopon.com EL

    Nice list.Food for thought