Code Year48 hours 100,000 users behind: 1 hours to design the site page

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Code year launched 48 hours to get 100,000 registered users behind: How did I design the code year's website page in 1 hours

In the Fun programming website Codecademy launched New Year programming project code only 48 hours later, code year registered users have exceeded 100,000. Sacha Greif, the designer of the code year website, is here to share with us how he designed the Code year website page within 1 hours.

Evening 10:32: Open mail

Last Friday evening 10:32, I received an email from Codecademy co-founder Zach, who showed me the original design of code year and asked for my advice on this. He and I both feel that code year's website design has a place to improve. So I agreed to redesign the code year website in a very short time.

At 10:40

You can imagine what will happen next. If you want to list what the Web designer hates most, then work on someone else's PSD will definitely get you elected. So I decided to use a new PSD, create a grid, and redesign the code year website. In the end, I did make some changes to the original code year design, as shown below:

I reported my progress to Zach and promised that I could do better on that basis because the code year website page didn't work very well and lacked individuality.

10:57: Font Selection

I decided to choose another font. Helvetica is good, but there are so many people in this font that it's hard to resonate with web surfers. Using standard fonts often means you lose the opportunity to innovate and reconnect with your users. So I finally chose to use Museo Slab font, because this font will give a strong visual impact, and more beautiful.

However, there is also a lack of brand elements on the website. Even for a single purpose web site like code year, I want the brand to be prominent. So I used Museo Slab font design a logo, the effect is as follows:

Just by changing the font can make a great difference in the site effect. However, the above design is not the final design.

11:5: Icon Selection

On the selection of icons, I began by choosing a light icon from icondrawer, meaning that whenever you learn new knowledge, a lamp shines in your heart. As with choosing which font to use, having a good icon repository is very important for web designers, unless you can draw a better icon yourself.

However, compared to the lamp icon, I think the calendar icon is more appropriate, after all, the code year is a New Years programming project, and finally chose the calendar icon. In addition, I moved the Codecademy logo at the center of the top of the page to the left to make room for the Twitter and Facebook share buttons. The effect chart is as follows:

Evening 11:12: Background selection

The image above looks pretty good, but I always feel that there are drawbacks that make it more appealing. So I decided to add a background texture to the Web page. My choice of background is very simple, try a variety of backgrounds, see which is the most suitable. So having a background repository is also very important for web designers. I suggest you can look at subtlepatterns.com.

11:22: Speech Design

The final step is to design quotations. Quotations are very important and good quotations can attract the attention of the users.

In this way, I designed the Code year website page within one hours, the effect is as follows:

The reason why I want to share my experience with you is to illustrate a problem that you don't have to spend days or even longer to design a good thing. Sometimes all you need is to believe in your sudden creative ideas and not carry too heavy a burden of thought. This environment, which can give full play to one's imagination, is often provided only by start-up companies.