One of the great secrets of the web is that designing a functional, effective and elegant web site really isn’t that hard. It’s true. Virtually anyone can do it. You don’t need to spend a lot of money to get started, the tools are available to anyone who has access to a computer and it is easy to view and make changes as you go along.
Not everyone is capable of creating a bleeding edge, award winning site. However, the number of businesses that need to demonstrate that they are on the cutting edge are few and far between. For many businesses, it is more important that a site be simple, attractive, easy to use and give the viewers all the information they need.
Well designed sites, big and small, share the same principles of good web design. These principles help bring the goal of a solid, well designed, effective and attractive web site within everyone’s reach.
The first principle for developing a well designed, effective and attractive web site is good planning.
Know what your goals are
Good web design is the same as every other project in life: before you can achieve the results you want, you need to know and understand what it is that you are aiming for. Ask yourself, “What is the purpose of my site?”There is no right or wrong answer to this question, but it is important that you have an answer. It could be that that the purpose of the site is to provide information about your services to potential clients, a catalogue of your inventory or act as a sales portal.
Whatever the focus, the answer to this question will inform everything else that you do from the text on the site, how you organise the information or even what images you might use. Everything you do on the site should work towards your goal. Understanding this now will save you a lot of heartache later on in the design and building process.
Map out your structure
Once you are clear on the goals of your site, it is worth taking the time to map out a site structure. You don’t need to worry too much about the content at this stage. Instead, focus on the big ideas. The aim is to get an idea of types of information you want on the site and how the different parts of the site should link together. Every page should have a purpose.
This is an important step even if you’re not building the site. Being clear at this early stage about how you want the site structured can save you a lot of time and money down the track and avoid costly redesigns.
If you really want to delve deeper into the principles of organising your site, an excellent place to start is Dan Brown’s “Eight Principles of Information Architecture” [PDF]. It’s only a few pages long but packed with thought provoking questions for you to answer.
Laying out the pages
And now the fun really starts!
It’s a good idea to give some substantial thought to a basic layout for the site’s pages. This part of the process is the perfect time to play around with as many ideas as you can while it is still easy to do so. The site structure will have an influence to some extent, but you should still feel free to try something new.
One way to do this is to use wireframes. Wireframes allow you to develop basic ideas about appearance and structure without getting distracted by the detail. Think of a wireframe as a skeleton for your page. You’re laying out the bones of a page and leaving the flesh for later.
There are a wide range of tools to help you with wireframing a site design, which range from the expensive and fully featured (Axure, Visio , reasonably priced Balsamiq and free (pen and paper). PowerPoint is a very useful tool wireframing, and is also something that many people already own. Using the drawing tool bar to make basic rectangles is an easy way to start playing with wireframes.
An excellent resource on wireframes and wireframing is the online magazine Wireframes
Basic Layouts
Almost every web site will have a few common layout elements, such as a header (often with a logo), a navigation system, a “container” for the main information on the page, and a footer. Wireframing allows you to play around with these elements to get a feel for what works for you and your site. There are some classic layouts that will be familiar to you. The Digital Pacific blog, for example, is a classic three column layout. It has a header across the top, main content on the left hand side and two columns of navigation and points of interest on the right hand side. The pattern is completed with a footer across the bottom.
Site layouts have evolved over time to meet the needs of different sites. These layouts or “site patterns” have been developed in response to the way that people read information online. E-commerce sites have different layout needs than a blog which in turn has different needs to a news site. One of the most comprehensive resources on site patterns is the book The Design of Sites .
It is at this point that all the hard work planning goals, mapping out the site and deciding on a basic structure pays off. Deciding on a site pattern and settling on the basic layout should now be a simple process, making it easier to either start the design work or to give your web designer a clear brief. With this planning under your belt, it makes it that much easier to begin thinking about the next stages of bringing your plans to life.
