Wireframe คืออะไร? แล้วทำไมเราต้องทำก่อนที่จะดีไซน์ด้วยนะ? 

Wireframe คือการสร้างรูปภาพหรือแบบแผนที่ใช้เพื่อแสดงโครงสร้างพื้นฐานและองค์ประกอบหลักของเว็บไซต์ โดยใส่เพียงเนื้อหาหลัก

Wireframe คือการสร้างรูปภาพหรือแบบแผนที่ใช้เพื่อแสดงโครงสร้างพื้นฐานและองค์ประกอบหลักของเว็บไซต์หรือไม่มีการลงสีหรือสไตล์การออกแบบ หรือง่ายๆคือ wireframe เปรียบเสมือนแผนที่ที่ใช้ในการกำหนดแนวทางหรือโ๕รงสร้างของเว็บไซต์ โดยจะมีเนื้อหาหลักที่อธิบายการทำงานของเว็บ โดยทั่วไป, wireframe จะประกอบด้วยส่วนสำคัญของหน้าเว็บหรือหน้าแอปพลิเคชัน เช่นเมนู, กล่องข้อความ, ปุ่ม, รายการ, และตำแหน่งสำหรับข้อมูลหรือสื่อต่าง ๆ

การสร้าง wireframe มีข้อดีหลายประการ:

  • ช่วยทำให้เจ้าของเว็บไซต์ข้าใจโครงสร้างพื้นฐานของเว็บได้ง่ายขึ้น.
  • ช่วยลดความสับสนในการออกแบบ โดยเน้นไปที่โครงสร้างและความสำคัญของข้อมูลก่อน ที่จะไปเน้นใช้เวลาในการออกแบบที่เจาะลึก
  • ช่วยให้ทีมพัฒนา หรือเจ้าของเว็บไซต์เข้าใจแนวทางการดำเนินงานและการเชื่อมโยงของหน้าแต่ละหน้า.

Wireframe เราจะทำก่อนที่จะเริ่มการออกแบบ (design) เนื่องจากมันช่วยให้คนในทีมหรือเจ้าของเว็บไซต์เข้าใจแนวทางของเว็บฯ และหากมีการแก้ไขหรือเปลี่ยนแปลง จะสามารถแก้ไขได้ง่าย

แล้ว Wireframe มีกี่แบบ?

Low-Fidelity Wireframe (Wireframe ระดับต่ำ)
Wireframe ระดับต่ำมักเป็นรูปภาพขาว-ดำหรือขาว-ดำที่ไม่มีรายละเอียดมาก ๆ และใช้เพื่อแสดงโครงสร้างหลักของหน้าเว็บหรือแอปพลิเคชัน โดยไม่ได้ระบุรายละเอียดเทคนิค เป็นเครื่องมือที่มีความคล้ายคลึงกับการวาดรูปโดยใช้ปากกา

 

Medium-Fidelity Wireframe (Wireframe ระดับกลาง)
Wireframe ระดับกลางมักมีรายละเอียดมากขึ้นในเทคนิคและการแสดงผลขององค์ประกอบหน้าเว็บ โดยรวม, แต่ยังคงเป็นรูปภาพขาว-ดำ โดยไม่ให้รายละเอียดเทคนิคที่ละเอียดมาก

 

High-Fidelity Wireframe (Wireframe ระดับสูง)
Wireframe ระดับสูงมีรายละเอียดมากขึ้นในการแสดงผลขององค์ประกอบหน้าเว็บ โดยรวม และอาจมีรายละเอียดเทคนิคที่มากขึ้น อาจมีสีและรูปแบบการแสดงผลที่ใกล้เคียงกับเว็บไซต์จริง.

Low, medium and high-fidelity wireframes (Credit : moqups.com)

RELATE POST

ทำไมออกแบบเว็บไซต์ต้องยึดหลัก UXUI?

UXUI คืออะไร? แล้วทำไม UXUI ถึงสำคับกับการออกแบบ? ปฏิเสธไม่ได้ว่าในยุคปัจจุบันกระแสของการทำ UXUI กำลังมาแรงและเป็นที่นิยม เพราะสองอย่างนี้สามารถทำให้ผู้ใช้งานสนใจเว็บไซต์เรามากขึ้น…

อ่านเพิ่มเติม