When you’re doing your own website design and build – like many bootstrappers are these days – it’s easy to get caught up in the excitement (stress?) of the technical build and getting a handle on the tech stuff, to the detriment of the planning and strategy which should underpin the development of your site.
Fresh in my mind since the Location Independent website makeover last week, I thought it might be useful to outline the nuts and bolts of the process I use to design and put together a website…
Step 1: Define the Purpose of Each Page
I list out all the pages I want on the site and then define the purpose for each. So for example on Location Independent:
Home – I wanted this to give an immediate visual impact of what the site is all about, as well as pointing to the most important sections of the rest of the site. The point of the re-brand was to freshen up the visual brand and give off the vibe I wanted to give which has been missing for quite a while.
Entrepreneurs – This page is all about highlighting the resources available for entrepreneurs and individuals, which includes a selection of my best articles, the premium offerings available and the free Toolkit for subscribers.
Organisations – This is a new page to address an area of growing importance and the way I see the concept expanding and deepening. It’s still a work in progress but I’ll be building it out over time. For now, its purpose is to address this area and audience which I’d previously not addressed on the site at all.
Resources – The purpose of this page is to summarise and list all the premium and other resources I recommend. It’s instead of the previously separate “Store” and “Tools” page and means I can reduce the number of links on the navigation bar.
About – The purpose of this is to establish our/my credentials in the space for the different audiences we’re serving (individuals and organisations) and give some back story into how the whole concept came about.
Contact – I try to limit the number of individual requests for tips and advice I receive from the site (since there are usually lots) so I’ve attempted to make it clear where help can be found and invite only the kinds of emails I am most likely to respond to.
Step 2: Identify the Key Elements Per Page
For each page, I then list out all the elements I want on the page, so for example the list for the home page of Location Independent looked like this:
- Photo gallery
- 3 blocks for each main section
- Press graphic
- Latest post/s
- Sign up box
- Popular posts list
- Welcome section
I do this for every page so I am super clear on the pieces of the puzzle I need to fit together in the next step.
Step 3: Lay Out Your Pages
With the elements listed out, I then grab a piece of paper and sketch out all the elements for each page as blocks/squares. This is essentially wire framing in an analogue way. You can use tools like MockFlow to do the same online but for once, for me, nothing beats a pen and some paper!
Step 4: Plan their Journey
For each audience who may visit your site, it helps to define their journey through your site – that is, how you’d ideally like them to navigate or click their way through from one page, link or section of your site to another.
So once you’ve figured out what the purpose is for each page, what elements you want on each page and how you might lay them out, you then want to take all of this and use them to put together a flow or path of how your audience might navigate through your site. This step and the one above go hand in hand and each will help determine the other.
What you’re aiming for is to design and lay out the site in a way which encourages a visitor to go where you’d like them to go. (Note, they don’t always rarely do this exactly as you plan but it helps if you do plan it!).
On location independent, I have 2 main different types of audience – entrepreneurs (or those aspiring to be) and organisations. The way I’d like them to navigate through the site and the things I’d like them to see is different so I’ve designed the site to help encourage that.
Step 5: Define the Vibe
If you’ve done your branding homework, you should already have an idea of your audience and your brand persona and so this step can be the fun, mood board-ing kind of stage.
For location independence, I wanted to change the overall vibe of the site design from one of spacey and free (which is kind of what the old one was about with the background image of sky and clouds) to one which is a bit more structured…A mix between approachable, professional, and a kind of “wow”. But that would appeal to both individuals, entrepreneurs and organisations.
I know, I know. I haven’t exactly described it very well and it was that kind of brief which I gave to Jonathan! But I knew exactly what I wanted and I knew if he went off for a while he’d nail it. And he did.
{For inspiration, Jonathan cruises around Dribbble, and searches on stock libraries for visuals which spark his creativity. That’s all a bit of a mystery to me so I leave him to it}.
Step 6: Create the Graphics
This is the bit where I step back and let Jonathan work his magic – if you need help with the website graphics, he’s your man!
Et voilá! All you need to do is build the website now ;)