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

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from 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

123 comments on “The Evolution of a Website Design

  1. Thanks Mike, that's a real insight, especially seeing the difference between your first and final designs.

    Great the way the DevDays title echoes the design of your FOWD talk poster – total print influencing web!

  2. 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?

  3. 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).

  4. As a guy who's just learning web design, this post is really helpful. I like seeing how the process works and would love to see more posts like this.

    It's funny how the wireframe and the final design differ…

  5. 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?

  6. This result isn't my style, but I like this post.

    I *really like* the effect with the city names/images in the background as you resize the window. Too bad more people won't see it.

  7. I have to agree with Matt Hill, that I tend to spend way too much time on little pet-elements that I either: love, want to use, or feel like I have to use.

    My biggest takeaway: don't fear the initial concept-exploring stage.

    Just love seeing this type of stuff. Very inspiring, and uplifting. Thanks so much!

  8. Nice post Mike – always interesting to see a design process from start to finish.

    Also nice to see that even you get creative block / panic sometimes!

  9. Interesting process, especially to nondesigners such as myself.

    By the way, when did "gonna" become a word?

  10. 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*.

  11. Lovely work. It's great to see where you started and how you progressed to the end result, with your thoughts peppered in between.

    And what an end result — wow! Love the protruding edges, esp on the D and S of the title.

  12. 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.

    -Dan Finney

  13. Really? My apologies to the designer then.

    You should make them links to SO, or maybe in the future a link to the slot talking about iPhone apps or whatever. Make good use of the "link-alike" styling. The first thing I did was click on them!

  14. 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!

  15. 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.

    Again great job!

  16. 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…

  17. It's like you live in my head, saying hte same shit I do when designing anything, from website to business card to company logo. Fantastic insight, and it lets me feel a little less of a freak. :)

  18. Pingback: Web Design Schritt für Schritt @Trocken im Norden

  19. 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.

  20. 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.

    Like the design – very Neville Brody

  21. 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.

  22. That's a stunning design. As a design no hoper I found it interesting to follow the thought process. Well done.

  23. Great to follow the thought process step by step through the development. Also, pleased to see the http://stackoverflow.carsonified.com page validated, http://bit.ly/12exhc . Kudos!

    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.

    Thanks for sharing.

  24. Great to follow the thought process step by step through the development. Also, pleased to see the http://stackoverflow.carsonified.com page validated, http://bit.ly/12exhc . Kudos!

    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.

    Thanks for sharing.

  25. Awesome posts. I really like posts like this where we get a peek into another designers creative process. This kind of post is rare, so thanks for sharing. Awesome end result as well.

  26. Thank you so much for sharing this. It's comforting to know that I am not the only person who can go seven different ways before I get to great design.

    I am reminded of a quote:
    "If I had six hours to chop down a tree, I'd spend the first four sharpening the axe."
    – Abraham Lincoln

    Only, in this case.. designers really have no resource but to sharpen the axe for each design. haha

    Thanks! :D

  27. Well done behind-the-scences article
    … but the final layout sucks. Sorry.

  28. Pingback: links for 2009-05-14 « Giri’s Blogmarks

  29. Thanks for all the comments. Like some people have already said it's great to hear that other designers go through similar processes and experiences…. and it feels good to talk about them :)

  30. 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!

  31. 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.

    The article: http://www.visitmix.com/Articles/Web-Design-from-

    Thanks for sharing and being brave. For those commenters knocking it down, stop bogarting love. :)

  32. 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.

    The article: http://www.visitmix.com/Articles/Web-Design-from-

    Thanks for sharing and being brave. For those commenters knocking it down, stop bogarting love. :)

  33. Pingback: links for 2009-05-14 « Mandarine

  34. Pingback: Réalisation d’une conception graphique | bertrandkeller

  35. Great article Mike. Great insight into the thought process and to see how is evolved. I love that you panic about design too, it makes me feel quite comforted :)

  36. Great article post….this article is useful for those who are learning website design.So there are some various stages of web design are explain above in article.

  37. 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. :)

  38. Great article, Mike. It's nice to read about a creative process. As for the design, I think the "Topics" would have been better than the "Tags."

  39. It is wonderful to see how other designers get their work done. My own process is quite similar but some design decisions are made by account managers and the clients.

    The red and green scheme works very well. Very bright and eye-catching. Well done.

  40. Pingback: Interesting Finds: 2009 05.11 ~ 05.17 - gOODiDEA.NET

  41. 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.

  42. 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.

  43. I have to agree with Matt Hill, that I tend to spend way too much time on little pet-elements that I either: love, want to use, or feel like I have to use.

  44. Saw your tweet and decided to check out your site.
    I thought I was the only one that had these headaches and internal battles during a design process.

    Thanks for sharing

  45. That post was awesome, Mike. It's great to see that someone else's process is somewhat chaotic.

  46. Excellent 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.

  47. That is some inspirational stuff… Never know that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here.

  48. Pingback: Web Design Articles, Inspiration and News - May 2009 | Webreweries.com

  49. Wow! realy nice! I love the last design.. I think I'm gonna take it to start making my own web site.. thanks for the tips buddy!! ;)

    Great!
    Josue

  50. Pingback: News Carsonified » The Evolution of a Website Design | Web 2.0 Designer

    • No problem – we’re already aware of the problem and it should be fixed soon!

  51. S*** what an inspiration…
    Design is not easy as it look… :]

    I always get stuck if I design web page… I see u too.. :] can you get me an idea how to get out from this situation ??

  52. 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!

  53. 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.

  54. Great article mate!

    It’s always nice to get an insight into how other designers work. We sometimes forget that not all designs came from that one brilliant eureka moment.

    Some needed a quite a lot of massaging, sweat and tears to get anywhere.

    Thanks again!
    – Marcin

  55. “I’m not feeling that good about the design at the moment as it’s shit.”

    LOL – that’s how I seem to feel 99% of the the time when I’m designing.

  56. Pingback: ADGA Intro to Web Design » Blog Archive » Class 4: Design Process

  57. 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.

  58. Pingback: Is Your Site's Navigation SEO-Friendly? | SEO Agency News

  59. 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!

  60. Pingback: The Evolution of a Website Design « Digital Fireball

  61. 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.

    Did you actually do any rough sketches before diving into Photoshop?

  62. Amazing. The main layout is professional looking but also I don’t like the way the letters “V” “A” and “Y” extend down. The final result looks good

  63. This is AMAZING. Thank you so much!

    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!

  64. 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.

  65. 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.

  66. Pingback: The Evolution of a Website Design – Treehouse Blog « Tips On Web Design

  67. I can see from Ryan's wireframe what he wants and as long as it's all on the page an clear he totally trusts me on the design side of things :)

  68. Joel (Spolsky) specifically requested they match the look of the 'tags' on Stack Overflow, so the audience of SO would identify more with the design.

  69. 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 :)

  70. I started with pen and paper then used Photoshop to create page mockups :)

  71. 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?! :)