Wireframe ของเว็บไซต์คืออะไร ทำไมถึงสำคัญ?

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

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

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

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

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

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

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

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

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

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

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

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

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

แนะนำเว็บไซต์ออนไลน์ สำหรับทำ Wireframe ฟรี
สำหรับใครที่อยากทำ Wireframe ในคอมพิวเตอร์มากกว่า แอดมินก็รวบรวม Tool ออนไลน์ / โปรแกรมช่วยทำ Wireframe ที่ใช้ฟรีมาให้ครับ
Prototype – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน
Pencil Project - โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Mac OS
Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที
iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า
 
เราควรจะทำ Wireframe เว็บไซต์สำหรับงานแบบไหน
การทำ Wireframe เป็นสิ่งที่จำเป็นมากสำหรับเว็บไซต์ระดับกลางถึงใหญ่ที่มีข้อมูลซับซ้อนครับ เพราะจะทำให้ทั้งทางลูกค้าและดีไซเนอร์เข้าใจตรงกัน นอกจากนั้นยังทำให้เราทำงานดูโปรมากขึ้นด้วย บริษัทใหญ่ ๆ ที่ทำเว็บไซต์เป็นงานหลักจะทำ Wireframe กันทั้งนั้นครับ (บางที่ก็ทำเป็น Prototype ด้วย)

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