Let’s start at the beginning of any new web design – planning, or more specifically, 'sketch'. The most effective way to design a new website begins by turning your computer off.
Often associated with the term ‘wire framing’ (which is quite different actually), the purpose of a website sketch is to form the correct order of information for your design. Done properly, this ensures visitors browse a site in a way that maximises the chance of them making contact or converting to a sale.
What’s more, it always saves time later when I come to put pixels on the page.
Start by writing a list of the various parts of the new website (i.e. the pages, or sections for a single pager). I decide whether it’s a single page or multi-page site by how much content there is, so don’t think about that just yet.
A basic list would be:
There are many possibilities obviously, but the point is to make a simple list of each part specifically for your business.
Now bullet point what each part must contain. For example, ‘About’ might look like this:
- Introduction of company (established date, where, by who)
- What does the company do? (high level description)
- Aim of company (i.e. what do customers get)
- Area of operation (UK wide, or Yorkshire)
- Ethos (i.e. approach to your work)
List as many bullets as you see fit for each part, but make sure each one is a single and focused point of information (hence the term ‘bullet point’!). Imagine you’re a potential customer with only 10-15 seconds to take in each part of the website – what information is essential and will influence you positively?
Brainstorm intensely to ensure each bullet is as clarified as possible, otherwise it will lead to confusion and frustration later on when writing your web copy which is tricky anyway (and why you can download 'A Beginners Guide to Writing Website Content' here).
After working through this you then need to work out your calls to action – in other words, what might a prospective customer want to do as they explore each part of the site?
For example, a landing page nearly always has a ‘Contact’ button and sometimes another like ‘Learn More’ – this MUST go to the information a new visitor most likely wishes to find (according to the correct order of information we mentioned earlier). Another example would be to place a button to ‘Services’ when explaining what you do in ‘About’ - if a visitor has got that far, they might like much more detail about what you do.
Carry out this task carefully, thinking through each area of your site from a visitors perspective.
At this point, you’ve got a comprehensive order of information. You have the various parts of your website listed, a decent idea of what each part must contain and bullet points to help write all your lovely text.
Now, the fun begins… the sketch!
The key here is not to ‘draw’ anything in detail. Remember, you are simply trying to get the critical items in order. Once you've worked out whether a single or multi page site would best suit your content levels, you're ready to begin.
Start simple and focus on your landing page. I'll be covering 'Landing Page Essentials' in due course, but you'll have seen plenty of homepages that you can draw some ideas from - by all means take a look at our work at here, or the example below:
Imagery is normally depicted using a diagonal cross (above shows a full screen background image for example) . I show text and sub-headings by straight lines, and simply label icons and buttons and anything else that is important:
You’re off to a good start – your new website will be ordered properly with intelligent calls to action to ensure the best possible user experience. What's more, you've already got a loose idea of layout.
Next up... planning, part 2 - ‘Mood’.