Week 04 Web開發模式與快速雛型建構 Web Development Flow and Fast Prototyping 薛良斌 布丁(hlb) (和多 Handlino Inc.的UI設計師兼共同創辦人) (2013-03-14)

1. App創業與實作
App Entrepreneurship and implementation
Week 04
Web開發模式與快速雛型建構
薛良斌 布丁(hlb)
(和多 Handlino Inc.的UI設計師兼共同創辦人)
(2013-03-14)
本授權條款允許使用者重製、散布、傳輸著作，但不得為商業目的之使用，亦不得修改該著作。
使用時必須按照著作人指定的方式表彰其姓名。

2. CC (Creative Commons)
姓名標示─非商業性─禁止改作
本授權條款允許使用者重製、散布、傳輸著作，但不得為商
業目的之使用，亦不得修改該著作。使用時必須按照著作人
指定的方式表彰其姓名。

3. @h
lb
Web
@hlb, Handlino Inc.

4. @hlb
• Designer / Founder of Handlino Inc.
• We made Registrano, Compass.app and
Fire.app
• Consulting / Training / Outsourcing

6. Why web?

7. Why web?
•
• /
•
•
• ...?

8. http://bombermine.com/

9. http://hexgl.bkcore.com/

10. http://www.simcity.com/

11. web
1.
2.
3. UI
4. HTML Prototyping
5.
6. &

15. http://www.handyui.com/2007/03/24/compromised_design/

16. prototype (n.)
A prototype is an early sample or model built to test
a concept or process or to act as a thing to be
replicated or learned from.

17. Prototyping
everywhere

18. http://arstechnica.com/apple/2013/03/exclusive-super-early-iphone-prototype-had-5x7-screen-serial-port/

19. previz (n.)
Previsualization (also known as pre-rendering,
preview or wireframe windows) is a function to
visualise complex scenes in a movie before filming.
https://en.wikipedia.org/wiki/Previsualization

20. Paper Prototyping

21. http://culturedcode.com/things/blog/2008/06/a-phone-an-ipod-an-internet-communicator-and-a-full-featured-task-manager.html

22. http://culturedcode.com/things/blog/2008/06/a-phone-an-ipod-an-internet-communicator-and-a-full-featured-task-manager.html

23. http://popapp.in/

24. Keynote/PowerPoint
Prototyping

25. HTML Prototyping

26. http://maker.github.com/ratchet/

27. Exercise

28. 4cmx4cm

29. ?

30. ?

31. WHY?

33. xx
xx

34. Resources
• http://sneakpeekit.com/
• http://keynotekungfu.com/
• http://keynotopia.com/
• http://www.invisionapp.com/

35. Q&A