Web Design is a Journey

intro

Editor’s Note: Mike will be speaking at FOWD NYC on “Bucking Trends and Breaking Conventions”.

On the July 9th 2009 we launched a complete redesign of Carsonified and the Think Vitamin blog. I thought it’d be fun to tell you the story of how the new site design evolved and came to life. It was an interesting journey.

As the designers among you will know, working on your personal or company site can be a nightmare. It’s always super hard to get right … or finished. I did tons of design variations for the Carsonified site. I won’t show you every single one but I will show you all the significant stages the design went through.

This post isn’t so much about the final design as it’s about the journey I embarked on to get there … and I stopped off at some weird and wondrous places on the way. So lets start at the beginning.

The Brief

We’ve been talking about the redesign of Carsonified.com since December 2008. There wasn’t much of a brief but there were a few things the site had to do:

  • The homepage had to communicate what we did.
  • It had to express our company’s personality and beliefs.
  • It had to include the following pages: Home, Events, Mission, Jobs, Contact and Team
  • Think Vitamin was going to sit within the Carsonified site (whilst retaining it’s own identity).

The design of the site was down to me and as usual, Ryan gave me total creative freedom.

The Goals

My main goals from an aesthetic point of view were to make it striking, beautiful and to buck current web trends. It’s so important to me to feel like we’re pushing the boundaries of web design and what it is. I don’t always manage to do it but I need to try.

Stage One

These screen grabs are my first attempts at the new site design. I’ve been really inspired by clean, hard edged graphic design this year and I wanted to bring this into the Carsonified redesign. I’ve also been into large typography too. As you can see these designs are a bit crazy and I don’t even know if they’re any good or not but in a way that was the whole point. I was really trying to do something different and sometimes that means starting in places you sort of know the design will never end up.

I actually started to build some of these designs. One of the pages I built was a mission page. It was inspired by U2’s Zoo TV tour back in the early 90s. I had this idea of huge type, bold mission statement, TV fuzz and faded words in the background. So using an animated gif I made for the TV fuzz, and the Parallax effect for the words in the background, I created this mission page. You can check it out here: http://design.carsonified.com/zootv

Home page version 1

02

03

04

Stage Two

These two designs came off the back of a project we were doing for a client. They didn’t feel the design I came up with was suitable for them so I let it influence the Carsonified site design for a moment. It didn’t really come to anything unfortunately.

I was going to get the team to jump around like the guy in this mock up. (I don’t think the team we’re too keen on doing this!) These designs were very much an inspiration for the Stack Over Devdays site.

05

06

Stage Three

These designs were a fresh start. Using fractured colour blocks and customised Helvetica I created these mock ups. The typography was influenced by the slides I made for my talk at FOWD London 2009. To be honest I’m not sure where I was going with this but I still like some of the graphics here now.

07

08

09

10

Stage Four

Having not found my way with the previous design I decided to just punt out a couple pages and hope for the best. I don’t recommend this as the results aren’t normally that good … as you can see.

11

12

Stage Five

Still intent on retaining a very graphical style I produced a number of designs along these lines. The idea being that the shapes would shift around in the background when you move the browser window. I’d would have used the Parallax effect to do this. It was sort of influenced by the Channel 4 stings in which everyday objects make up the number ‘4’ when you view them from a certain angle. This is something I’d like to use the Parallax effect for in the future.

Something that is dawning on me at this stage is that the hard graphic style I want to use so much probably isn’t right for the company. Hard edged and graphical just aren’t Carsonified.

13

14

Stage Six

Not completely giving up on the graphical approach I try to breathe life into the design by bringing in more colour and generally trying to capture the Carsonified personality.

One of the main things I’m trying to communicate on the site is our love and passion for what we do – hence the use of the word ‘love’ and the hearts. I think it starts to happen here in parts but I still haven’t found what I’m looking for.

15

16

17

18

19

20

21

Stage Seven

I was starting to like the direction I was taking in the previous collection of screenshots but I felt they were perhaps too cold and still lacked the Carsonified personality. I spent some time putting together these ideas which I really really didn’t get on with … although they do have a relationship with the final designs.

22

23

Stage Eight

I decided to back to where I was at the end of Stage Six. I brought some hand drawn illustrations into the design to give it a more human feel. I worked up two designs for the home page that I was pretty happy with and one of these was going to be the home page – probably the second design. Looking back now though, I prefer the first.

It was decided: The Homepage was finally done.

24

25

There was a Problem

Although the home page had been decided on and I had a direction for the rest of the site, I still wasn’t happy.

That evening I went out for a run and as usual I was thinking about the redesign, hoping for a flash of inspiration. Then I got it. I ran past the Gap store in the town centre and saw these sale posters. There was something so hard hitting about their simplicity:

26

Stage Nine

I went home and spent the next three hours putting together the designs below. They’re almost as they appear on the finished site. The content just fell into place and I knew I had the new design in the bag.

I decided to go with the two colour per page thing as it would create the biggest visual impact. I choose to use a different background colour on each page because I think it says something about us as a comapny. I’m not entirely sure what that is but it definitely says it. It was slightly influenced by my memories of the way United Colours of Benetton used to use simple flat colours in their graphics.

I had probably spent six days designing everything else up until this point and then I cranked out the final design concept  in a couple of hours.

27

28

29

Stage Ten

From this point I pretty much knew what I needed to do. Draw … a lot!

One of the things I really liked about this new homepage design was the illustration of the real heart. It struck a chord with me.

Carsonified if a very human company. We’re all about people, and using the real heart illustration as opposed to a symbol of a heart brought that home for me. It seemed completely natural to carry on the theme of illustrated vital organs to convey this message. The effect is further enhanced by the choice of copy that accompanies each illustration.

30

33

34

35

36

37

38

The Think Vitamin Blog

As you know Think Vitamin now sits within the Carsonified site. Think Vitamin hasn’t really been redesigned, it’s just had a makeover. It needed to retain its identity and colour scheme as it’s a brand in itself.

Having the blog within the Carsonified site took a bit of getting used to but it’s working well now. Greg did a great job coding the WordPress theme and we continue to update and tweak the site now.

32

Conclusions

It’s been a great experience redesigning Carsonified. It was a slog at first but we’re all really happy with the end result. It’s always difficult designing something so close to your heart but one thing I’ve learned from this is that time restrictions can definitely be a good thing. To much time can mean too many explorations and that just becomes a road to nowhere.

There are still a couple of pages to be added to the new site. We’ll be adding a proper ‘contact’ page (we didn’t have time to finish it for the launch). Secondly we’ll be adding a ‘projects’ page which will give details of all the cool web related projects we do here at Carsonified.

Anyway I hope you found this journey interesting. It’d be great to hear your thoughts.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

86 comments on “Web Design is a Journey

  1. Nice post Mike! I always find it fascinating finding out about the journey that a great designer takes to get to the finished product.

    Some of those early mockups are absolutely amazing! I was actually thinking of doing a parallax effect on my new site, but decided against it. I’ll probably use it for one of my upcoming sites though.

    I still think you should make the team jump around for those photos. Do it for Lou’s birthday next month instead of the bumps…

  2. Nice intro into your ideas. I normally love typographic solutions but the current design just made me “WOW”. Rock on!

  3. “As the designers among you will know, working on your personal or company site can be a nightmare. It’s always super hard to get right … or finished.”

    I’m waiting at a crossroads as i type for the answer to that issue.

    1 design has the impact, final design has the love… it’s all about the message at the end of the day. You’ve made the journey from being ‘cool’ to ‘human’. I think the trend is for humans these days (I hope so).

    Thanks Mike for the output.

  4. Great to see your though process that went into this Mike. I ‘m glad to see the United Colours of Benetton analogy, that definitely sprang to mind when I saw the site. It’s funny how much a run can sometimes shed a whole new light, concept and thinking on a design :)

  5. Absolutely delightful. I can only hope my best designs are half as good as your throwaways! Well done, sir.

  6. Great to see such an open and honest post, that will resonate so strongly with all designers out there… good to see the trash as well as the sparkle, that we all have to go through, and it’s great to see we all have to get through those stages a lot of the time :)

    Looking forward to see the extra pages coming online!

  7. Great process! I would really like to see what Mike could come up with in the way of a ‘corporate’ site – alot of the Carsonified designs are very ‘fun’ and lively. It’s not that I don’t think he could do it, not at all, but it would be interesting to see and take inspiration from. :)

    • Yep. I’m curious about it too. It’s often frustrating to stuggle with corporate design, trying to find a way to make it unique within it’s inner restrictions. I’d like to see how Mike deal with it.

      • Yeah you totally have a point. The Carsonified site design was almost totally unrestricted design wise but that in itself created problems for me. So I think some restrictions are a good thing.

        In tackling a more restricted corporate site design I would start from the content and work out. I’d make sure I answered the brief first within the design then see how far I could push things to make the site more striking and interesting.

  8. A feast for the eyes that! And what a delight to see an open, transparent sharing of your inner processes. Look forward to more :)

  9. Great post Mike always enjoy reading about the design/building process of a well made site.

    At first I wasn’t so sure about the new Carsonified and the integration of ThinkVitamin but I now find myself coming back to the blog alot more (so works for me).

    Now after coming back and browsing the site a few more times I find myself feeling the Carsonified “feel” brand is alot stronger than it ever was before. Awesome :)

  10. Great post. Food for thought! Althought I must say, all of the graphic design ideas are very good in their own right, maybe just not found the right application…. yet.

  11. Great post here and I love the simplicity of the new design!

    One thing I’d like to know is where did the inspiration for the scissors and dashed lines come about? It’s a great idea :-)

    • I love using basic CSS to design with, so I tried using the thick dashed border. I really reminded me of coupons you would cut from the side of a cereal box which always had the dashed line with a scissors icon… so I used it here :)

  12. Really fascinating to see your process, mate. And also very brave of you, because now people are going to go out and steal your unused ideas! ;)

    I actually really love the designs in Stage Three. I agree that they weren’t right for the Carsonified brand, but I bet you could do some great stuff for another client using those ideas. Oh, and the total, utter breaking of web design conventions in the last image of Stage One gets lots of cheers from me! :)

  13. Pingback: VNOHosting » Carsonified » Web Design is a Journey

  14. Mike, great write up it’s excellent to see some of your other ideas, hope we get to see them developed in other projects.

    Also do you think there’s some subconcious reason that you came back to drawing stuff for the final version, that isn’t seen in the early iterations?

  15. This is something very generous of you to share Mike—and for Ryan to agree.Thanks a lot.

    What seems the most interesting for me in all of this is that your journey is very much one of a GRAPHIC designer. I mean, I love this industry, but designing for the web can sometimes become too technical or bureaucratic in a visual sense (as your thoroughly showed in your ‘The Lost Standard’ presentation recently or as debated recently when Doug Bowman left Google).

    I love to see you throw strictly visual ideas around. You definitely have goals to achieve and keep them in mind, but you don’t stop pursuing something that simply *looks great* because of this. That’s praiseworthy in it’s own merit, from a graphic designer’s perspective. And heart-warming from a web designer’s one. : )

  16. What I would like to know is how you translated the sketched pictures into real graphic designs. That’s what blew my mind the first time I saw the site.

  17. I don’t remember I’ve ever read about design process in a way that is so real and useful.

    Many thanks.

  18. While I really like the Our Hearts Beat Louder designs, the second one wouldn’t have worked so well for anyone who scales their text up a bit. The final design doesn’t have that problem (apart from one small thing – the arrow in .intro on the home page has a fixed vertical position which means it stays in place as the text increases in size and overlaps it).

    Like others have said, some awesome designs in there!

  19. This redesign is beautiful! Thank you for sharing the long and detailed process with us. As a growing web designer, it’s always inspiring for me to get to see how others work and the “chaos” designers go through to get a fantastic finished product!

  20. Thanks for giving such great insight into your process. We will soon be redesigning our site, and I totally feel what you say about how difficult it is to redesign something so close to your own heart – your post is a great help :-)

  21. Wow, what a truly great inspiring post you have here. Designers like normal and typical artists have a ‘keen’ eye and their creativity surpasses any visual metaphors. :)

  22. Pingback: furiousBlog – in my diatribe » Blog Archive » Day at the Ballpark

  23. Call me crazy, but I genuinely can’t see how the first 8 stages influenced the final design in any way. All they do is remind me strongly of the FOWD slides.

    • Hi Johnonolan,

      Thanks for your comment.

      You’re not crazy… The first 8 stages didn’t influence the final design. I ran past the GAP store and had a flash of inspiration and started again. Sometimes design is weird like.

      • But isn’t this the way, visually the first few designs might have sod all relation to the final product, but the process is as much about working out what isn’t going to cut it than final designs.

        In that sense, the early workings are heavily influencing the final product, and for me that’s what is so interesting (and bold) of this article – putting your heart and soul out there for all to see.

        Having said that, the results are STUNNING! Well done.

  24. Mike, this is fantastic! I appreciate you taking the time to post your incredible, 10-stage process. Reading how other designers problem solve and overcome designer block is always refreshing and inspirational to me. It’s funny how you can spend what seems like decades on a design then something will pop up and you’ll go in a completely different direction. Love the illustrations and final design…though I feel there are other ideas worthy of keeping in the ‘wonder drawer’ for later use as put by Chip Kidd. Cheers!

  25. I think this really goes to show why the early stage concepts are so incredibly important. It is in this stage when you realize the concepts, while stunning visually, don’t fit the brand or convey the message you want, which is extremely important to a company. However, the process brings you closer to the final product and no matter what, you’re always learning and growing and evolving what it should be. Honestly, I would’ve enjoyed any of the other concepts being developed for the new site (except maybe the all-red one, that could’ve been a nightmare for the colorblind :).

    Excellent work.

  26. Great post! I’m going through these same stages with my personal site. It’s so true what you said about designing something that’s so close to your heart! Very inspiring though. You made me see the light at the end of the tunnel.

  27. Great post and fantastic work, so much detail and depth. It’s very rare to find a post that showcases so much development work.

    I really like the new Carsonified website, bold, different, no glassy buttons, no grads or reflections – good to see a break from the web 2.0 mould.

    Gutted not to have been picked for the Carsonified Summer Camp, looked fun.

  28. Pingback: Carsonified » Web Design is a Journey « Badurally’z Blog

  29. Pingback: Monthly Interesting Links Roundup (July 2009)

  30. Your mock-up designs were fantastic, but yeah I definitely think you perfected the look and feel of the Carsonified web site. I love your use of giant elements and large font-sizes, typographical web sites are one of my favourite styles. Clean, crisp and awesome.

  31. Hi, thanks for sharing your web design journey. It’s a pleasant reading :D. And great works! Even the mocks are brilliant as well. Love the final outcome.

  32. I love that ‘click’ moment – you can be wading through a bog of iterations, getting nowhere fast and then it *clicks!* and everything falls into place.

    Great post.

  33. Really ace post, can appreciate the difficulty designing your own image. Loved reading about the different reasons and influences behind the design. Good work :)

  34. Really love the new design Mike- the contrast between the bold simplicity of the colours/large typeface and the carefully embellished hand-drawings made me vomit with envy/joy a little bit when I first saw it.
    To be honest, I’m almost more impressed you weren’t content to stop at Stage 3! Although I guess those shots do look more suited to print than web.
    Ryan’s a lucky man/smart guy to give you that freedom- for a company where its brand identity is at the very core of its business model, you’ve certainly added a great deal of value.

    Thanks for sharing the creative journey.

    All the best to you and the Carsonified team,
    Alex

  35. Excellent information – thank you. I will definitely recommend your site to my clients. Most people don’t know how important the things that you highlighted are.

    Thanks for helping spread the good word!

  36. I’m glad you decided to share your design process. I’m more a developer than a designer but recently I’ve been trying to sharpen up my design skills a lot more and posts like this lets guys like me, see how you think and where you get your idea’s and inspiration from.

    Overall I found this very interesting and I love the new design that you did for the Carsonified website.

  37. Pingback: Digital Media Buzz - Web Design is a Journey | Digital Media Buzz

  38. Hey Mike, It’s really nice you shared your journey with us – designers – specially. The way you have explained how the journey went was quite interesting. Not all designers like to do this kind of stuff. Thank you and keep up your good work.

  39. Pingback: Bram.us » Web Design is a Journey

  40. Pingback: Einzigartiges Webdesign ist eine Seltenheit! webdesign, interessant, inspiration | daswebdesignblog.de :: Artikel, Tutorials, Freebies und Interviews

  41. Awesome and brilliant!
    I think the Carsonified new design is very trendy and unique in its genre.

    Mike, you’re truly a very gifted designer.
    Thank you for sharing the whole process ;-)

  42. Nice read Mike, thanks for putting it together.

    I love the freshness of the new site and the illustrations are fantastic and so clean.

    Interesting approach. There are a lot of mockups in there. It seems you jumped right into Photoshop and started designing stuff. I’m not saying this is wrong, every designer has their way of doing things, but the general favoured method usually starts with ideas on paper, then wireframes (paper or digital) then design mockup. I’m curious if you did any layout sketching or wireframes first? And did you approach this brief differently to how you would approach a client brief?

    Also a big fan of the new blog design by the way.

    • Hi Lee,

      I have to be honest… as much as I would like to, I don’t actually have a set design process.
      Sometimes I start sketching first sometimes I don’t. It just depends what comes into my head.

      On this occasion you’re right… I didn’t really do any sketches first. This happened for two reasons.

      1. I new what had to be on the home page content wise and it was very simple (at this beginning stage).
      2. I really wanted to do something graphical and working in photoshop seemed appropriate. In a funny way I guess I did sketch out ideas first… photoshop sketches.

      I personally don’t think there’s is a right or a wrong way to go about these things. It’s just how it works best for you :)

  43. I agree there Mike. I know that *generally* it does pay to come up with a concept for a design on paper. But the limitations of the web can exist there as well, you can draw a header a sidebar and a footer just the same as you would on screen, you are stuck in that same rut paper or no paper.

    What you are searching for at the beginning of a design is an idea, a spark, something to hang the visual identity around, and if you restrict the way you explore this by saying ONLY computer or photoshop work, then of course you run the risk of cutting off an idea.

    Certain things like logos do generally work well on paper earlier as miniscule changes can take a while on the computer, but with a website, designing it on screen initially can fuel the ideas, so that when you go to your sketchbook, you have some idea of what will or won’t work.

    Of course in any case whichever way of working happens to suit the designer is the right one!

  44. I am simply blow away by this article.

    There is so much talent and creativity expressed in these designs, it just makes me feel happy and privileged to read about it! I love the idea of design as an evolution, looking at it in that light makes me think you don’t have to hit a homerun on the first draft of a design, but rather get some ideas on paper and let them evolve.

    These ideas were certainly true of my blog link I provided. The end result was nothing like the first couple go’s at it. It’s worth the time and energy if it means getting it right, though.

    Thanks again!

  45. Pingback: Lo Mejor Del 2009: Creatividad | Fuel Your Creativity Español

  46. Pingback: Friday Fix Dec 21 - 25

  47. Pingback: Best of 2009 in the Creative Industry | iDESIGN

  48. Pingback: Là où tout commence… Dans le néant ! « Web (Product) Design