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

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

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

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

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

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

晚上10點(diǎn)40分

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

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

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

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

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

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

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

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

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

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

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

11點(diǎn)22分：引語設(shè)計(jì)

最后一步便是設(shè)計(jì)引語了。引語非常重要，好的引語能夠吸引用戶的注意力。

就這樣，我在一個(gè)小時(shí)之內(nèi)設(shè)計(jì)出了Code Year網(wǎng)站的頁面，效果圖如下：