Blog

Check out the Neoreef blog for the latest industry insights and guides.

Design Process - Part 1

Having a good design process is essential to having a quality design when you are done. This is the first in a two part series on the design process and my thoughts on it. This entry will cover precedence, spacing, navigation and designing to build.

 1. Precedence

Good web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence.  When using a good design, the user should be led around the screen by the designer.  I call this precedence and it's about how much visual weight different parts of your design have.

A simple example of precedence is that in most sites the first thing you see is the logo.  This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). This is a good thing since you probably want a user to immediately know what site they are viewing.

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/brand to a primary positioning statement to punchy image to give the site personality to main body text, with navigation and a side bar taking a secondary position in the sequence. 

What your user should be looking at is up to you, the web designer, to figure out. 

To achieve precedence you have many tools at your disposal:

  • Position - Where something is on a page clearly influences in what order the user sees it
  • Color – Using bold and subtle colors is a simple way to tell your user where to look
  • Contrast – Being different makes things stand out, 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)
  • Design Elements – if there is a gigantic arrow pointing at something, guess where the user will look?
2. Spacing

When I first started designing, I wanted to fill every available space up with content. Empty space seemed wasteful. In fact the opposite is true. Spacing makes things clearer. In web design there are three aspects of space that you should be considering:

  • Line Spacing
    When you lay text out 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. You can control line spacing in CSS with the 'line-height' selector. Generally I find the default value is usually too little spacing.
  • Padding
    Generally speaking text should never touch other elements. Images for example should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic. A general rule, putting space between text and the rest of the content makes it more readable and pleasant.
  • White Space
    First of all, white space doesn't need to be white. The term simply refers to empty space on a page. White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and up market. If you want to learn to use whitespace effectively, go through a magazine and look at how advertisements are laid out. Ads for big brands tend to have a lot of empty space used as an element of design.
3. Navigation

One of the most frustrating experiences you can have on a website is being unable to figure out where to go or where you are. I'd like to think that for most web designers navigation is a concept we've managed to master, but I still find some pretty bad examples out there. There are two controls that can be used in your OneNet theme to help with navigation:

Menu Control

There are a few common sense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page, easy to identify - they should look like navigation buttons, and well described - the text of a button should be pretty clear as to where it's taking you. Aside from the common sense, it's also important to make navigation usable. Changing the color on rollover is excellent feedback for a user and can be styled in the theme.css.

Breadcrumb Control

There are lots of ways you can orient a user so they know exactly where they are. In your site you might make use of breadcrumb trails. This control will show the site user where they are and what pages led them to where they are.

4. Design to Build

Life has gotten a lot easier since web designers transitioned to CSS layouts, but even now it's still important to think about how you are going to build a site when you're still in your design program. Consider things like:

  • Can it actually be done?
    You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in horizontal scrolling for the majority of users. It's good to know what can and can't be done, and what limitations there are. Before designing read through the OneNet Controls section and familiarize yourself on how these Controls work with your site.
  • What happens when a screen is resized?
    Do you need repeating background images and how will they work? Is the design centered or left aligned?
  • Are you doing anything which is technically difficult?
    Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
  • Could small changes in your design greatly simplify how you build it?
    Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular when elements of a design cross over each other it adds a little complexity to the build. You should find a balance between what looks good and small changes that can simplify your build

 

 

Powerful Tools, Unlimited Support

Neoreef addresses the two biggest issues with websites: lack of control and lack of support. We enable easy control of your website, while a dedicated support team provides you with training, mentorship, and specialized skills.

Start Your Project Today