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

Sheng Pan
Sheng Pan
Aug 24, 2017 · 6 min read

休息了半年,最近要開始求職卻發現自己從來都沒有一個個人線上作品集。開始著手整理作品集,花短短的幾天弄了一個堪用的個人作品集網站,就心滿意足地去休息了。
早上醒來發現自己的個人網站很不成熟,仔細地反省思考,整理了這段短短歷程的體悟。


為什麼需要個人網站?

為什麼需要個人作品集網站?其實還有很多網站可以呈現個人作品,以下僅列出比較多人用以呈現作品的網站,並簡單比較三者間的優劣:

Dribbble

Dribbble 讓設計師上傳自己正在進行的專案片段,在 Dribbble 裡面能上傳作品的我們稱為 Dribbble Player,要成為 Dribbble Player 需要受到其他 Player 邀請。

Dribbble 的首頁會出現其他 Dribbble Player 分享的片段。

Behance

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

Behance 透過關鍵字可以讓自己的作品被更多人看見。

個人網站

這裡不是指 Wix 、Tumblr 等網站,而是自己寫一個網站。
你可以做出任何你想要做的效果與版面,也因為這種高度自由增加了建置的難度。
雖說難度高,但你可以透過個人網站呈現你的風格、特質,在高度客製化的版面下體現專案的內容,也可以展現自己三腳貓的網站開發功夫(就是我)。

當然,這篇文章是寫製作個人網站時的體悟,因此我選擇個人網站這途。


體悟一:千萬別急著開始做

我知道急於做出作品集的心情,但先急著起跑,這是我第一個體悟。

我是一個慢郎中,但這世界的步調隨著網路開始加速,因此不落人後的想法充滿腦中,我開始想網站架構,想個大概,畫完簡單的設計就開始上版。
考慮不周的結果就是沒考慮 RWD,專案頁面的版面如何呈現?圖片要有多大?專案頁面會有哪幾種版型?

操之過急只會讓自己陷入 HTML 跟 CSS 語法當中,而沒辦法專注在作品的呈現,造就了朋友說的「逼格」很高的詭異網站。

回到原點,從整理作品開始吧

隔天看了自己做出很屎的網站後,我發現因為時間的壓力迫使我做出蠢事。

一般在設計之前,會先蒐集資料、研究等等(這裡就不贅述方法論),而設計個人網站時也是一樣的。
整理作品就好比設計前的蒐集資料與靈感,一開始要先知道自己有多少作品,分門別類,分類整理之後也清楚自己缺乏哪部分的作品,可以透過自由創作或再設計專案來補強。縱觀作品後,也可以知道自己過去的作品是否有哪些瑕疵或遺漏,在這次也順便補上吧。

備註:有些設計專案是接案時製作,有保密協定的話需要衡量一下如何呈現以免觸法。


體悟二:了解作品集網站的本質

個人網站比其他作品網站多了一點:高度客製化。
高度客製化賦予網站一個形象,代表我們自己的形象,你希望呈現怎麼樣的形象給別人呢?

這步驟很花時間,將個人網站視為是一個「作品」,盡情地發展設計概念,不斷延伸出更多設計(例如網站 C.I., Guideline 等等),但這會讓個人網站製作的進度窒礙難行,因為隨著規模大小提升,有更多的細節需要精心設計。

因此我認為把個人網站當作設計專案來做,一個非常簡易的設計專案(之後會講為什麼要簡易)。
抓住一個概念後就可以去嘗試套用風格,這裏就不需要把設計的規模想得太大。

網站本質,它是一個載體

回歸個人網站的本質,個人網站的用途是什麼?
除了呈現個人的形象與風格外,更重要的是呈現「作品」,而網站本身只是個載體。

可能有人會問,那要怎麼展現個人風格,我認為可以從小細節出發,例如:

光上述四種就足以變花出非常多種網站風格,公司在觀看的時候也可以知道你配色的能力、元件設計等能力。


體悟三:網站架構簡單就好

決定風格後你會開始想網站要有哪些頁面,我要有個首頁、作品首頁、作品集頁面和關於我頁面 blah blah…
回到體悟三,控制網站本身的規模,讓個人網站的架構更簡單,架構簡單的好處有:

減少迷路的機會

簡單的架構也降低瀏覽者迷路的機會,減少每一層頁面,讓瀏覽的人更容易看到你的作品專案,而不是迷失在絢麗的網站中。

分散對作品的注意

或許會想,我做個人網站就是要做出些超精彩、超驚豔大家的網站,但還是一句話:網站本質是你做過的所有作品本身。

開發速度快

越少頁面、架構越少層級,你需要開發的時間就更短,另外製作 RWD 時可以節省許多時間。

備註:RWD (Responsive Web Design),響應式網站設計,讓網站隨不同螢幕尺寸而改變版面或元件以適應瀏覽時視窗的大小。


體悟四:作品頁面就是呈現整個專案歷程

關於作品頁面要呈現的內容,在製作個人網站時也掙扎了很久。到底要放什麼圖,哪些畫面才能完美呈現作品呢?是不是要補足些草稿呢?

沒有方向,從何開始

沒有方向時,就想著如何帶完全沒做過這個專案的人跑過一遍專案的過程。
作品呈現頁面就是一個專案的歷程,從問題發現、發想、製作模型測試到實作,帶著對專案完全陌生的人走過一遍。

當然,不是每個專案都會跑過設計流程,而且每個人的設計流程大多不同,不管設計流程如何,只要讓觀看的人能進入到專案本身,了解專案在做些什麼,你就成功了。

基本項目

掌握了作品頁面的主軸,我覺得每個作品的呈現的版面可以有所不同,但下面幾個項目都應該要有:


體悟五:沒有足夠的作品/完整的作品,怎麼辦?

檢視自己的作品時,發現以前的作品因為是工作時期留下的,大多不夠完整或全面。還有簽署保密協議的專案也無法公開,因此整體作品數量偏低。

關於作品數量不足

作品的數量不是問題,反倒是作品能不能呈現你的能力?每一個存在網站上的作品都要能展現你的能力。
當你發現作品不足以展現你的能力時,你才需要嘗試製作新的作品。
如果是剛畢業的學生,別擔心,大膽嘗試各種方向的設計,盡情發想各種點子加以實踐。

關於作品的完整度

既然作品不夠完整,就想想如何讓它更完整,在修改的同時你也會發現過去的缺失,學習在未來的專案上避免這些缺失。


最後,我要來修改我的個人網站了

De-Magazine

我們提供有關工程師與設計師的相關文章。

)

Thanks to 愷開

Sheng Pan

Written by

Sheng Pan

Hi, I’m Sheng. A designer based in Taipei, Taiwan. Contact me: sandokaishy@gmail.com.

De-Magazine

我們提供有關工程師與設計師的相關文章。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade