ออกแบบเว็บอย่างมีระบบด้วย Wireframe

Posted by in Design

สวัสดีค่ะ ห่างหายการเขียน blog ไปนาน พอดีวันนี้คันไม้คันมืออยากเขียนอะไรขึ้นมา ช่วงนี้ก็กำลังนั่งศึกษาเรื่อง Web Design Process อีกรอบแบบลึกซึ้งกว่าที่เคยรู้มาก่อนหน้านี้ และหนึ่งในกระบวนการที่น่าจะสำคัญที่สุดของการออกแบบเว็บก็คือ การเขียน Wireframe เพราะมันช่วยให้เราไม่หลงทาง หลังจากที่เราได้เริ่มทำโปรเจ็คไปแล้วระยะหนึ่ง

ก่อนที่จะมานั่งเขียนบทความนี้ ก็ได้อ่าน blog ของฝรั่งหลายๆเว็บด้วยกัน แต่ละที่ต่างก็บอกว่าการเขียน Wireframe นั้นสำคัญกับการออกแบบมากๆ ด้วยเหตุผลที่บอกไปแล้ว แต่ละเว็บที่เค้าอธิบายวิธีการอาจต่างไปนิดหน่อย ขึ้นอยู่กับประสบการณ์และความถนัด ดังนั้นบทความนี้ก็จะเขียนสรุปรวบยอดสิ่งที่อ่านมา แล้วมาแปลงเป็นวิธีที่น่าทำตามมากที่สุดละกันค่ะ

Wireframe คืออะไร?

ปกติแล้วก่อนที่เราจะทำอะไรสักอย่าง เราก็ควรที่จะร่างแผนงานออกมาคร่าวๆก่อนเสมอ ถ้าจะให้พูดตัว Wireframe ก็คือแผนงานที่ถูกร่างขึ้นมานั่นเอง โดย Wireframe นั้นจะไม่มีรายละเอียดด้านความสวยงาม เช่นสี หรือรูปภาพที่ใช้บนหน้าเว็บ แต่จะแสดงเฉพาะ layout, ส่วนประกอบบนหน้าเว็บ และอาจมีรายละเอียดเพิ่มเติมของส่วนต่างๆบนหน้าเว็บ เช่นการเชื่อมโยงของลิ้งต่างๆ หรือ animation เป็นต้น Wireframe นี้อาจเรียกรวมไปถึงการเขียน mind map และ sitemap ด้วย

เขียน Wireframe แล้วทำให้ชีวิตเราดีขึ้นได้อย่างไร?

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

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

แล้วจะเขียน Wireframe ได้ยังไง?

จริงๆแล้วการเขียน Wireframe ไม่มีกฎตายตัว บางคนอาจใช้โปรแกรมเช่น Visio, OmniGraffle, Adobe Photoshop, Adobe Firework หรือโปรแกรมสำหรับเขียน Diagram หรือวาดภาพอื่นๆ สามารถใช้ได้หมด หรืออาจร่างด้วยมือในกระดาษก็ได้ แล้วแต่ใครจะถนัด มีคนทำ Template สำหรับโปรแกรมต่างๆออกมามากมาย เพื่อให้เราสามารถเขียน Wireframe ได้อย่างสะดวกมากขึ้น นอกจากนี้ถ้าใครชอบทำงานออนไลน์ก็มีเว็บที่ให้บริการการเขียน wireframe หลายเว็บที่ฟรี สวยงาม และใช้ได้ดีทีเดียว เช่น Cacoo.com, Mockflow.com, Jumpchart.com หรือแม้แต่ Google Doc ก็สามารถทำได้ ด้วยการโหลดตัว template มาใช้  ข้อดีของการร่าง wireframe แบบ online ก็คือเราสามารถแชร์ลิ้งของเราให้กับเพื่อนร่วมงานของเราได้อย่างง่ายๆ ดีกว่าโปรแกรม offline ที่แชร์ลำบาก และยังมีราคาแพง แม้จะมีประสิทธิภาพมากกว่าก็ตาม

 

เริ่มต้นเขียน Wireframe กันดีกว่า…

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

อย่างแรกที่ทำก็คือ คิดก่อนว่า เว็บของเราจะมีกี่หน้า ในแต่ละหน้าประกอบไปด้วยส่วนอะไรบ้างที่สำคัญๆ แล้วลิสออกมาเป็นข้อๆ จากนั้นเราก็เขียน Sitemap ขึ้นมา เพื่อแสดงความสัมพันธ์ของแต่ละหน้า ให้เขียน link และการกระทำต่างๆลงไปด้วยเท่าที่ทำได้ หน้าใดที่เป็นหน้าพิเศษเช่น หน้าสมาชิก ที่ต้อง login เข้ามาก่อน ก็ให้ ไฮไลท์สีและเขียนอธิบายไว้ด้วย ตามตัวอย่างข้างล่าง

ตัวอย่างของ Sitemap

หลังจากที่เราได้ Sitemap มาแล้ว เราก็มาเริ่มขึ้น Wireframe กัน ด้วยการร่าง layout ขึ้นมาก่อน จากนั้นก็วาง Block Element ต่างๆ เช่น Widgets, กล่องข้อความ, รูปภาพ, วีดีโอ ฯลฯ ไว้ตามส่วนต่างๆที่เราต้องการ พร้อมทั้งจัดตำแหน่ง และขนาด บางคนอาจใช้ตาราง Grid เข้ามาช่วย เพื่อให้ร่างได้ง่ายขึ้น  ให้เราเขียนจุดประสงค์ของแต่ละหน้าไว้ที่ส่วนหัวของกระดาษ หรืองานที่ร่างด้วย เพื่อเตือนความจำในภายหลัง เมื่อเราตกลงงานจนพอใจกับภาพรวมของเว็บแล้ว ก็ค่อยเอา wireframe ที่เราทำไว้มาใส่ความสวยงามเข้าไป และ  mockup ด้วย Photoshop หรือโปรแกรมอื่นๆตามแต่จะถนัดต่อไป

ตัวอย่าง wireframe ที่เสร็จแล้ว (จาก Google Doc Template)

ตัวอย่างแบบที่ร่างด้วยมือ

มาถึงจุดนี้ ก็คงรู้กันแล้วว่า wireframe ไม่ได้ยากที่จะทำ อาจจะเสียเวลานั่งเขียนมันบ้าง แต่มันคุ้มค่ากว่ากันไม่ได้เขียนมันแน่นอน เพราะคงมีน้อยงานนักที่จะออกมาดีได้ โดยขาดการวางแผนตั้งแต่ต้น ทั้งนี้ทั้งนั้น การเขียน wireframe นั้น สามารถทำกับ application หรือ web ในอุปกรณ์อื่นๆที่ไม่ใช่คอมพิวเตอร์ก็ได้ด้วย เช่น Smartphone หรือ Tablet ต่างๆ สำหรับ UI Template ก็มีคนทำออกมาสำหรับอุปกรณ์ยี่ห้อดังๆที่เป็นที่นิยมออกมาเยอะแล้ว ซึ่งช่วยเราได้เยอะมากๆ ใครขี้เกียจจะ search เอง ก็ลองกดลิ้งข้างล่างนี้ดูก็ได้ค่ะ ขอให้สนุกกับการทำเว็บค่ะ

 

แหล่งข้อมูลอื่นๆเกี่ยวกับ Wireframe

Wireframes Magazine < รวมเรื่องราวทุกๆอย่างเกี่ยว Wireframe มี Template ให้ดาวโหลด รวมไปถึงตัวอย่าง Wireframe แบบต่างๆด้วย

I ♥ wireframes < มีตัวอย่าง Wireframe แบบต่างๆเยอะดี คล้ายๆ Wireframes Magazine แต่จะจัดหมวดหมู่ไม่ค่อยดีเท่าไหร่

50 Free UI and Web Design Wireframing Kits, Resources and Source Files < รวมลิ้งดาวโหลด Wireframe Template

10 Completely Free Wireframe and Mockup Applications < review เว็บที่ให้บริการ wireframe application

18 Great Examples of Sketched UI Wireframes and Mockups > ตัวอย่างการเขียน wireframe เจ๋ง