ART & DESIGNBLOGINNOVATION

การทำ Wireframe สำหรับ Web Designer

วันนี้มาค้นคว้าหาความรู้เรื่องการทำ Wireframe ส่งลูกค้า

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

แต่เดี๋ยวนี้โลกเราก้าวไกลไปมากขึ้น มีโปรแกรมต่างๆ ในการช่วยวาดเพื่อสะดวกในการสร้างและแก้ไขรูปแบบได้คล่องตัวมากขึ้น ซึ่งเหมาะอย่างมากสำหรับนักออกแบบเว็บไซต์ และแล้วแอดมินก็เปิดมาเจอบทความเจ๋งๆ อย่าง Wireframe คืออะไร ทำไมดีไซเนอร์ต้องรู้ พร้อมวิธีทำ + Tool ฟรี !! ของคุณ designil อีกแล้วครับท่าน แนะนำได้เข้าใจง่ายมากๆ

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

และเพื่อไม่ให้เป็นการเสียเวลา ลองเข้ามาอ่านบทความของคุณ designil และเรียนรู้ไปพร้อมๆ กัน ทางด้านล่างนี้นะจ๊ะ (สู้ๆ ทุกคน)


 

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

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

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

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

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

Wireframe website nascar

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

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

ตัวอย่าง 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

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

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

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

Website wireframe by pen

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

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

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

 

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

Wireframe Online Tool

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

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

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

 

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

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

  1. iPhone 5 Wireframe Sketch Template – Download Wireframe สำหรับ iPhone 5 พร้อมกริด
  2. iPad Wireframe – Download Wireframe สำหรับ iPad พร้อมกริด
  3. Sneakpeekit Wireframe – Download Wireframe สำหรับเว็บไซต์ แถมระบุมาให้ด้วยว่าจะดีไซน์สำหรับหน้าจอขนาดเท่าไร
  4. Inspiration Hut Printable Paper – Download กระดาษหลายรูปแบบ ทั้งแบบมีกริด ไม่มีกริด และ Wireframe ของ Desktop, iPhone, iPad

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

 

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

Wireframe Website Online

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

  1. Prototype – โปรแกรมทำ 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 จะจำกัดหน้า

 

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

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

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

 

ขอขอบคุณบทความดีๆ จาก คุณ designil
อ้างอิงจากลิ้งค์ Wireframe คืออะไร ทำไมดีไซเนอร์ต้องรู้ พร้อมวิธีทำ + Tool ฟรี !!

แชร์เลย