วิธีการทำแผนผังเว็บไซต์

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

1

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

2

วาดไดอะแกรมที่แสดงขนาดสัมพัทธ์ขององค์ประกอบหน้าและตำแหน่งแนวตั้งและแนวนอน คุณสามารถวาดแผนภาพนี้ลงบนกระดาษทำงานในโปรแกรมแก้ไขภาพหรือภาพประกอบหรือรวมเข้าด้วยกันโดยใช้แอปพลิเคชั่น wireframing ออนไลน์

3

สร้างไดอะแกรมหน้าสำหรับหน้าเว็บแต่ละประเภทที่เว็บไซต์ของคุณต้องการ หน้าแรกของคุณอาจมีองค์ประกอบย่อยขององค์ประกอบหน้าแตกต่างจากหน้าผลิตภัณฑ์หรือบริการหน้าติดต่อหรือบล็อก

4

ใช้ข้อความตัวยึดตำแหน่งเพื่อระบุว่าการใช้คำฟุ่มเฟือยปรากฏขึ้นที่ใด คุณอาจต้องการเลือกระหว่างแบบอักษร serif และ sans serif แต่แผนผังไม่ใช่สถานที่สำหรับการทดลองและการสาธิตสไตล์แบบพิมพ์

5

อธิบาย wireframes ของคุณด้วยหมายเหตุเกี่ยวกับการทำงานขององค์ประกอบหรือตำแหน่งที่ลิงก์ เพิ่มไอคอนที่ลิงก์ไปยังไซต์หรือบริการภายนอกรวมถึง RSS, Twitter, Facebook และเว็บไซต์พันธมิตรหรือผู้ผลิต

6

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

เคล็ดลับ

• แผนผังเว็บไซต์มักจะนำหน้าจำลองและต้นแบบในกระบวนการออกแบบ Mockups แสดงโครงร่างสีลักษณะของชนิดและรายละเอียดการออกแบบอื่น ๆ ในรูปแบบที่คุณกำลังพิจารณานำไปใช้จริง ต้นแบบก้าวไปข้างหน้านอกเหนือจาก mockups ไปยัง exemplars ที่จัดรูปแบบไว้อย่างแน่นหนาซึ่งแสดงลักษณะของหน้าจริง
• หากคุณวางแผนที่จะสร้างเว็บไซต์ของคุณบนมือถือและเบราว์เซอร์คุณอาจต้องสร้างแผนงานสำหรับการออกแบบมากกว่าหนึ่งขั้นตอน
• หากคุณวาดแผนงานด้วยมือให้ใช้ปากกาสีหรือดินสอเพื่อเน้นพื้นที่เฉพาะของเค้าโครงหน้ากระดาษของคุณซึ่งมีความสำคัญมากขึ้นในกระบวนการออกแบบหรือพัฒนา ตัวอย่างเช่นคุณอาจเลือกสีที่เฉพาะเจาะจงเพื่อแสดงโมดูลที่จะถูกเข้ารหัสโดยบุคคลที่เฉพาะเจาะจง สีเหล่านี้ระบุองค์ประกอบการวางแผนไม่ใช่ตัวเลือกการออกแบบ

การเตือน

• หากคุณพัฒนาแผนงานของคุณในเครื่องมือออกแบบเว็บไซต์และสร้าง CSS สำหรับ wireframes ของคุณหลีกเลี่ยงการเปลี่ยนขั้นตอนแผนผังของการพัฒนาเว็บไซต์ให้เป็นแบบฝึกหัดการออกแบบ Wireframes ถ่ายทอดคุณสมบัติไม่ใช่สไตล์