一個(gè)小時(shí)內(nèi)設(shè)計(jì)出Code Year 推出48小時(shí)獲10萬(wàn)注冊(cè)用戶(hù)

2012/1/5 11:58:37來(lái)源：36氪

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

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

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

晚上10點(diǎn)32分：打開(kāi)郵件

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

晚上10點(diǎn)40分

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

我將我的工作進(jìn)展向Zach進(jìn)行了匯報(bào)，并承諾我能在這個(gè)基礎(chǔ)上做得更好，因?yàn)樯厦鍯ode Year網(wǎng)站頁(yè)面的效果并不是很好，缺乏個(gè)性。

10點(diǎn)57分：字體選擇

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

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

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

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

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

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

晚上11點(diǎn)12分：背景選擇

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