This is the last in a 2-part series on website planning.
We are exploring a web design approach that begins with big-picture ideas and ends with design. If you missed it, you may want to read the first article before moving on.
We are getting closer to design, but we’re not quite there yet. First, you need to take a look at your sitemap and group together the pages that will likely share the same layout.
For example: the homepage might include a large splash image that distinguishes it from interior pages; feature project/product/property pages and standard interior pages may have similar but distinct layouts; case studies could be displayed in a special format.
Since every page type will have a different layout on the final site, each one will require a separate template. In this case, template = type of page.
A very simple site might have only 2 templates: homepage and interior page. A larger site might have 10 or more distinct page layouts.
Templates need to be designed individually, so each one will go through its own little planning process. This is where wireframes come in.
But what, exactly, is a wireframe? It has a layout without a design. It has no images, color, or fonts. If it has text, it’s usually just place-holder text that reads like nonsense.
Think of it like this: a wireframe is to a website what a floor plan is to a house.
In planning this layout, it is important to consider all elements of your users’ experience – from the conceptual to the concrete.
Think about the width of the site. (Are the pages going to fit on the 8% of screens that are only 800 pixels wide?) Think about how much text will appear in each section. (Users typically read only 20% of the words on a page – and that percentage gets smaller as pages get longer.)
Next, think about everything that will appear on the page: navigation, images, text, a call to action, logo/branding, etc. How much real estate should each piece get? Which elements should be the most prominent or closest to the top? Plan accordingly.
Once you have thought all this through, you can begin to decide where everything will go. On paper or in Photoshop, sketch a basic layout: add boxes, placeholder text, or images for all the elements.
Strive for a layout that will communicate clearly and be easy for your visitors to use. This is a good opportunity to improve usability by testing paper prototypes.
Keep in mind that some sites will succeed only if they appeal to search-engine robots or support the site administrator. If this is the case with your project, keep search-engine friendliness (SEO) and ease of updates (content management) in mind as you develop your wireframes. For best results, ask an expert!
Once you have sketched basic layouts for each type of page – keeping visitors, functions, content, and other requirements in mind – you have got your wireframes.
Notice how late in the process we begin designing.
There are many ways to successfully apply a creative design to a wireframe. Of course, stakeholders’ personal preferences will be a factor. But as much as possible, try to guide the process by visitors’ needs and the style of the brand.
Make sure the elements on each page are given balanced prominence; this helps visitors understand your offerings at a glance. Create a clear and easy path for them to follow. In the end, the design should entice users to take action.
Technically, design comes after the planning process, but it is important to make sure these 2 stages connect well. With so much preparation, it seems like this phase should be easy and quick. But many projects actually slow down during design.
Why is that? Well, most websites are handled by teams, and there are typically many stakeholders. If new people get involved this late in the process (and they often do), they probably won’t understand all the factors that led to the design.
To make this step as smooth as possible, it is best to get decision makers involved from the beginning: every person who will help determine the final design should be part of the entire planning process.
Define decision makers early and bring them along at every step. Trust me. This could save you weeks of time and energy.
So there it is: one smart way to plan a site. I am sure there are others. Just as every website should be flexible, every process should be adaptable to the unique needs of the project.
The most important thing is to make sure you have a plan. Adding requirements late in the process can be expensive, time consuming, and frustrating.
Carpenters have a saying I often think of: Measure twice. Cut once!
What are your thoughts?