一個小時內(nèi)設(shè)計出Code Year 推出48小時獲10萬注冊用戶

2012/1/5 11:58:37來源：36氪

下面我們將一起揭秘Code Year推出48小時獲10萬注冊用戶的背后--我是怎樣在1個小時內(nèi)設(shè)計出Code Year的網(wǎng)站頁面的。

之所以圖趣想向大家分享這次經(jīng)歷是想說明一個問題，要想設(shè)計一個好的東西，你不一定非要花上幾天甚至更長的時間。有時你需要的只是相信你那突如其來的創(chuàng)新想法，不要背負太沉重的思想包袱。這種能充分發(fā)揮個人想象力的環(huán)境在很多時候只有創(chuàng)業(yè)公司才能提供。

在趣味編程網(wǎng)站Codecademy推出新年編程項目Code Year僅48小時后，Code Year的注冊用戶已突破10萬。Sacha Greif是Code Year網(wǎng)站設(shè)計者，他在這里向我們分享了他是如何在1個小時內(nèi)設(shè)計出Code Year網(wǎng)站頁面的。

晚上10點32分：打開郵件

上周五晚上10點32分，我收到了Codecademy聯(lián)合創(chuàng)始人Zach發(fā)來的郵件，他在郵件里向我展示了Code Year的最初設(shè)計方案，并就此征求我的意見。他和我都覺得Code Year的網(wǎng)站設(shè)計有需要改進的地方。因此我同意用很短的時間對Code Year網(wǎng)站進行重新設(shè)計排版。

晚上10點40分

你可以想象接下來會發(fā)生什么。如果要列出網(wǎng)站設(shè)計者最討厭的事是什么的話，那么在別人的PSD基礎(chǔ)上進行工作絕對能當(dāng)選。因此我決定使用一個全新的PSD，創(chuàng)建網(wǎng)格，對Code Year網(wǎng)站進行重新設(shè)計。最后我的確對原先的Code Year的設(shè)計做出了一些改變，效果圖如下：

我將我的工作進展向Zach進行了匯報，并承諾我能在這個基礎(chǔ)上做得更好，因為上面Code Year網(wǎng)站頁面的效果并不是很好，缺乏個性。

10點57分：字體選擇

我決定選擇其它的字體。Helvetica很不錯，但用這種字體的人太多，因此很難引起網(wǎng)頁瀏覽者的共鳴。使用標(biāo)準(zhǔn)的字體常常意味著你失去了創(chuàng)新并與用戶重新建立聯(lián)系的機會。因此我最終選擇采用Museo Slab字體，因為這種字體會給人一種強烈的視覺沖擊，而且比較美觀。

然而網(wǎng)站上還缺乏品牌元素。即使對像Code Year這樣單一用途的網(wǎng)站，我也希望品牌能夠得到突出。因此我用Museo Slab字體設(shè)計了一個Logo，效果圖如下：

僅僅通過改變字體就能使網(wǎng)站效果有很大的改觀。然而，上面這個設(shè)計并不是最終的設(shè)計方案。

11點5分：圖標(biāo)的選擇

在圖標(biāo)的選擇上，我一開始從Icondrawer里選擇了一個電燈圖標(biāo)，意思是每當(dāng)你學(xué)到新的知識，一盞燈就在你心中照亮。和選擇使用哪種字體一樣，有一個好的圖標(biāo)儲備庫對網(wǎng)站設(shè)計者來說非常重要，除非你自己能畫出比較好的圖標(biāo)。

然而，相比電燈圖標(biāo)而言，我覺得日歷圖標(biāo)更為合適，畢竟Code Year是一個新年編程項目，最后選擇了日歷圖標(biāo)。此外，我將位于網(wǎng)頁頂部中央的Codecademy的Logo往左移了移，為Twitter和Facebook的分享按鈕騰出空間。效果圖如下：

晚上11點12分：背景選擇

上面的效果圖看起來已經(jīng)很不錯了，但我總覺得還缺點能讓它更為吸引人的東西。因此我決定為網(wǎng)頁添加背景背景紋理。我選擇背景的方式非常簡單，試用各種背景，看哪種最合適。因此有一個背景儲備庫對網(wǎng)頁設(shè)計者來說也非常重要。我建議大家可以看看SubtlePatterns.com。