For my personal website I’ve been using off-the-shelf content management systems and making do with popular templates such as the great K2 and lately twentyten which are both fairly nice templates to start with. However they don’t really lend a personal touch to my site in the way a custom theme would. I often store a mental image of a well designed site when I come across one (and it’s frustrating when I can’t find it again) and I don’t think my site has ever done that for anyone. It’s something I would like to achieve, but I know is quite a challenge.
This post will outline a process which I hope to follow through to completion, although it’s likely to change as I go along.
Content First
A mistake we often make in building new websites is to begin with a wire frame sketch filled with dummy text (lorem ipsum dolor sit amet…) and this often stays in place until everything else has been completed. Increasingly designers (Mark Boulton, Andy Clarke) are making the point that having content to design around is a far better starting point and I am inclined to agree. The problem is that in my experience, a client will want the design to be more or less done first and then will fill in the content later. The exception tends to be product photography which is fairly easy to conjure up before starting work on the site design.
My approach for this website will be to think in terms of requirements and then make a list of content which fulfils these. Whose requirements, you may ask? This website is my online portfolio; I can show off my technical skills, writing ability and photography. I occasionally post something which really is not related to anything else but which gets the site a lot of traffic (in particular this post). My requirements therefore need to be considered in terms of a few people:
- Subscribers/friends - people who want to hear what I have to say, or follow links here because they know me
- Stumblers - people who end up here because there is some content that specifically interests them
- Potential clients/employers - when I print business cards, they will have this URL
- Myself - yep, I have requirements with regards to my website!
Once I have this requirements list it will be easier to produce content, or at least outline content, which will help lead to the next stage in design…
Markup
I often start a website design in Photoshop, thinking entirely in terms of graphical design and layout. This allows lots of chopping and changing but with the multitude of potential viewing platforms available I don’t think it is the best starting point any longer. Once the content has been considered, there will be a structure to the site which needs to take precedence over visual attributes. At this point I would draw a site map, indicating how information is linked and showing how a visitor might be expected to navigate around the site. This will help produce the basic markup for a few areas of the website. I believe this is a good starting point because it is then possible to see the webpage as a search engine or screen reader sees it; the information structure and
Typography
My eyes hurt a lot after reading many websites. Perhaps this is a result of using a 27” screen, which in general makes things look smaller than on other devices and leads to a bit of eye strain. I think there is a certain fashion for small type on the web and I often have things enlarged a few clicks - some websites look awful when you do this.
From the markup it is relatively straightforward to develop some simple typography rules. These can range from setting up a vertical rhythm to simply going through the elements in the markup and setting them so they ‘look good’ to the eye. I’m curious to experiment with modular scale on this occasion, to see if it creates a better feel than guesswork or off-the-shelf font styles (such as Blueprint CSS or Yahoo (YUI) font-reset).
Layout
This phase really goes hand-in-hand with typography. This is the point where bringing in Photoshop and wire-framing tools might become more important, but with so much already completed in markup itself it might be more liberating to stick to pen and paper and CSS. Designing on a pixel perfect canvas always leads to frustration when certain browsers don’t work as expected and perhaps this time I can’t get over it.
My focus will be on creating something simple, without distracting elements. The focus has to be on the content; I like how some of the mini-blogging services like Tumblr and Posterous do this, and I hope to do something similarly minimalist.
Style
This is an area which I could do with practising a little more. The little details, such as drop shadows and letterpress effects which create depth on the web are something that I haven’t used much in the past. I do think that it should be left to the end, mainly so I don’t spend too long on these little details.