wireframes เว็บไซต์เป็นภาพวาดเส้นแบบง่ายๆที่แสดงตำแหน่งขององค์ประกอบบนหน้าเว็บ คุณสามารถช่วยตัวเองได้อย่างมากโดยการแก้ไขโครงร่างของโครงแบบง่ายๆเมื่อเริ่มกระบวนการออกแบบแทนการออกแบบที่ซับซ้อนในภายหลัง
การใช้ wireframes เป็นวิธีที่ดีในการเริ่มต้นโครงการเว็บไซต์เนื่องจากช่วยให้คุณและลูกค้าสามารถมุ่งเน้นการจัดวางได้โดยไม่ต้องใช้สีประเภทและองค์ประกอบการออกแบบอื่น ๆ เน้นที่สิ่งที่จะไปที่ที่บนหน้าเว็บของคุณและร้อยละของพื้นที่ที่แต่ละองค์ประกอบจะขึ้นซึ่งสามารถกำหนดโดยความต้องการของลูกค้าของคุณ
01 จาก 03
สิ่งที่จะรวมไว้ในเว็บไซต์ Wireframe
ทุกองค์ประกอบที่สำคัญของ หน้าเว็บ ควรแสดงในโครงข่ายเว็บไซต์ของคุณ ใช้รูปทรงที่เรียบง่ายแทนกราฟิกที่แท้จริงและติดป้ายกำกับ องค์ประกอบเหล่านี้รวมถึง:
- การนำทาง: ปุ่มสำหรับผู้ใช้เพื่อเข้าชมส่วนหลัก ๆ ในไซต์ของคุณ
- โลโก้ บริษัท : สามารถแสดงเป็นกล่องได้
- เนื้อหา: เนื้อหาส่วนต่างๆของคุณจะปรากฏที่ใด
- กล่องค้นหา
- พื้นที่เข้าสู่ระบบของผู้ใช้
02 จาก 03
วิธีสร้างเว็บไซต์ Wireframes
มีหลายวิธีในการสร้างโครงร่างเว็บไซต์ ประกอบด้วย:
วาดด้วยมือบนกระดาษ
วิธีนี้มีประโยชน์เมื่อต้องเผชิญหน้ากับลูกค้า ร่างเค้าโครงความคิดของคุณลงบนกระดาษโดยเน้นที่องค์ประกอบควรไปที่ใด
ใช้ Adobe Photoshop, Illustrator หรือซอฟต์แวร์อื่น ๆ
ซอฟต์แวร์กราฟิกส่วนใหญ่มาพร้อมกับเครื่องมือพื้นฐานทั้งหมดที่จำเป็นในการสร้าง wireframes เส้นรูปร่างและข้อความ (ติดฉลากองค์ประกอบของคุณ) เป็นสิ่งที่คุณต้องสร้าง wireframe ที่เรียบร้อย
การใช้ซอฟต์แวร์ที่สร้างขึ้นสำหรับงานประเภทนี้
ในขณะที่ Photoshop และ Illustrator สามารถทำเคล็ดลับบางแพคเกจซอฟต์แวร์ได้รับการพัฒนาเฉพาะสำหรับงานประเภทนี้ OmniGraffle เป็นซอฟต์แวร์ที่ช่วยลดความยุ่งยากในการสร้าง wireframes โดยการให้รูปร่างเส้นลูกศรและเครื่องมือข้อความเพื่อใช้บนผืนผ้าใบที่ว่างเปล่า คุณยังสามารถดาวน์โหลดชุดกราฟิกที่กำหนดเอง (ฟรี) ที่ Graffletopia ซึ่งให้องค์ประกอบอื่น ๆ เช่นปุ่มเว็บทั่วไปเพื่อใช้งานได้
03 จาก 03
ประโยชน์
ด้วย wireframes ของเว็บไซต์คุณจะได้รับประโยชน์จากการปรับแต่งการวาดเส้นแบบง่ายๆเพื่อให้ได้รูปแบบที่ต้องการ แทนที่จะย้ายองค์ประกอบที่ซับซ้อนรอบ ๆ หน้าเว็บอาจใช้เวลาน้อยมากในการลากสองกล่องเข้าตำแหน่งใหม่ นอกจากนี้ยังมีประสิทธิผลมากขึ้นสำหรับคุณหรือลูกค้าของคุณที่จะเน้นรูปแบบครั้งแรก ... คุณจะไม่เริ่มต้นด้วยความคิดเห็นเช่น "ฉันไม่ชอบสีนั้น!" แทนคุณจะเริ่มต้นด้วยเค้าโครงและโครงสร้างที่สรุปแล้ว ที่จะออกแบบของคุณ