WireFrame คือ อะไร ?

‌

WireFrame คือ การเปลี่ยน requirements ของลูกค้า หรือ idea ของทางทีมที่ต้องการจะสร้าง Product หรือ feature ใหม่ๆเพื่อส่งมอบให้กับลูกค้า ในรูปแบบของ รูปภาพ แบบร่าง หรือสิ่งที่จะเป็นข้อกำหนดในการทำงานร่วมกัน และยังใช้เป็นเอกสารเอาไว้อ้างอิงได้ ซึ่งจริงๆ แล้ว การทำ Wireframe นั้น ไม่ได้มีรูปแบบตายตัว แต่ละคนหรือบริษัทอาจมีวิธีการแตกต่างกันออกไป แต่จะมีจุดประสงค์เหมือนๆ กัน คือเพื่อให้เห็นภาพรวมของ Product หรือ feature ทำให้ทีมเข้าใจตรงกัน และพัฒนาไปในทางเดียวกันนั่นเอง

‍

WireFrame มีอะไรบ้าง ?

‌

WireFrame นั้นจะไม่มีรายละเอียดด้านทางความสวยงาม ไม่ว่าจะเป็น สีสัน แบบตัวอักษร หรือรูปภาพ แต่จะแสดงเฉพาะ layout ว่าอะไร อยู่ในตำแหน่งไหนบ้าง ลิ้งค์นี้กดแล้วไปหน้าไหนต่อ พอกดแล้วเป็น Overlay มั้ย พอเอาเม้าส์ไป Hover จะเกิดอะไรขึ้น รายละเอียดพวกนี้ เราสามารถใส่ลงไปใน Wireframe ได้เลย

‍

WireFrame สร้างยังไง ?

‌

หลังจากที่ละดมความคิดมาแล้ว ให้เรานำสิ่งที่สรุปมาได้ทั้งหมด มาสร้าง WireFrame เริ่มจากหน้า Website หรือ Mobile Application ของเรานั้น ประกอบไปด้วยอะไรบ้าง อาจจะเริ่มจาก sitemap ก่อนแล้ว ลิส์มาหให้หมดว่ามี่ส่วนประกอบอะไรบ้าง

‌

ต่อมา ให้เราดูว่าเว็บไซตน์ของเรามีหน้าอะไรบ้าง อย่งเช่น หน้า Login, HomePage, Category หรืออื่นๆ ซึ่งหลักที่จะใช้ในการแบ่งประเภทของหน้าก็คือ layout เราจะต้องลิสต์หน้าที่มี layout ต่างกันออกมาให้หมด แล้วออกแบบ layout ของแต่ละหน้า ซึ่งประกอบด้วย header, footer, content, sidebar หรืออื่นๆ ให้เราร่างออกมาคร่าวๆ

‌

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

เมื่อได้ layout ของแต่ละหน้าแล้ว ให้ดูว่าในหน้านั้นๆ ควรมี content อะไรบ้าง ให้ลิสต์มาให้ครบ แล้วค่อยพิจารณาตำแหน่งที่เหมาะสม ให้กับ content นั้นๆ โดยให้เราทำแบบนี้ไปเรื่อยๆ จนครบทุกๆ หน้า

‌

ตอนนี้ จะรู้แล้วว่า แต่ละหน้ามี layout อย่างไร และมี content อะไรบ้าง วางตำแหน่งอย่างไร ขั้นตอนสุดท้ายเป็นการใส่รายละเอียดเพิ่มเติมเข้าไป เพื่อเพิ่มความสมบูรณ์ให้กับ Wireframe อาจเขียนอธิบายการทำงานของกลไกต่างๆ (mechanics) หรืออะไรก็ได้ที่ช่วยให้การพัฒนาเป็นไปในทางที่ถูกต้อง

‍

WireFrame ใช้ Tool ตัวใหนดี

‌

ทุกวันนี้ มีเครื่องมือช่วยเราสร้าง WireFrame มากมาย ที่มีใช้ใช้กันฟรีๆ แต่ tool ที่หาง่ายและใช้งายที่สุดก็คือ ดินสอกับกระดาษและโพสต์-อิท โดยขั้นตอนที่กล่าวมาข้างต้น ใช้แค่เพียงดินสอที่เขียนลงบนกระดาษเป็น layout ด้วยการวาดกล่องต่างๆ แล้วใช้ โพสต์-อิท เขียน content แล้วแปะลงไปในช่องต่างๆ

‌

ข้อดีก็คือ ตอนที่ระดมความคิดกันนั้น สามารถออกความเห็นและแก้ไขได้เลยตลอดเวลา เพื่อให้ความคิดนั้นๆ ออกไปในแนวทางเดียวกันได้เลย มองเห็นภาพรวมเดียวกัน และตอนที่นำเสนอออกไปให้ลูกค้า สามารถเขียน feedback ของลูกค้าลงใน WireFrame นั้นได้เลย ลูกค้าจะได้เห็นสิ่งที่ต้องการปรีบและแก้ไขได้เลย

‌

และสุดท้ายนี้อย่าลืมนำ Wireframe ไปประยุกต์ใช้ให้เหมาะสมกับงานของตัวเองนะครับ

‍

เตรียมตัวที่จะมาพบพวกเรากันได้ใน Rcademy เตรียมพบกับบทเรียนเพื่อคุณ