Wireframe คืออะไร ทำไมดีไซเนอร์ต้องรู้ พร้อมวิธีทำ + Tool ฟรี !!

designil

การทำ Wireframe (ไวร์เฟรม) เป็นสิ่งที่สำคัญมากในชีวิตการเป็นเว็บดีไซเนอร์ครับ หลายคนคิดว่างานออกแบบเว็บไซต์หมายถึง เปิดโปรแกรม Photoshop แล้่วเริ่มละเลงใส่รูป ใส่ตัวอักษร ใส่สี เสร็จแล้วส่งลูกค้า

แต่จริง ๆ แล้วขั้นตอนในการทำเว็บไซต์กว่าจะมาถึงขั้น Design ใน Photoshop จะมีขั้นตอนที่เรียกว่า Wireframe เกิดขึ้นมาก่อน

Wireframe ของเว็บไซต์คืออะไร

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

ตัวอย่าง Wireframe เว็บไซต์ NASCAR
ตัวอย่าง Wireframe ของเว็บไซต์ NASCAR โดยคุณ Chris Stevens

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

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

ตัวอย่าง Wireframe จากเว็บไซต์ Cartoonity.com โดยคุณ Martin
ตัวอย่าง Wireframe จากเว็บไซต์ Cartoonity.com โดยคุณ Martin

Wireframe VS Prototyping แตกต่างกันยังไง

หลายคนอาจจะเคยได้ยินคำว่า Prototyping เว็บไซต์ มาครับ ซึ่งการทำ Prototype จะแตกต่างกับการทำ Wireframe เล็กน้อยครับ

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

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

ตัวอย่างง่าย ๆ ของ Prototype คือ เราลองเอา Twitter Bootstrap มาทำ Layout ของเว็บไซต์ไปให้ลูกค้าดูว่าชอบมั้ย เพราะ Twitter Bootstrap สามารถทำ Layout, ใส่ปุ่ม, ใส่ Content ได้รวดเร็วมาก แต่ข้อเสียคือไฟล์ CSS ของ Bootstrap หนักทำให้เว็บไซต์โหลดช้า (กว่าเขียนเอง) ซึ่งถ้าทำไปแล้วลูกค้าชอบ Layout นี้เราก็อาจจะเอามาเขียนใหม่อีกทีโดยไม่ใช้ Bootstrap ก็ได้ หรือลบ CSS ใน Bootstrap ที่ไม่จำเป็นออกไปให้หมด

Twitter Bootstrap 3
Twitter Bootstrap 3 – Download

ทำ Wireframe ยังไง ใช้อะไรทำ

การทำ Wireframe หลัก ๆ จะทำได้ 2 วิธีครับ คือ วาด Wireframe ในกระดาษ หรือ วาด Wireframe ในคอมพิวเตอร์

1) วาด Wireframe ในกระดาษ

Wireframe Website Pen
ตัวอย่าง Wireframe เว็บไซต์บนกระดาษ โดยคุณ Geoffrey

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

ข้อดีของการวาด Wireframe ในกระดาษ คือ ทำได้เร็ว ใช้อุปกรณ์ไม่แพง สามารถทำที่ไหนก็ได้ ไม่ต้องมีคอมพิวเตอร์ หยิบแค่สมุดกับดินสอไปวาดที่ร้านกาแฟชิว ๆ ก็ยังได้ครับ

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

2) วาด Wireframe ในคอมพิวเตอร์

Wireframe Online Tool
ตัวอย่างการทำ Wireframe ออนไลน์ ด้วย Cacoo.com

นอกจากการทำ Wireframe ในกระดาษแล้ว ตอนนี้ก็มีโปรแกรมสำหรับทำ Wireframe บนคอมพิวเตอร์ออกมามากมาย โดยเฉพาะแบบที่เป็น Web App ทำ Wireframe บนเว็บไซต์ได้เลย แค่ลาก Element ต่าง ๆ เช่น หัวข้อ, รูป, เมนู, แท็บ etc. มาวางบนหน้าเว็บไซต์ก็กลายเป็น Wireframe ออกมาแล้ว

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

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

แจก Download กระดาษ Wireframe ปรินท์ไปวาดฟรี ๆ

wireframe print free ดาวน์โหลดไวร์เฟรม ฟรี
wireframe print free

ใครอยากปรินท์กระดาษที่มีกริด / ตารางให้เรียบร้อยสำหรับปรินท์เอาไปวาด Wireframe ได้ทันที แอดมินได้รวบรวม Wireframe เว็บไซต์, iPhone, iPad มาให้เลือก Download กันไปใช้ครับ

Wireframe PDF แจกฟรีสำหรับ print มาใช้งาน – ในเว็บนี้จะชื่อ Sketchize รวบรวมตัวอย่าง Wireframe แบบต่าง ๆ ให้เราเลือกดาวน์โหลดไปใช้งาน มีทั้งแบบกริดที่เป็นจุด และหน้าจอเปล่าสำหรับวาดมือ

หน้าจอที่สามารถดาวน์โหลดได้ : Desktop, Tablet และ Mobile

ท่านใดมีเว็บอื่น ๆ ที่น่าสนใจสามารถแนะนำเข้ามาได้ในส่วน Comment เลยนะครับ ช่วยกันแชร์ของดี ๆ ครับ

แนะนำเว็บไซต์ออนไลน์ สำหรับทำ Wireframe ฟรี

Wireframe Website Online

สำหรับใครที่อยากทำ Wireframe ในคอมพิวเตอร์มากกว่า แอดมินก็รวบรวม Tool ออนไลน์ / โปรแกรมช่วยทำ Wireframe ที่ใช้ฟรีมาให้ครับ

  1. Justinmind – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน
  2. Pencil Project – โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Mac OS
  3. Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
  4. JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
  5. FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที
  6. iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า
  7. WireframeCC – Web App สำหรับทำ Wireframe ง่าย ๆ มีทั้งขนาด Desktop, Tablet, Mobile ให้เลือก (ขอขอบคุณคุณ Limpanitivat Pichai ที่แนะนำครับ)

Wireframe tool แนะนำสำหรับสาย Designer (UX/UI)

เรามี Tool ที่รับการแนะนำจากดีไซน์เนอร์ต่างประเทศดังต่อไปนี้ครับ

  1. Muqups
  2. ProtoPie
  3. Mockflow
  4. Pidoco
  5. Balsamiq
  6. FluidUI
  7. UXPin
  8. Gliffy
  9. Lucidchart
  10. Proto.io
  11. Miro
  12. Framer
  13. Mockplus

เราควรจะทำ Wireframe เว็บไซต์สำหรับงานแบบไหน

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

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

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

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


บทความที่เกี่ยวข้อง

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด