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

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

Behance. 由Adobe 建立的作品集網站，有完整的格式與一定程度的客製化功能，用於呈現 ... 關於設計Sketch運用ReactJavaScriptProtoPie設計師準備線上作品集的體悟ShengPanFollowAug24,2017·6minread休息了半年，最近要開始求職卻發現自己從來都沒有一個個人線上作品集。

開始著手整理作品集，花短短的幾天弄了一個堪用的個人作品集網站，就心滿意足地去休息了。

早上醒來發現自己的個人網站很不成熟，仔細地反省思考，整理了這段短短歷程的體悟。

為什麼需要個人網站？為什麼需要個人作品集網站？其實還有很多網站可以呈現個人作品，以下僅列出比較多人用以呈現作品的網站，並簡單比較三者間的優劣：DribbbleDribbble讓設計師上傳自己正在進行的專案片段，在Dribbble裡面能上傳作品的我們稱為DribbblePlayer，要成為DribbblePlayer需要受到其他Player邀請。

速度：高呈現：低客製：低Dribbble的首頁會出現其他DribbblePlayer分享的片段。

Behance由Adobe建立的作品集網站，有完整的格式與一定程度的客製化功能，用於呈現UI設計、影音、平面設計等作品都很適合。

完成專案後可以透過關鍵字增加自己作品的曝光率，建置的困難程度低，非常適合入門速度：中呈現：高客製：中Behance透過關鍵字可以讓自己的作品被更多人看見。

個人網站這裡不是指Wix、Tumblr等網站，而是自己寫一個網站。

你可以做出任何你想要做的效果與版面，也因為這種高度自由增加了建置的難度。

雖說難度高，但你可以透過個人網站呈現你的風格、特質，在高度客製化的版面下體現專案的內容，也可以展現自己三腳貓的網站開發功夫（就是我）。

速度：低呈現：高客製：極高當然，這篇文章是寫製作個人網站時的體悟，因此我選擇個人網站這途。

體悟一：千萬別急著開始做我知道急於做出作品集的心情，但先急著起跑，這是我第一個體悟。

我是一個慢郎中，但這世界的步調隨著網路開始加速，因此不落人後的想法充滿腦中，我開始想網站架構，想個大概，畫完簡單的設計就開始上版。

考慮不周的結果就是沒考慮RWD，專案頁面的版面如何呈現？圖片要有多大？專案頁面會有哪幾種版型？操之過急只會讓自己陷入HTML跟CSS語法當中，而沒辦法專注在作品的呈現，造就了朋友說的「逼格」很高的詭異網站。

回到原點，從整理作品開始吧隔天看了自己做出很屎的網站後，我發現因為時間的壓力迫使我做出蠢事。

一般在設計之前，會先蒐集資料、研究等等（這裡就不贅述方法論），而設計個人網站時也是一樣的。

整理作品就好比設計前的蒐集資料與靈感，一開始要先知道自己有多少作品，分門別類，分類整理之後也清楚自己缺乏哪部分的作品，可以透過自由創作或再設計專案來補強。

縱觀作品後，也可以知道自己過去的作品是否有哪些瑕疵或遺漏，在這次也順便補上吧。

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

體悟二：了解作品集網站的本質個人網站比其他作品網站多了一點：高度客製化。

高度客製化賦予網站一個形象，代表我們自己的形象，你希望呈現怎麼樣的形象給別人呢？這步驟很花時間，將個人網站視為是一個「作品」，盡情地發展設計概念，不斷延伸出更多設計（例如網站C.I.,Guideline等等），但這會讓個人網站製作的進度窒礙難行，因為隨著規模大小提升，有更多的細節需要精心設計。

因此我認為把個人網站當作設計專案來做，一個非常簡易的設計專案（之後會講為什麼要簡易）。

抓住一個概念後就可以去嘗試套用風格，這裏就不需要把設計的規模想得太大。

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

可能有人會問，那要怎麼展現個人風格，我認為可以從小細節出發，例如：介面上元件的互動（動畫的設計）網站字型（盡量選googlefont上的，畢竟免費）配色元件的設計（小巧的元件也可以讓人有不一樣的感受）光上述四種就足以變花出非常多種網站風格，公司在觀看的時候也可以知道你配色的能力、元件設計等能力。

體悟三：網站架構簡單就好決定風格後你會開始想網站要有哪些頁面，我要有個首頁、作品首頁、作品集頁面和關於我頁面blahblah…回到體悟三，控制網站本身的規模，讓個人網站的架構更簡單，架構簡單的好處有：減少迷路的機會簡單的架構也降低瀏覽者迷路的機會，減少每一層頁面，讓瀏覽的人更容易看到你的作品專案，而不是迷失在絢麗的網站中。

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

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

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

體悟四：作品頁面就是呈現整個專案歷程關於作品頁面要呈現的內容，在製作個人網站時也掙扎了很久。

到底要放什麼圖，哪些畫面才能完美呈現作品呢？是不是要補足些草稿呢？沒有方向，從何開始沒有方向時，就想著如何帶完全沒做過這個專案的人跑過一遍專案的過程。

作品呈現頁面就是一個專案的歷程，從問題發現、發想、製作模型測試到實作，帶著對專案完全陌生的人走過一遍。

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

基本項目掌握了作品頁面的主軸，我覺得每個作品的呈現的版面可以有所不同，但下面幾個項目都應該要有：告訴大家你在專案中的角色，負責哪一部分。

這個專案主要的領域。

專案執行的時間。

體悟五：沒有足夠的作品／完整的作品，怎麼辦？檢視自己的作品時，發現以前的作品因為是工作時期留下的，大多不夠完整或全面。

還有簽署保密協議的專案也無法公開，因此整體作品數量偏低。

關於作品數量不足作品的數量不是問題，反倒是作品能不能呈現你的能力？每一個存在網站上的作品都要能展現你的能力。

當你發現作品不足以展現你的能力時，你才需要嘗試製作新的作品。

如果是剛畢業的學生，別擔心，大膽嘗試各種方向的設計，盡情發想各種點子加以實踐。

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

最後，我要來修改我的個人網站了De-Magazine我們提供有關工程師與設計師的相關文章。

1.1K2DesignPortfolio設計1.1K claps1.1K2De-Magazine我們提供有關工程師與設計師的相關文章。

WrittenbyShengPanFollowHi,I’mSheng.AdesignerbasedinTaipei,Taiwan.Contactme:[email protected]我們提供有關工程師與設計師的相關文章。