I have spoken of my design process before, in a rather limited fashion. I was emailed asking to expand on it. This is my clear definitive answer.
I was inspired to write this article, from Jesse Bennett-Chamberlain’s latest article on digital-web. I shall be brief, I won’t go into a full website, but the most important page of a website: the front page (homepage).
The homepage is the most important because if it is poor, it will mean that your visitors won’t go any further. A good homepage is what sells your website. In the same way you goto an interview wearing your smartest clothes. First impressions count.
I have decided to redesign my blog in conjunction with this. I felt using a fake example would decrease the quality of this post, and I wanted to do a clean redesign. I have not achieved what I wanted to do with my live redesign.
Information Architecture
What this Website Does?
We’ll list what this website does/what it will do from a functional vew-point. I’ll then rate them on a scale of importance (from highest-lowest). You’d probably collaborate with your client on this one.
- Logo
- Navigation
- Lists Articles (of varying nature. Work, Personal and anything in between
- Categories
- Archives
- Tells people who I am. (Some people may argue that this is more important than my articles, but without an about, a blog still works)
- My best posts
- Allows me to display that I am available for clients
- Lists projects I work on
- Lists links that I have liked
- Lists links to friend’s websites
- Lists flickr photos
- Lists “What i’m Playing”
We could take this data already and make a grid out of the weight, where the first item would be at the top, and so on. However, with our discernible eye we may agree that that is not the best soloution. Photos take up more focus than text, due to their rich colours and mass. So even if we weighted it on our 1-10 scale it may not come out be weighted in such a way at the end. I also want certain things above others, like About Me to be higher than my Category List, due to me wanting to make a personal impact, though I still feel that it’s less important. At the end of the day, use the list as a rough guide and use your intuition throughout.
Because this is a blog and has limited function (people tend to stay on the homepage: partly due to RSS), I won’t be doing the next step. The next step is what I call the ‘5 Mark Step’, where you choose the 5 most important things off that list, the rest you’d leave for other pages. On a blog, all the extra items (such as flickr) are just snippets.
Wireframe
I have decided how I want my blog, I want the more important things to appear at top, while the lesser rated things lower down. No Suprise. However, I have decided I want a standard 2 column layout. I want blog posts to be bigger as they have more content in them.
I like keep my wireframes neat, some people do them messily but I believe it’s a good idea to set the grid in the wireframe stage. It doesn’t have to be pixel perfect quite yet though, you should reverify the grid again when it comes to the graphical version. Some people like to draw it on pen and paper before hand, it’s really just preference. I even once new someone who made his wireframes with XHTML (using absolute positioning).
Here is the final grid I am going with:
Update: Keith has been working on a similair article, we happened to publish it at the same minute. Freaky. 
Update #2: This article was discontinued due to lack of interest.
