The design process of my new blog, part 1

30 Jun 2010

As promised before, I'll share a little bit of the design process of how this new site came to life and why I took certain decisions. As you can imagine this was a long, and sometimes difficult path, as my previous blog was so well received. Since there is so much I want to share with you I thought of splitting things up into different articles. Even though my blog was liked by so many people, I felt I had to move on and change things drastically. And so I started this big challenge of creating something that I believe would be a great improvement...

Why this new design?

In my post about the launch of my new site, I already explained why I decided to go with a new approach. For me it was important to clearly differentiate my areas of interest and make these the different sections of the site.

Another reason was that I saw a critical need for sites that have only one voice whenever you are looking for graphical inspiration. In most cases, inspiration gallery sites are run by several people or reader contributions which results in a mix of different styles and levels of quality, which makes it less inspiring and time consuming to find what you are looking for in my humble opinion. I thought of a firewall that filters out all the junk so you end up with a clean environment to see the array of inspiring pieces without the ton of ads. Last, but not least, I'm proud to be Belgian. But, unlike Dutch design, you don't see much on the internet from our little country. I'd like to change that by sharing some of Belgium's graphic designs from the past and the present. If you are proudly Belgian too? We can show the world the remarkable work of our graphic designers, past and present. You can contribute by sending a copy of the piece or a link to it, and the artist or designer's info. We'll link it to your name and site. Dank je wel!

Where did I start?

The first building block that triggered the design of this site was the different sections that I had in mind (located in the main navigation at the top of each page). Next, I started thinking about what I could drop from the previous homepage design. One thing I really wanted to achieve, was to make things lighter and better structured. At first I had the idea of creating a similar kinda approach of what thumblr does, but I soon realized the limitation of that approach. The only leftover from this idea phase can be found in what is now the Lifestream. From an esthetics point of view, I was looking for a totally new look. One that adds more subtleness, more eye for detail, and more refinement, together with a whole new color palette.

The header illustration

The design process of my previous blog went pretty smooth once I started with the illustration of the girl. I remembered that this triggered the inspiration and one thing let to another. My hope was to repeat this same effect again to get this design on track.

Finding the right pose

First I looked in some of magazines and browsed the web a bit to find ideas for poses. Unlike with my previous illustration, I didn't start from a photo. After all the girl isn't exactly me, it's more like an imagination of who I would like to look like. An illustration where I try to add some characteristics of myself in it, just enough so there is some recognizability. Just all very idealistic and perfect.

Changing the haircut

I've spent a couple of days in total on this illustration. It was already finished in the Summer 2008, and at that time, I had a different haircut. My hair was longer. So for a whole while this was the illustration I would have used for the new blog. In the Fall of last year I was fed up with my long hair and so I decided to cut it short. Weeks later I changed the illustration to the new shorter haircut, which I actually like better.

The header illustration with long and short haircut.

The website icon

With the design of the icon I took my time. To me this icon was less important than the illustration to be able to move on with the design of the site. This icon is just a symbol that I would use throughout the site as home icon and favicon and there was no rush to have this ready at the very first start. I figured I would probably get inspired along the way.

Sketches I made for the design of the website icon (including some other sketches as well).

Some of the design process of the website icon.

Defining the initial design

Trying to find the right color palette

When I start the design of a website project, I often start by defining the color palette first, and then when that's decided, I start working on the grid and layout. Even though it doesn't mean I'll stick to the colors I've chosen. They often change during the process, but in a lot of cases the colors give me inspiration somehow, some kind of starting point. This time I just randomly picked a few colors I like, probably colors I thought would go well with the girl illustration. I experimented with these colors by overlapping them using different layer modes. This is always an interesting approach as it sometimes leads to a vivid and surprising color palette.

My initial color palette for the site. Experimenting with overlapping color effect.

While working on these colors, I was also trying to answer the question: do I go for light on dark, or dark on light? Ideally I wanted a mix of both, something in between. Only... if that was possible. Using light on dark makes photos and illustrations really pop. Dark on light on the other hand, gives a good readability. And so I was really looking for the impossible, the best of both worlds :) I tried out light on dark first as I really wanted something totally different...

Very first experimentation of the new design, trying out a dark on light color palette.

... but the result was not to my liking. After experimenting and usual "throw-away-starting-over" phase, I ended up with a color palette I liked and was happy with.

Mid tone as background with light content seem to be what I was looking for.

Structure & layout

Somehow, choosing the colors is always the easiest part of the process for me. Having said that, choosing colors is not an easy task, but for me it's something I have less trouble with than coming up with the perfect structure and layout of a page. As with any website design, I experiment a lot with ideas on how to present content and also with layout in general. I know that there are rules, but when I'm creating I forget them for a bit, and then when I have come up with some ideas I really like, I try to apply the rules as best as I can. By *rules* I mean design and usability rules, e.g. a button should look like a button, the menu should be at an obvious place for the user to find... things like that. It's something I need to do to be able to use my full creative potential, see how far I can go, forget the boundaries for a bit. Doing that, giving yourself this creative freedom while you design, often leads to new refreshing ideas in my humble opinion.

Homepage grid based on 3 columns.

Main page grid based on 3 columns.

Article page grid based on 5 columns.

Gallery page grid based on 4 columns.

In a new article I will go into further detail on some of the design aspects of the main template pages. Stay tuned!

Comments

  1. 1 Elina 30 Jun 2010

    I think your new design is really beautiful. I like it much better than your previous website design! I’ll stay tuned for your next article and thanks for sharing how you made the design!

  2. 2 Auré 30 Jun 2010

    Thanks for this article Veerle. Really interesting to see how you have organised this redesign. The color scheme you choose is always amazing and it’s a perfect illustration of your very own style. The grid structure you use and the organisation of the content on the pages make me think about some print layout, really interesting.

    Just a little question to finish… What about a baseline grid ? Seems that you don’t use it,maybe not enough time ?

  3. 3 Veerle Pieters 30 Jun 2010

    @Auré

    Just a little question to finish… What about a baseline grid ? Seems that you don’t use it,maybe not enough time ?

    I didn’t show it in the images but I am using a baseline grid. What I am not using is those formulas or those readymade frameworks that you can find on the web. My baseline grid is mostly created on my gut feeling what I think is right. I’m not a strict follower of the Josef Müller-Brockmann religion :)

  4. 4 James 30 Jun 2010

    Love the redesign (haven’t read the post yet) you are in a different league. Gives me something to aspire to! When I was starting out a few years ago I used the links from your site - great educational resources.

  5. 5 JC 30 Jun 2010

    Veerle, you are the best female web designer ever :D
    I love your new site!

  6. 6 Yorick Peterse 30 Jun 2010

    I was about to ask the same as Auré, but he beat me to it. Seems I can’t say anything else but “wow”. Everything ranging from the icons to the headings are just spot on, such details tend to be very rare in this copy-paste world we’re living in today.

  7. 7 Josephine Leow 01 Jul 2010

    love this new design look! looks forward to reading more posts!

  8. 8 Cathy 01 Jul 2010

    I think it’s fabulous! Congratulations. I know how much work this was. And thanks for sharing your process.

  9. 9 Joana Pereira 01 Jul 2010

    I love the design and all the things you do, you are a inspiration to everyone :)
    but the most thing that really caught my eye is the texture you use on header… how do you do that? :P :blushes:

  10. 10 ibas 01 Jul 2010

    Really interesting article, i’m impatient to see the next parts ! That’s always nice to discover the “behind-the-scene” things of a project, better when it’s a really excellent final project ;)

    ps : i really like the little ball with reflects on your website icon research !

  11. 11 Eva 01 Jul 2010

    Nice to see how you developped your site! great job

  12. 12 Wim Meeus 02 Jul 2010

    Amazing work.
    Cool how you make something this complex look so simple.

  13. 13 Andrés Mejía 03 Jul 2010

    Great article. Thanks for sharing!

  14. 14 Nickolas Saliba 03 Jul 2010

    I love it :). Outstanding design.Small remark if you want to work a bit more check this out :)

    This will help you out through navigating back and forward.

  15. 15 Prabhul Sankar K S 03 Jul 2010

    Fabulous! You are brilliantly creative. The illustration with long hair was better I think as it has some motion and energy in it. Just my thought!

    Thank you for sharing!

  16. 16 Bas 04 Jul 2010

    I think that space is used much more effectively in this redesign compared to the old layout. I also really like the contrast between typography and background colors. Good job!

    I was wondering if you could explain how that gallery was made, coding wise, in the next write up. Thanks, if so.

  17. 17 donna maui 06 Jul 2010

    I’ll add my compliments on your redesign as well. It is an inspiration. Thanks for sharing your process.

  18. 18 nurul amin russel 07 Jul 2010

    this new look is brilliant - thanks for sharing the making process - very much inspiring for novice ppl like me

  19. 19 chris 09 Jul 2010

    hi veerle
    the new blog design is amazing! the illustrations, the colour schemes, everything is pretty much fantastic. i especially like the text effect you used for the “veerle’s blog” header and i would definitely like to read a tutorial about how it was done :-)

  20. 20 Davidson 15 Jul 2010

    The 4 column layout is amazing! Really nice work.