Design process 

Once you have your second information structure draft and you know how many levels your hierarchy is likely to have, it’s time to move onto the design process.  

Most pre-made design templates for Wix and WordPress have two levels of navigation. If a ready-made design can accommodate your draft hierarchy and has the design elements you require, you can start filling the templates with content.  

Some ready-made designs allow customisation of the page layout to suit your needs.

For example, some designs allow you to choose different types of information to appear in a right-hand column of a page. You can simply delete what you don’t need.  

Wireframes 

If your future site will need more than two levels of navigation, it’s best to create a very basic layout of each page type required for different levels.  

These basic layouts – known as wireframes – don’t carry any design elements, such as colour, font type or images. They simply show where different types of content (e.g. headline and body text, banners, advertisements, promotional banners, video) will sit on the page as well as the type of navigational devices used to move to other pages (e.g. horizontal/vertical navigation bars, buttons, images, image galleries).  

Importantly, wireframes also show the label names that appear at different levels of the information architecture. The different types of pages (apart from the home page) that appear at each level can include: 

• Click-through landing pages – these work as a gateway to subsections of information in the same category. 
• Destination pages – these usually sit on the bottom of the information structure and hold information about one subject as well as links to related information.  
• Funnel page – used where the information structure has many levels, funnel pages sit between a home page or landing page and destination pages.  

There are special programs you can use to set up wireframe layouts, complete with very basic representations of different navigational devices to move from one page to another.  

You can also use something as simple as a table in a Word document to create the grid-like structure of a web page. Or you can just use sketch up the design on a piece of paper.  

Typography 

The look and feel of a site is largely determined by colours and font type and size. You’ll want to use colours and font type that are as close as possible with your branding.  

Some web building software provides easy ways to change these across a website. Other software may need changes to a Cascading Style Sheet (CSS), which a web developer would need to implement if you don’t already have the knowledge. 

When you’re choosing background colours, make sure there’s plenty of contrast against the text to optimise legibility. There are a number of websites that offer advice about the best colours to use. 

Some web editing software programs offer the ability to easily manipulate the page structure and determine the placement of content modules (such as text, images, video, ‘slide shows’, sidebar) through site builder plugins. Designs deployed by user-friendly web editing software can also be manipulated by web developers using CSS.   

Some proprietary software will also allow you to change templates and change the placement of content modules. 

Images  

They make your site stand out so make sure you have a collection of sharp, compelling photographs or images. You can either choose stock images or organise for your own photograhs to be taken. Whichever way you go, may sure they’re striking because web users judge your business on the look of your site. 

Stock photos can vary in price, so shop around. Some sites offer free images (or a small donation to the photographer) while others can be very expensive and charge for different sizes of the same photo. Fees can also vary according to how they’re used. 

Mobile ready? 

You’ll need to check that any pre-made page designs you consider can be viewed on a mobile device. Not all ready-made designs – even some you pay for – will be ‘mobile ready’.   

An easy way to check this is to access an online preview of the design (generally available on the same web page as the design can be downloaded). When you view the page in a browser, make the browser as narrow as possible. If it’s mobile ready, the page will look the same as if you’re viewing it on a mobile phone.   

Accessibility 

It’s worth addressing web accessibility guidelines for your site. Accessibility guidelines developed by the World Wide Web Consortium were intended to remove barriers to online information for people with disabilities. But in reality, the usability guidelines benefit the whole community and are just common sense.  

A good web developer will be implement most or all of W3C’s web accessibility guidelines to AA standard as part of their normal business to ensure a high level of usability.  

Usability 

Once you’ve finished the website, you may be over it. But it’s really important to test all aspects before you launch. Small errors can have big consequences. And web users – including potential customers – may judge your business based on the usability of your site. 

It’s worth bearing in mind that Google rewards highly usable website through increased rankings. Effective usability is determined by such factors as:  

• Easy to use, navigate and understand 
• Content that is concise, legitimate, credible  
• Well-designed pages that are accessible to modern browsers. 

You need to go through your entire list of functional requirements and ensure everything works. Test it thoroughly so you know, if you are paying a developer, the contract has been fully delivered. 

Then let others test it to see what they think. Give them a whole range of tasks that will test every page of the site and different levels of navigation. 

User testing should become an ongoing practice. Every time you make a major change to the site or create a new page, try and get at least a couple of people to test it and provide feedback. Chances are they’ll pick up something that you haven’t. 

Information structure  

Also known as information architecture, this determines the way content across the site is catalogued into sections and broken down into subsections.  

Some information hierarchies can go to three or four levels if a large and diverse amount of information has to be published. These are normally restricted to large organisations or those businesses with a diverse range of products or services. Small businesses should aim to go no more than level three at the very most. 

Labels 

For a user to navigate to the content they seek, the sign posting along the way needs to be descriptive and unambiguous. 

In the early stages of website development, information architecture can be developed using various techniques.  

Card sorting is a quick and easy way to kick start the process. You can workshop card sorting with key staff to firstly identify all the information needed to go on a site.  

Once each piece of information is identified and agreed upon as being necessary, it’s written on a card. Once the group feels as if all the essential pieces of information have been identified, the facilitator asks everyone to start sorting all the cards into major categories. 

As a rule, you should try and limit the number of high-level categories (generally found on the horizontal navigation bar) to seven. Any more and the menu bar becomes too crowded to work effectively.  

Testing 

These categories now need to be tested. Ideally, you should use people who would be typical users of the future site. But it’s not necessary. 

The more testers, the better. But one is better than none. 

To test the information structure, ask your subjects to find specific information. The information they seek would represent content that a future customer would typically try to find on the future site. If you have different types of customers, they may each try to seek different types of information. 

The categories could be displayed as groups of cards, replicated to represent the site’s hierarchy. Or it could be several pieces of paper, each with different categories for a particular level written on it. 

Feedback from the tester will inform you about any changes that may need to be made. Perhaps there are categories they find difficult to understand or are unable to discern from other categories. They may have suggestions for more appropriate labels.  

Use the findings to make changes and retest.