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.