Post navigation

The Evolution of a Website Design

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

Ok so here goes.

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

Stage 2

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

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

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

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

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

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

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

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

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

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

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

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.

Excellent post Mike. I really love these kinds of insights into the way other designers work and to get a step-by-step breakdown with imagery is very cool. It's amazing how quickly you rattled through concept iterations, that's something I struggle with, often spending too long on one idea even when it's clear it's not going anywhere.

You've given me more confidence to step back from my work and take risks with other ideas, rather than be held to one idea simply because I spent too long on it and feel the need to justify the time…

OT: Something odd here with the comment text boxes in Chrome — text disappears and wraps oddly as you overwrite, only appearing when clicking outside the textarea?

Excellent post. Thanks for sharing how you spent 4 days of you life. So many times the client or boss only sees the final product and says "well that's not to difficult, what took you so long?" I would love to see more posts like this from designers (images and notes).

This is good to see Mike, what happens when Ryan wants to change something tho? Or is he involved throughout the process so can see where it's going? Or does it just trust you enough to deliver what he's after?

Can I ask what the point of the "non-tags" on the page are? They seem to have popped up in the last iteration of the design. They have clear "delete" icons in the form of a cross, but don't like anywhere (whilst looking like they should), and obviously the X doesn't do anything either.

Seems like a bit of a usability flaw, given they look like they should do *something*.

I love "Stage 5," I am so glad you decided to share that part of the design. There always seems to be a desperate moment in the project (for me) where I feel like there is no way it is ever going to work. Usually, not long after that moment, it all seems to fall into place.

Thanks for sharing! I (UX person) just had a great chat with the creative folks here about exactly this. One of the things I noticed was a challenge was content … and I would suggest that the remedy is a content strategist. Someone that tackles this prior to the IA to develop a content schema. Maybe this specific project was too high level from a content perspective but still I bet a CS would have helped. And on larger scale sites for sure we all need content strategy!

I have to say I’m 1000% impressed with the level of effort and thought that went into your article and the process you took to get to the finished product. At Staples we go through a very similar process except for the fact that we don’t get a chance to do a post mortem. I think your articles gives a level of insight that most designers do not experience. I applaud you for that.

You have inspired me to think about how I go through my process and what steps I take to get to the final product. Redesigning the Staples site has been a huge undertaking. I am looking forward to when it’s done and I can look back at the process as you have.

Love it, great overview of the process.
I think you captured the mood of a good design coming together very well
I think every web designer can relate, (especially to Step 6 – Complete Change of Direction) I know I can.

I'm curious what was used to create the wire-frame. It looks hand-drawn? Kind of a nice asthetic to it actually…

Now this is what I call the explanation of the process. It' quite a similar struggle I'm dealing with most of the time. It's very good, especially for the younger designers to understand that the design mostly DOESN'T happen instantly. It's a process.

Good to see a design starting with a wireframe sketch. Trying to get agencies who design websites to present this stage first without designing the entire site in Photoshop is impossible at the moment. The client then can't get their head around the fact that you don't have a 'Make a website' option in Photoshop and its done an dusted in an hour.

Fantastic article, many thanks for sharing. I can really relate to how you achieved the final result, and also how it's especially tricky while on a tight deadline – have found myself sweating on many occasions!

Nice to see someone writing about how the design process can sometimes take a while to come good. If I get designers block and I have the luxury of time, I often 'shelve' a design overnight to gain a fresh perspective the next day.

I do, however, think both the page and its placement on search engine results pages (SERPs) would benefit from additional text content. I ran the page through both Bruce Clay's Keyword Density Analyzer, http://bit.ly/1abmGB, and my Keyword Density Checker, http://bit.ly/wqIwI . I'd suggest modifying the design to implement additional text and then including Description and Keyword meta tags. The Title element having only 21 characters is under utilized. Populate the meta tags with long tail keyword phrases that are represented in the page content. Content is, after all, King.

The placement of the diagonal lines below the words Topics and Speakers in the screen grabs for Steps 11 and 12 (not present in the screen grab for Step 13) differs across the different browsers. View their placement on http://stackoverflow.carsonified.com in each of the following browsers, Camino, Chrome, Firefox, Flock, OmniWeb, and Shiira.

I do, however, think both the page and its placement on search engine results pages (SERPs) would benefit from additional text content. I ran the page through both Bruce Clay's Keyword Density Analyzer, http://bit.ly/1abmGB, and my Keyword Density Checker, http://bit.ly/wqIwI . I'd suggest modifying the design to implement additional text and then including Description and Keyword meta tags. The Title element having only 21 characters is under utilized. Populate the meta tags with long tail keyword phrases that are represented in the page content. Content is, after all, King.

The placement of the diagonal lines below the words Topics and Speakers in the screen grabs for Steps 11 and 12 (not present in the screen grab for Step 13) differs across the different browsers. View their placement on http://stackoverflow.carsonified.com in each of the following browsers, Camino, Chrome, Firefox, Flock, OmniWeb, and Shiira.

Really good design at the end, but I visited the actual site and I found it 'too big'. Or is my screen too small? I don't know, in your post previews things appeared to be smaller, with more blank space around… Hope you take it as a constructive critic!

Great job Mike! It is not easy putting this out there for everyone to see how it all comes together. I wish folks would do more of this so that people can learn from it. We had an article on our site that showed our process of how our site was built.

Great job Mike! It is not easy putting this out there for everyone to see how it all comes together. I wish folks would do more of this so that people can learn from it. We had an article on our site that showed our process of how our site was built.

I love finding out how other people come to the decisions they do regarding design. And actually seeing step by step how you work through the problems you encounter and how they influence the final design – priceless. You can really see when the penny dropped.

I really enjoyed hearing a nother designers struggle with designing. Sounds mean but it kinda means that everyone is human…I used to think great designs like this came from these designers who are so full of talent the design would flow out of them.

…so now I know even great design takes time and effort rather than just talent.

Internet is an ocean of information it gives lot of information that can help you accomplish the task. As such one can take the technology to their advantage to get right information from right source. "The Evolution of a Website Design" is really helpful for those who is learning web design.

Wow, what an awesome article. I’m new to site design and it’s really motivating to read how the pros do it! I was worried I was spending too much time on my design, but it’s good to know it took you 2 days just to come up with the concrete idea. Gives me hope I’m headed in the right direction. Thanks!

Thanks for the fun and insight into the process. It was fun to see what your sticking points where at different stages and how you found the right design element to move through it. Nice post & web design.

Nice write up! It is interesting to see someone else go through the process.

shmack, I don’t think the result is awful. Good design is not all things to all people. The only flavor of ice cream that everyone can agree upon is Vanilla. If what you are going for is Rocky Road, you have to do something different.

Great post and very familiar, nice to see how other designers go through the whole process – let there be more silly deadlines and great designs t’boot – btw great design love the layout and colorways keep up the good work!

I’m not a fan of the final result. The way the letters “V” “A” and “Y” extend down the screen does not sit well with me, and I wasn’t keen on the green button with a red border. I also didn’t like the kerning on the body text (in the Contact section). The kerning is far too tight and doesn’t make for clear reading. There seems to be some stuff that’s missing like the globe/map thing, which if included, would have made the website more visually interesting. The content boxes feels unfinished which makes the whole thing feel flat and boring.

Also, in my opinion, I think there needs to be more information about what DevDays is and the events for each city, especially for those of us who have never heard of DevDays. I mean, I didn’t know what DevDays was (yeah I’ve just crawled out from under my favourite rock where I’ve hibernated for a few months due to crushing boredom) and I’m not going to subscribe by email in the hope of finding out more about it. I get enough stuff in my inbox as it is. How many others might be thinking the same thing?

I did like the black and white photo in the background and I love the way there’s a column containing all the information off centre superimposed over the photo. You could add some more city names on the photo, because (in fullscreen) Firefox 3.6.8 I only see the word, “Toronto.”

Whilst there’s some good points about the layout design, overall the whole thing just feels rushed and unfinished.

Design process for some reason seems to be one of the hush-hush topics. I’ve always been dying to know more about how other designers think, how they come to the end result. It feels such a luck to find exactly that, furthermore – written by a professional of your magnitude. Your work is truly inspiring, and this design is definitely not an exception. Really helpful, thanks again!

Good Choice of the subject is very different with comparing to the other blog article subjects.Information are suitable and explain very well point of view. Next time expect more from you best luck for the future.

This is a very good piece of news from the world of Chango. Chango is a very good company and it knows what is it doing. The CEO of the firm is a very smart person and knows how to make tact and useful decisions. I like this new approach and am sure it will lead to a lot of profits in the future. Thanks for posting such a article, really appreciate it dude. Great.

Thanks for replying… just a quick point about the black diangonal lines… The reason they appear in different places is because they we not designed to stay in the same place. They move across the screen as you resize your browser window

lol. What are you doing here Matt? This is the internet and I'm not supposed to bump into people I know.

The progression of your ideas Mike have indeed been insightful. The end effect is punchy and well done. Who ends up paying for Matt's and Mike's overruns caused by bouts creativity nausia?!

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.