Part of putting together your website means getting the design elements just so, and that can be a daunting task if taken on as a single project. However, when you break it down into the individual parts, you will find that each element can be an important piece of the puzzle, and not so overwhelming after all.

Design elements include color, accessibility, user experience, usability, forms, font and typography selections, file sizes, pages designed for mobile access, and relative widths for elements. Below are four of the most important elements, with my recommendations and also additional resources for exploring each of them on your own.

Color

Color is an important part of web design and has the power to conjure up feelings or influence the emotions of the user. The psychology of color has long been studied, and proves that the colors on a web page, just like the color of a dress, tie, bulletin board, or classroom wall, can affect the user response. You don’t have to be totally pixel-perfect as every browser, mobile device, tablet, and electronic reader will render your web documents with slight variations, so it is not always a bad thing as long as the site is still usable.

Several resources take a deeper dive into the use of colors and how they influence observer responses, including:

Use of forms

Forms are great for obtaining information about your users, especially for online sales and marketing, but sometimes forms on websites can be rather long and exhausting. As a rule, you will typically want to keep your forms to the bare essentials, the shorter and simpler the form the better. Take a look at the EEHarbor Registration form at right; it is simple, short, and to the point. Some resources and inspiration for keeping your forms short, simple, and sweet:

File size

File size is one of those areas that seems to get some folks really fired up; some argue that smaller is better, others say that up to 2MB or larger is okay. There is a wide range of web development standards in organizations. As a rule, I think the smaller file size is better; it improves load and page response times and helps keep the user glued to your stuff. Some ways to improve load and response times include:

  • making fewer HTTP requests
  • creating an expires header
  • putting CSS scripts at the top and JavaScript at the bottom of the page
  • making the CSS and JavaScript external
  • reducing DNS lookups
  • avoiding redirects
  • removing duplicate scripts

Here are several resources for diving into more details for managing web file sizes:

Liquid layout

Liquid layouts should be the norm, as fixed-width designs are hard to resize especially depending on the size of toolbars, sidebars, screen resolution, and mobile viewing requirements. You want to give the users the best view possible given the size of the available real estate. There are some valid reasons for sticking with a fixed-width design, but these are typically utilized in special cases. Typically liquid layout designs are best since they are based on percentages, and they flex depending on the window size and the available device or browser. Here are several resources on the subject:

Do you have any tried and true web design elements that are always in your web developer tool chest? Let me know with your comments.