เครื่องมือสร้าง Wireframe
สำหรับนักออกแบบเว็บไซต์และแอปพลิเคชัน

Wireframe คืออะไร

         Wireframe คือ แผนผัง โครงสร้าง ภาพรวม พิมพ์เขียว การจัดองค์ประกอบของ Interface บางคนอาจเรียกว่า Mockup เพื่อให้ผู้ออกแบบ ผู้เขียนโปรแกรมและผู้ใช้งาน มีความเข้าใจในภาพรวมของระบบตรงกัน โดยผู้ใช้งานสามารถออกความเห็นหรือปรับแก้หรือรวมไปถึงทำข้อตกลงกันก่อนที่จะลงมือพัฒนาโปรแกรมต่อไป

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

          Wireframe อาจจะถูกออกแบบด้วยวิธีเขียนบนกระดาษ ออกแบบจากโปรแกรมคอมพิวเตอร์หรือจาก website online ซึ่งมีทั้งแบบฟรีและมีค่าใช้จ่าย

Wireframe แบ่งเป็น 3 level ดังนี้

1. Low-fidelity wireframes: เขียนบนกระดาษหรือบนโปรแกรม เขียนไอเดียคร่าวๆ
2. Medium-fidelity wireframes: มีการวางตำแหน่งต่าง ๆ ที่หน้าจอ 
3. High-fidelity wireframes: มีรายละเอียดเสมือนจริง วางตำแหน่ง กำหนด wording ต่าง ๆ ที่จะใช้หรือใกล้เคียงกับการใช้งานจริง

Wireframe tools

          เครื่องมือที่จะใช้ในการออกแบบ wireframe มีอยู่มากมาย แบ่งง่าย ๆ มีแบบ Online เช่น ใน website ต่าง ๆ และ แบบ Offline ที่ต้องลงในเครื่องคอมพิวเตอร์หรือ smartphone ตัวอย่าง wireframe เช่น

• เครื่องมือแบบออนไลน์ : Cacoo, Jumpchart, FrameBox, iPlotz, MockFlow, Google Docs
• เครื่องมือแบบออฟไลน์ : Microsoft Visio, OmniGraffle, Adobe Photoshop, Adobe Firework, Pencil Project, Justinmind

ตัวอย่าง online wireframe ที่น่าสนใจ

MockFlow.com เป็น online wireframing ที่น่าสนใจตัวหนึ่ง จุดเด่นของ website นี้คือ

1. ใช้งานง่าย
2. มี component หลากหลาย สวยงาม ทันสมัย
3. สามารถใช้ UI package หรือ template สำเร็จรูปจากสมาชิกคนอื่นที่เปิดให้ดึงมาใช้งานได้
4. สามารถ download โปรแกรมมาลงที่เครื่องคอมพิวเตอร์ได้
5. สามารถ export ได้หลายรูปแบบ เช่น PNG, PDF, PowerPoint, Word, HTML

         MockFlow สามารถใช้งานได้ทั้งแบบฟรีและแบบมีค่าใช้จ่าย โดยการใช้งานแบบฟรีหรือแบบ Basic จะมีข้อจำกัดให้ใช้งานได้บางฟังก์ชัน เช่น ใช้งานได้ 3 หน้าใน 1 project และไม่สามารถ export เป็นรูปแบบ html ได้

         MockFlow เป็นอีกทางเลือกหนึ่งสำหรับผู้ที่สนใจในการออกแบบ wireframe ซึ่งผู้ออกแบบไม่จำเป็นต้องมีความรู้ด้าน programming มาก หากเคยใช้งานโปรแกรมประเภท Microsoft Visio ก็จะใช้เวลาในการเรียนรู้ไม่นานนัก และหากได้ลองใช้งานไปเรื่อย ๆ ก็จะเกิดความชำนาญ สามารถต่อยอดไปยัง wireframe ตัวอื่น ๆ ที่มีการทำงานแตกต่างกันออกไปได้อย่างง่ายดาย

อ่านเพิ่มเติม UX/UI Design คืออะไร