News

New Duoh! site launched

posted by Veerle Pieters
29 October 2008

It's finally launched! Welcome to the new duoh.com. This redesign took us a lot of time to finish mainly due to client work having first priority and maintaining Veerle's blog.

How it all started

The design that you see now, at least big parts of it, was already finished way back in November 2007. That's when the general direction was set, but as you probably know working on your own stuff isn't easy. Before we got to that point many iterations have passed our desktops. Let's talk a little bit about those.

About the designs that didn't make it

At first when we were working on the designs that didn't make it, we thought that adding a lot of illustration style would be the right fit for us, but in the end it resulted in a style that was too 'girly'. It didn't fit at all. Looking back, I realize I took the wrong road; I just chose the wrong type of illustrations. There was the question, too, of whether to use a white background. The design felt all a bit too pastel colored to me, not strong enough, and so I tried a dark background later on. In the end it felt as if we were a bit stuck with this dark background version. It didn't feel right, as if something was still lacking.

Why this design works for us
White and dark background combined

First I've tried to solve the problem of a dark versus white background by coming up with a design where I use both: white for parts with much of the copy, dark for most of the presentation of work. I can't help it, but when it comes to presenting your work, darker backgrounds just work better for me. The colors pop and create a nice contrast.

Inspired by Swiss graphic design

Geert and I are both inspired by Swiss graphic design and we felt that this would be the right direction for us. On the other hand, it wouldn't be Duoh! if we didn't add our own style to it. Looking at the current design, you see a lot of bright colors and attention to details. Using straight lines and simple forms and shapes gave a Swiss graphic design feel to the whole site, but we added a lot of our own typical style to it. I thought it would be cool if we could achieve a site that just breathes graphic design. When people come to the site the first time I thought it should be obvious what we do without having to read a single word.

During the design process Geert came up with this wonderful idea of using illustration backgrounds to place in the body of the webpage as a surprise. One for each section. Just a nice surprise for people using screens with higher resolutions. This way they get to see some interesting illustration work Instead of a plain background when stretching the window. We added a few other surprises, too, as you may discover.

Quotes from people we admire

Another idea was to work with quotes from people we look up to and who inspire us. You'll find a quote from Paul Rand, "Design is so simple that's why it's so complicated." Can't agree more with that. So strong and so true. Then there is one from Steve Jobs "Stay Hungry. Stay foolish." Isn't that the best advice ever? We always try; it keeps the creative spirit alive. And of course I couldn't resist Jeffrey Zeldman's quote "To hell with bad browsers." I have the same spontaneous reaction whenever I bugfix CSS. :)

The design process

After vertical filing the previous designs (or as you might say, circular filing them—they're trashed!), and idea brainstorming with Geert, I let the Swiss graphic design inspiration enter my mind. I started off with a blank slate. Just our logo, nothing else, not even the colors I picked before. I believe in most cases this is the best option. It's better not to look back. Just clear your mind, fill it up with happy thoughts and start all over.

Choosing colors

I often start by choosing my color palette first, and so I did. Vivid colors work well on a dark background. So I picked a dark brown, very close to the brown I used before, but this time I added some grey to it. This way it felt like a more neutral color than the previous brown and suited our logo well. While playing around with the colors the idea came to mind to create a vertical color bar, a bit like my blog but still different, by using some gradients. Later on I experimented a bit with lines, squared rectangles, layer modes, etc. and I ended up with the composition of the color sidebar.

Dark versus white background

At that stage I tried to figure out how I could use a white background in my design. Our logo needed to be on a white background, so my decision was made. Then came the idea of working with a vertical navigation and sidebar and have all the content on the right on a white background.

The basic grid

I worked out a basic grid — just very basic, because I didn't want to tie myself down yet. Having a grid usually helps me to find patterns and positions for everything while keeping things in balance, but sometimes, if I go too far, it tends to limit my creative thinking a bit — thinking that I need to follow my own strict lines of the grid. The freedom to move things around and experiment usually leads to new ideas. It's a bit like thinking out of the box: no boundaries, only freedom, not thinking about conventions, etc., if you know what I mean.

The sidebar

But my grid worked and helped me just fine. I came up with the idea of having a different sidebar for each section page. These sidebars are the only thing that have been tweaked a few times over the past couple of months. The initial ones were a bit too busy. The thing is, I started with them before I started with the actual content. The problem you have by doing this, is that you can end up with a too overwhelming and busy design. Once I started adding the content, it was as if the sidebars were taking over and got all the attention, and the content was pushed away. So I reworked the sidebars by toning them down so everything was more in balance. From there on I got it all worked out. What took the most time was the initial idea of the sidebar, navigation and content using white, etc. together with, of course, all the illustration work that covers the site.

My design process is never linear

Maybe this sounds like a weird process, starting with one element and not knowing how the rest will follow. This might even sound illogical to some of you, but my design process is just never the same. There isn't one method for me that I can report "this works, or this is how you do it". Most of the time I just follow up the ideas that pop up in my head. They are just never in the same order or have the same logical sense. Sometimes I see the whole picture and the last phase is adding the details. I bet a lot of web designers work this way. A bit like the outside in, just like with CSS styling. For me this isn't always the case; it wasn't the case with this design. My creative thinking path is never linear. Maybe it's just because inspiration often creates chaos in my head. Guess I'll never know because I find it the hardest thing to explain and to figure out :)

The copywriting

Content is king or in our case, is design king? Well, I think both are. What's the use of having a beautiful site without good content, without perfect sentences that express who we are. If you tell your customer that you must have both good design and good content, then you should follow your own advice. And so we did. We didn't have to think twice about who to contact. Carolyn Wood, once interviewed me and we also knew her reputation on the web and through web design friends, and thought she would be the perfect person for the job. Here is what she had to say:

Creating text for a website is pretty much the same process as designing, and it doesn't matter if you are writing for a pharmaceutical company, a cruise line, or a designer—it's just a whole lot more fun with Veerle and Geert. :)

Like a designer, you learn about the company, the intended audience, and what both want to achieve. Here we have an interesting twist: Duoh!'s content and its design are, to a degree, the same thing. People come to see what Duoh! can do, and there it is: powerful, colorful, intelligent, precise design. What then is the role of the text on the Duoh! site? What facts do people need? When do you pop up and speak; when do you stop and let Duoh!'s work speak for itself? And what exactly is the Duoh! voice?

In their first email, they were clear that they didn't want jargon or the usual "markety" approach, such as the standard bio. My reaction? "Perfect!" Geert and Veerle exude joy in their lives, their relationships, and in their work, and at the same time are design professionals. They take their work seriously, but they are real. Somewhere along the way, "professional" became confused with "pretending to be dull, stilted grownups." You won't find that at Duoh! My goal, too, is lively authenticity. This is true when writing for a small, smart, famous design shop or a major corporation. Say what you need to say, then strip away any dead weight, and make it something people want to read — whether they are skimming or seeking more.

You assemble everything you need and start the text version of sketching. Then (you hope) you reach that indefinable moment that many designers have, when inspiration, experience, and problem-solving come together and a creative spark ignites the work. The aim is to deliver an experience that is narrated in a very specific voice, one that clearly reflects the "brand" and subliminally conveys the company's personality, while helping people discover, learn, or get things done. Interwoven with great design work, it all creates an experience that wins the user over.

We discovered that our opinions and work styles were virtually the same. We're into details, we laugh a lot, we work iteratively, we're picky as all get out, we feel confident and "at home" doing what we do, yet we are uncomfortable advertising ourselves in the usual ways. Our similar attitudes quickly built trust, and Duoh! unleashed me and said, "Have fun!" This doesn't mean they accepted everything without question, but we both enjoy collaboration and worked in synch, finessing the details. By the way, thanks to Geert for tolerating all the "girl talk." :)

We haven't met in person yet, but it felt as if Carolyn has known us for years. Working with her was a real pleasure. Sometimes I truly wondered if she was psychic, as if she had a sixth sense. No kidding! Her ability to translate who we are, what we stand for, and our way of thinking is, without a doubt, a true gift. She dances with words like we breathe air. Carolyn did a splendid job. Looking back at all our iChat conversations I see a newborn friendship. :)

One more thing

It took us a very long time to launch, but I do not regret it. We've made some smaller improvements in the past weeks that made a difference. The work you'll find in our portfolio doesn't date back further than 2007 and it only shows the work we wanted to show or can show. I think that's not bad for a two-headed design studio. :) Actually, we sometimes considered ourselves a team of three because we had a secret design guru named Mark Bixby help us out on several occasions with logos and some other work for clients. Mark is a wonderful guy to work with and is as picky and neat in his work as we are. Geert and I always got very excited when Mark showed us his work. The thing is, when you are that good a small studio can't compete when you get an offer too good to refuse and that's exactly what Mark got. It's true, Mark left us for MySpace, oops, sorry, I meant Facebook :D Anyway, Mark, we have a spot reserved for you here, whatever the future brings. ;)

Comments

  1. 1 DesignGirl Wed Oct 29, 2008 at 04.27 pm

    I love the new design!  I have been waiting with anticipation to see what you guys would come up with.  Every time I go to a new page I find design detail that I didn’t see on the page before (of course I have to go back and check).  Keep up the great work!

  2. 2 Oliver Wed Oct 29, 2008 at 05.39 pm

    Congratulations on the launch!
    Great site. Looks fabulous!

  3. 3 Luke Dorny Wed Oct 29, 2008 at 07.54 pm

    This so great. Rich, sprawling goodness everywhere.
    Nice job. It’s so visually engaging.
    High-Five!

  4. 4 unicef Wed Oct 29, 2008 at 07.55 pm

    Congratulations!
    fantastic refresh.

  5. 5 Brent Dickens Wed Oct 29, 2008 at 09.41 pm

    It’s wonderful to see graphic design pushed into every crevice of a website. Something not too common. I love all the the little touches you guys have injected. The site is so alive! Makes for a great visual exploration, what a start to the day :)

  6. 6 Tim Voskuilen Wed Oct 29, 2008 at 10.08 pm

    Really love the new design, so colourfull.
    Keep up the great work!

    Greets from the Netherlands

  7. 7 Niki Brown Thu Oct 30, 2008 at 01.25 pm

    Looks great! although not having my browser window open to a full screen i lose the quotes on the right. I’m on a 20inch iMac

  8. 8 Jan Vermeulen Thu Oct 30, 2008 at 01.49 pm

    Congratulations on the new site, it’s superb. Thanks for the beautiful write-up because you learn so much from reading how people work.

  9. 9 Veerle Pieters Thu Oct 30, 2008 at 08.54 pm

    Niki Brown said:

    Looks great! although not having my browser window open to a full screen i lose the quotes on the right. I’m on a 20inch iMac

    The art on the right is indeed only for people with big screens and meant as a surprise. We thought it would be an original and experimental approach.

  10. 10 Brianna Thu Oct 30, 2008 at 09.02 pm

    Just wanted to echo that I love the color palette. Looking forward to seeing more of your fantastic design in the future. Take care!

  11. 11 Jochenvde Thu Oct 30, 2008 at 09.05 pm

    Congratulations on the launch! The site looks just great! Realy inspiring, sparkling and innovative! Keep up the good work, you’ve got an extra fan!

  12. 12 ptamaro Thu Oct 30, 2008 at 09.07 pm

    Great post. I really like reading about process – especially the process used by great designers.

    It seems to me that every designer and every project is different (obviously), but there are some things that are consistent for both designers and projects, and remain the same or similar… The order may change during the engagement or design process, but to get the best results you need to have an approach that works in different situations.

    My favorite line is,

    Most of the time I just follow up the ideas that pop up in my head.

    Gosh, that makes me feel so much better about my own ‘process’! Thanks :-)

  13. 13 Thomas Decrick Thu Oct 30, 2008 at 09.11 pm

    I-stand-in-awe!

    Possible the most beautiful website ever, built by a Belgian web bureau. It’s magnificent!

  14. 14 Michael Short Thu Oct 30, 2008 at 09.13 pm

    Hey Veerle,

    I Must admit, when i first saw the page my first reaction was that i didn’t particularly. like it.  and I think that’s because of how wide the site is, but as I looked more and browsed it, it grew on me. Nice work :-)

  15. 15 Theo Thu Oct 30, 2008 at 09.16 pm

    Wow, stunning! At first I thought it was a bit busy, but after browsing a while it is very refreshing!

  16. 16 Pernilla Thu Oct 30, 2008 at 09.18 pm

    I just LOVE the new site, it’s so you!

  17. 17 Jason Armstrong Thu Oct 30, 2008 at 09.20 pm

    Wow Veerle! Beautiful and fantastic! I see why it took as long as it did. Great work!

  18. 18 Jon Williams Thu Oct 30, 2008 at 09.23 pm

    Love the Duoh! site. Looks fantastic on my 1920x1200 monitor. Keep it up!

  19. 19 Scott Thu Oct 30, 2008 at 09.26 pm

    As always, beautiful work Veerle (and Geert!). The site perfectly exudes yours and Geert’s character, charm, skills and attention to detail.

  20. 20 Daan Fri Oct 31, 2008 at 10.38 am

    I have to say, it’s a masterpiece! It really is cool, and I love the illustrations on the background, they are fabulous!

    Also, I think the design is very colourful, despite the fact of a dark and white background.

    Really GREAT work :D

  21. 21 Wendy Fri Oct 31, 2008 at 10.48 am

    Love the new web site. From reading your blog these past several months I think the new site reflects your personality and style completely. I also like the friendly tone of the content. Well done and best of luck to you both!

  22. 22 Morena Fri Oct 31, 2008 at 11.46 am

    Very well done you two! Congrats!

  23. 23 denbuzze Fri Oct 31, 2008 at 01.53 pm

    Good and refreshing design but I have a few remarks.

    1) Why did you use empty span tags in your navigation?
    2) I like the fact that you used the “skip to content” link to be complaint to the WAI standards, but why didn’t put it above the logo tag?

    Next to that I really loved digging into the site. Especially the following items:

    a) Your 404 pages
    b) The print stylesheet
    c) The wide screen backgrounds for high resolutions.

  24. 24 Veerle Pieters Fri Oct 31, 2008 at 01.56 pm

    denbuzze said:

    Why did you use empty span tags in your navigation?

    That has an accessibility reason, in case somebody turns off images so that still can use the navigation.

    I like the fact that you used the “skip to content” link to be complaint to the WAI standards, but why didn’t put it above the logo tag?

    I’ve put it there because I thought people would like to jump to the content immediately skipping all navigation including the logo because that’s a home link.

  25. 25 Olivier G. Fri Oct 31, 2008 at 08.08 pm

    Very impressive design. I’m a french web designer and I’m really fan of your work. I will try to make an analysis on my blog about the redesign of Duoh!. There are numbers of very interesting subtleties. Except the question of the design, I found some specificities in the XHTML coding and originalities in the manner of render the different pages. Your work is a great source of inspiration for me. I like the fact that your work causes debate and it’s what we want all around the web :) Respect for your job !

  26. 26 alex11sf Sun Nov 2, 2008 at 01.53 pm

    Once again outstanding work Veerle! This design has your style written all over it!

  27. 27 Abby Sun Nov 2, 2008 at 02.41 pm

    I see that your company site was delayed due in part to the blog, so I wanted to say that I appreciate all the time and effort that you have put into this blog. I have learned a lot and although I don’t comment often, I do stop by regularly to read your wonderfully helpful posts. Thank you so much for that, and congrats on the new site - it’s lovely.

  28. 28 Johnny Sun Nov 2, 2008 at 05.24 pm

    Thanks for the post Veerle, very interesting. I also think it would be great if you could do a post some time about the creation of the site, like maybe a guide for creating EE sites as a designer.

  29. 29 James Howard Mon Nov 3, 2008 at 08.37 pm

    Great site! Also really happy to see MooTools behind it - make a nice change from seeing jQuery everywhere!

  30. 30 Lakshmi Mareddy Thu Nov 6, 2008 at 02.46 pm

    I came to your site via unmatchedstyle.com, and am absolutely in love with the concept and presentation!  Its different and very nice…  Commendable effort..  I really liked the surprise art elements on the right!
    KEEP IT UP!

  31. 31 Carlos Hermoso Thu Nov 13, 2008 at 12.36 pm

    Hi!

    Congratulations for your new design! I just love the colors!