RWD 怎麼畫 Wireframe?
之前曾經去演講過的學校,有學生傳訊問了關於 RWD 設計的問題。
設計師在繪製 RWD 網站的 Wireframe 時,會繪製 PC 和 Mobile 兩個版本嗎?或是直接使用軟體去做版本之間的切換呢?
若是沒有軟體可以直接使用的話,那又要如何繪製兩種版本的 Wireframe 呢?
px、pt、dp、sp 大混戰
dpi、ppi、px、pt、dp、sp 之類的名詞釋義網路文章已經有很多,但全部混在一起運用到 Mockup 上時該怎麼處理?
這個問題其實我也爬了滿久的文,沒翻到有比較完整的說法,所以自己整理了一篇。
Prototype 大觀園:Prototype 優劣分析步步來
本文同步刊登於 NTUChallenge Blog 挑戰誌
很多專案在開發過程中,會製作 Prototype(原型)測試與驗證構想。專案開發會經過許多階段,也有很多種製作 Prototype 的方式。該如何配合專案開發進度,製作適合的 Prototype?
試玩 Art Text 3 文字特效工具
Art Text 3 剛上 Mac Store 時我就注意到了,首頁 Banner 輪播很醒目。當時就在官網下載免費試用玩了下,覺得超酷炫,但暫時用不太到的樣子沒買。突然半夜朋友傳訊通知「喂、Art Text 3 降價囉!」,然後就手滑了…(遮臉)
習慣用 Photoshop 畫 Mockup 的理由
繪製 Mockup 的工具,目前戰最兇的應該就是 PS 和 Sketch 吧,在課堂上有學員問了這個問題。我自己是 Photoshop 派的,會推薦初學者學習的也絕對是 Photoshop。
試用:Flinto for Mac
Prototype 工具滿山滿谷一直生,昨天 App Store 新上架一款叫做「Flinto 」的 Prototype 工具。抱持著 你花錢買這工具是想解決什麼問題?沒有?你買它幹嘛? 的心情,本來想裝死,但應台灣設計師 Teresa 要求,我試玩了下寫心得分享,要不要掏 NT2,990 元出來見人見智了。
進化吧!Mockup 展示圖
(裝了 Photoshop CC 2015 後一堆外掛都 GG 了,幸好最重要的幾個都活著。)
設計師 ALEX BENDER
在講步驟前先來介紹這位設計師 ALEX BENDER ,相信他的作品很多人都看過。單張 iPhone Mockup 效果圖的前景深效果做得很精緻。
用 Hype3 做 Prototype:基礎過場
動態效果、轉場動畫對UI的戲份越來越重…其實一直都很重只是大多用在遊戲上,功能型 App 運用這種技巧最近越吃越兇,且製作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設計師來說有難度。我找到好用的方式可以解決這個問題:Hype3+Frameless。
這篇是最簡單的過場設定、最偷吃步、不需要技術,只要會寫簡報 PTT 或是 Keynote 就做的出來,所以連 Planner 和 PM 也保證上手無問題。
Note:Prototype 製作軟體
最近在找做 Prototype 的軟體或服務,狂測了一堆眼都花了。 Prototyping Tools 搜集很多做 Prototype 的工具,我還沒把每一款都摸過,先筆記有沾水的部份。可能某些服務的功能我沒摸透,如果你有其他的想法歡迎補充。
心智圖簡易教學
昨天群裡聊到各種沒有設計流程又趕得要死的公司現況,我就在想,有沒有什麼辦法能在短時間內產出一份還像樣又不用教 PM 或企劃怎麼看的文件,且門坎低、人人好上手,又能當成開發依據。想來想去,大概是心智圖吧。
心智圖我覺得是整理和記錄腦中思考和推理邏輯的好方法,一層層演進的關係讓閱者可以快速理解為什麼會這樣分類歸納。就以設計來說,分析、歸納、找出秩序是最重要的事。
試玩 Affinity Photo-Inpainting Brush
最近發佈 Affinity Photo 這修圖軟體的 Bate 版,官網影片看得超神奇的,尤其是修補工具,根本 +9 神器。現在可以免費下載,當然跑去載了份來玩玩。