The Methods to My Maddness – Design, Navigation and Layout

Now it’s time for the good stuff! I love drawing and painting and it’s the creativity bit that attracted me to building websites in the first place. My original layouts back in the day were well stocked with hideous animated GIFs, frames, music and various other Web 2.0 no nos. Coming up with a great design isn’t most people’s priorities but creating something functional and that isn’t painful to look at is important and should be given some serious attention, even if your intention isn’t to create a masterpiece.

  • Get a rough idea – When I’m trying to come up with a design for a new site from scratch I spend hours scouring the web for sites that I like. I’ll do searches for sites that have won design awards, look at other sites in my niche to see what they’re doing, and ask on forums for people to suggest some sites that they really like the design of.
  • Sketch out the layout on paper – Before I go anywhere near a computer I’ll sit down with my trusty pencil and notepad and sketch out some layouts. I’ll use different ideas from different sites I’ve seen and I don’t usually come up with anything too radical or groundbreaking. Functionality is the main goal at this stage and I try to think how I would move from page to page. This is where I’ll decide:
    • what I want the site’s width to be
    • how many columns
    • the width of each column (based usually on the width of the Adsense block I intend on using)
    • where I plan to put ad units
    • make lists of possible categories and sub categories
    • where to put any newsletter forms or search boxes
  • Establish the site’s navigation – For me coming up with a good system of navigation is the most important part of the design. It’s not as sexy as creating a logo or choosing a colour scheme but can make or break your site. Getting your structure right from the start will save lots of time and headaches down the road. To start the process I look at all the content I have  and think of how I can divide it up into categories. I write everything down in my notepad, grouping like things together and drawing arrows all over the place to see how things could link up. I try to not to bury things inside too many levels (folders) and make it possible to get between any pages with as few as two or three clicks. I used to have my main navigation in the left hand column but now I stick it up top under the header and have space for additional sub categories on the right hand side. Finding what works right for your site will probably take a bit of trial and error.
  • Choosing a colour scheme – I don’t know what it is with me but I’m hopeless with colour. Even when I have a great set of colours I never seem to be able to figure out which colour to use where – links, background, titles etc. Above all, make sure people can read your content! Pink text on a yellow background isn’t going to cut it. I’ve used this Color Schemer site to help me figure out which colours look best together but from there it’s still a struggle because I need to see them in use on another site for it to really be of help. Choosing colours is usually the last thing I do.
  • Creating a logo – Sorry, I lied. Creating a logo is the last thing I do because I need to match it with the site’s colours. This part is very frustrating for me because I think I’m capable of coming up with something really good and professional-ish looking but I feel limited in what I can do because I only have Photoshop. But having a good logo or header image isn’t really that important. People will still visit a site with great content even if it’s all text but having a nice logo/header is just that extra little bit that might keep your site in people’s minds.

I finally think I’ve come up with a template that I’m happy to use for any of my new sites for the time being. I’m never totally happy with my site designs but I think I’m getting there slowly. I’ve tried to stop obsessing over little things because ultimately, a site’s look isn’t hugely important. Although navigation and readability are, so make sure you get those right.

About Kirsty