UI 作品集實戰

閱讀時間約 13 分鐘
市場上有許多 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 的題目建議都以小地方著手,像是一個功能的改善,或是針對一個新體驗的聊天做出概念與常識,這樣不但也能展現你的能力,同時也不需要為題目太大而要準備更多說法解釋。
執行細節
一個設計的成果不會從天上掉下來或是從石頭蹦出來,除非這個設計真的是偷來或買來的(買來的通常會在面試環節出現破綻,很可能花了錢還在會被業界黑掉)。因此除了設計脈絡的說明之外,另一個建議說明的就是執行細節,執行細節可長可短,但面試官大多想看的部分包含這個作品如何製作,用什麼軟體且用什麼方法製作?花了多少時間製作?這個設計成果是個人還是團隊製作?如果是團隊的話,團隊有多少人?每個人的專業是什麼?你在裡面負責哪個部分?其他人又是如何分工?整個專案的執行時間多長?你的部分花了多久時間?最後成果是怎麼驗證?以上建議可以選擇部分項目簡短說明,描述過長的話還是會建議需要多一點產品圖去輔助,增加作品集的可看性,而上述的問題也都會在面試中再度出現,但是有了這些描述,就能更清楚作品與你本身提供的價值。
這邊提供了一個網站,搜集了許多在矽谷大公司的實習生的作品集,可以看看他們的作品集都是怎麼呈現的:
除了實習生的作品集之外,也可以參考其他設計工作室或是設計師的作品集,看看他們是如何呈現的,這裡也提供了幾個有名的國內外工作室跟設計師的作品集供參考,可以仔細觀察他們的頁面怎麼佈置,作品或是訊息的順序如何擺放,每個專案透露了多少細節,在每個裝置使用的體驗如何:

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

如果是設計科系相關學生,但沒有修類似的課程卻想要得到 UI 相關的工作,還是可以利用網路的資源尋找相關的作品集,找出裡面的內容關鍵,搭配上方提到的題目設定,試著拼湊作品集的樣貌,當然,沒有任何經驗的話,除了去找業界實習之外,也可以利用接案,或是自己找人組隊建立產品,如果上述的條件都沒有,也可以利用自己進行 UI 挑戰搭配上方提到的題目設定為自己增添作品。
而完全沒有經驗,也沒有設計相關科系的背景,那就必須確保自己的興趣與定位是不是真的要往這方面發展,並要試著自己去熟悉市面上常見的設計軟體,了解基本的設計規範,並參考市面上的作品集,找出裡面的內容關鍵,搭配上方提到的題目設定,試著拼湊作品集的樣貌,但是,這一行最好還是有平面設計與色彩學相關的概念比較好,建議還是去市面上多看一些類似的書籍學習相關知識,也許你能因爲上面的介紹跟憑藉自己獨特的美感獲得工作,但這些基本設計觀念都會在你的工作中不斷的被驗證,因此建議也要不斷的補齊類似的觀念。

測試自己的作品集

測試作品集雖然並不是一個必要的環節,製作設計作品集是一個必要但費時的事情,所以是否能在每個地方看起來都符合自己的需求,也應該是一個設計師追求的部分,在這個環節下,測試自己的作品集就變得重要了,根據我之前的經驗,在公司收到的作品集裡面也還是有 20% 的機會,作品集打開了以後網頁不存在,或是作品內容裡面存在錯字,這些都會直接把你原本的機會從 50% 變成接近 0%,即使是資深的設計師也會發生類似的事情,因此測試環節還是應該被納入製作項目裡面會比較好,接下來就會介紹幾個測試項目供您參考:
  • 文字內容是否有錯字?
  • 可以下載的檔案或網站頁面是否還存在?
  • 圖片的品質是否良好?
  • 聯絡資訊是否正確?
  • 不管在手機還是電腦瀏覽的畫面都符合預期
  • 工作經歷或簡介是否已經是最新的?
  • 讀取速度是否合乎預期?
作品集也可以直接傳給朋友或是家人幫忙觀看是否有問題,想要訴說的內容是否能在最一開始就傳達出去,這些都可以是測試的項目

投遞設計職缺的注意事項

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

持續更新

當您找到了一份工作,就已經作品集已經完成了本身的階段性任務,這也代表會有一段時間不會再繼續更新作品集,但設計的趨勢不斷的在改變,您的工作也會增加新的作品,這樣的累積直到下一次找工作時,作品集的變動就會花比較多時間去更新,有時不只會花上幾天,甚至會到幾個禮拜,而這樣來說,而等於是限縮了下一個合作的機會的可能性與機動性,試想,如果你的朋友有一天推薦你一份不錯的工作,或是你心目中的夢幻企業突然張貼了設計師職缺,你會花幾個禮拜去準備投遞這份職缺嗎?那麼機會可能就稍縱即逝。因此,這邊建議作品集最好是在你工作有一個段落時有時間就更新,不管你是想在作品集上嘗試新東西還是單純更新作品與工作資歷,作品集的更新不建議等機會來臨時才慢慢準備,有時不是時機未到,而是你沒有準備好,因此彈性的去維護自己的作品集,也是維持自己職業生涯的籌碼。
為什麼會看到廣告
avatar-img
864會員
33內容數
UIUX 基礎到資深完全詳解,文章將詳解現在趨勢,職位解析,軟體教學,職場應對,面試與作品集教學。 Ted Deng,目前在外商擔任 Lead Designer,十年以上設計經驗,2018 德國紅點設計獎。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ted的沙龍 的其他內容
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
這篇將介紹 Figma 的基本功能操作,以及該功能實戰會用到的地方,目前 Figma 軟體介面也是英文為主,而這篇教學文章則會將所有功能翻成中文供參考與對照,目前軟體由於仍在推廣階段,新手是可以免費使用的。 介紹與安裝 Figma 也是一個劃時代的軟體,主打的是即時的共同設計編輯,完全線上的向量
在 UIUX 界有許多專有名詞很常出現卻不知道是什麼意思?查到了也不確定哪一個說法才是正確的?以下整理了一些業界常出現的專有名詞與解釋,並歸納整理為 UX/PM 相關,UI 設計相關,以及業界相關的名詞,並附上這些參考資料與適合製作的工具供參考,之後也會持續更新,保持最新的狀態。 UX/PM 相關
工作,佔了接近 1/3 人生時間,而設計師又是在其中相對花費更多時間在工作內容的族群,但是,設計師能賺大錢嗎?能領高薪嗎?如何選擇工作是一門學問,做錯了選擇不僅浪費時間,還可能影響未來的職涯發展,而賭對了公司,則可能人生一次畢業,畢竟只領薪水不能提早退休,能在職場提早退休還是得靠大量持股。
設計合約是所有設計師跟業主都要有的文件,但是設計合約的內容應該要包含哪些部分?有沒有公版或是範本可以參考?怎麼樣才能制定的公平又清楚?這篇文章將會附上一個範本,並一項一項的來解釋合約內容,並會在文章的最後附上這份設計合約的範本供大家下載,以下是會在這篇文章談到的內容: 合約名稱 合約規範
進入 UIUX 領域,會發現其實現在市場上不只有這兩個職位,還有更多相關的職位也出現在名單內,到底這些職稱是什麼意思?實際工作又是做些什麼呢?現今職場上的 UIUX 設計師又有什麼種類呢?市場的需求又是什麼?未來的發展在哪裡?這邊將介紹目前市面上常見的職位,並附上一些實際的市場職缺來分析他們的可
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
這篇將介紹 Figma 的基本功能操作,以及該功能實戰會用到的地方,目前 Figma 軟體介面也是英文為主,而這篇教學文章則會將所有功能翻成中文供參考與對照,目前軟體由於仍在推廣階段,新手是可以免費使用的。 介紹與安裝 Figma 也是一個劃時代的軟體,主打的是即時的共同設計編輯,完全線上的向量
在 UIUX 界有許多專有名詞很常出現卻不知道是什麼意思?查到了也不確定哪一個說法才是正確的?以下整理了一些業界常出現的專有名詞與解釋,並歸納整理為 UX/PM 相關,UI 設計相關,以及業界相關的名詞,並附上這些參考資料與適合製作的工具供參考,之後也會持續更新,保持最新的狀態。 UX/PM 相關
工作,佔了接近 1/3 人生時間,而設計師又是在其中相對花費更多時間在工作內容的族群,但是,設計師能賺大錢嗎?能領高薪嗎?如何選擇工作是一門學問,做錯了選擇不僅浪費時間,還可能影響未來的職涯發展,而賭對了公司,則可能人生一次畢業,畢竟只領薪水不能提早退休,能在職場提早退休還是得靠大量持股。
設計合約是所有設計師跟業主都要有的文件,但是設計合約的內容應該要包含哪些部分?有沒有公版或是範本可以參考?怎麼樣才能制定的公平又清楚?這篇文章將會附上一個範本,並一項一項的來解釋合約內容,並會在文章的最後附上這份設計合約的範本供大家下載,以下是會在這篇文章談到的內容: 合約名稱 合約規範
進入 UIUX 領域,會發現其實現在市場上不只有這兩個職位,還有更多相關的職位也出現在名單內,到底這些職稱是什麼意思?實際工作又是做些什麼呢?現今職場上的 UIUX 設計師又有什麼種類呢?市場的需求又是什麼?未來的發展在哪裡?這邊將介紹目前市面上常見的職位,並附上一些實際的市場職缺來分析他們的可
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
當我們蒐集完所有感興趣的職缺後,你是否已經摩拳擦掌,要把準備許久的履歷發給對方了呢?等等!這裡有個陷阱,就是在投遞履歷之前,我們必須明白:「想用同一份履歷打動所有面試官,這是不可能的!」
提早規劃與準備,設定期限提高效率 一、作品集的準備        作品集在大三大四為了交換或實習時會有個定型,根據不同的(實習)經驗與接觸對作品集做精減及深化,讓每張圖都是有意義且附加說明。修改既麻煩且花時間,事前規劃每日行程,設定工作時間以檢視效率。規定最後期限提醒工作進度。 胡亂想像的塗鴉也
Thumbnail
透過作品集認識自己/踏實完成才是最便捷的道路 -----------------------------------   不知道有沒有人跟我一樣,很多時候不敢去碰作品集,因為不敢去回顧過往。然而作品集是一切有趣的活動開端,申請建築師事務所的實習機會、交換學生、研究所、工作營樣樣都需要
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
當我們蒐集完所有感興趣的職缺後,你是否已經摩拳擦掌,要把準備許久的履歷發給對方了呢?等等!這裡有個陷阱,就是在投遞履歷之前,我們必須明白:「想用同一份履歷打動所有面試官,這是不可能的!」
提早規劃與準備,設定期限提高效率 一、作品集的準備        作品集在大三大四為了交換或實習時會有個定型,根據不同的(實習)經驗與接觸對作品集做精減及深化,讓每張圖都是有意義且附加說明。修改既麻煩且花時間,事前規劃每日行程,設定工作時間以檢視效率。規定最後期限提醒工作進度。 胡亂想像的塗鴉也
Thumbnail
透過作品集認識自己/踏實完成才是最便捷的道路 -----------------------------------   不知道有沒有人跟我一樣,很多時候不敢去碰作品集,因為不敢去回顧過往。然而作品集是一切有趣的活動開端,申請建築師事務所的實習機會、交換學生、研究所、工作營樣樣都需要