CivicPlus Blog

8 Essentials for Proven Web Design

Posted by Jeff Baker

Oct 23, 2012 3:09:00 PM

Designing a website can be deceptively difficult. The process involves achieving a design that is both functional and pleasing. Your website needs to deliver information and showcase your community’s brand image; therefore, the design should be technically sound and visually coherent.

Adding to the challenge is the fact that the medium changes as frequently as the underlying technology does. Having a well-trained, professional web designer that practices accepted standards as they apply to web design is a must if you want your website to be a success.

We have a highly skilled web design team at CivicPlus that not only understands the medium and underlying technology, but also puts into practice many web design standards outlined by the organization known as the World Wide Web Consortium (W3C).

So what does a well-designed site contain and look like? I’ve put together my 8 essentials for proven web design.

 


 

steamboat springs

1. Precedence or Information Hierarchy (Guiding the Eye)

Good web design is about information. One of the biggest tools in your design arsenal to convey what information is relevant is precedence. When navigating a good design, the designer should lead the user around the screen inuitively. This is called precedence, and it’s about how much visual weight different parts of your design have. 

A simple example of precedence is that in most local government websites sites, the first thing you see is the community’s logo. This is often because it is large and set at what has been shown in studies to be the first place people look (the top left).

But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo to a positioning statement or community tagline, next to a punchy image (to give the site some personal flair), then to the main content area, with navigation or featured areas as a secondary position in the sequence.

To achieve precedence, designers have many techniques at their disposal:

  • Position — Where something is positioned on a page clearly influences in what order the user sees it.

  • Color — Bold and subtle colors are a simple way to tell your user where to look.

  • Contrast — Being different makes things stand out, while being the same makes them secondary.

  • Size — Big takes precedence over little ... unless everything is big, in which case little might stand out thanks to Contrast. Just don’t get carried away.

  • Design Elements — Guess where the user will look if there is a massive orange arrow pointing at something? (As an aside ... don’t do this.)

 


 

hillsborough county

2. Spacing

This is one of my favorite topics. Some designers love to fill every available space up with stuff. I hear all the time that empty space seems wasteful. In fact the opposite is true. Spacing makes things clearer. In web design there are three aspects of space that should be considered:

  • Line Spacing
    When text is set on a page, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next; too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. Generally, I find that the “rule of three” is appropriate; 10pt/px text should have 13pt/px line space.  Never use the default setting.

  • Padding
    Generally speaking, text should never touch other elements. For example, images should not be touching text, borders or tables.

  • White Space
    The most overlooked and misunderstood element of design is white space. First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. Appropriately use of white space will make your layout more elegant and up-market. 

 


 

banff

3. Navigation

One of the most frustrating experiences you can have on a website is being unable to figure out where to go, where you have been or where you are. There are two aspects of navigation to keep in mind:

  • Navigation — Where can you go?
    There are some obvious rules to keep in mind. Buttons to travel around a site should be easy to find – toward the top of the page and easy to identify. They should look like navigation buttons and be well-described.

    Aside from the common sense, it’s also important to make navigation usable. For example, if you absolutely need to have a mouse over sub-menu, please ensure the user can get to the sub-menu items without losing the mouse over. Better yet, have a well-tailored navigation structure and use a mega-menu system to display the sub categories. Similarly changing the color or image on rollover is excellent feedback for a user.

  • Orientation — Where are you?
    There are lots of ways design can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading. In a larger site, you might make use of breadcrumb trails, sub-headings and a site map for the truly lost.

 


 

los lunas

4. Typography

Text is the most common and impactful element of design. It’s important to consider things like:

  • Font Choices — Different types of fonts say different things about a design. Some say "I am modern," or "I am retro," and others say "I’m just boring." Make sure you are using the right font for the job.

  • Font sizes —Years ago it was trendy to have really small text. Today people have started to realize that text should be read. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately. Remember that part about Precedence?

  • Spacing — As discussed above, spacing between lines and away from other objects is important to consider.

  • Line Length — There is no hard and fast rule, but generally you should err on the side of creating shorter lines of text. The longer a line of text becomes, the harder it is to read. Small columns of text are much easier to read and less straining on the eyes.

 


 

superior wi

5. Usability

Web design isn’t just about pretty pictures. With information and interaction having such an effect on a web site, it’s important you provide for it all. That means making your web site design usable.

We have already discussed some aspects of usability, navigation, precedence, and text. Here are additional options to consider:

  • Keep Content as Concise as Possible
    It’s well known that web users have short attention spans and that we don’t read articles on the web in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want. 

    We search for keywords, skip around a webpage instead of reading it from top to bottom. 

What you can do:

    • Get to the point as quickly as possible.
    • Cut out unnecessary information.
    • Use easy-to-understand, shorter, common words and phrases.
    • Avoid long paragraphs and sentences.
       
  • Use Headings to Break Up Long Articles
    Because we tend to read in blocks, our eyes often go directly to items that seem to match what we’re actively looking for. Break up long articles into sections so that users can easily skim down the page.
  • Help Readers Scan Your Webpages Quickly
    Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage. Front-load keywords in webpage titles, headings and links. 

  • Use Visuals Strategically
    Photos, visual-data and infographics are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content. 

 


 

dodge city

6. Alignment

Keeping content lined up is as important in web design as it is in print design. Aligning makes your design ordered and consumable, as well as having a polished appearance.

 

7. Clarity (Sharpness)

Keeping your design crisp and sharp is important in web design. When it comes to clarity, it’s all about the pixels!

 

8. Consistency

Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc.

Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They simply lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a bad design, at least make it a consistent, bad design.

 

Topics: website design, website content