How I Designed in 1 Hour


Code Year is a great initiative by the folks behind Codecademy. The concept is simple: sign up to Code Year, and each week you’ll receive a new coding exercise. By the end of the year, you’ll be well on your way to becoming a coder.

Did you know Codecademy is hiring designers and developers right now? Take a look if you want to join a great startup!

So far more than 75,000 people have signed up for the newsletter, making this one of the most quickly successful projects I’ve ever been involved with by far! Here’s how it happened, and as I go I’ll also point out more general design principles or techniques using bright yellow notes thingies like the one just above.

10:32 pm: Open email

Last Friday, at 10:32 pm I received an email from Zach from Codecademy asking for some last-minute feedback and tweaking on a design they were getting ready to launch. At that point I didn’t know that the “last-minute feedback” would evolve into a full-on redesign, all in one hour!

The design Zach showed me was looking good, but we figured it could nonetheless be improved. First of all, it didn’t really grab your attention, as there was no strong focal point.

Also, it was a little too complex, as the “subscribe” and “share” steps were both present onscreen at the same time (whereas they now happen in sequence).

So despite the late hour, I said I didn’t mind helping, got the PSD, and hopped into Photoshop for a few quick touch ups.

10:40 pm: Launch Photoshop

You can guess what happened next. If there’s one thing designers hate more than anything, it’s working on somebody else’s Photoshop document. So I decided to open up a new document, set up a grid, and quickly reproduce the current design.

I ended up changing quite a few things, ending up with the design below:

Click for full size

I showed this to Zach to keep him up to date on my progress, but told him I could do better. I wasn’t satisfied with this because it lacked identity.

10:57 pm: Find the perfect font

I decided to try out a different font. Helvetica is nice, but it’s over-used and doesn’t really generate any emotion in the reader.

Using a standard font often means you’re missing an opportunity to make a statement and create a connection with the user. This is why I chose Museo Slab, a strong yet playful font that I knew was available on Typekit as a webfont.

Also, there was no central branding element. Even for a single-use site like this, I like having a strong brand, so I quickly mocked up a logo using Museo Slab as well. Here’s the result:

Click for full size

Simply changing the font made a world of difference. However, you’ll notice that’s not the current Code Year logo.

11:05 pm: Browse stock icons

I had originally picked a lightbulb (out of the Classic iconset from IconDrawer) to represent the “lightbulb going on” in your mind when you understand something new.

Just like knowing which font to use and when, having a good icon library is vital to being a good web designer (unlike you can actually draw them yourself, which is not my case!).

However I soon realized that a calendar would be much more appropriate (after all it says “year” right there in the name!).

I also added in the Twitter and Facebook buttons in the header, and moved the Codecademy logo to the left to make space for them:

Click to view full-size

11:13 pm: Hold texture try-outs

It was looking good, but I knew it was still missing something to “make it pop”. So I decided to try out adding a background texture to the page.

My process to pick a background is simple: try out all of them! That’s why you need good textures in your library. I suggest taking a look at

11:22 pm: Design the quotes

The last step was designing the little quotes that ended up replacing the big boring blocks of text in the final design.

Elements like quotes, testimonials, notices, etc. are a good way to break the flow of the page to refocus the user’s attention and slow them down. Kinda like the note you’re reading right now!

By then it was getting late, so I decided it to call it a day. You can see my final mockup below, and you can compare that with the live final result.

Click to view full-size

The moral of this story is that you don’t always need weeks –or even hours– to create something. Sometimes you just need to stop over-thinking things and trust your creative impulses. That’s what makes working with startups so great.


38 Responses to How I Designed in 1 Hour

  1. Pingback: Codecademy’s CodeYear Attracts 100,000 Aspiring Programmers In 48 Hours | TechCrunch

  2. Pingback: Codecademyの好調続く–今度はメールを利用するプログラミング学習Code Yearを立ち上げ

  3. Pingback: Code Year推出48小时获10万注册用户的背后:我是怎样在1个小时内设计出Code Year的网站页面的 | rss资源大全

  4. Pingback: Code Year推出48小时获10万注册用户的背后:我是怎样在1个小时内设计出Code Year的网站页面的 | 优酪网

  5. Pingback: How I Designed in 1 Hour | » Web Design

  6. Pingback: Web design & programming by simulacron3 - Pearltrees

  7. Pingback: Codecademy, aprendiendo a programar

  8. Pingback: Codecademy Code Year Sings up 100,000 to Learn Programming

  9. Pingback: How One Startup Got 100,000 Users In 2 Days @PSFK

  10. Pingback: designing Codeyear in an hour « YSOYS

  11. Pingback: Getting Technical in 2012 | Silicon Bayou News

  12. Pingback: [创业秘笈] 2011年彻底颠覆教育业,最火爆的Codecademy,5大成功原因 TechFrom系列3 | TechFrom科技源

  13. Pingback: Round up of 25 social media stories that you have to read this week

  14. Pingback: Veckans entreprenörsblänkare - Anton Johansson - Entreprenör24

  15. Pingback: Code Year:10 天吸引 28 萬人加入的關鍵 » MR JAMIE

  16. Pingback: Launch Watch: Publishing, Impossible Things and Serialized Fiction - Jade Craven

  17. Pingback: Speed Design From Code Year | PVM Garage

  18. Pingback: Codecademy, aprendiendo a programar « Juan Felipe Contreras

  19. Pingback: Doing vs Telling |

  20. Pingback: Lessons Learned from an eBook Launch |

  21. Pingback: Promoting Yourself as a Designer | Folyo Blog

  22. Pingback: Creative Link Building for Ecommerce Sites | Sphinx Web Design Experts

  23. Pingback: Please Learn to Code |

  24. Pingback: ¿La plataforma para aprender a programar se llama CodeCademy? Noticias

  25. Pingback: 请学习编程 - 博客 - 伯乐在线

  26. Pingback: isderek's Blog » Please Learn to Code

  27. Pingback: 分享评论:请学习编程-YinYan博客

  28. Pingback: 全民编程 | GP人生代码

  29. Pingback: [Foreign periodicals IT Comments net] universal programming | Information News

  30. Pingback: Sacha Greif Explains How He Earned $15,000 From Selling His E-book

  31. Pingback: A Collection of Design Case Studies |

  32. Pingback: Another way to STEM to tide of budget cuts | Utah Educational Technology Community

  33. Pingback: A way to STEM the tide of budget cuts | Tech Humanitarianism

  34. Pingback: Ending Code Year | Tangible Signs

  35. Pingback: Code Year推出48小时获10万注册用户的背后:我是怎样在1个小时内设计出Code Year的网站页面的 | 科技推

  36. Pingback: Discover Meteor Day |

  37. Pingback: Sacha Greif Explains How He Earned $15,000 From Selling His E-book

  38. Pingback: Code Year in Review

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>