Web Design Elements

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.


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. Read More…

Source : Web Designer Depot

Posted in Web Design
%d bloggers like this: