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

Wireframe กับการสร้างบ้าน!

เรากำลังจะสร้างบ้านหนึ่งหลัง

ลูกค้าบอกกับเราว่า ต้องการบ้านสองชั้น สามห้องนอน สองห้องน้ำ

เราก็รับบรีฟตามนั้น และก่อสร้างตามที่ลูกค้าบอกทุกประการ

แต่ปรากฏว่าสิ่งที่ลูกค้าอยากได้จริงๆแล้ว คือ ห้องน้ำห้องแรก จะต้องอยู่ชิดกับห้องครัวด้านล่าง

และห้องน้ำชั้นบนจะต้องอยู่กึ่งกลางระหว่าง ห้องนอนสองห้อง

ในกรณีที่ทำมาไม่ตรง สิ่งที่เราทำได้คือแก้ไข

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

การแก้ไขที่บอกไปด้านบน จริงๆแล้วนั้นก็สามารถทำได้ แต่ก็เสียเวลาและพลังงานไปไม่น้อย

จะดีกว่ามั้ย ถ้าเราและอีกฝ่าย เห็นภาพของงานตรงกันอย่างละเอียด ก่อนที่จะเริ่มสร้างบ้าน

Wireframe ทำให้เราใจตรงกัน !

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

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

Wireframe เซฟเวลา !

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

.

แต่นั่นอาจจะไม่ใช่ไฟนอล

.

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

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

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

แนะนำเครื่องมือทำ Wireframe ที่ใช้กัน

• กระดาษ + ปากกา : ฟรี กระดาษ ปากกา หยิบขึ้นมาเลย ง่ายมาก ประหยัด ไม่ต้องไปเปิดคอมใดๆ ไอเดียมาตอนไหน ร่างแล้วคุยกันได้เลย ง่ายๆ

• Adobe XD : Adobe XD มีเครื่องมือพื้นฐานทั่วไปสำหรับการทำ wireframe ไปจนถึงกระทั่งออกแบบต่างๆ สามารถทดลองใช้ได้ฟรี 7 วัน

• wireframe.cc : นี่ก็เป็นอีกเว็บทีเปิดให้นักออกแบบได้ใช้งานฟรีเหมือนกัน  จะออกแบบ Desktop Tablet Mobile หรืออะไรก็ได้ ตามสะดวกเลย

อ้างอิงข้อมูลจาก

[1] https://www.designil.com/wireframe-website-free-download.html

[2] https://www.experienceux.co.uk/faqs/what-is-wireframing/