design
老同學來相找，一同轉行做 UI 設計師
最近有些高中、研究所老同學、朋友們看到我在六角學院，也會問到如何轉行 UI、前端，很高興你們來詢問，如果對於此領域有興趣的朋友都可以來聊聊。
在此我推薦一些資訊，可以協助你們(或大家)從網頁設計慢慢轉行到 UI、網頁設計師。不過首先，平面設計的觀念到這個領域不一定受用，有許多邏輯性的概念是不同的。如：單位尺寸、色彩、字體字型、資訊流觀念都還是要重新學習，許多東西簡化了，也有許多複雜化了，可以先花點時間從文件下手，將會少走冤枉路(當作睡前讀本也是不錯)，不囉唆，先列出內容給大家參考：
Google Material Design(UI、網頁設計師)
由 Google 所推出的設計規範，也是近幾年 UI 規範的經典，雖然主要是介紹 Andriod 的設計介面(新的文件涵蓋內容更廣泛)，但裡面許多觀念是非常直得學習的，而這些概念套用在 Web 很受用的，如色彩配置介紹了主色與次要色：
- 在畫面上的比重
- 透過次要色強調重要內容的方法
- 與互動之間的關係等等
圖片來自於 Material Design 官網
另外，我也很喜歡它介紹到關於圖層的部分，透過陰影的強弱來表示圖層之間的關係。陰影越強、代表兩個圖層的關係越弱(像是距離越遠)。
影片來自於 Material Design 官網，完整說明
這也是持續在更新的文件，很建議直接觀看官方所提供的英文版本。我過去也有翻譯 Material Design，不過注意，官方更新太快，所以許多內容已不適用。
Bootstrap 文件(網頁設計師)
Bootstrap 是網頁開發的現成框架，裡面許多元件都可以直接拿來用，如果打算進入 Web 開發領域的話，這份文件很值得閱讀，主要原因如下：
非常優秀的格線
圖片來自於 Bootstrap 官網
無論是平面設計或是網頁設計，都會有格線在做支撐，確保我們的畫面具有一定穩定性，這份文件有提到在網頁設計中的格線設計，不過如果覺得 Bootstrap 的文件太難懂，也可以參考：https://960.gs/。
元件設計適合 Web 運用
可以避免繪製畫面的時候，天馬行空的介面讓開發者難以執行，至少這些元件具有一定的規則，能夠確保它的可行性。
我們翻譯的繁體中文文件：http://bootstrap.hexschool.com/
工具使用(UI、網頁設計師)
工具上推薦使用 Sketch 或 Adobe XD，不建議使用熟悉的 Illustrator 及 Photoshop，因為後者在設計上比較偏向印刷使用，許多參數並無法呈現給開發者運用，這也會常常造成設計師與開發者溝通上的障礙，如果堅持使用，則有許多技術上需要克服。
平面轉 UI 會有經歷一些過程，首先應該 “先確保設計能被執行”，這也是大多設計師進入時會遇到的問題。一開始可能會先把平面設計的觀念帶過來如：色彩使用 CMYK、文字尺寸設定 pt、輸出解析度選擇 300dpi…等等，再經過一些練習後，還是會有執行上的問題，工程師無法諒解設計稿的錯誤，此時就能透過 “設計規範” 學習正確的觀念。
進階的 UI 設計師，能夠在工程師執行前就先預期結果，比如：流程動向、產品概念是否正確、資訊呈現是否符合預期…。而這個階段除了上述的基礎要打得穩外，更著要是實戰經驗的累積。
以上，也很歡迎同學們一起來討論 UI、網頁設計喔。