Squawk redesign part 1 - Requirements & establishing the grid
Just like I promised I will outline the steps that I took to redesign my own site. (If you are reading this in a RSS reader you are missing out.)
Firstly I will describe what requirements I had for the new design and how I used these to develop its grid and general layout.
The previous version of this site used a 14 column grid layout.
8 columns were used by the main content, while two sidebars filled up 3 columns each.
Version 1 of squawkdesign.com
The advantage of this was that there was more room for sidebar content, such as 'Recent Weblog Posts', 'Recent Comments' or my 'Sidenotes'
Unfortunately, the relatively high number of columns meant that content was squashed, decreasing readability.
As many of you will not actually have seen the previous design; I dug up an html version: Click here to check out v1 of Squawk.
Something else that bothered me about the old version of Squawk was the lack of colour and the relatively high loading time for the background image.
But most importantly, I was not able to identify with the design: The grunge splatter image in the background looked nice, but it did not tell visitors anything about me. (The initial idea was dirt in a henhouse, but this was far from obvious.)
A small note in between: Just because I redesigned this site, this does not mean that the grunge images that have been used in the old design are no longer available. The original ink splatter images can still be found here, while the corresponding Photoshop ink splatter brushes are referenced here.
Requirements for the new site
- Distinct use of colour. Move away from the black&white
- Wider text in the sidebars
- Better readability
- Fast loading times
- A personal attachment to the site
Additionally, I also decided to completely redesign the portfolio and the contact section of this site.
I tried to realign my grid for this website, in order to accommodate for most of the above requirements.
Grid development
I started my grid development, by listing all the elements that would go into the different sections of this site. After having completed an extensive list I embarked on the process of making it shorter: Which elements do not really serve any purpose? Do I need this on that page? Yes? No? Let's cross it out...
Using my list of definite page elements, I outline my grid by folding a sheet of A4 paper. This allowed me to quickly test different grid combinations by drawing on my page elements using a permanent marker.
Grid release candidate
In the end I settled for a 12 column grid. It is divisible by both 2,3,4 and 6 giving me wide range of possible page layouts. As I wanted to make the text in the sidebar wider, I decided to move from using two sidebars to only one. As I already killed quite a few page elements, this could easily be done.
If you want to see how the new grid works with the new design, press CTRL+SHIFT+G, or if you are using Firefox on Windows, CTRL+ALT+G to toggle the grid on or off in the background. This works using the the Grid Layout JS script developed by Teevio.
You cannot actually use the site while the grid is visible, so if you want to press a link, toggle the grid off again using the same keyboard shortcut
To be continued
So much about my initial requirements for this redesign and its grid.
In the next weblog post I will start talking about how I made the choice about the illustration style that is supposed to add 'personal attachment' and how these illustrations were created.
// Armen
Friday, October 19th 2007
at 13:12 PM
WOW...really nice work. You’ve really put a lot of thought into this, which is something I could learn from. I also suffer from the monochrome design issue, something which I’ll try and change in the future.
// Michael from Pro Blog Design
Friday, October 19th 2007
at 17:55 PM
Good to see you exploring your design choices. It’s a great read, though I wonder if you’ll come to regret any of the decisions you made when you analyse them again here. ;)