Web Design Comp Checklist

When creating a design comp, there are many things to think about and ways to make your design stronger and more effective. Below is a list of things to double check before finalizing your design comp.

Please keep these things in mind

The Basics of Web Design

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

1. The Grid

Be sure to design with “the grid” in mind. Double check the alignment of all your elements on the page. (Use the guides or grids in Photoshop). Designing to a grid will help create a design with a stronger composition and will make your layout more pleasing to the eye.

2. Color Palette

Be careful when choosing your color palette for a website. Colors create meaning and mood. You want your color palette to be a visual expression of the message you’re conveying. What are the colors saying about the company/organization/service?

In Photoshop, go to Window > Extensions > Kuler. The Create or Browse tabs in the Kuler window are helpful when selecting a palette. Or, I’d recommend going to the Adobe Kuler website (kuler.adobe.com/) and go to the “Create” navigation and build a color palette from a color or an image.

3. Navigation

Navigation is one of the most important elements on a website. The navigation should be clear, concise. and complete. A visitor to the site should be able to easily find what they need. Current best practices are to create navigation using HTML text, not images.

Remember that search engines cannot read text created as images. The same is true for assistive devices for the vision and hearing impaired. Rethink your design so you can create your navigation using HTML text, not images.

Here is a link to a list of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Embedding fonts into a page enables a designer to use a wide variety of typefaces in the navigation.

Highlighted Navigation

The navigation should be highlighted for each page meaning that, for example, on the Contact page the “Contact” navigation will have a color change to indicate to the user the page they’re on. (I’ll talk more about this in our class notes later this week, so you’ll know how to do this with CSS).

See an example here: http://cdn.sixrevisions.com/0171-07_alistapart_primary_nav.png

See how Article is in red and is highlighted so user knows they are in the article section.

4. Design Principles

Think about some of your favorite websites. What makes these sites well-designed? It’s probably the combination of several design principles: use of white space, balance, proximity, emphasis and creating a strong identity for the site. Look at your design and compare to some of your favorite sites — how can you add these principles to your design? White space? Emphasis? Balance? Often the strength of a design can be in the details, the use of vertical lines, rounded corners, icons. How can you make your design have some of these finer details?

5. Typography

Remember the guidelines for great web typography:

  • Typefaces. Don’t use just one typeface in your design, add variety by using at least two different typefaces. For the main text of your site, the size of the font should be around 11, 12, or 13 pixels. The headings can be larger than this.
  • Hierarchy. Some of the type should standout more than other type. Make use of headings to create hierarchy.
  • Color. Change-up the color of the type. Using a variety of colors to create contrast and emphasis. Size. Use a variety of font sizes to create hierarchy.
  • Uppercase/lowercase. Use a variety of uppercase and lowercase fonts.
  • Spacing. Increase the leading (spacing) between the lines so text is easier to read. This is especially important for main text.
  • Line length. The line length of your paragraphs of text should be 40-60 characters. Having lines of text that run the full width of the page, or are too long, makes it difficult for the user to read the text.
  • Alignment. For the web, text is normally aligned to the left. Justified text does not work well on the web and even centered text is problematic.

And the rest…

6. Design for the Target Audience

Who is the target audience for the site? How does your site appeal to this audience? And what message are you trying to convey? Make sure we know what the company/service does, we should be able to tell immediately from the home page. A user wants to see more on the home page than the navigation and images. Give the user something else so they will want to visit the site frequently. On your home page, feature news, products, specials, or other kinds of useful information that will be updated so users will want to come again.

7. Avoid Fixed Height sites

Remember that content is what determines the height of a web page. Think about whether your design will prevent you or your client from adding additional content to the site. Creating a design that relies on a fixed or specific height can lead to a problem down the road. What happens if 6 months from now the client wants to add more photos or more text? Most likely this would mean the page or site will need to be re-done to accommodate this new content. Keep your design flexible to accommodate new content in the future.

Many designers get hung up on designing fixed height sites because they seem more consistent and clean but remember the site will be viewed on a variety of devices so it will never fit neatly on all devices and all browsers.

And adding a scroll bar isn’t necessarily a good solution. The amount of content determines the height of the page.

8. Clear Messaging & Branding

A visitor to the site will want to see more on the home page than the main navigation and photos. The home page needs to communicate who the product/service/organization is. The visitor should be able to look at the home page and tell immediately what the product/service/organization does.

Don’t let the branding and logo for the site get lost on the page. Make this more prominent. Work on finessing the layout of your content. Make sure there is some definition. For example, the headings for your content could be larger to give them more visual weight. What should be the focal point on the page? Review other websites for inspiration and direction on how to better communicate to the target audience.

9. Include Footer information & Social Media

Many websites have footer information. Often the copyright, address and/or social media icons are found here.

Sometime social media icons will be found in the header or the side bar, Generally, use a plain social media icon without the text. Many sites also include icons for Facebook, Twitter and Pinterest.

It’s easy to find social media icons that are custom colors and designs so you don’t have to use the default color (or even shape!)

Here’s a good resource for social media icons.
http://www.wpzoom.com/wpzoom/500-free-icons-wpzoom-social-networking-icon-set/

10. Include Headings

All of your pages, except for the home page, should have headings like the example here where there is an “About” heading on the About page.

http://www.alistapart.com/about/

Leave a Reply

Your email address will not be published. Required fields are marked *