วิธีใช้พื้นที่เชิงลบเพื่อสร้างเว็บไซต์ที่สวยงาม

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

สมัครสมาชิกช่อง Youtube ของเรา

พื้นที่เชิงลบคืออะไร?

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

ตัวอย่างของพื้นที่เชิงลบ

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

ลูกศร FedEx ที่ซ่อนอยู่นั้นใช้พื้นที่เชิงลบในลักษณะเดียวกับการวาดและระบายสี - เค้าร่างถูกสร้างขึ้นเช่นเดียวกับการสร้างพื้นที่บวก ในตัวอย่างนี้ พื้นที่เชิงลบไม่ได้ถูกสร้างขึ้นเพียงเพราะเป็นพื้นที่ที่ ไม่ใช่ พื้นที่บวก

นกยูง NBC ทำสิ่งเดียวกัน:

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

มีคำศัพท์สำหรับสิ่งนี้: การกลับรายการแบบร่างพื้น โดยพื้นฐานแล้วหมายความว่าสีพื้นหน้าและพื้นหลังสลับกันเพื่อเปลี่ยนมุมมองและการตีความ หากคุณชอบสิ่งนี้ ลองดูงานของ MC Escher โดยเฉพาะอย่างยิ่งภาพพิมพ์การแปลงร่างของเขา

พื้นที่เชิงลบมีบทบาทเช่นเดียวกันในการถ่ายภาพ ดูภาพนี้ที่ฉันถ่ายกับจูเลียน ลูกชายของลูกพี่ลูกน้องของฉันสิ พื้นหลังสีดำให้ความสำคัญกับเขา:

คุณสามารถหาพื้นที่เชิงลบในธรรมชาติได้ เช่น ในช่องว่างระหว่างกลีบดอกไม้ และในการออกแบบที่ใช้งานได้จริง เช่น ในช่องว่างผ่านที่จับแก้วกาแฟ

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

ประเภทของพื้นที่เชิงลบ

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

ไมโครกับมาโครเนกาทีฟสเปซ

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

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

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

Active กับ Passive Negative Space

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

และนี่คือตัวอย่างของช่องว่างเชิงลบแบบพาสซีฟ:

ช่องว่างและองค์ประกอบเชิงลบ

พื้นที่เชิงลบมีความสำคัญต่อการจัดองค์ประกอบด้วยเหตุผลหลายประการ:

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

การเลือกสมดุลที่เหมาะสมของพื้นที่เชิงลบและบวก

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

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

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

จัดระเบียบเว็บไซต์ที่มีข้อความจำนวนมากด้วยพื้นที่ว่าง

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

ในทางกลับกัน The New York Times ได้คิดหาวิธีที่จะบรรจุหน้าแรกของพวกเขาด้วยข่าวของพวกเขาโดยไม่ทำให้คุณเสียสมาธิ และทั้งหมดนี้ต้องขอบคุณการเว้นวรรค (และการเลือกสี) แม้ว่าจะไม่มีพื้นที่เพียงพอสำหรับพื้นที่มาโคร แต่ก็ใช้ประโยชน์จากพื้นที่ขนาดเล็ก:

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

แบ่งข้อความด้วยช่องว่างเชิงลบ

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

อธิบายประเด็นของพื้นที่เชิงลบให้กับลูกค้า

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

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

ห่อ

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

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

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

ออกแบบเว็บไซต์ท่องเที่ยว? คุณอาจจะใช้พื้นที่มาโครเป็นจำนวนมาก ดูบทสรุป Divi Child Themes สำหรับเว็บไซต์การท่องเที่ยว

ภาพเด่นผ่าน StockVector / Shutterstock.com