To the right is an attempted redesign of this site that I worked on back in the spring of 2007. It was unfocused and attempted to incorporate too many new and different design elements in a way that I found ultimately unsatisfying. Although a lot of work went into this design, I decided not to implement it until I could “fix” it. The necessary inspiration never hit me, so several weeks ago I began the process of designing a completely new template.
Since I was unhappy with my last redesign attempt, I also decided to refine my process. I’m not an artistic person, and any attempts at drawing generally lead to nothing but frustration. But I decided that it was important this time to start with something on paper. I went through several sheets (reams?) of paper, scratching and brainstorming until I finally came up with a wireframe that I liked.
Click on the image to enlarge.
About halfway through the process I switched to graph paper. It helped me more accurately represent the proportions of the space I was trying to fill, and created a grid on which I could lay out the different components of the page. I divided the page into thirds, and found convenient spots for the limited content that I need to present on my site. You can see the notes I jotted down here and there. I even included a stick figure or two just to firmly cement my sketching ineptitude. I was generally happy with the result. You’ll see that there are still elements that were up in the air, fairly major things like how to display posts and post-information (date, time, comments, etc.), but I had some ideas to work with when I began the mockups in photoshop.
You can see from the wireframe that I wanted to add two new pages to the site: an easy way to access the archives, and a page for my contact information. With the addition of these two new pages, I needed a way to provide primary navigation. The inspiration for the giant faux tabs came from the Feed Icons Website. I really liked the visibility these giant tabs (and icons) give to the simple navigation required on a small site. So I wanted to incorporate something similar here.
Next: Part 2 – The First Mockup
I like the “fold” comment. Don’t ask me why, I just thought it was cool that you thought of it. Like a newspaper — the cutoff point past which I won’t read unless you get me with your headline. Smart.