如今，創(chuàng)意行業(yè)掀起的風(fēng)浪比以往任何時(shí)期都更加猛烈，其中的競(jìng)爭(zhēng)也越發(fā)殘酷，作為設(shè)計(jì)師，想要脫穎而出已經(jīng)是很困難的事情了。如果你還沒有自己的設(shè)計(jì)作品集，那么情況對(duì)你來(lái)說(shuō)也許會(huì)更加嚴(yán)峻。

從最基礎(chǔ)的層面上講，設(shè)計(jì)作品集就是你自己的廣告，它可以告訴世界：“嘿，我在這！看看我能做的東西叭！” 除此之外，作品集也是你的名片和畫廊，是你展示能力、技巧、項(xiàng)目經(jīng)驗(yàn)的地方；同時(shí)，你還可以通過(guò)它來(lái)表達(dá)接下來(lái)打算做什么事情。對(duì)我(英文原文作者)個(gè)人來(lái)說(shuō)，作品集還決定著人們是否會(huì)給我一份工作offer，或是找我合作項(xiàng)目。

作品集有著不同的展現(xiàn)形式，包括在線和印刷冊(cè)等等，它們所具有的一些精髓是共通的；本文中，我們將把注意力集中在在線作品集這個(gè)方面。

作品展示

與我們所熟悉的其他類型的網(wǎng)站產(chǎn)品相似，在線作品集也需要具有良好的信息結(jié)構(gòu)和導(dǎo)航模式，同時(shí)在可訪問(wèn)性、易讀性等方面具有上乘表現(xiàn)。你要盡最大努力讓你的作品集在被目標(biāo)用戶打開的時(shí)候可以完美的呈現(xiàn)你要表達(dá)的信息。

Scott Belsky是作品集制作工具Behance的CEO，在他看來(lái)，無(wú)論是公司項(xiàng)目還是個(gè)人項(xiàng)目，只要它們能夠展示你在設(shè)計(jì)方面的才華、風(fēng)格、熱情，那么就可以收錄到作品集當(dāng)中。對(duì)于每一個(gè)你打算展示出來(lái)的項(xiàng)目，要確保訪問(wèn)者可以首先了解到它的背景概況及設(shè)計(jì)目標(biāo)，然后再通過(guò)具體的圖片來(lái)展示你在不同階段的產(chǎn)出；這里所說(shuō)的圖片既包括作品全局，也包括重要部分的局部放大。

關(guān)于作品圖片的尺寸，Scott建議不要小于400像素(寬度)。有些設(shè)計(jì)師喜歡將作品圖片縮到很小，或是只展示其中的某些局部元素——這些做法都無(wú)法全面的展現(xiàn)你自己。另外，在作品全景及細(xì)節(jié)要素這兩方面都做到清晰的呈現(xiàn)，這也是設(shè)計(jì)師自信心的體現(xiàn)。

Sacha Greif是一名UI設(shè)計(jì)師，同時(shí)也是自由設(shè)計(jì)師工作信息公告板Folyo的創(chuàng)始人，他每天都能接觸到大量的作品集。在他看來(lái)，案例質(zhì)量的重要性確實(shí)要高于數(shù)量，不過(guò)至少5到6個(gè)項(xiàng)目展示也是需要保證的。如果你是一名畢業(yè)生或是相對(duì)年輕的設(shè)計(jì)師，無(wú)法拿出一定數(shù)量的設(shè)計(jì)案例，那么也不用太焦慮，最首要的是針對(duì)你手頭已有的案例盡量詳細(xì)的呈現(xiàn)其中的細(xì)節(jié)；當(dāng)然，個(gè)人項(xiàng)目也可以作為補(bǔ)充。此外，你還可以將一些學(xué)習(xí)和探索性質(zhì)的作品囊括進(jìn)來(lái)，例如幫Facebook重新設(shè)計(jì)一套頁(yè)面——只要你不會(huì)宣稱這是扎克伯格授權(quán)你做的就好。

在面試過(guò)程中，我們通常會(huì)根據(jù)目標(biāo)職位的實(shí)際情況來(lái)表達(dá)自己接下來(lái)的目標(biāo)及規(guī)劃；對(duì)于設(shè)計(jì)作品集來(lái)說(shuō)，也是一樣的道理。如果你心里確實(shí)已經(jīng)有了下一步打算，那么最好在作品集當(dāng)中著重突出那些與你的目標(biāo)最為相關(guān)的內(nèi)容。

文字內(nèi)容

“視覺”固然是設(shè)計(jì)師最為熟悉的信息媒介，但對(duì)于作品集來(lái)說(shuō)，文字內(nèi)容也是不可或缺的。優(yōu)秀的作品集可以使用很少的文字來(lái)的描述出項(xiàng)目相關(guān)信息；而且在很多時(shí)候，作品截圖難以表達(dá)出的東西卻可以經(jīng)由文字來(lái)展現(xiàn)出來(lái)，例如你的設(shè)計(jì)思路、解決方案的構(gòu)思過(guò)程、溝通協(xié)作能力等等。

很多設(shè)計(jì)師會(huì)在作品集的開頭使用一段簡(jiǎn)短而直白的文字對(duì)自己進(jìn)行介紹。這是一種很有效率的方式，不過(guò)要注意避免陳詞濫調(diào)；我們能看到的很多個(gè)人簡(jiǎn)介在實(shí)質(zhì)上等同于“我是一名工作勤奮、值得信賴的員工”。

雖說(shuō)是簡(jiǎn)介，也要在有限的篇幅中盡量做到具有針對(duì)性。例如Ethical Studio 簡(jiǎn)單而有效的將他們自己描述為“為非ZF組織、慈善團(tuán)體創(chuàng)建網(wǎng)站”的工作室；又譬如設(shè)計(jì)師Matt Dempsey 是這樣介紹自己的：“我為充滿激情與想法的小創(chuàng)業(yè)團(tuán)隊(duì)打造體驗(yàn)精良、符合用戶直覺的漂亮界面。” 通過(guò)這樣的文案，你不僅可以立刻了解到他是做什么的，而且對(duì)他所承接業(yè)務(wù)的方向也有了清晰的認(rèn)知。

最近搜羅了一些portfolio(設(shè)計(jì)作品集)方面的資源及方法文章，放著也是放著，不如匯總索引一下，有興趣有需求的朋友可以前去圍觀。至于需求是什么，大家也心知肚明唄；對(duì)于設(shè)計(jì)師來(lái)說(shuō)，干巴巴的文字簡(jiǎn)歷顯然是不夠的，看看國(guó)外同行們是怎樣打造自己的作品集還有個(gè)人案例展示站點(diǎn)的，興許可以找到一些思路和啟發(fā)。

另外，最近也向一些前輩們請(qǐng)教了這方面的實(shí)踐經(jīng)驗(yàn)，得到了不少金石良言；接下來(lái)花一兩期的篇幅專門做做這方面的文章也是有可能的叭。不多說(shuō)了，把目前看到的優(yōu)秀資源陳列在下面：

• 60個(gè)簡(jiǎn)潔的作品集設(shè)計(jì)匯總 (來(lái)自onextrapixel.com)
• Dribbble上的作品集設(shè)計(jì)案例
• 2012年的85個(gè)優(yōu)秀作品集網(wǎng)站 (來(lái)自webdesignersblog.net)
• 30個(gè)作品集設(shè)計(jì)案例 (來(lái)自smashingmagazine.com)
• 50個(gè)作品集站點(diǎn)，激發(fā)你的創(chuàng)意靈感 (來(lái)自smashingmagazine.com)
• Awwwards上的作品集設(shè)計(jì)案例
• 文章(英) - UX作品集 - 講你自己的故事
• 文章(英) - 通過(guò)10個(gè)步驟重新設(shè)計(jì)你的作品集網(wǎng)站
• 文章(英) - 打造完美的作品集
• 信息圖 - 為什么要將你的設(shè)計(jì)案例展示在線上

60個(gè)簡(jiǎn)潔的作品集設(shè)計(jì)匯總

討論方案時(shí)，設(shè)計(jì)師常會(huì)提議，某產(chǎn)品的某個(gè)元素（如按鈕或功能）設(shè)計(jì)的挺好，設(shè)計(jì)存在很多可能性，發(fā)散思維時(shí)不論對(duì)錯(cuò)。但實(shí)際應(yīng)用時(shí)，要考慮元素的應(yīng)用條件，切不可隨大流，盲目地照搬套用。選擇最合適的設(shè)計(jì)，而不是最流行最酷的，圍繞品牌特性做設(shè)計(jì)，讓產(chǎn)品形成與眾不同的氣質(zhì)。

比如錯(cuò)誤的提議：現(xiàn)在流行Metro風(fēng)格，我們也這樣設(shè)計(jì)吧。

較好的提議是：Metro風(fēng)格適合內(nèi)容型應(yīng)用，弱化按鈕的UI元素，突出內(nèi)容本身，而我們是工具型應(yīng)用，主界面需要突出某個(gè)按鈕或引導(dǎo)用戶執(zhí)行某項(xiàng)操作。

側(cè)邊欄

 

 

《重新思考應(yīng)用的架構(gòu)》

Re-Imagining the Browser With AngularJS , Igor Minar

Igor Minar 和大家分享先進(jìn)的前端開發(fā)框架——AngularJS。

《項(xiàng)目的國(guó)際化問(wèn)題》

Entschuldigen you, parlez vouz JavaScript , Sebastian Golasch (Video )

Sebastian Golasch 向大家介紹如何處理 JavaScript 項(xiàng)目中的國(guó)際化問(wèn)題。

關(guān)于Banner的設(shè)計(jì)，相信已經(jīng)有很多人都看過(guò)這方面經(jīng)驗(yàn)的分享了，我來(lái)公司也做過(guò)了一些Banner的設(shè)計(jì)，那在這其中通過(guò)不斷的學(xué)習(xí)、實(shí)踐積累了自己的一些小小經(jīng)驗(yàn)和方法，下面給大家淺淺的分享下我總結(jié)的Banner設(shè)計(jì)經(jīng)驗(yàn)。如有錯(cuò)誤，盡管拍磚，小女子虛心請(qǐng)教學(xué)習(xí)。

Banner設(shè)計(jì)其實(shí)是我們接觸互聯(lián)網(wǎng)工作后，最常見一種工作。那么Banner到底是什么呢？Banner的核心使命其實(shí)是吸引用戶關(guān)注，然后被點(diǎn)擊。他的主旨就是主題明確，突出關(guān)鍵內(nèi)容，抓住用戶眼球。一個(gè)Banner他是由“背景、主視覺和標(biāo)題文字”三部分組成，在我剛剛接到需求的時(shí)候，我首先分析他的重點(diǎn)詞、字，想要表達(dá)什么，分析好了后可以在紙上畫下草稿，在大腦里有個(gè)大概的視覺效果，想法多的話可以畫幾版不一樣的，最后根據(jù)草稿定一個(gè)定稿，接下來(lái)就可以找素材著手做了。在做期間，還要注意整體的美觀，讓人看起來(lái)舒服。
下面從這三部分逐一給大家分享下。

2.畫出線描后根據(jù)背景色的主色調(diào)對(duì)線條進(jìn)行粗細(xì)及顏色調(diào)整。然后再添加一些實(shí)物做一下對(duì)比。

“這個(gè)不符合用戶的心理”，“這個(gè)功能打破了我們產(chǎn)品整體的平衡性，放在這里在我看來(lái)是不太合理的”…

作為互聯(lián)網(wǎng)行業(yè)里萬(wàn)千鼠標(biāo)民工中的一員，諸如以上的對(duì)話，每天都在我們的生活中不斷演繹著。合理性慢慢的成為了檢驗(yàn)我們專業(yè)技能以及設(shè)計(jì)水平最重要的一種指標(biāo)；誠(chéng)然，足夠的合理性能夠?yàn)槲覀兯O(shè)計(jì)的產(chǎn)品保駕護(hù)航，能夠給其帶來(lái)可預(yù)見性的回報(bào)和收獲，但長(zhǎng)此以往，卻很難再出現(xiàn)令我們叫“WOW！！”的產(chǎn)品了。讓我們來(lái)看顆栗子~ 

iPhone5自9月13日發(fā)布以來(lái)，就受到了前所未有的神吐槽，在這一次，大家都能很明顯的感受到?jīng)]有了喬幫主以后，蘋果不再是創(chuàng)新界的翹楚了。

 

首先談一下“Metro”——由微軟公司開發(fā)內(nèi)部名稱為“ typography-based design language”（基于排版的設(shè)計(jì)語(yǔ)言）。


Metro是基于瑞士平面設(shè)計(jì)的設(shè)計(jì)原則（清晰，真實(shí)，美觀），來(lái)源于交通指示牌。生活中人們行色匆匆，更需要提供快速，簡(jiǎn)潔，直接，明確的設(shè)計(jì)?，F(xiàn)在的互聯(lián)網(wǎng)又何嘗不是如此，快捷獲取信息的同時(shí)，信息泛濫、龐雜無(wú)序，簡(jiǎn)潔之風(fēng)深入人心——減少元素，以顯現(xiàn)本質(zhì)。良好的排版有助于Web設(shè)計(jì)更加簡(jiǎn)潔有效。

 

越來(lái)越多的設(shè)計(jì)網(wǎng)站已在UI上走扁平式設(shè)計(jì)的路線。談到設(shè)計(jì)，無(wú)論是一個(gè)網(wǎng)站還是一個(gè)應(yīng)用程序，扁平化和極簡(jiǎn)的設(shè)計(jì)正在成為新的趨勢(shì)。人們正在遠(yuǎn)離一直很受歡迎的skeuomorphism設(shè)計(jì)（模仿實(shí)物紋理），蘋果推出iOS時(shí)許多設(shè)計(jì)師都采用它。


但隨著網(wǎng)站和應(yīng)用程序在許多平臺(tái)涵蓋了越來(lái)越多不同的屏幕尺寸，創(chuàng)建多個(gè)屏幕尺寸和分辨率的skeuomorphic設(shè)計(jì)既繁瑣又費(fèi)時(shí)。設(shè)計(jì)正朝著更加扁平化的設(shè)計(jì)，你可以一次保證在所有的屏幕尺寸上它會(huì)很好看。


 

下面給出一些扁平化設(shè)計(jì)很好的例子。