Fab five: five things to consider before I design your website

As an everyday internet–user I can appreciate a slick-looking website as much as the next person; but as a graphic designer I get frustrated when a website favours looks over usability.

I have put together a list of points (my ‘fab five’) that can help make or break a website’s design.

Let’s roll through them one-by-one…

1. What you like/dislike about your current website

Sometimes knowing what you don’t like is more powerful then knowing what you do like. Running a pros and cons list is an effective tool for evaluating any problem areas of your existing site and can lead to great moments of opportunity throughout the design process.

2. Using a style guide

Visual style guides are used to define the way the brand will look and keep corporate graphics consistent across materials. The rules for graphic style guides typically include variations of the logo, design standards in terms of look and feel, corporate colour palettes, and white space usage.

Throughout the design of your website it is good practice to create a separate style guide specifically for website treatments. This guide should also include typography details (font families, sizes and line height/spacing), layout specifics and information on website navigation.

Here is an example of a website style guide.

3. Using the correct logo type

There are two main categories of logo files: vector and raster. If you could give only one file type, it should be a vector file as it can be converted to any other file type with the correct software.

What is a vector file?

A vector file can be scaled to any size without loss of quality. This is because it’s built up from mathematically precise points. Vector file types have a file extension of .ai, .eps or .pdf.

What is a raster file?

Raster files are built up of small squares called pixels. This means that as you increase the size of your image, it will become block-y or appear blurred. This is why a logo design should be created in vector format for the best results.

If a vector file cannot be supplied, the preferred raster file types for web should have an extension of .jpeg or .png. All raster files should be saved at 72 dpi, in RGB format and the size should be as close as possible or exactly as it will appear on the web page.

4. Choosing the right typography and fonts

Typography choice and stylising can make or break a website’s presence. If the text size is too big (or too small) it strains the eyes of the reader; and if the length of the content is too long, if affects the ability to track from one line to the next.

The trick is to retain consistency and apply universal styling throughout the website. This will ensure users receive a cruise-y reading experience and helps make content visually palatable.

5. Effectively using photographs and icons

When used correctly, imagery is a great tool to help break up content and bring visual interest to an otherwise dull page. Icons can also provide an ‘at-a-glance’ point of reference for users and help categorise related information.

If you already have an image library, definitely let the designer know so these images can be considered throughout the design process.

If not, don’t be discouraged because there are many online stock imagery resources that can help make that visual impact.

Final thoughts

In summary, we must always remember that:
“Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs.

Now let’s create an experience, not just a beautiful website.