UI 作品集實戰

更新於 發佈於 閱讀時間約 14 分鐘
raw-image

市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,讓作品集幫你增加進入面試的機率。

  • 製作 UI 作品集
  • 沒有任何經驗跟作品怎麼辦?
  • 測試自己的作品集
  • 投遞設計職缺的注意事項
  • 持續更新

製作 UI 作品集

這邊會專門介紹 UI 作品集應該具備哪些項目,如果您還不確定 UI 跟 UX 怎麼區分,建議閱讀這一篇,如果您確定自己是要往 UI 設計前進,那麼非常歡迎您繼續往下閱讀。一個 UI 作品集應該要包含什麼?這邊有些實際的項目建議供您參考:

  • 一個網站或放在適合放作品的平台網站
  • 至少一個強調您強項的作品
  • 介紹 UI 的設計脈絡與執行細節

一個網站,或適合放作品的網站

UI 設計盛行於個人電腦發展之後,並在網路盛行甚至到了人人都有觸控手機後更是需求量大增,而 UI 工作在大部分的時候是不需要平面印刷的,也因此,在現今的時代,找尋工作或是應徵工作都是透過網路進行,您幾乎無法使用傳單或是在報紙應徵 UI 相關工作,所以在提供設計作品集上,大部分已經不需要製作紙本的作品集,事實上,面試官如果對於 UI 設計有一定的理解的話,也不希望您使用類似印刷的方式說明 UI 設計的作品,因為除了觀看 UI 設計的畫面與說明背景之外,現在很多人看履歷跟作品集甚至會用手機觀賞,這時你給了一份檔案很大的 PDF 或是一個在手機上瀏覽體驗不佳的電子書或雜誌,都會讓你的第一印象被大大扣分,更不要說在美國設計圈這種十分競爭的地方,一個作品集被面試官決定的時間只有不到 30 秒。因此,選擇一個作品集網站,或是架設一個自己的網站是一個擺放 UI 作品集比較好的選擇。

使用作品集網站

使用作品分享網站的優點是,他們有自己一套的版型與頁面,省去了自己設計網站的困難,加上作品如果突出,就能跟世界不同的設計師產生連結,平台也會幫你曝光,但缺點就是受制於平台提供的版型,不好做出變化,如果需要比較好閱讀的版型則可以考慮 Notion 筆記或是 Medium,他們都有提供易於閱讀的版型,而且在每一個裝置上,像是桌機、筆電、跟手機都有好的體驗,可以考慮。

ps: 我在前公司確實有錄取過使用 Medium 作為作品集的設計師。

自己架作品集網站

架設作品集網站有兩種辦法,一種是完全自己寫網頁,然後自己架設網站,現在甚至能用 Google drive 或是 Dropbox 就能架設網站,完全自己寫網頁的優點是結構與設計上很自由,你想長怎麼樣就完全靠自己的能力去呈現,甚至能自己加入數據分析工具來看網頁上每一個作品的表現,但缺點就是這非常需要網頁設計的能力,以及要確定每一個頁面不會有太多問題 (Bug)。

另一種方式是使用具備內容管理系統 CMS (Content Management System)網站去架設作品集網站,這類的網站通常都需要付費,但是自由度比作品分享網站高,也有很多網站的設計版型可以選擇,並且擁有內容管理的系統,也就是通稱的後台來管理頁面,缺點當然就是費用較高,而且網站設計自由度比起自己寫網站要低,但如果只是用套版的話也不需要懂如何寫網頁,以下就是市場上常見的 CMS 系統:

作品網站架設完成後,建議可以買一個網址做轉址,費用有些低到一年不到 100,或是一年幾百塊,這樣做不但可以避免如果網址太長,或是太難記,有自己的網址不只看起來更專業,也會讓面試官懂技術的人認為你是用心的。另外,在準備一個作品集時,必須考慮觀眾的使用語言,如果您本身就打算尋找海外工作,英文將是必備的選項,當然,如果你不打算踏足海外,中文就能足夠說明了。

如果以上工具對你來說都太過麻煩,也可以試試製作可以線上瀏覽的簡報 Slides,工具可以使用 Keynote 或是 Google Slides,這些也比寄送 PDF 要好得多。但也因為 Slides 在手機瀏覽上較困難,因為大部分人都還是習慣直式的瀏覽方式。

至少一個強調您強項的作品

如果對要放作品的地方有點概念了,接下來就要處理作品的部分,作品依據實際工作的內容,去選幾張最能代表您的強項的地方,例如有些人喜歡做小型的 UI 轉場,就可以把轉場做成 gif 或是 video 在網站上直接播放,但也記得檔案不要太大,必須考慮讀取時間太長會影響瀏覽體驗,有些人強項則是在 UI 的視覺,那麼就可以選幾張最好看的作為代表作,而 UI 作品集完全沒有圖的話是行不通的,如果 UI 的圖是因為無法公開給大家看的,像是開發中產品,或是有簽訂合約,那麼就得確保這個公司的產品的描述是吸引人的,或是你的作品網站本身的設計是吸引人的,也或者,你可以用自己的 UI 設計能力製作一個自己想像的版本,當然,這邊建議是不要違背工作契約的項目,以免沒事找事,得不償失。

那麼作品到底數量該拿捏在什麼樣的數量?如果手邊的作品數量不多,那麼就放已經有的作品即可,如果覺得作品太少,也可以做像是百日 UI 的挑戰去增加作品數量,或是試著嘗試一些在公司無法實現的成品。

介紹作品的脈絡與執行細節

很多設計師只會在作品集上放上一張圖片,並且不會有任何輔助說明,這做法看似簡單,以一張圖決勝負,有就有,沒有就沒有,但實際上對於有經驗的公司來說,只放一張圖沒有任何其他說明。其實跟沒放是一樣的,UI 作品集的視覺圖就是一切的開頭這點是正確的,但是接下來有沒有說明更多關於這個作品的細節則決定了公司方認定你的專業跟用心程度的差距,那麼,一個作品該交代哪些細節呢?

設計動機

首先,盡可能的說明設計這個成品的動機跟概念是什麼?無論是想練習還是真的嘗試解決什麼問題都可以寫上去,又可能你從什麼樣的觀察或是數據上顯示出一些問題有待改善,如果是包含 UX 的作品,就會建議需要更加說明這個問題是如何定義與驗證,建議可以這類可以參考設計思考 design thinking 的方式去歸類與說明,有了這類說明,就可以藉由自己的理解去發揮設計能力,很多重新設計 Redesign 的動機會來自於此,但是重新設計 Redesign 其實是一個非常需要審慎考慮的題目,很多人會選擇一個大的項目,像是重新設計 Facebook 這類的題目,就必須非常小心的定義目標,單純重新設計畫面對於實際的業界人士來說參考價值不高,除非你的 UI 效果遠比於原本的設計更加良好,不然在沒有太多開發與產品規劃經驗不懂背後技術或商業原理的情況下,只類作品多半只是東施效顰。因此,選擇重新設計 redesign 的題目建議都以小地方著手,像是一個功能的改善,或是針對一個新體驗的聊天做出概念與常識,這樣不但也能展現你的能力,同時也不需要為題目太大而要準備更多說法解釋。

執行細節

一個設計的成果不會從天上掉下來或是從石頭蹦出來,除非這個設計真的是偷來或買來的(買來的通常會在面試環節出現破綻,很可能花了錢還在會被業界黑掉)。因此除了設計脈絡的說明之外,另一個建議說明的就是執行細節,執行細節可長可短,但面試官大多想看的部分包含這個作品如何製作,用什麼軟體且用什麼方法製作?花了多少時間製作?這個設計成果是個人還是團隊製作?如果是團隊的話,團隊有多少人?每個人的專業是什麼?你在裡面負責哪個部分?其他人又是如何分工?整個專案的執行時間多長?你的部分花了多久時間?最後成果是怎麼驗證?以上建議可以選擇部分項目簡短說明,描述過長的話還是會建議需要多一點產品圖去輔助,增加作品集的可看性,而上述的問題也都會在面試中再度出現,但是有了這些描述,就能更清楚作品與你本身提供的價值。

這邊提供了一個網站,搜集了許多在矽谷大公司的實習生的作品集,可以看看他們的作品集都是怎麼呈現的:

https://cofolios.com

除了實習生的作品集之外,也可以參考其他設計工作室或是設計師的作品集,看看他們是如何呈現的,這裡也提供了幾個有名的國內外工作室跟設計師的作品集供參考,可以仔細觀察他們的頁面怎麼佈置,作品或是訊息的順序如何擺放,每個專案透露了多少細節,在每個裝置使用的體驗如何:

沒有任何經驗跟作品怎麼辦?

如果是設計科系相關學生,但沒有修類似的課程卻想要得到 UI 相關的工作,還是可以利用網路的資源尋找相關的作品集,找出裡面的內容關鍵,搭配上方提到的題目設定,試著拼湊作品集的樣貌,當然,沒有任何經驗的話,除了去找業界實習之外,也可以利用接案,或是自己找人組隊建立產品,如果上述的條件都沒有,也可以利用自己進行 UI 挑戰搭配上方提到的題目設定為自己增添作品。

而完全沒有經驗,也沒有設計相關科系的背景,那就必須確保自己的興趣與定位是不是真的要往這方面發展,並要試著自己去熟悉市面上常見的設計軟體,了解基本的設計規範,並參考市面上的作品集,找出裡面的內容關鍵,搭配上方提到的題目設定,試著拼湊作品集的樣貌,但是,這一行最好還是有平面設計與色彩學相關的概念比較好,建議還是去市面上多看一些類似的書籍學習相關知識,也許你能因爲上面的介紹跟憑藉自己獨特的美感獲得工作,但這些基本設計觀念都會在你的工作中不斷的被驗證,因此建議也要不斷的補齊類似的觀念。

測試自己的作品集

測試作品集雖然並不是一個必要的環節,製作設計作品集是一個必要但費時的事情,所以是否能在每個地方看起來都符合自己的需求,也應該是一個設計師追求的部分,在這個環節下,測試自己的作品集就變得重要了,根據我之前的經驗,在公司收到的作品集裡面也還是有 20% 的機會,作品集打開了以後網頁不存在,或是作品內容裡面存在錯字,這些都會直接把你原本的機會從 50% 變成接近 0%,即使是資深的設計師也會發生類似的事情,因此測試環節還是應該被納入製作項目裡面會比較好,接下來就會介紹幾個測試項目供您參考:

  • 文字內容是否有錯字?
  • 可以下載的檔案或網站頁面是否還存在?
  • 圖片的品質是否良好?
  • 聯絡資訊是否正確?
  • 不管在手機還是電腦瀏覽的畫面都符合預期
  • 工作經歷或簡介是否已經是最新的?
  • 讀取速度是否合乎預期?

作品集也可以直接傳給朋友或是家人幫忙觀看是否有問題,想要訴說的內容是否能在最一開始就傳達出去,這些都可以是測試的項目

投遞設計職缺的注意事項

作品集準備好了之後,就是要投遞給應徵的公司,或是要合作的客戶,這時首先該想到的就是觀眾是誰?非設計專業的觀眾通常會佔大多數,像是大公司會雇用人資單位優先過濾,之後才會交到設計師手上,同時,我們必須假設所有觀眾的時間都很有限,因為確實工作的人大部分都沒什麼時間慢慢看(看太慢還有可能被當薪水小偷呢),在這類的情況下,開門見山這類的辦法可以說是最常見的做法了,在作品集被打開的一剎那,希望讓對方有什麼印象?能呈現自己的強項嗎?接著馬上就進入作品的區域,如果只有單一作品,可以考慮將整頁作品介紹當作首頁寄出,因為在投遞公司履歷的過程中,一定會是自我介紹信優先送達,信的內容會包含你的自我基本介紹,然候就是作品集的連結,也因此,作品集既然是對方已經知道你是誰的情況下,作品集能快速進入作品就變得更加重要,也因此,當您的設計作品內容豐富了以後,可以考慮將分類做好,這時如果投遞一個會動態效果有加分的職缺,就可以把有動態的分類頁面作為主打去投遞,讓面試者能一次抓到你的強項,進而提高面試的機率。

持續更新

當您找到了一份工作,就已經作品集已經完成了本身的階段性任務,這也代表會有一段時間不會再繼續更新作品集,但設計的趨勢不斷的在改變,您的工作也會增加新的作品,這樣的累積直到下一次找工作時,作品集的變動就會花比較多時間去更新,有時不只會花上幾天,甚至會到幾個禮拜,而這樣來說,而等於是限縮了下一個合作的機會的可能性與機動性,試想,如果你的朋友有一天推薦你一份不錯的工作,或是你心目中的夢幻企業突然張貼了設計師職缺,你會花幾個禮拜去準備投遞這份職缺嗎?那麼機會可能就稍縱即逝。因此,這邊建議作品集最好是在你工作有一個段落時有時間就更新,不管你是想在作品集上嘗試新東西還是單純更新作品與工作資歷,作品集的更新不建議等機會來臨時才慢慢準備,有時不是時機未到,而是你沒有準備好,因此彈性的去維護自己的作品集,也是維持自己職業生涯的籌碼。

留言
avatar-img
留言分享你的想法!
avatar-img
Ted的沙龍
862會員
33內容數
UIUX 基礎到資深完全詳解,文章將詳解現在趨勢,職位解析,軟體教學,職場應對,面試與作品集教學。 Ted Deng,目前在外商擔任 Lead Designer,十年以上設計經驗,2018 德國紅點設計獎。
Ted的沙龍的其他內容
2021/06/28
市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
Thumbnail
2021/06/28
市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
Thumbnail
2021/03/16
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
2021/03/16
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
2021/02/24
這篇將介紹 Figma 的基本功能操作,以及該功能實戰會用到的地方,目前 Figma 軟體介面也是英文為主,而這篇教學文章則會將所有功能翻成中文供參考與對照,目前軟體由於仍在推廣階段,新手是可以免費使用的。 介紹與安裝 Figma 也是一個劃時代的軟體,主打的是即時的共同設計編輯,完全線上的向量
Thumbnail
2021/02/24
這篇將介紹 Figma 的基本功能操作,以及該功能實戰會用到的地方,目前 Figma 軟體介面也是英文為主,而這篇教學文章則會將所有功能翻成中文供參考與對照,目前軟體由於仍在推廣階段,新手是可以免費使用的。 介紹與安裝 Figma 也是一個劃時代的軟體,主打的是即時的共同設計編輯,完全線上的向量
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
你是否也有做作品集的習慣呢?在這裡我將針對自己接案後,嘗試用架站平台製作作品集與接案資訊的個人經驗,向你分享3大架站平台的優缺點。
Thumbnail
你是否也有做作品集的習慣呢?在這裡我將針對自己接案後,嘗試用架站平台製作作品集與接案資訊的個人經驗,向你分享3大架站平台的優缺點。
Thumbnail
今年我們家實習生執行了一個訪談計畫,要去研究 UX 的自學者在學習過程中遇到的困難。 在聆聽幾場訪談後,我更明確感受到許多朋友對於 UX 領域有這麼多方法論,不知道該如何下手學習的焦慮。 其中一個核心關鍵,也包括囫圇吞棗了這麼多理論方法之後,不知道該如何用一個作品來表達出來。 我認為在這個過程中,我
Thumbnail
今年我們家實習生執行了一個訪談計畫,要去研究 UX 的自學者在學習過程中遇到的困難。 在聆聽幾場訪談後,我更明確感受到許多朋友對於 UX 領域有這麼多方法論,不知道該如何下手學習的焦慮。 其中一個核心關鍵,也包括囫圇吞棗了這麼多理論方法之後,不知道該如何用一個作品來表達出來。 我認為在這個過程中,我
Thumbnail
無論你是設計師、藝術產業工作者,或者準備申請國內外學校推甄的朋友,「作品集(portfolio)」是宣傳自己的重要管道,同時也是求職時的第一印象。講明白一點,作品集即是「個人作為品牌的延伸」。所有的經營,都需要歷程
Thumbnail
無論你是設計師、藝術產業工作者,或者準備申請國內外學校推甄的朋友,「作品集(portfolio)」是宣傳自己的重要管道,同時也是求職時的第一印象。講明白一點,作品集即是「個人作為品牌的延伸」。所有的經營,都需要歷程
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
不論是哪一種設計師,每一個人找工作時,都絕對需要一份作品集,來向面試官、主管闡述你過去的經驗與能力。但對於非本科系或是轉職的人,並沒有過去學生時期所累積的作品。因此在學習新技能時,同時也要考量如何能夠有產出,以至於未來在尋找工作時,讓公司知道你目前的能力所在。 在製作作品集前,我們必須先要有「作品」
Thumbnail
不論是哪一種設計師,每一個人找工作時,都絕對需要一份作品集,來向面試官、主管闡述你過去的經驗與能力。但對於非本科系或是轉職的人,並沒有過去學生時期所累積的作品。因此在學習新技能時,同時也要考量如何能夠有產出,以至於未來在尋找工作時,讓公司知道你目前的能力所在。 在製作作品集前,我們必須先要有「作品」
Thumbnail
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中,最常被問的問題了。 其實我並不鼓勵大家購買大量課程、書籍來淹沒自己,因為資訊量很大,而且每位老師的經歷、教法有不同,有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。 而此時的你並不知道,到底應該投資哪一種類型項目,最能「
Thumbnail
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中,最常被問的問題了。 其實我並不鼓勵大家購買大量課程、書籍來淹沒自己,因為資訊量很大,而且每位老師的經歷、教法有不同,有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。 而此時的你並不知道,到底應該投資哪一種類型項目,最能「
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
過去我還是接案新手的時候,每當業主跟我要作品集的時候,我都傻傻的把網頁作品集貼給他,但這其實是一種很可能斷了財源的作法。後來我才知道,為什麼儘管業主們有看過我網頁,還是要跟我要一次作品集,也才搞懂為什麼有些線上履歷服務會有那種「僅限有連結的人」能觀看的選項,所以我現在都會準備兩種作品集……
Thumbnail
過去我還是接案新手的時候,每當業主跟我要作品集的時候,我都傻傻的把網頁作品集貼給他,但這其實是一種很可能斷了財源的作法。後來我才知道,為什麼儘管業主們有看過我網頁,還是要跟我要一次作品集,也才搞懂為什麼有些線上履歷服務會有那種「僅限有連結的人」能觀看的選項,所以我現在都會準備兩種作品集……
Thumbnail
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
Thumbnail
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
Thumbnail
透過作品集認識自己/踏實完成才是最便捷的道路 -----------------------------------   不知道有沒有人跟我一樣,很多時候不敢去碰作品集,因為不敢去回顧過往。然而作品集是一切有趣的活動開端,申請建築師事務所的實習機會、交換學生、研究所、工作營樣樣都需要
Thumbnail
透過作品集認識自己/踏實完成才是最便捷的道路 -----------------------------------   不知道有沒有人跟我一樣,很多時候不敢去碰作品集,因為不敢去回顧過往。然而作品集是一切有趣的活動開端,申請建築師事務所的實習機會、交換學生、研究所、工作營樣樣都需要
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News