เนื้อหา

• ที่จะก้าว
• วิธีที่ 1 จาก 2: กฎพื้นฐาน 3 ข้อ
• วิธีที่ 2 จาก 2: แนวทาง
• เคล็ดลับ
• คำเตือน

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

ที่จะก้าว

วิธีที่ 1 จาก 2: กฎพื้นฐาน 3 ข้อ

1. กฎข้อที่ 1:รับฟังลูกค้าของคุณ. คุณอาจกำลังออกแบบ "เว็บไซต์ที่ยิ่งใหญ่ที่สุดในโลกที่เคยมีมาในประวัติศาสตร์ของจักรวาลและอื่น ๆ " ด้วยสีดำที่สมบูรณ์แบบอักษรที่ละเอียดอ่อนและสีสันที่สดใสและมีศิลปะสำหรับไซต์ที่กรีดร้อง "สำรวจฉันเดี๋ยวนี้!" ขออภัยลูกค้าของคุณต้องการแถบเมนูสีส้มที่มีตัวอักษรสีชมพูและสีส้มสดใส คุณถูกไล่ออกและเว็บไซต์ที่ดีที่สุดของคุณ - ที่ลูกค้ามีสิทธิ์ - อยู่ที่ไหนสักแห่งในดิสก์สำรองข้อมูลของพวกเขาโดยที่ไม่มีใครเห็นอีกเลย
   • ศึกษาเอกลักษณ์องค์กรของลูกค้าของคุณ ให้ลูกค้าแสดงเว็บไซต์ที่พวกเขาชื่นชอบ สิ่งนี้ไม่เพียง แต่จะทำให้คุณได้ทราบว่าพวกเขาชอบอะไร แต่ยังให้แนวคิดในการออกแบบเล็กน้อยที่คุณอาจคิดไม่ถึงอีกด้วย
   • หากคุณคิดว่าเราล้อเล่นเกี่ยวกับเว็บไซต์สีส้มและสีชมพูลองพิจารณาไซต์ที่ดูดีและซับซ้อนนี้:
2. กฎ # 2:รู้จักผู้ชมของคุณและสิ่งที่พวกเขากำลังมองหาและปรับการออกแบบของคุณให้เหมาะสม. เหตุผลที่ผู้คนมีเว็บไซต์ก็เพราะว่าพวกเขาต้องการให้คนอื่นเห็นพวกเขา อาจเป็นข้อมูลหรือเชิงพาณิชย์หรือเพื่อสร้างความบันเทิงให้กับกลุ่มเป้าหมายที่เฉพาะเจาะจง งานของคุณในฐานะนักออกแบบคือการรู้ว่าคุณกำลังออกแบบให้ใครและเก็บไว้ในเพจเมื่อพวกเขาไปถึงที่นั่น
   • คุณอาจคิดว่า "ถ้าดูดีพวกเขาจะอยู่" แต่ไม่จำเป็นต้องเป็นเช่นนั้นเสมอไป ตัวอย่างเช่นอสังหาริมทรัพย์ นี่คือไซต์ที่มีการออกแบบที่สะอาดและสนุกสนาน มีพื้นที่สีขาวจำนวนมากซึ่งให้รูปลักษณ์ที่เปิดกว้างสีสันสดใสและรูปแบบจอกว้างที่ทันสมัยพร้อมลิงก์ในสถานที่ที่โดดเด่น:
   • ลองดูวิธีการขายอสังหาริมทรัพย์ในพื้นที่เดียวกันนี้: รกและยุ่งมากสีทึมๆและมีการโฆษณาแฝงอยู่
   • เดาว่าแบบไหนเหมาะกับผู้ที่กำลังมองหาบ้าน? ถูกต้องหนึ่งที่ บ้าน! เมื่อผู้คนค้นหา“ บ้านสำหรับขายในซานตาโมนิกา” พวกเขาไม่สนใจว่าไซต์จะเป็นอย่างไร พวกเขาไม่ต้องการอ่านเกี่ยวกับตัวแทนอสังหาริมทรัพย์หรือดูภาพสวย ๆ ของเมือง พวกเขาต้องการเห็นบ้าน
3. กฎ # 3:ฟังตัวเอง. คุณเข้าใจว่าลูกค้าต้องการอะไรและคุณรู้ว่าตลาดของคุณกำลังมองหาอะไร ในที่สุดก็ถึงเวลาใส่ใจคุณแล้วนักออกแบบ!
   • สร้างเทมเพลตในซอฟต์แวร์กราฟิกที่คุณเลือก สร้างองค์ประกอบของเพจของคุณในเลเยอร์ต่างๆ (เพื่อให้คุณสามารถปรับแต่งสิ่งต่างๆได้ในภายหลังโดยไม่ทำลายเทมเพลตทั้งหมด) องค์ประกอบเหล่านี้สามารถ:
     • หัวข้อ. นี่คือองค์ประกอบที่เหมือนกันในทุกหน้าของไซต์ของคุณ ส่วนหัวประกอบด้วยชื่อและโลโก้ของไซต์ตลอดจนลิงก์ไปยังส่วนอื่น ๆ ของเว็บไซต์ (เช่นเกี่ยวกับผู้ติดต่อ ฯลฯ ) การมองเห็นและในทางปฏิบัติสิ่งนี้จะรวมเข้าด้วยกัน เป็นแนวทางปฏิบัติที่ดีในการเชื่อมโยงปุ่มแรกบนแถบเมนูกลับไปที่หน้าแรก
     • ตัวอย่างเช่นลองดูที่ Apple:
     • เช่นเดียวกับสิ่งต่างๆของ Apple ส่วนใหญ่หน้าแรกของพวกเขามีการออกแบบที่เรียบง่ายและตรงไปตรงมา สังเกตแถบเมนูที่ด้านบนพร้อมด้วยหัวข้อเชิงตรรกะสำหรับแต่ละปุ่มและช่องค้นหา - เป็นความคิดที่ดีเสมอหากไซต์ของคุณรองรับ ตอนนี้ให้ดูที่หน้า Landing Page สำหรับปุ่มใดปุ่มหนึ่งคือ iPad เพื่อดูองค์ประกอบบางส่วน:
     • แถบเมนูจะเปลี่ยนไปโดยการทำให้ปุ่ม iPad มืดลงเท่านั้น
     • หัวเรื่องของหน้า Landing Page จะแสดงเป็นตัวอักษรสีดำขนาดใหญ่
     • เมนูย่อยใหม่จะปรากฏขึ้นเพื่อให้คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับผลิตภัณฑ์ได้ หากคุณคลิกที่ปุ่มใดปุ่มหนึ่งเหล่านี้คุณจะเห็นว่าแต่ละหน้ามีเนื้อหาใหม่ขึ้นอยู่กับหัวข้อ แต่จะเหมือนกันในการจัดวางและการออกแบบ
     • บ่อยครั้งที่หัวข้อหลักแต่ละหัวข้อในแถบเมนูของคุณจะมีหัวข้อย่อยที่แตกต่างกันให้คุณกรอก แทนที่จะสร้างแถบเมนูที่สองคุณสามารถใช้เมนูป๊อปอัปเช่นตัวอย่างนี้จาก Musicians Friend:
     • แถบด้านข้าง. สิ่งนี้จะปรากฏในหลาย ๆ หน้าในไซต์ของคุณ แต่ไม่จำเป็นต้องเป็นทั้งหมด - บริบทเป็นตัวกำหนด อย่างไรก็ตามเป็นองค์ประกอบที่สำคัญมากและต้องได้รับการออกแบบอย่างรอบคอบเพื่อให้ใช้งานง่ายและไม่รกเกินไป ไม่เหมือนกับแถบเมนูเนื้อหาของแถบด้านข้างอาจเป็นแบบไดนามิกมาก ตรวจสอบแถบด้านข้างทั้งสองนี้จาก Trulia นักการตลาดอสังหาริมทรัพย์อย่างแรกสำหรับผู้ซื้อ:
       
       

วิธีที่ 2 จาก 2: แนวทาง

1. ออกแบบส่วนต่อประสานผู้ใช้ที่ดี วางตำแหน่งองค์ประกอบต่างๆของเว็บไซต์เช่นชื่อเรื่องแถบด้านข้างโลโก้รูปภาพและข้อความในที่เดียวกันในทุกหน้าเพื่อให้ไซต์ของคุณสามารถนำทางได้และใช้งานง่าย
   • ให้ส่วนหัวเดียวกันที่ด้านบนสุดของทุกหน้า. ไม่ว่าเนื้อหาของไซต์ของคุณจะอนุญาตให้มีองค์ประกอบที่ทำซ้ำได้จำนวนมากหรือไม่ตรวจสอบให้แน่ใจว่าด้านบนของทุกหน้าเหมือนกัน
   • ใช้ตรรกะในการออกแบบของคุณ. องค์ประกอบในหน้าเดียวควรเรียงลำดับตามความสำคัญหรือหัวข้ออย่างมีเหตุผล หน้าต่างๆบนไซต์ก็ควรจะมากเกินไป
2. สร้างสไตล์ที่สอดคล้องกัน ในกรณีที่เลย์เอาต์ควรให้ความสอดคล้องของโครงสร้างไซต์ของคุณสไตล์ควรให้ความสอดคล้องกันตามหัวข้อ
   • ติดสีหลักสองหรือสามสีและตรวจสอบให้แน่ใจว่าเข้ากันได้ดี
   • หลีกเลี่ยงการใช้รูปแบบหรือขนาดตัวอักษรมากเกินไป หากคุณต้องการสลับสองสามรายการให้ใช้วิธีเดียวกันในแต่ละหน้า
   • ใช้ Cascading Style Sheets (CSS) เพื่อรักษาสไตล์ที่เหมือนกันและเพื่อให้ง่ายต่อการเปลี่ยนองค์ประกอบทั่วทั้งเว็บไซต์โดยไม่ต้องไปที่แต่ละหน้าแยกกัน
3. เพิ่มความสามารถในการอ่านสูงสุด เพื่อให้อ่านข้อความได้ง่ายขึ้นคุณสามารถแบ่งข้อความออกเป็นส่วนย่อย ๆ
   • ใช้คำบรรยายและระยะห่างที่เหมาะสมเพื่อแยกแต่ละส่วนออกจากกัน
   • ใช้ตัวอักษรตัวหนาหรือขนาดต่างๆเพื่อแสดงลำดับชั้นและความสำคัญของหัวข้อ
   • ใส่ใจกับวิธีที่คุณปฏิบัติต่อข้อความ อย่าทำให้แบบอักษรเล็กเกินไปและเพิ่มระยะห่างระหว่างบรรทัดเพื่อให้อ่านข้อความขนาดใหญ่ได้ง่ายขึ้น ข้อความขนาดใหญ่อ่านยากกว่า แยกย่อยออกเป็นย่อหน้าเล็ก ๆ
4. ทำให้เว็บไซต์ของคุณสามารถอ่านได้ในระดับสากล ใช้ HTML มาตรฐานและหลีกเลี่ยงแท็กคุณลักษณะและปลั๊กอินที่มีให้สำหรับเบราว์เซอร์ยี่ห้อหรือเวอร์ชันเดียวเท่านั้น
   • ในขณะที่เบราว์เซอร์และคอมพิวเตอร์สมัยใหม่ส่วนใหญ่สามารถจัดการภาพที่ซับซ้อนได้ แต่ทุกอย่างจะดูไม่แน่นอนหากคุณย่อขนาดและปรับรูปภาพของคุณให้เหมาะสมสำหรับเว็บ ให้ความสำคัญของคุณภาพเทียบกับความสำคัญของความเร็ว
5. ทดสอบเว็บไซต์ของคุณ ทำให้เเน่นอน ทุกลิงค์ใช้งานได้ ตามที่คุณคาดหวังและภาพที่ปรากฏอย่างถูกต้อง
   • คุณอาจต้องการจัดระเบียบการทดสอบผู้ใช้โดยให้สมาชิกในกลุ่มเป้าหมายของคุณทดสอบความชัดเจนและความสะดวกในการใช้งานการออกแบบของคุณและให้ข้อเสนอแนะเกี่ยวกับเว็บไซต์ของคุณ
6. เผยแพร่เว็บไซต์ของคุณ ซื้อชื่อโดเมนหากคุณยังไม่ได้ทำ ตรวจสอบเป็นระยะว่าลิงก์ยังใช้งานได้หรือไม่และรับฟังคำแนะนำที่ผู้เยี่ยมชมส่งอีเมลถึงคุณ

เคล็ดลับ

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

คำเตือน

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