Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Web Design - 從需求到設計,我要思考什麼?

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 63 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Similares a Web Design - 從需求到設計,我要思考什麼? (20)

Anuncio

Más reciente (20)

Web Design - 從需求到設計,我要思考什麼?

  1. 1. 從需求到設計 我要思考什麼? RICE TSENG | INTERACTION DESIGNER @YAHOO
  2. 2. Interaction Designer @Yahoo Visual Designer, UI Engineer @Trend Micro Interaction Designer @Dlink NCCU - Digital Content and Technologies - TUI, HCI
  3. 3. UX v.s UI Product Design Process  Web Design Process Skills & Tools AGENDA
  4. 4. UX UI有⼀樣嗎?
  5. 5. PRODUCT設計流程
  6. 6. strategy inspiration implementationideation
  7. 7. strategy inspiration implementationideation Who & Why? Empathy Hypothesis Meaningful innovation start with USERS
  8. 8. strategy inspiration implementationideation Brainstorm/ How Might We storyboarding
  9. 9. implementation
  10. 10. idea prototype build measure learn build measure iterate design concept interaction design visual design design language usability testing development bucket test data analysis user night
  11. 11. WEB設計流程
  12. 12. 常常我們會聽到 ⼀種需求
  13. 13. 「要做⼀個...網站, 要做漂亮⼀點...」
  14. 14. 但身為⼀個 設計師
  15. 15. 我們應該思考的是...
  16. 16. 使⽤者 網站⽬的 時程 合作對象 價錢 案例分析
  17. 17. REQUIREMENTS 客⼾需求 1
  18. 18. 我們那些聰明的客⼾ 永遠都不知道⾃⼰需要什麼
  19. 19. 「滑動起來很活潑的...那種」
  20. 20. 我的理解是 滑動 = scroll 活潑 = 有互動性,按鈕或是前後背景的層次
  21. 21. RWD? Parallax scrolling? Flat design style?
  22. 22. PLANNING 規劃 2
  23. 23. 了解使⽤者 誰會造訪這網站|為什麼|核⼼⽬的是什麼
  24. 24. 網站地圖 網站架構|流程
  25. 25. 框線圖 介⾯|內容規劃
  26. 26. UsernameSearch Keyword System info Client Dashboard Processes Service Application Interaction User Drivers StartupTask File Manager Reboot Note Remote Logo CPU information Core 0 Core 1 Disk Drives 50GB 60GB C: D: 30GB E: Processes ( Top 5 per GPU ) sort sort Memory Information UsernameSearch Keyword System info Client Dashboard Processes Service Application Interaction User Drivers StartupTask File Manager Reboot Note Remote Logo CPU information Core 0 Core 1 Disk Drives 50GB 60GB C: D: 30GB E: Processes ( Top 5 per GPU ) sort sort Memory Information
  27. 27. DESIGN 開始做設計,應該注意什麼 3
  28. 28. 設計與前置作業 TYPOGRAPHY COLOR SCHEME GRID SYSTEM
  29. 29. design standard typography iconography interaction Color Palette
  30. 30. 善⽤GRID排版
  31. 31. 思考響應式網⾴的設計 不同平台,導覽也會不同 圖⽚的排版會流動式的改變
  32. 32. DEVELOPMENT 設計師沒事了嗎? 4
  33. 33. 切圖與溝通 哪邊要切圖|可否⽤CSS 或 ICON FONT 代替
  34. 34. 原型 PROTOTYPE
  35. 35. Communication Prototype =
  36. 36. GapDesigner Other RD PM Designer stakeholders
  37. 37. Gapconcept execution Language
  38. 38. SKILL TOOL
  39. 39. DESIGN PS | SKETCH | ICON FONT
  40. 40. CODING CSS3 | HTML5 | JS | BOOTSTRAP | WEB FONT
  41. 41. Thank you dribbble : https://dribbble.com/ricetseng

×