Wireframe คืออะไร ทำอย่างไร?

Wireframe คืออะไร ?

ก่อนจะเราเริ่มดีไซต์เว็บไซต์ในโปรแกรมพวก Photoshop เราจะต้องรู้ก่อนว่าในเว็บไซต์ที่เราจะทำนั้นต้องมีหรือควรมีอะไรบ้าง แต่ละหน้าจะมีข้อมูลอะไรบ้าง และข้อมูลไหนแสดงอยู่ตรงไหน ซึ่งการทำ Wireframe คือการเอาเนื้อหาที่ควรมีในเว็บไซต์มาจัดเรียงลงบน Layout ของเว็บไซต์เพื่อให้ตอนที่ดีไซน์จะได้รู้ว่าข้อมูลในหน้านั้นๆ ต้องใส่อะไรเข้าไปบ้าง

การทำ Wireframe

ทุกวันนี้มีเครื่องมือที่ช่วยในการทำ Wireframe ให้สะดวกสบายยิ่งขึ้น โดยทั่วไปก็จะมีขั้นตอนประมาณนี้

– สรุปความต้องการลูกค้า
– วางแผนโครงสร้างแอพก่อน ว่าจะมีกี่หน้า อะไรบ้าง แล้วกำหนดจุดประสงค์ของแต่ละหน้า
– เขียน Sitemap ระบุความสัมพันธ์ของแต่ละหน้า
– วาง Layout ของแต่ละหน้าใน Wireframe เช่นรูป และปุ่มต่างๆ
– ระบุ action ที่จะต้องทำในหน้านั้น เช่น ฟังก์ชั่น แนวการดีไซน์ การเชื่อมต่อ DB หรือแม้แต่ transition เพื่อให้ทุกฝ่ายที่เกี่ยวข้อง เพื่อให้นำไปใช้ทำงานได้ทันที

ข้อดีในการทำ Wireframe

- ไม่ต้องเสียค่าอุปกรณ์วาดรูป

- เหมาะกับคนที่ไม่ถนัดวาดรูป

- สามารถส่งให้ลูกค้าดูง่าย ๆ แค่เซฟเป็น PDF หรือบางเว็บส่งลิงค์ออนไลน์ได้เลย

- การแก้ไขส่วนต่างๆ ได้ง่าย แค่ลบ Element ที่ไม่เอาทิ้ง

สนใจอ่านบทความอื่นๆ สามารถติดตามได้ที่ : grasp.asia/blog.php