1. 那些年，我們曾經做過的
wireframe、mockup、prototype

2. 廖洧杰
• 前端工程師/5y
• 熱愛HTML & CSS
• 2013年創辦高雄前端

3. 參與職業分布
其他
12%
學生
13%
後端工程師
10%
平面設計、前端
設計、網頁設計
65%

4. 歷年聚會參與共238位(2012/11~2014/3)
一次以上
30%
二次以上
70%

5. 自我介紹

6. 自我介紹
• 姓名/職稱/背景
• 今年你想精進的方向？(前端、後端、UI…)
• 從哪裡知道這個社群？

7. 分享主題

9. 語意介紹
• Wireframe = 線框稿：不能操作、靜態
• Mockup =漂亮的畫面： 不能操作、靜態
• Prototype = 可操作、會動的畫面

10. wireframe
From：http://boagworld.com/design/the-7-wonders-of-wireframes/
http://www.wirify.com/support/user-guide/

11. Mockup
From： http://www.wirify.com/about/wirify-overview-and-why/

12. Prototype - Axure RP
From： http://www.wirify.com/about/wirify-overview-and-why/

13. Prototype – web prototype
From： http://www.wirify.com/about/wirify-overview-and-why/

14. 個案分享(1)

15. 公司流程
企劃
視覺
前端
整理客戶需求
設計wireframe
mockup
me

16. 客戶鬼打牆死迴圈ing..
企劃
視覺
前端
me

17. 有一天老闆對我說..
公司人手不夠
XX專案的PM就讓
你來當了

18. 整體流程
需求訪談
網站系統規劃
wireframe
美術設計
mockup
後端系統
backend
報價
功能規格書

19. 需求訪談
• 信眾一直打來問寺廟活動
• 照片、墨寶索取率高
• 舊網站資料不足、瀏覽器兼容性不高

20. 網站系統規劃
• 規劃網站架構：xmind
• Wireframe：word

21. 功能規格書
• Demo

22. 美術設計Mockup
• Demo

23. 目前瓶頸
• Flash換成js動畫輪播
• RWD使用必要性

24. 其他案例