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

การสร้างเว็บไซต์ขึ้นมานั้น ต้องอาศัยองค์ประกอบหลาย ๆ อย่าง ในส่วนของการออกแบบ “Wireframe” หลาย ๆ คนก็ยังไม่รู้จักว่าคำนี้นั้นคืออะไร ซึ่งวันนี้เราจะพามาทำความรู้จักกับ Wireframe กันให้มากขึ้นว่าจะช่วยเราจัดการกับปัญหายุ่งยากในการสร้างเว็บไซต์ได้อย่างไรบ้าง

Wireframe คืออะไร?

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

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

ความสำคัญของ Wireframe

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

ประเภทของ Wireframes

ประเภทของ Wireframes สามารถแบ่งหลัก ๆ ได้เป็น 3 ประเภท คือ 

• Low-Mid-High Wireframe (Source)

เป็นการถอดรูปของเว็บเพจให้เห็นภาพรวมและเป็นจุดเริ่มต้นของงานออกแบบเว็บไซต์ ไม่จำเป็นต้องใช้ซอฟต์แวร์ใด ๆ ไม่ต้องเป๊ะ อาจเป็นเริ่มต้นจากการวาดหรือเขียนด้วยมือลงกระดาษได้เลย มีเพียงไอเดียภาพรวม กล่องรูป กล่องข้อความ ว่าอะไรอยู่ตรงไหน  เหมาะสำหรับขั้นตอนที่เพิ่งเริ่มต้น หรือบางครั้งดีไซน์เนอร์มี product concepts เยอะมากแล้วต้องการการตัดสินใจที่รวดเร็วว่าควรเอาอะไรออก ควรปรับอะไรต่อ เป็นต้น 

• Mid-fidelity wireframes (Mid-Fi)

เป็นการลงรายละเอียดมากขึ้นเพื่อแสดงให้เห็นว่า แอพพิลเคชั่น จะมีส่วนสำคัญ มี feature อะไรบ้าง ที่ input เข้าไป ควรวางข้อความ หรือรูปภาพไว้ตรงไหน มีตำแหน่งของเลเอาต์ในการจัดการตำแหน่งที่ชัดเจนขึ้น ลงรายละเอียดมากกว่าแบบแรก สำหรับ Mid-fidelity wireframes (Mid-Fi) มักใช้ซอฟต์แวร์ในการออกแบบ เช่น ฟีเจอร์มีอะไรบ้าง component ส่วนต่าง ๆ อยู่ตรงไหน มีการเลือกใช้นำ้หนักฟอนต์ ขนาดเล็กใหญ่ในแต่ละจุดเพื่อแบ่งแยกหัวข้อและเนื้อหา แต่ยังไม่ใช้รูป หรือฟอนต์จริง และส่วนมากจัดทำเป็นขาวดำหรือ monochrome

• High-fidelity wireframes (Hi-Fi)

เป็นการใส่รายละเอียดทุกอย่างที่เป๊ะขึ้น รูป หรือข้อความที่ใส่ใกล้เคียงกับของจริง เพื่อให้เห็นภาพชัดเจน ไม่ได้เอาข้อความสมมติ หรือ lorem ipsum มาใช้เหมือน Low Fidelity  สามารถเห็นภาพแอปพลิเคชันที่เหมือนของจริงที่สุด

Wireframe tools

เครื่องมือที่จะใช้ในการออกแบบ wireframe มีอยู่มากมายซึ่งมีทั้งแบบ Online ที่สามารถทำผ่านwebsite ต่าง ๆ และ แบบ Offline ที่จะต้องทำการดาวน์โหลดมายังเครื่องคอมพิวเตอร์ เช่น

• เครื่องมือแบบออนไลน์ : เป็นเครื่องที่ใช้บนหน้าเว็บไซต์ต่าง เช่น  Cacoo, Jumpchart, FrameBox, iPlotz, MockFlow, Google Docs ซึ่งมีทั้งที่สามารถใช้งานได้แบบไม่เสียเงิน ไม่มีเงื่อนไข เสียค่าใช้จ่าย หรือต้องเป็นสมาชิกก่อนให้สามาถเลือกใช้ได้หลายเว็บไซต์ ในปัจจุบัน
• เครื่องมือแบบออฟไลน์ :ทั้งที่สามารถใช้งานได้แบบไม่เสียเงิน ไม่มีเงื่อนไข เสียค่าใช้จ่าย หรือต้องเป็นสมาชิกก่อนใช้งาน เช่น  Microsoft Visio, OmniGraffle, Adobe Photoshop, Adobe Firework, Pencil Project, Justinmind

วิธีการทำ Wireframes

การทำ wireframes ทำได้หลายแบบขึ้นอยู่กับความละเอียดที่ต้องการ ขั้นแรกอาจร่างขึ้นมาโดยใช้ดินสอก่อนก็ได้ วาดเพียงคร่าว ๆ ว่าเวลา users เข้ามาใช้งานจะต้องเจอกับอะไรบ้าง แค่ flow ที่เป็นใจความสำคัญก็พอ เราสามารถร่างขึ้นมาแค่ 5 หน้าหลัก ๆ ดังต่อไปนี้

1. หน้า sign up / log in
2. หน้า product list page
3. หน้า product details page
4. หน้า Cart
5. หน้า Checkout page

เราสามารถลงรายละเอียดเพิ่มเติมได้ โดยอาจเพิ่ม flow อื่นที่อยากให้มีใน e-commerce เว็บไซต์ เช่น หน้า user profile หรือหน้า order tracking หลังจากนั้นก็ลง details เกี่ยวกับ feature หรือ function ต่าง ๆ ของเรา

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

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