เรียนรู้การใช้ Wireframes ง่ายๆเพื่อเริ่มต้นการออกแบบของคุณ
โครงร่างเว็บเป็นคำแนะนำภาพที่เรียบง่ายเพื่อแสดงให้เห็นว่า เว็บเพจ จะมีลักษณะอย่างไร แนะนำ โครงสร้างของหน้าเว็บ โดยไม่ใช้กราฟิกหรือข้อความใด ๆ wireframe เว็บไซต์จะแสดงโครงสร้างไซต์ทั้งหมด - รวมถึงหน้าใดที่เชื่อมโยงไปยังตำแหน่ง
wireframes เว็บเป็นวิธีที่ดีในการเริ่มต้นการออกแบบของคุณ และในขณะที่สามารถสร้าง wireframes ที่ มีรายละเอียดจำนวนมากการวางแผนของคุณสามารถเริ่มต้นด้วยผ้าเช็ดปากและปากกา กุญแจสำคัญในการสร้าง wireframes ที่ดีคือการละทิ้งองค์ประกอบภาพทั้งหมด ใช้กล่องและเส้นเพื่อแสดงรูปภาพและข้อความ
สิ่งที่ต้องรวมไว้ในโครงร่างของเว็บเพจ:
- กล่องสำหรับองค์ประกอบกราฟิกหลัก
- ตำแหน่งของหัวข้อข่าวและหัวย่อย
- โครงสร้างเค้าโครงแบบง่ายๆ
- คำกระตุ้นการตัดสินใจ
- บล็อกข้อความ
วิธีการสร้าง Web Wireframe อย่างง่าย
สร้างเว็บเพจ wireframe โดยใช้เศษกระดาษที่คุณมีประโยชน์ นี่คือวิธีที่ฉันทำ:
- วาดรูปสี่เหลี่ยมผืนผ้าใหญ่ - ซึ่งสามารถแสดงทั้งหน้าทั้งหมดหรือเป็นส่วนที่มองเห็นได้ ฉันมักจะเริ่มต้นด้วยส่วนที่มองเห็นจากนั้นขยายออกเพื่อรวมองค์ประกอบที่จะต่ำกว่าพับ
- ร่างโครงร่าง - เป็นคอลัมน์ 2 คอลัมน์ 3 คอลัมน์หรือไม่?
- เพิ่มในช่องสำหรับกราฟิกส่วนหัว - วาดเหนือคอลัมน์ถ้าคุณต้องการให้เป็นส่วนหัวเดียวเหนือคอลัมน์หรือเพิ่มที่คุณต้องการ
- เขียน "บรรทัดแรก" ที่คุณต้องการให้บรรทัดแรกของ H1 เป็น
- เขียน "Sub-Head" ที่คุณต้องการ H2 และพาดหัวล่างให้เป็น ช่วยให้คุณสัดส่วนสัดส่วน h2 น้อยกว่า h1 h3 h2 น้อยกว่า h2
- เพิ่มในช่องสำหรับภาพอื่น ๆ
- เพิ่มในการนำทาง หากคุณกำลังวางแผนแท็บเพียงวาดช่องและเขียน "navigation" ที่ด้านบน หรือใส่รายการสัญลักษณ์แสดงหัวข้อย่อยในคอลัมน์ที่คุณต้องการนำทาง อย่าเขียนเนื้อหา เพียงแค่เขียน "navigation" หรือใช้บรรทัดเพื่อแสดงข้อความ
- เพิ่มองค์ประกอบเพิ่มเติมในเพจ - ระบุสิ่งที่อยู่กับข้อความ แต่อย่าใช้ข้อความเนื้อหาจริง ตัวอย่างเช่นหากคุณต้องการให้ปุ่มเรียกร้องให้ดำเนินการอยู่ทางขวาล่างให้ใส่ช่องที่มีและติดป้ายว่า "เรียกร้องให้ดำเนินการ" อย่าเขียนว่า "ซื้อเลย!" ในกล่องนั้น
เมื่อคุณมีโครงลวดที่เรียบง่ายเขียนไว้และไม่ควรใช้เวลามากกว่า 15 นาทีในการวาดภาพหนึ่งขึ้นให้แสดงต่อคนอื่น ถามพวกเขาว่ามีอะไรหายไปหรือไม่สำหรับข้อเสนอแนะอื่น ๆ จากสิ่งที่พวกเขากล่าวว่าคุณสามารถเขียนโครงแบบอื่นหรือเก็บสิ่งที่คุณมีได้
ทำไม Wireframes กระดาษจึงเหมาะกับบทคัดย่อฉบับแรก
ในขณะที่คุณสามารถสร้าง wireframes โดยใช้โปรแกรมเช่น Visio สำหรับการประชุมระดมความคิดเบื้องต้นคุณควรติดกระดาษ กระดาษดูเหมือนจะไม่ถาวรและหลาย ๆ คนจะถือว่าคุณโยนมันเข้าด้วยกันภายใน 5 นาทีและอย่าลังเลที่จะให้ข้อเสนอแนะที่ดี แต่เมื่อคุณใช้โปรแกรมเพื่อสร้าง wireframes แฟนซีที่มีสี่เหลี่ยมและสีที่สมบูรณ์แบบคุณจะเสี่ยงต่อการถูกจับตัวในโปรแกรมเองและใช้เวลาหลายชั่วโมงในการเติมเต็มบางสิ่งบางอย่างที่ไม่เคยมีการเผยแพร่
wireframes กระดาษเป็นเรื่องง่ายที่จะทำ และถ้าคุณไม่ชอบคุณก็ crumple ขึ้นกระดาษโยนในการรีไซเคิลและคว้าแผ่นใหม่