Last week I was presented with a design brief. It was to design and build a site to promote our new Stack Overflow DevDays event that’s happening this October.

Ryan gave me a rough wireframe detailing the content that needed to be included. The layout and design was down to me. As usual I didn’t have a bloody clue where to start… and I didn’t have long to do it. The initial hope was that I get it all done in just over 2 days.

So I thought it might be interesting to share with you the various stages of design the site went through before arriving at the finished design.

Here’s the wireframe Ryan put together for me

wireframe

Ok so here goes.

Stage 1

Stage 1

Stack Overflow DevDays is mainly gonna be a US tour + a gig in London. So I want a map or something to show where the dates are gonna be. I was going to use a flat map but decided a globe was cooler. I drew the globe based on one I bought from istockphoto.com

(Note: Dates and cities shown in these designs were just provisional last week. See stackoverflow.carsonified.com for actual dates & cities)

Stage 2

Stage 2

I have a play with the globe I bought from istockphoto.

Stage 3

Stage 3

I’ve sort of decided I’m gonna use the illustrated globe. So I colour it and experiment with large city names in the background. I’m thinking the globe will be the focal point of the page, so I’m working from that outwards.

Stage 4

Stage 4

I decide it needs some texture and add some descriptive copy. I’m ditching the large city names too.

Stage 5

Stage 5

I’m not feeling that good about the design at the moment as it’s shit. I’m grasping at straws and adding stuff in the hope it’ll come good.

Stage 6

Stage 6

I make a compete change of direction that doesn’t come to much but at least clears my head.

Stage 7

Stage 7

I’ve now decided to take a slightly more graphical approach. One of the problems I’m having at this stage is trying to place all the logos… Carsonified, Stack Overflow and Devdays logo/title.

Stage 8

Stage 8

I’m now trying to make the “Devdays” more of a feature and experimenting with colour. I like the yellow, grey and black πŸ™‚

Stage 9

Stage 9

I bring the city photos into the design. The reason it’s a picture of New York at this stage is just because that’s what I have lying around on my machine.

Stage 10

Stage 10

This is the breakthrough moment. I know at this point that it’s all going to be ok. I stop sweating.
A few things happened here. Firstly, I sacked the Carsonified logo from the top of the page and now it says “Carsonified presents”. This takes away the logo placement headache. Secondly I manage to make a feature out of “Devdays”. I got this idea idea from my FOWD Slides… I don’t know why I didn’t think of this earlier! Thirdly I can see a content structure falling into place. Thank f*** for that!
Believe it or not it took me the best part of 2 days to get this far. The reason there’s not that much physical design to show for it is because I spend just as much time thinking about the design as actually outputing designs. I’m now behind on the project big time… but what can you do? I tell Ryan – he understands πŸ™‚

Stage 11

Stage 11

I Experiment with a new colour scheme which I really like and also go back to using the more graphical globe from istockphoto. This green and red colour scheme is influenced from a safe sex advert that appears on Spotify.

I also decide at this point that I’m going to use the Parallax Effect thingy. It was something I was gonna save for the new Carsonified site design but I couldn’t wait. Besides I think I’ll just use it again in a different way.

Stage 12

Stage 12

I finish designing the content and change the colour scheme. I think I’ll go with this one.

Stage 13

Stage 13

@keirwhitaker calls over to me… “Hey Mike, have you seen that safe sex ad on Spotify? It has a really nice colour scheme.” At which point I’m like “yeah” and promptly open up the previous version of my design to show Keir. I then realise it’s way better than the washed out aqua version (in my opinion). Job Done πŸ™‚

Stage 14

I just have to build it now… which is a welcome break from designing πŸ™‚

The Design and build took me just over 4 days in the end. Twice as long as planned… but I guess design isn’t an exact science… it just takes you where it takes you… or you take it.

You can see this finished site here stackoverflow.carsonified.com

I hope you found this interesting and I’d love to hear how this compares with your experiences.