設計師準備線上作品集的體悟

休息了半年,最近要開始求職卻發現自己從來都沒有一個個人線上作品集。開始著手整理作品集,花短短的幾天弄了一個堪用的個人作品集網站,就心滿意足地去休息了。
早上醒來發現自己的個人網站很不成熟,仔細地反省思考,整理了這段短短歷程的體悟。
為什麼需要個人網站?
為什麼需要個人作品集網站?其實還有很多網站可以呈現個人作品,以下僅列出比較多人用以呈現作品的網站,並簡單比較三者間的優劣:
Dribbble
Dribbble 讓設計師上傳自己正在進行的專案片段,在 Dribbble 裡面能上傳作品的我們稱為 Dribbble Player,要成為 Dribbble Player 需要受到其他 Player 邀請。
- 速度:高
- 呈現:低
- 客製:低

Behance
由 Adobe 建立的作品集網站,有完整的格式與一定程度的客製化功能,用於呈現 UI 設計、影音、平面設計等作品都很適合。
完成專案後可以透過關鍵字增加自己作品的曝光率,建置的困難程度低,非常適合入門
- 速度:中
- 呈現:高
- 客製:中

個人網站
這裡不是指 Wix 、Tumblr 等網站,而是自己寫一個網站。
你可以做出任何你想要做的效果與版面,也因為這種高度自由增加了建置的難度。
雖說難度高,但你可以透過個人網站呈現你的風格、特質,在高度客製化的版面下體現專案的內容,也可以展現自己三腳貓的網站開發功夫(就是我)。
- 速度:低
- 呈現:高
- 客製:極高
當然,這篇文章是寫製作個人網站時的體悟,因此我選擇個人網站這途。
體悟一:千萬別急著開始做
我知道急於做出作品集的心情,但先急著起跑,這是我第一個體悟。
我是一個慢郎中,但這世界的步調隨著網路開始加速,因此不落人後的想法充滿腦中,我開始想網站架構,想個大概,畫完簡單的設計就開始上版。
考慮不周的結果就是沒考慮 RWD,專案頁面的版面如何呈現?圖片要有多大?專案頁面會有哪幾種版型?
操之過急只會讓自己陷入 HTML 跟 CSS 語法當中,而沒辦法專注在作品的呈現,造就了朋友說的「逼格」很高的詭異網站。
回到原點,從整理作品開始吧
隔天看了自己做出很屎的網站後,我發現因為時間的壓力迫使我做出蠢事。
一般在設計之前,會先蒐集資料、研究等等(這裡就不贅述方法論),而設計個人網站時也是一樣的。
整理作品就好比設計前的蒐集資料與靈感,一開始要先知道自己有多少作品,分門別類,分類整理之後也清楚自己缺乏哪部分的作品,可以透過自由創作或再設計專案來補強。縱觀作品後,也可以知道自己過去的作品是否有哪些瑕疵或遺漏,在這次也順便補上吧。
備註:有些設計專案是接案時製作,有保密協定的話需要衡量一下如何呈現以免觸法。
體悟二:了解作品集網站的本質
個人網站比其他作品網站多了一點:高度客製化。
高度客製化賦予網站一個形象,代表我們自己的形象,你希望呈現怎麼樣的形象給別人呢?
這步驟很花時間,將個人網站視為是一個「作品」,盡情地發展設計概念,不斷延伸出更多設計(例如網站 C.I., Guideline 等等),但這會讓個人網站製作的進度窒礙難行,因為隨著規模大小提升,有更多的細節需要精心設計。
因此我認為把個人網站當作設計專案來做,一個非常簡易的設計專案(之後會講為什麼要簡易)。
抓住一個概念後就可以去嘗試套用風格,這裏就不需要把設計的規模想得太大。
網站本質,它是一個載體
回歸個人網站的本質,個人網站的用途是什麼?
除了呈現個人的形象與風格外,更重要的是呈現「作品」,而網站本身只是個載體。
可能有人會問,那要怎麼展現個人風格,我認為可以從小細節出發,例如:
- 介面上元件的互動(動畫的設計)
- 網站字型(盡量選 google font 上的,畢竟免費)
- 配色
- 元件的設計(小巧的元件也可以讓人有不一樣的感受)
光上述四種就足以變花出非常多種網站風格,公司在觀看的時候也可以知道你配色的能力、元件設計等能力。
體悟三:網站架構簡單就好
決定風格後你會開始想網站要有哪些頁面,我要有個首頁、作品首頁、作品集頁面和關於我頁面 blah blah…
回到體悟三,控制網站本身的規模,讓個人網站的架構更簡單,架構簡單的好處有:
減少迷路的機會
簡單的架構也降低瀏覽者迷路的機會,減少每一層頁面,讓瀏覽的人更容易看到你的作品專案,而不是迷失在絢麗的網站中。
分散對作品的注意
或許會想,我做個人網站就是要做出些超精彩、超驚豔大家的網站,但還是一句話:網站本質是你做過的所有作品本身。
開發速度快
越少頁面、架構越少層級,你需要開發的時間就更短,另外製作 RWD 時可以節省許多時間。
備註:RWD (Responsive Web Design),響應式網站設計,讓網站隨不同螢幕尺寸而改變版面或元件以適應瀏覽時視窗的大小。
體悟四:作品頁面就是呈現整個專案歷程
關於作品頁面要呈現的內容,在製作個人網站時也掙扎了很久。到底要放什麼圖,哪些畫面才能完美呈現作品呢?是不是要補足些草稿呢?
沒有方向,從何開始
沒有方向時,就想著如何帶完全沒做過這個專案的人跑過一遍專案的過程。
作品呈現頁面就是一個專案的歷程,從問題發現、發想、製作模型測試到實作,帶著對專案完全陌生的人走過一遍。
當然,不是每個專案都會跑過設計流程,而且每個人的設計流程大多不同,不管設計流程如何,只要讓觀看的人能進入到專案本身,了解專案在做些什麼,你就成功了。
基本項目
掌握了作品頁面的主軸,我覺得每個作品的呈現的版面可以有所不同,但下面幾個項目都應該要有:
- 告訴大家你在專案中的角色,負責哪一部分。
- 這個專案主要的領域。
- 專案執行的時間。
體悟五:沒有足夠的作品/完整的作品,怎麼辦?
檢視自己的作品時,發現以前的作品因為是工作時期留下的,大多不夠完整或全面。還有簽署保密協議的專案也無法公開,因此整體作品數量偏低。
關於作品數量不足
作品的數量不是問題,反倒是作品能不能呈現你的能力?每一個存在網站上的作品都要能展現你的能力。
當你發現作品不足以展現你的能力時,你才需要嘗試製作新的作品。
如果是剛畢業的學生,別擔心,大膽嘗試各種方向的設計,盡情發想各種點子加以實踐。
關於作品的完整度
既然作品不夠完整,就想想如何讓它更完整,在修改的同時你也會發現過去的缺失,學習在未來的專案上避免這些缺失。

