13 May 2009
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
(Note: Dates and cities shown in these designs were just provisional last week. See stackoverflow.carsonified.com for actual dates & cities)
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.
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.
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Eric Baker
# May 13, 2009 - 2:33 pm
http://www.youtube.com/watch?v=aeXAcwriid0
andrew
# August 10, 2009 - 6:45 am
thanks ^^
Daniel
# August 10, 2009 - 6:47 am
hi andrew
Daniel
# August 10, 2009 - 6:46 am
cool
Laura Kalbag
# May 13, 2009 - 2:44 pm
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!
Matt Hill
# May 13, 2009 - 2:58 pm
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?
Rick
# May 13, 2009 - 2:58 pm
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).
james
# May 13, 2009 - 3:07 pm
not a massive fan of the design personally – but interesting to see how it's been put together
Michael
# May 13, 2009 - 3:12 pm
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…
Rich Clark
# May 13, 2009 - 3:15 pm
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?
jmc
# May 13, 2009 - 4:03 pm
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.
Christopher Scott
# May 13, 2009 - 4:03 pm
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!
James Bloor
# May 13, 2009 - 4:39 pm
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!
BB Pagraque
# May 13, 2009 - 4:55 pm
Interesting process, especially to nondesigners such as myself.
By the way, when did "gonna" become a word?
Bradley Wright
# May 13, 2009 - 5:07 pm
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*.
latisse
# May 13, 2009 - 5:22 pm
Interesting post. Good to see the process. I personally like the Stage 11 design.
Ahsan R. Shami
# May 13, 2009 - 5:26 pm
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.
Indiana Web Design
# May 13, 2009 - 5:28 pm
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
Josh
# May 13, 2009 - 5:42 pm
Nice. But I am a bit color blind, so the red and greens don't help me… :(
Bradley Wright
# May 13, 2009 - 7:07 pm
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!
Sean
# May 13, 2009 - 7:37 pm
Excellent visuals of the design progression – btw: what happened to the Atlanta date?
shmack
# May 13, 2009 - 11:28 pm
nice read, awful, awful result.
Laura PortoStockwell
# May 13, 2009 - 11:39 pm
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!
@mimojito (aka Efren)
# May 13, 2009 - 6:38 pm
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!
bebopdesigner
# May 14, 2009 - 1:10 am
Thanks for the post. Really helpful. Beautiful outcome!
Francisco Espinoza
# May 14, 2009 - 1:28 am
¿what is the tool for make the wireframing?
Tom
# May 14, 2009 - 2:33 am
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…
roblef
# May 14, 2009 - 4:56 am
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. :)
Web Design Schritt für Schritt @Trocken im Norden
# May 13, 2009 - 11:45 pm
[...] Webseite Think Vitamin bietet einen interessanten Einblick in das Design von Webseiten. An einem Beispiel wird in [...]
Mike Kus
# May 14, 2009 - 6:53 am
Glad to hear so many of you can relate to this journey ;)
kaske
# May 14, 2009 - 7:18 am
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.
Design East Anglia
# May 14, 2009 - 8:12 am
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
Designaholic
# May 14, 2009 - 9:36 am
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.
Christine
# May 14, 2009 - 9:51 am
This was great – and fun to see. Thank you for sharing it!
Samgasper
# May 14, 2009 - 9:55 am
Nice site , in addition to this i would like to suggest you a site where you can find a Professional & reliable web designing & web development services at affordable prices.http://www.tec-z.com/
Peter
# May 14, 2009 - 11:29 am
That's a stunning design. As a design no hoper I found it interesting to follow the thought process. Well done.
PageRankSEO
# May 14, 2009 - 6:06 am
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.
aventbreast
# May 14, 2009 - 2:04 pm
Thanks! This is a very good presentation and a clear concept of how web site design evolves.
Dinu
# May 14, 2009 - 2:39 pm
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.
Joel Smith
# May 14, 2009 - 3:41 pm
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
RomuloAB
# May 14, 2009 - 5:37 pm
Well done behind-the-scences article
… but the final layout sucks. Sorry.
links for 2009-05-14 « Giri’s Blogmarks
# May 14, 2009 - 12:01 pm
[...] The Evolution of a Website Design (tags: webdesign) [...]
Henry Ho
# May 14, 2009 - 6:05 pm
It looks HUGE… :)
What tool did you use throughout the whole process?
Mike Kus
# May 14, 2009 - 9:01 pm
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 :)
Guilherme
# May 14, 2009 - 9:43 pm
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!
Acai Burn Reviews
# May 14, 2009 - 10:20 pm
Nice design and i love it. You did a great job mate.
Thomas Lewis
# May 14, 2009 - 11:17 pm
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. :)
links for 2009-05-14 « Mandarine
# May 14, 2009 - 10:12 pm
[...] The Evolution of a Website Design (tags: webdesign layout inspiration) [...]
Laurent
# May 15, 2009 - 6:19 am
No one minds about Comic Sans use in the first wireframe ? ;)
Rob Rix
# May 15, 2009 - 7:20 am
I am _really_ glad that I’m not the only one who designs like this.
Réalisation d’une conception graphique | bertrandkeller
# May 15, 2009 - 2:44 am
[...] The Evolution of a Website Design et comprendre les étapes de la conception [...]
rachearley
# May 15, 2009 - 9:51 am
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 :)
website design
# May 15, 2009 - 10:37 am
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.
Eric
# May 15, 2009 - 11:56 am
Damn, seeing Atlanta on the list got me excited, but I see that it is gone in the final design.
Charlie
# May 15, 2009 - 1:05 pm
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. :)
Evan Byrne
# May 15, 2009 - 5:14 pm
I love the final design, seeing how it evolved was pretty cool too.
Angela W
# May 16, 2009 - 12:12 pm
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."
azadcreative
# May 16, 2009 - 7:10 pm
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.
Interesting Finds: 2009 05.11 ~ 05.17 - gOODiDEA.NET
# May 17, 2009 - 7:50 am
[...] The Evolution of a Website Design [...]
Carl
# May 18, 2009 - 6:25 am
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.
webdesignlondon
# May 18, 2009 - 8:47 am
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.
ReTox
# May 18, 2009 - 11:00 am
Sorry, article is interesting, but final design sucks bigtime…
Keith M. Hyde
# May 19, 2009 - 4:37 am
Thanks for this nice article, I am really glad that i m not the only one who designs like this.
Acai
# May 19, 2009 - 6:07 pm
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.
sam
# May 20, 2009 - 11:14 am
An excellent site which has really shared a good information i thank for the site.
Michael L
# May 20, 2009 - 5:04 pm
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
Scott
# May 22, 2009 - 2:45 am
That post was awesome, Mike. It's great to see that someone else's process is somewhat chaotic.
Randy Fisher
# May 22, 2009 - 10:10 am
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.
what is the best appetite suppressant
# May 22, 2009 - 4:19 pm
experimenting is cool. this is the best thing to do because this attracts people. the more colorful and unique way you develop your design, the more attractive they are to the many people.
LISSA
# May 22, 2009 - 4:21 pm
That is some inspirational stuff… Never know that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here.
G2 Company
# May 23, 2009 - 12:15 am
Great post! Keep them coming!
Web Design Articles, Inspiration and News - May 2009 | Webreweries.com
# May 24, 2009 - 7:25 pm
[...] The Evolution of a Website Design [...]
free latin chat
# May 29, 2009 - 1:04 pm
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
sohbet
# June 10, 2009 - 9:59 am
thanks admin good post
News Carsonified » The Evolution of a Website Design | Web 2.0 Designer
# July 14, 2009 - 11:54 pm
[...] View post: Carsonified » The Evolution of a Website Design [...]
Adam
# July 17, 2009 - 1:45 pm
Great read, but any chance you could reinstate the images?
Ryan Carson
# July 17, 2009 - 2:09 pm
No problem – we’re already aware of the problem and it should be fixed soon!
kamal
# August 3, 2009 - 10:33 am
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 ??
Ticket Broker Guide
# August 14, 2009 - 4:45 am
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!
Five Technology
# August 17, 2009 - 2:07 pm
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.
Marcin
# September 5, 2009 - 4:26 pm
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
Charles Roper
# September 8, 2009 - 9:26 am
“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.
Acai
# September 12, 2009 - 9:50 am
Well, As a design no hoper I found it interesting to follow the thought process. Well done.
ADGA Intro to Web Design » Blog Archive » Class 4: Design Process
# October 2, 2009 - 6:59 pm
[...] of all, check out this article. It has a great write up of an evolving web [...]
Indianapolis Web Design
# October 6, 2009 - 1:23 pm
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.
wdct
# October 16, 2009 - 5:21 pm
Would be great to make a movie of the whole process, maybe a speed video.
amaudia
# November 11, 2009 - 3:29 pm
I’ll just like to tell you that… where buy tamiflu safely onine http://www.stumbleupon.com/stumbler/Buy-Tamiflu buy flu tamiflu and relenza on line Happy New Year!
I haven’t seen you for weeks. can you buy tamiflu over the counter buy tamiflu in merced ca
tamiflu where can i buy it I’ve enjoyed seeing you
Mike Kus
# May 13, 2009 - 3:18 pm
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 :)
Rich Clark
# May 13, 2009 - 3:26 pm
Wow, what an easy client he must be to work with!
Ryan Carson
# May 13, 2009 - 4:12 pm
I love that video :)
Ryan Carson
# May 13, 2009 - 6:10 pm
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.
Ryan Carson
# May 14, 2009 - 4:28 am
We use http://www.balsamiq.com for wireframing.
Design East Anglia
# May 14, 2009 - 8:13 am
Use a pencil
Mike Kus
# May 14, 2009 - 6:52 am
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 :)
Joel Smith
# May 14, 2009 - 3:43 pm
I so agree. lol
How many ugly concepts have you turned out at this stage? It's embarassing. hahah
Mike Kus
# May 14, 2009 - 8:51 pm
I started with pen and paper then used Photoshop to create page mockups :)
Mike Kus
# May 14, 2009 - 8:53 pm
thanks… like the Neville Brody comparison ;)
Ryan Carson
# May 15, 2009 - 8:14 am
We used http://balsamiq.com for the wireframing
ian_scho
# June 11, 2009 - 8:54 am
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?! :)