รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

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 เลยครับ