Web Design Guidelines and Best Practices

As designers, we get so caught up in trying to make our work original and unique. We go on an inspiration quest to try and find the latest trends in web design, visiting sites like Dribbble or CSSRemix or even ThemeForest to see what’s “hot.” However, we often overlook the more important aspects of web design. Below is a list of what you should be shifting your focus on (okay, maybe after a 15-minute dose of AWWWARDS!).

Wireframe or Page Layout

  • Stick to conventions: don’t try to reinvent the wheel.
  • Logo should be in the left of the header; sometimes center will do.
  • Include contact information in the header and/or footer.
  • Practice good balance of design elements. White (negative) space is good! Even text and graphics need breathing room.
  • Determine the right page width: typically anything between 960 and 1100 pixels will work. Avoid horizontal scrolling.
  • Create a healthy contrast between text and background. Avoid large bodies of copy using brightly colored text on top of black. It hurts the eyes!
  • Don’t cram every single thing above the fold. Save it for the most important elements.
  • Practice visual hierarchy.

Navigation

  • Again, stick to conventions. Don’t make your users guess how your navigation works.
  • Only use images as navigation if you really must.
  • Remember to include a site map link in the footer.
  • When you are using breadcrumbs, keep it simple. Also, keep your breadcrumbs consistent.

Design Elements

  • Decide on a color theme that’s appropriate to the subject matter, and use it consistently throughout the site.
  • Don’t use pixelated images.
  • Make sure your photos, icons, and other images each serve a purpose.

Content and Typography

  • Create enough contrast between text and background.
  • Use common fonts (http://www.w3schools.com/cssref/css_websafe_fonts.asp).
  • Keep your type choices to a maximum of three.
  • Be consistent when using typefaces and applying font attributes.
  • Underline text links or make it bold. Better yet, make the text links stand out by making it a different color than your body copy.
  • Have a sufficient amount of padding between images and text.
  • Give text a left padding of 15-20 pixels if image is to its left.
  • Set your default body copy text between 14-16 pixels.
  • Set your line-height between 1.4 and 1.5.

    Too close for comfort.

    Ah, spatial harmony.

  • Set body copy in sans serif. Serif faces can be used for headlines.
  • Do not justify your body copy.

    Justify - The spacing is inconsistent and looks like holes in the paragraph.

    Left Aligned text is more natural and free from all the strange spacing.

  • Avoid centering your text and images on the page. It’s safer to align these elements to the left.
  • Give 20-25 pixels of padding between paragraphs.

    Nice and comfortable spacing in between paragraphs.

As I stated in the beginning, these are guidelines and best practices for you to follow. Sure you can break the rules, but only if you know what you are doing. You must have a good enough reason behind why you’ve deviated from the norm.

Do you have other best practices to add to our list? List them in the comments below.

Connect with Maryrose Go on Google+

Related posts

    No matches

One Comment

  1. Darcy Jaramillo
    Darcy

    It is a good practice to add a footer navigation.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>