Wireframe ความหมายคืออะไร? และสอนวิธีเขียน

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

ใน Wireframe มีอะไร?

จะว่าไปแล้ว Wireframe ก็เหมือนกับการวางแผนการทำงานของเรา โดยเขียนออกมาเป็นแผนภาพเพื่อให้เข้าใจได้ง่าย โดย Wireframe นั้นจะไม่มีรายละเอียดทางด้านความสวยงาม ไม่ว่าจะเป็น สีสัน แบบตัวอักษร หรือรูปภาพ แต่จะแสดงเฉพาะ layout ว่าอะไร อยู่ในตำแหน่งไหนบ้าง ลิ้งค์นี้กดแล้วไปหน้าไหนต่อ พอกดแล้วเป็น  Overlay มั้ย พอเอาเม้าส์ไป Hover จะเกิดอะไรขึ้น รายละเอียดพวกนี้ เราสามารถใส่ลงไปใน Wireframe ได้เลยครับ

 

เตรียมความพร้อม ก่อนทำ Wireframe

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

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

 

ลงมือทำ Wireframe

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

ต่อมาให้เราดูว่าเว็บไซต์ของเรามีหน้าทั้งหมดที่ประเภท อาจแบ่งออกเป็น homepage, category, archive, page ซึ่งหลักที่ผมใช้ในการแบ่งประเภทของหน้าก็คือ layout ครับ เราจะต้องลิสต์หน้าที่มี layout ต่างกันออกมาให้หมด แล้วออกแบบ layout ของแต่ละหน้า ซึ่งประกอบด้วย header, footer, content, sidebar หรืออื่นๆ ให้เราร่างออกมาคร่าวๆ....

 

 

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

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

ตอนนี้ เราจะรู้แล้วว่า แต่ละหน้ามี layout อย่างไร และมี content อะไรบ้าง วางตำแหน่งอย่างไร ขั้นตอนสุดท้ายเป็นการใส่รายละเอียดเพิ่มเติมเข้าไป เพื่อเพิ่มความสมบูรณ์ให้กับ Wireframe ของเราครับ อาจเขียนอธิบายการทำงานของกลไกต่างๆ (mechanics) หรืออะไรก็ได้ที่ช่วยให้การพัฒนาเป็นไปในทางที่ถูกต้องครับ

 

เขียน Wireframe ใช้ Tool ตัวไหนดี?

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

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

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

 

 

 

 

Credit : Siamhtml.com

 995
ผู้เข้าชม

บทความที่เกี่ยวข้อง

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