8 Essential Web Design Rules

8 Essential Web Design Rules

Design is essential when it comes to a successful website.  Great design can increase signups, drive sales, and can even cause visitors to leave before reading a single word on your website or landing page.  Try to strive for clarity, consistence, and purpose.  Here are some key web design rules to guide you through your next website build.

Navigation

Keep navigation simple, but consistent throughout the site.  There’s no need to reinvent the wheel in different sections of your site that maintain the same branding.  Navigation should be the first point of interaction on your site.  Most people will click the first link they come to, which is why the call to action is such a crucial piece of your website (and why sliders quickly became detrimental).  Carefully consider what that first link will be.

The navigation follows the steps you want your visitor to take.  Order the information accordingly and ask yourself what pieces are absolutely necessary.  Does your preferred client really care about the detailed history of your business or would you rather drive them towards service or product information?

Be sure to ask yourself questions that the users will ask:

  • Where am I?
  • Where have I been on the site?
  • Where should I go next?
  • How do I get back to the home page?
  • Is the language clear and accessible?

Headlines

Use the typographic hierarchy to organize your site titles and headlines.  The H1 and H2 tag are important in that it’s how Google and other search engines recognize the structure of your content.  Here are some helpful hints to keep in mind while you lay out your page:

  • Make sure the most important headline (<h1>) is the largest and most prominent than the rest.
  • Keep headlines short and sweet.
  • Use a headline to tell your visitor within 3-5 seconds where they are and what they are there for.
  • Resist the temptation to get creative; make the subject matter clear.

Fonts, Colors, and Contrast

Pick two fonts maximum (one for your body content and one for your headlines) and three brand-related colors.  Any more than that will be confusing and complicate what should be a very clean look.

Differentiate the sections of your site with contrasts.  Section background colors (using good accessibility standards), dividers, etc can separate content areas nicely.  Create a natural flow between content blocks and allow enough white space between sections, headlines, paragraphs, and so on to make the page more legible.

The Call-To-Action

Make the Call-To-Action (or CTA) clear and prominent.  Effective CTAs should begin with an action word, such as:

  • Sign Up Now
  • Subscribe
  • Buy Now
  • Start Now
  • Donate
  • Learn More

Secondary CTAs (which you should be asking yourself how necessary a second call-to-action is) should be differentiated with a smaller font and/or different color.

Forms

Again, in asking yourself what is absolutely necessary on your site, how much information do you need from a lead in order to connect with them?  If your goal is to drive an opportunity to contact them, then save some information gathering for that follow-up conversation.  Visitors are much more likely to fill out a form if it’s short and not asking for too much information.

Images

Use quality photography or illustrations to support the text on your page.  The visitor is there for the text and the CTA, not the picture of your building, so make sure it’s complimentary instead of distracting.  If you can’t afford a good photographer to produce some content, stock images are a good alternative.

Footer

Every website needs to have a footer to tie the page together.  Give the visitor necessary navigation options, especially if the page requires a bit of scrolling.  It’s also a good place to put links to social media, contact information, a mission statement, and copyright/privacy information.  Just make sure it’s consistent throughout.

Responsive

What is probably the most important part of your website, the mobile experience is going to be a whole separate design process.  The page needs to adapt to every variation of screen width and provide a shorter and quicker direction to that CTA.

 

At the end of the day, consistency and smooth user flow is the name of the game.  To summarize, ask yourself these questions:

  • Is the headline clear and to the point?
  • Does the page meet my business’ goals?
  • Do the images fit the site and brand?  Do they tell the right story?
  • Do the subpages fit the same brand and feel of the home page or will users have to adapt to a new experience?
  • Is the user confident of where they’re at on the site or will the be confused by how they got there?
Posted in Web