การวิเคราะห์และการประยุกต์ใช้หลักการ "ความแตกต่าง" ในการออกแบบเว็บ

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

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

ในบทความนี้ เราจะดูวิธีการออกแบบหน้าเว็บให้ดีขึ้นโดยใช้หลักการของสี ขนาด และการจัดแนวที่ตัดกัน

ความคมชัดของสี

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

โดยทั่วไป หน้าจะประกอบด้วยส่วนหัว พื้นที่เนื้อหา และส่วนท้าย จากนั้นเราจะต้องแยกแยะความแตกต่างทั้งสามส่วนนี้ให้ชัดเจนด้วยสายตา วิธีที่ดีในการทำเช่นนี้คือการใช้สีพื้นหลังที่แตกต่างกัน

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

ผลงานของ Phil Renaud เว็บไซต์นี้ใช้เค้าโครงที่เป็นเอกลักษณ์และโทนสีที่สวยงามอย่างยิ่ง เว็บไซต์ได้รับการออกแบบด้วยสีน้ำตาลโดยรวม และใช้สีเหลืองทองเพื่อเพิ่มความแตกต่างระหว่างพื้นที่การนำทางแนวตั้งและพื้นที่อื่นๆ

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

การเปรียบเทียบขนาด

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

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

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

การเปรียบเทียบการจัดตำแหน่ง

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

LegiStyles ใช้พื้นที่สีขาวขนาดใหญ่ทางด้านซ้ายของบล็อกเนื้อหาใต้ชื่อเรื่อง เมื่อรวมกับชื่อเรื่องที่มีขนาดใหญ่ มันสร้างเอฟเฟกต์ที่ตัดกันได้ดี หากคุณต้องการใช้การจัดแนวที่แตกต่างกัน ตรวจสอบให้แน่ใจว่าได้ขยายสเกลที่แตกต่างกันนี้ให้ใหญ่ขึ้น ไม่เช่นนั้นการออกแบบจะดูเหมือนผิดพลาดในการออกแบบที่ไม่ดี

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

Simon Collison ใช้ชื่อเรื่องจัดกึ่งกลางและข้อความจัดชิดซ้ายในแต่ละบล็อกเนื้อหา แม้ว่าข้อความชื่อเรื่องจะไม่ใหญ่กว่าข้อความย่อหน้ามากนัก แต่ก็สามารถเห็นความแตกต่างได้แล้ว

List Apart เป็นอีกตัวอย่างที่ดีของส่วนหัวที่อยู่กึ่งกลางพร้อมกับย่อหน้าที่จัดชิดซ้าย

ทำมัน

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

ข้อความต้นฉบับภาษาอังกฤษ: หลักการของความแตกต่างในการออกแบบเว็บไซต์