Wireframe นั้นมีเปรียบเสมือนพิมพ์เขียวของการออกแบบสถาปัตยกรรมหรือการออกแบบสิ่งปลูกสร้าง มันเป็นโครงร่าง สองมิติหน้าเว็บไซต์หรือหน้าแอปที่มีไว้ให้เห็นภาพรวมของหน้าเว็บไซต์นั้นๆก่อน โดยจะมีรายละเอียดต่างๆที่สามารถบอกได้ถึง Flow การไหลของ User, ฟังชั่นการใช้งาน เป็นต้น
Wireframe จะต้องแสดงให้เห็นถึงลักษณะโดยรวม แนวคิด ธีมสี และลักษณะหน้าตากราฟิกคร่าวๆ เรามักจะเห็น Wireframe ที่ใช้ดินสอในการออกแบบและเขียนแบบขึ้นมา เช่นเดียวกับการออกแบบสิ่งปลูกสร้างต่างๆเพื่อให้สามารถลบและแก้ไขได้ง่ายๆ แต่ในปัจจุบันนี้มีเว็บไซต์ที่สามารถเข้าไปใช้งานเพื่อลองออกแบบหน้าเว็บไซต์ Wireframe ได้ เช่น (lucid.app)
Wireframe เป็นเครื่องมือที่นักออกแบบ UX ใช้กันมากที่สุด มันเป็นเครื่องมือที่สามารถช่วยให้ผู้ตัดสินใจ ลูกค้า หรือผู้ที่มีมีส่วนได้ส่วนเสียภายในเว็บไซต์จะสามารถเห็นภาพและเข้าใจการทำงานเบื้องต้นของเว็บไซต์ก่อนที่จะเป็นขั้นตอนของ Mockup และพัฒนาระบบในรูปแบบของ Interface ภายหลัง
ตามตัวอย่างด้านบนที่แสดงถึงการออกแบบ Wireframe แบบเรียบง่าย ใช้คำบรรยายภาพเพื่ออธิบายลักษณะการใช้งานของหน้าแอปพลิเคชั่น
หากพูดถึงในมุมมองของ Product Life Cycle แล้ว Wireframing จะอยู่ในช่วงการสำรวจตลาดของผลิตภัณฑ์หรือเว็บไซต์ นักออกแบบจะทำหน้าที่ทดสอบ Scope ของเว็บไซต์ด้านการใช้งานเป็นหลักพวกเขาจะจำลองการไหลของ User ขึ้นและเขียนออกมาเป็นแผนภาพให้เข้าใจได้ง่ายที่สุด
ปัจจัยสำคัญ 3 ข้อของ Wireframing
- Wireframes ให้มุมมองแนวคิด รูปแบบด้านของ User เป็นหลัก มักมีการทดสอบการใช้งาน การโต้ตอบระหว่างผู้ใช้ และเก็บประเด็นปัญหาด้านการใช้งานไปสร้างและพัฒนาเว็บไซต์นั้นๆต่อ
- Wireframes จะระบุรายละเอียด คุณลักษณะหน้าตาของเว็บไซต์ และทำหน้าที่เป็นสื่อกลางระหว่างนักออกแบบกับลูกค้า
- Wireframes จะต้องถูกออกแบบขึ้นมาอย่างเรียบง่ายและไม่ซับซ้อน ในที่นี้หมายถึงระยะเวลาในการออกแบบ Wireframes เพียงคุณมีกระดาษกับปากกาคุณก็สามารถสร้าง Wireframes จากไอเดียของคุณได้ในไม่กี่นาที
Wireframes 3 ประเภท
Low-fidelity wireframes – การเขียน ออกแบบในลักษณะขั้นต้น เรียบง่ายและรวดเร็ว นำเสนอเพียงภาพ หน้าตา ขั้นพื้นฐานของเว็บไซต์ มักเป็นจุดเริ่มต้นของการออกแบบ
Mid-fidelity wireframes – เป็นโคร่งร่างที่ถูกใช้บ่อยทึ่สุด นำเสนอภาพเว็บไซต์ที่แม่นยำมากกว่าแบบแรก มีลักษณะ องค์ประกอบ เลยเอ้าที่เห็นภาพได้ชัดเจนกว่า มักใช้เครื่องมือในการออกแบบเป็นลักษณะดิจิทัล เช่น Sketch หรือ Balsamiq
High-fidelity wireframes – โคร่งร่างที่สมบูรณ์ที่สุด แสดงลักษณะของรูปภาพประกอบ ตัวหนังสือที่ระบุไว้ชัดเจน มักเหมาะกับการใช้ออกแบบเว็บไซต์ในลักษณะที่ต้องการทราบถึงการโต้ตอบระหว่างผู้ใช้ที่ซับซ้อน มักถูกทำในขั้นตอนท้ายสุดก่อนปล่อย Mockup ออกมาให้ทดลองใช้จริง
ในปัจจุบันมีเว็บไซต์ที่เปิดให้ออกแบบ Wireframes มากมายหลายแบบ เช่น Mockplus, wireframe, figma, pencil.evolus, ninjamock, fluidui, mockflow
ตัวอย่าง Wireframes
Elvira Hellenpart’s wireframes for the VocabApp project,
Aaron Akbari Mort about his Inktank project.
Shopify webpage wireframe example
Travel blog (landing page) wireframe example
Social media management tool wireframe example
Banking (dashboard) wireframe
