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