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

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 กันก่อนจะออกแบบให้สวยงามเพื่อการทำงานที่เป็นระบบและช่วยประหยัดเวลาได้ด้วย

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments