如何設計好的使用者介面 (Good UI) ?

這篇文章一直放在我的草稿沒有發佈出來,說穿了就是想要將粉絲團的文章整理過來而已。

粉絲團翻譯了 goodui.org 的資料,利用「對」與「錯」的圖解告訴大家怎樣的設計比較好。

我個人覺得這個網站寫的很棒,而且作者已經更新到 70 種小技巧了!未來也希望自己可以持續更新,將圖片和翻譯同步放到這一篇文章裡。

那麼現在就先放之前在粉絲團的介紹吧 😓

https://www.facebook.com/160424550832/posts/10151656942705833

https://www.facebook.com/160424550832/posts/10151735632280833

用 Photoshop 做出相機圖示

今天參考了網路上的教學,用 PhotoShop 做出相機圖示。其實像這類的 icon 應該要用 Illustrator 比較恰當,畢竟使用向量圖在放大 & 縮小的時候都不會失真。不過我也只會用 PhotoShop,剛好教學也是用 PS 做的,超開心 XDD

原文的教學寫得非常清楚,連他設定的數值都秀出來給大家看,所以只要會基本的 PhotoShop,都可以手把手做出一樣的相機圖示喲。不同的頂多就是發揮自己的創意再修修改改吧 :)

教學網址:原創/自譯教程:教你用一個圖層搞定相機圖標(原創文章) (版權內容屬於原作者,我只是單純備份圖片)

想從設計走到前端?先了解前端在幹嘛吧!

你是設計嗎?你想往前端發展嗎?那先瞭解前端在做什麼吧 :)

設計的工作流程

身為一個過來人,應該說我也還正在這條路上行走,有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等,而我是屬於排版這一塊。做網頁的流程大致是:

  1. 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
  2. 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
  3. 會碰到 JS 的互動時,我能找套件就先幫忙做好,不行就放著給後端
  4. 丟給後端套程式。

如果你不是純視覺,我想你的工作流程可能跟我差不多。那,這樣不算是前端嗎?

(閱讀全文…)