W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]
Download as PPTX, PDF0 likes240 views
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-1-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-9-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-10-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-11-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-12-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-13-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-36-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-37-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-38-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-39-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-40-320.jpg)
![W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]](https://image.slidesharecdn.com/igd222-160906125612/85/W-3-IGD-222-INTERFACE-DESIGN-2559-49-320.jpg)
W.3 - IGD 222 INTERFACE DESIGN [ 2559 ]
- 2. IGD 222 WEEK 3 : SITEMAP, WIREFRAME - 06.09.2016 - INTERFACE DESIGN
- 3. SITEMAP
- 4. WHAT ?
- 5. SITEMAP หรืออีกชื่อที่คุ้นหูว่า แผนผังเว็บไซต์ หรือ แผนที่เว็บไซต์ เป็นส่วนหนึ่งของ เว็บไซต์ ที่อธิบายถึงโครงสร้างของ เว็บไซต์ได้ทั้งหมด ซึ่ง Sitemap นี้เองจะเป็นเหมือน สารบัญ หรือ หน้าดัชนี ของเว็บไซต์ ที่่รวม Link ทั้งหมดของเว็บไซต์ไว้ภายในหน้า เดียว และยังช่วยสร้างปฏิสัมพันธ์ที่ดี ต่อ Search Engine
- 6. RESULT ?
- 7. ทาให้ผู้ชม Application เข้าใจโครงสร้าง และเข้าถึงข้อมูลที่ต้องการได้รวดเร็วยิ่งขึ้น1. 2. 3. 4. Sitemap ทา ให้ผู้พัฒนา Application เข้าใจโครงสร้าง และเห็นภาพรวมของ Link ทาให้ง่ายต่อการพัฒนา เนื่องจาก Sitemap จะแบ่งส่วนของ Application ไว้อย่างชัดเจน ทาให้ Bot ของ Search Engine เข้ามาเก็บข้อมูล (index pages) ได้รวดเร็ว และ ง่ายขึ้น เป็นส่วนหนึ่งของการทา SEO
- 8. EXAMPLE ?
- 14. KNOWLEDGE ?
- 16. WIREFRAME
- 17. WHAT ?
- 18. WIREFRA MEจุดประสงค์ก็เพื่อที่จะเป็นเครื่องมือที่ ช่วยให้การดาเนินงานเป็นไปอย่าง ราบรื่น เพราะ Wireframe จะ เป็นข้อกาหนดในการทางานร่วมกัน และยังใช้เป็นเอกสารเอาไว้อ้างอิงได้ ซึ่งจริงๆ แล้ว การทา Wireframe นั้น ไม่ได้มีรูปแบบ ตายตัว แต่ละคนหรือบริษัทอาจมี วิธีการแตกต่างกันออกไป แต่จะมี จุดประสงค์เหมือนๆ กัน คือเพื่อให้ เห็นภาพรวมของงาน ทาให้ทีมเข้าใจ ตรงกัน และพัฒนาไปในทางเดียวกัน
- 19. WHEN ?
- 20. WIREFRA MEก่อนที่จะลงมือทา Wireframe เราควรมีการเตรียมพร้อมก่อน เริ่มตั้งแต่เรื่องของ Requirements ต่างๆ ของ โปรเจค เวลาคุยกับลูกค้า ต้องตกลง กันให้ชัดเจน และมั่นใจว่าเข้าใจ ตรงกัน แล้วทาการสรุป Requirements อีกครั้ง ยิ่ง ละเอียดมากเท่าไรยิ่งดี เมื่อสรุป Requirements ได้ แล้ว เราควรนาสิ่งที่ได้สรุป มาระดม ความคิดกันก่อน ว่าสิ่งนี้โอเคมั้ย ทา จริงได้มั้ย มีข้อเสนอแนะ หรือ ข้อจากัดอะไรบ้างมั้ย ขั้นตอนนี้สาคัญ กับงานและทีม
- 21. HOW ?
- 33. RESULT ?
- 34. WIREFRA MEWireframe ก็เหมือนกับการ วางแผนการทางานของเรา โดยเขียน ออกมาเป็นแผนภาพเพื่อให้เข้าใจได้ ง่าย โดย Wireframe นั้นจะไม่ มีรายละเอียดทางด้านความสวยงาม ไม่ว่าจะเป็น สีสัน แบบตัวอักษร หรือ รูปภาพ แต่จะแสดงเฉพาะ Layout ว่าอะไร อยู่ในตาแหน่งไหนบ้าง ลิ้งค์นี้ กดแล้วไปหน้าไหนต่อ พอกดแล้วเป็น Overlay มั้ย พอเอาเม้าส์ไป Hover จะเกิดอะไรขึ้น รายละเอียดพวกนี้เราสามารถใส่ลง ไปได้เลย
- 35. EXAMPLE ?
- 41. KNOWLEDGE ?
- 44. PRACTICE !
- 45. BREAK 10 Minutes
- 46. 1. เขียน SITEMAP 2. เขียน WIREFRAME
- 47. HOMEWORK !
- 48. 1. เขียน SITEMAP 2. เขียน WIREFRAME 3. INTERACTIVE BOX
Editor's Notes
- #6: คืออะไร
- #8: เพื่ออะไร
- #19: คืออะไร
- #21: ทำตอนไหน
- #22: ทำอย่างไร
- #23: ก่อนจะมี wireframe จะต้องมี sitemap
- #24: เมื่อเราได้ layout ของแต่ละหน้าแล้ว ให้เราดูว่าในหน้านั้นๆ ควรมี content อะไรบ้าง ให้ลิสต์มาให้ครบ แล้วค่อยพิจารณาตำแหน่งที่เหมาะสม ให้กับ content นั้นๆ ครับ ให้เราทำแบบนี้ไปเรื่อยๆ จนครบทุกๆ หน้าครับ
- #25: ตอนนี้ เราจะรู้แล้วว่า แต่ละหน้ามี layout อย่างไร และมี content อะไรบ้าง วางตำแหน่งอย่างไร ขั้นตอนสุดท้ายเป็นการใส่รายละเอียดเพิ่มเติมเข้าไป เพื่อเพิ่มความสมบูรณ์ให้กับ Wireframe ของเรา
- #35: เพื่ออะไร
- #43: Download Wireframe สำหรับ iPhone 5 พร้อมกริด Download Wireframe สำหรับ iPad พร้อมกริด Download Wireframe สำหรับเว็บไซต์ แถมระบุมาให้ด้วยว่าจะดีไซน์สำหรับหน้าจอขนาดเท่าไร Download กระดาษหลายรูปแบบ ทั้งแบบมีกริด ไม่มีกริด และ Wireframe ของ Desktop, iPhone, iPad
- #44: Prototype – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน Pencil Project – โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Mac OS Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า WireframeCC – Web App สำหรับทำ Wireframe ง่าย ๆ มีทั้งขนาด Desktop, Tablet, Mobile ให้เลือก (ขอขอบคุณคุณ Limpanitivat Pichai ที่แนะนำครับ)