Published in
4 min readDec 19, 2016
--
因為剛好公司有需要所以就整理了 UI Designer 的學習資源。
主要是針對做 Web Design 的 UI Designer 來開的單子,程度大概落在於:
- 具備基本的設計能力與美學
- 有 Web Design 設計與刻版的基礎經驗
- 過去多用 Photoshop / Illustator 進行設計
清單上主要是在補強設計師普遍基礎功夫跟底子不紮實、不知道該如何持續進修設計習慣等問題,也有附上一些會影響到 UI 設計與思考的 UX 基礎知識文章,以及 Sketch 等實做上會用到的工具教學資源。
如果是前端很強、UI 很強、程度跟經驗足夠到想學 UX 來強化 UI 能力等 Lv 的設計師就不適用這份清單。
至於 UX Designer 學習資源清單……這有點難開,要我開我會直接說右轉 AlphaCamp 比較紮實 XD
設計基礎通識(必讀)
中文文案排版指北 https://github.com/sparanoid/chinese-copywriting-guidelines
- 統一中文文案、排版的相關用法,降低團隊成員之間的溝通成本,增強網站氣質。
PIXEL PERFECT PRECISION HANDBOOK 3
- 《紀念碑谷》開發商 ustwo 所分享的 UI / UX 設計指南
- PDF http://us2.co/2dJGBSj
- iBook http://us2.co/2dJHme9
- 其實是個簡報形式的小書,字少圖多翻一翻還算快看完。如果看日文速度快的話可以看日文版。
Web UI Design
Google Web Fundamentals 《Design & UI》 (必讀)https://developers.google.com/web/fundamentals/design-and-ui/
- 至少看過上面兩部份《Responsive design》跟《Basics of UX》,其他部份可以等實際上碰到再翻閱
【書籍】響應式網頁設計學習手冊 http://www.taaze.tw/sing.html?pid=11100729127
- 有從零開始做過 RWD 網站的話先看 Part 1 跟 Part 3 ,再看 Chapter 10 以前的各章節
- 沒有的話請從 Chapter 1 念到 Chapter 10
Visual Design
訂閱 or 時常逛下面的 Blog
- 優設(簡中)http://www.uisdc.com/
- Tuts+ Design(英文)https://design.tutsplus.com/tutorials
- PhotoshopVIP(日文)http://photoshopvip.net/
安裝 Panda 或 Muzli 外掛,有空就看看
- https://chrome.google.com/webstore/detail/panda-hacker-news-dribbbl/jhiocdmmaannaccoofjfmjpbfkogmnap?hl=en
- https://muz.li/
【書籍】好設計,4個法則就夠了 http://www.taaze.tw/sing.html?pid=11100754046
- 非視覺設計背景必看必看必看
Front-End Design
學習 CSS 版面配置(必讀) http://zh-tw.learnlayout.com/
【線上課程】CSS Cross-Country https://www.codeschool.com/courses/css-cross-country
工具相關
Sketch
- Design Workflow with Sketch https://www.invisionapp.com/ecourses/design-workflow-with-sketch
- 【線上課程】SKETCH APP TUTORIALS https://leveluptutorials.com/tutorials/sketch-3-tutorials
- Photoshop Users: How To Switch To Sketch http://blog.mengto.com/photoshop-users-how-to-switch-to-sketch/
Bootstrap
- 官方 Spec (必讀)http://getbootstrap.com/
- CSS 跟 Components 看越熟越好,Grid 會考試←實做上會碰到的意味
- 【線上課程】Make a Website: Bootstrap https://www.codecademy.com/courses/web-beginner-en-yjvdd/0/1