Design phase of my new blog
2006 at 10.35 am posted by Veerle Pieters
First something that I must say before starting the series about the conception of this blog. My head is still spinning from all great comments and praises that I have been receiving. This caught me by surprise you know, but I can’t deny that it feels great. All that support means a great deal to me ;)
So I’m planning on describing all the stages that my blog has been undergoing till the final launch, and today we will start from scratch. So let’s hope you are interested in this behind the scenes invitation.
My first blog
The first version of Veerle's blog started as a test case to see if I could build a site with CSS instead of the old school way with tables. The anecdote is that it was my contact person at the Library of Congress in DC that introduced me to Dave Shea's CSS Zen Garden. My first reaction was one of disbelief, that couldn't be true one lay-out and so many different looks! After that I got inspired by Douglas Bowman's blog and work and Jeffery Zeldman's persuasion powers. Those guys convinced me and the ball got rolling big time.
I never created version 1.0 with the intention to stay online that long. But as work caught up with me and I didn't want to close it down during a redesign phase I kinda start to live with it. It came down to this, I always felt that my previous blog didn't communicate my design skills all that good. So fast forward now to conceptualization of version 2.0.
Version 2.0 - What needed to change?
The idea of a new version was already in my head before @Media 2005 but I never found the time to actually start it. My thought was that I wanted to focus on some other design tools too like Illustrator and Photoshop, instead of just CSS. Many others already cover CSS in great detail. Doing that is also a great self enforcement of doing things differently or using smarter ways you know. That's the reason why I do those tips, but it just wasn't originally planned doing them in the previous design. The sections Veerle's art and Art/Type elsewhere are an extension of that because there aren't that many blogs that focus on that stuff.
Starting experimenting with a grid
It's always a good idea when the content part is covered to start out by using a grid to arrange content. I wanted to find a harmonious balance between content, the structure (navigation etc.) and the visual design. Mark Boulton is the grid expert, so if you want to learn more about grids you should read his 5 part series. You can see how my original grid is somewhat different than the final lay-out.
The reason for that is once I got my design going things didn't flow like I thought they would. So I started to rearrange some items to make them fit better in the design. Sometimes these things happen, on paper it looks OK but in the real world it was all too overcrowded.
Coming up with a design idea
Some people try to found answers to where I found my inspiration for all this. Well yes, of course I get inspired by the many galleries and sites, but to be honest most of the time when I take my browser for a spin along those sites my creative brain is like getting overloaded and I get stuck. I know from experience that nothing good comes from that when I force myself and try too hard. When that happens I need a break and let things rest a bit. The first design element that I started was my header illustration. The girl there is inspired from a photograph of myself (from my previous blog) that I have redrawn by hand and imported into Illustrator. This element did set the mood for the design and got me started. Once I have found an element that feels right, my header, things get moving for me almost in an automatic way (sort of speaking). I never have the total design in my head from the start. I play and experiment a lot, move things around, try different colors etc. Choosing the right font is also part of the experimenting. I chose to use 'Chalet Paris 1980' from House Industries (P.S. notice the DJ Dimitri ... yes ...from Paris! ;)).
Some sites that inspired me
- Ordered list for its clean approach and subtle use of dark (background) colors in combination with vibrant icons and text
- Matt Brett for the use of dark background colors and the placement of his content.
Defining the design
What I learned over the years as a designer is that I need to feel 100% convinced and happy about what I have each time I look at it. If that's not the case then chances are it won't be a winner. Not easy, as I am my own worst client. It may be hard to believe but that's exactly what happened in my initial design. After a week I wasn't pleased anymore of the result. Question was, what's wrong about it? You can judge for yourself:
It looks similar but it doesn't have that spark. The colors don't work perfectly. I thought that I would have a rather original color palette but the use of different shades for brown in combination with the beige content background just didn't work, at least not for me personally. My partner and friend Geert was my guide in this stage of the design (and all others btw ;). He immediately saw that the colors where the culprit of my dissatisfaction. Once I started converting everything to the new colors it felt so much better and more convincing.
Finalizing the design
Once I had my final homepage design I started on the design of the articles/comments page. For the comments I wanted something different. The idea of the ticketing system hit me in a spur of the moment. The comment boxes were finished but I wanted something extra. The gravatars were in place, but the numbering of the comments was all the way to the right, that looked out of balance and rather weird. I decided it was better to place it below the gravatar icon in a box. Then I thought "Oh well the shape of this box needs to be a bit different, not just a straight rectangle", and that's when I thought of this tear off shape and this got me thinking "Oh?! This looks just like a ticket" and so everything connected and I came up with the idea of the ticket roll. Finding inspiration is hard to describe, it acts in so much different ways, one of them in the heat of a moment, and sometimes one thing leads to another.
The next part will cover some elements of the XHTML templates, in particular the way I divided the templates in container divs and how I've set them up to be as flexible as possible. Secondly I'll take you through how I've organized my CSS style sheets. The final part will be Expression Engine talk, how I implemented my templates and I'll try to give you a better picture on the inner works of Expression Engine. But you'll have to be patient though since I'm leaving next week for a 3 week trip to the U.S. This doesn't mean it will be quiet here, but rather that the focus will be on SXSWi at first and later DC.
Update: To all first time visitors, please read my "Veerle blog now 2.0" article first before commenting here. Thanks in advance ;)