In Part 1 of this post, we talked about some of the steps you can take to create an effective website design and focused on the pre-design planning phase. The recommended steps included:
- Do your homework
- Narrow your focus
- Use less text
- Differentiate
Now we’ll focus on specific implementation techniques to ensure your great looking new website will be easy to view anywhere and everywhere visitors find it. Here are the next three steps.
5) Wireframe your key pages
Once you have a site structure and understand the key content you want to highlight on your website, wireframing is a logical next step.
Wireframes are very simple layouts that help you plot where content should go on each individual web page or site section. The focus of a wireframe is the content on each page, the arrangement of that content, and sizes and proportions. This does not include any colors, images, fonts, or other design elements.
Example Wireframe
Wireframes may sound complex, and there are certainly various software programs available that help you build your own wireframes in great detail. But in reality, they can be as simple as sketching out the content elements you want on each page on a piece of paper or a whiteboard. This practice has many benefits:
- It allows you to conceptualize what should go on each page before you put your designer to work
- It helps you think through content decisions visually and try out different approaches quickly and easily
- It results in a more efficient design process with fewer modifications
- It provides your designer with a clear idea of which content is most important, resulting in a design that is closer to the end result much earlier in the process
It may sound like a silver bullet, and to some extent it is. That’s because wireframes are straightforward and –dare I say it – unemotional. They really strip away any focus on design elements and allow you to think only about the structure and the content types that you’re placing on a page. They help you prioritize, discover where you need to cut content elements, and determine which pages may be redundant and should be combined. All this without getting bogged down in opinions on colors, font sizes and photo choices.
6) Design your site
Here are some of the defining elements that you and your web designer should consider:
a) Your brand and logo: Your website IS your brand online. It should incorporate the visual and textual style guide, including colors, fonts, and other design elements. There are a lot of creative ways to incorporate your brand in the site design. whether it be as a header color, on the global navigation, used in bullets, etc.
McDonald's Home Page
We all know McDonald’s brand colors are red and yellow,
and there’s no doubt about who the company is when you go to their site.
b) Consistency: Both from a branding standpoint, and to ensure your site is usable and intuitive, your website’s look and feel should be consistent across each page. If you list news items on each page, for example, they should always be in the same place, with the same design elements, throughout the site.
c) Easy to read: Font size, font style and font color all play a role in making your site easy to read. Avoiding a lot of different styles of fonts or colors on your pages will help the visitor’s eyes to know where to go and what to read first without confusion.
d) Good use of imagery: Whether you opt to use your own images or stock photography, you should ensure that the images you select can speak to the content on the page and enhance what you want to communicate. An image of two people in front of a computer doesn’t mean anything if it doesn’t relate to the other content on that page. Investing in accurate, high-quality images can add to your site’s attractiveness and relevance.
Apple.com's iPod home page
Apple uses creative, attractive product images to entice visitors to learn more and convert to buyers.
To view a more complete list of web design best practices, you can visit a helpful site from Terry Felke-Morris, author of Web Development and Design Foundations with XHMTL.
7) Quick to download, everywhere
Recent studies have shown that if a visitor to your site has to wait between 5 and 15 seconds for a page to load, they are more likely to leave your site than wait around. This is a key consideration if you’re trying to grow your visitor base and increase your brand recognition! Prioritizing speed means communicating to your web designer and developer early on in the process that you want your pages to be “light” – meaning they load as quickly as possible.
Heavy design elements such as Flash presentations or animations that execute as soon as the page loads are one reason sites can be slow. It’s important to test download times if you plan on using these elements, or make them optional items that users must click on to view. Server speed is another indicator of site speed, and many companies find they must upgrade their web servers as part of their investment in their website.
IBM's Home Page
IBM keeps their home page light by making the video an optional element
rather than slowing down load time with an automatic video.
