วิธีเลือกจานสีและการจับคู่แบบอักษรที่สมบูรณ์แบบ

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

เป็นตัวแทนของแบรนด์

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

มินิมอลลิสต์ แม็กซิมัลลิสต์ หรือ “ถูกต้อง”?

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

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

ฤดูกาล

เฉดสีน้ำเงินและขาวในฤดูหนาว เหลืองและเขียวในฤดูใบไม้ผลิ แดงและเขียวในฤดูร้อน และสีส้ม เหลือง และแดงในฤดูใบไม้ร่วงใช้ได้ดีกับผลิตภัณฑ์ตามฤดูกาล เช่น สินค้าแฟชั่นและดีไซเนอร์ แต่อาจไม่เหมาะกับผลิตภัณฑ์นอกฤดูกาล .

บอร์ดอารมณ์

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

ไซต์การอ่าน

เว็บไซต์การอ่าน เช่น หนังสือพิมพ์ เว็บไซต์การเขียน บล็อก และอื่นๆ นั้นมีข้อความจำนวนมาก เบราว์เซอร์ส่วนใหญ่มีโหมดการอ่าน "โหมด zen" ดังนั้นควรพิจารณาเรื่องนี้ด้วย โดยเลือกแบบอักษรเพียง 2-3 แบบหรือตระกูลแบบอักษรเดียว รวมรูปภาพและองค์ประกอบการออกแบบเพื่อแยกส่วนข้อความยาวๆ

การเลือกจานสีที่สมบูรณ์แบบ

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

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

โทนสี (การผสมจานสี)

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

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

มีเครื่องมือออนไลน์มากมายสำหรับการสร้างชุดสี และ Coolors ก็เป็นหนึ่งในเว็บไซต์ฟรียอดนิยม สามารถช่วยสร้างชุดสีได้อย่างรวดเร็วและแม่นยำ

ที่มา: Coolors.co, 2023

การออกแบบเพื่อคนตาบอดสี

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

• Protanopia : เฉดสีแดงมองไม่เห็นและมองว่าเป็นสีดำ สีที่เห็นเป็นเฉดสีน้ำเงินหรือสีทอง สีน้ำตาลเข้มสับสนกับเฉดสีเข้มของสีอื่นๆ เช่น สีแดง สีส้ม หรือสีเขียว
• ดิวเทอเรเนียนเปีย : สีเขียวมองไม่เห็น; มักจะเห็นบลูส์และทอง เฉดสีแดงและเขียวสามารถรับรู้สลับกันได้ สีเหลืองและสีเขียวสดใสมีลักษณะเหมือนกัน
• Protanomaly : สีแดงปรากฏเป็นสีเทาเข้ม สีแดงทั้งหมดสว่างน้อยลง
• Deuteranomaly : มองเห็นเป็นสีฟ้า สีเหลือง และสีที่ไม่ชัดเจนเป็นส่วนใหญ่

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

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

เทคนิคการจับคู่แบบอักษร

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

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

ตัวอย่างบางส่วนมีดังนี้:

• อาบริล แฟตเฟซ และ ป๊อปปิ้นส์
• Alegreya (ตัวหนาและสม่ำเสมอ)
• บาร์โลว์ควบแน่นและมอนต์เซอร์รัต
• นกกาน้ำ การามอนด์ และ โปรซา ลิเบอร์
• จอแสดงผล DM Serif และ DM Sans
• บทส่งท้ายและใครก็ได้ โดย Etcetera Type Company

• IBM Plex Sans แบบย่อและ IBM Plex Sans
• คาร์ลาและอินคอนโซลาตา
• คาร์ลาและเมอร์ริเวเธอร์
• Libre Baskerville (ตัวหนาและปกติ)
• Libre Baskerville และ Source Sans Pro
• Lobster Two และ Kaushan Script โดย Impallari Type
• มอนต์เซอร์รัตและฮินด์
• นูนิโต และ พีที แซนส์
• นูนิโต ซันส์ (ตัวหนาและสม่ำเสมอ)
• Oswald และ Source Sans Pro

• Oswald และ Source Serif Pro
• Playfair Display และ Lato
• จอแสดงผล Playfair และ Source Sans Pro
• ควอตโตรเซนโตและลอร่า
• ควอตโตรเซนโต และควอตโตรเซนโต แซนส์
• ทรายดูด (ตัวหนาและปกติ)
• โรโบโตแบบควบแน่นและโรโบโต
• Stint Ultra ขยายและ Pontano Sans
• อัลตร้าและ PT Serif
• Work Sans และ Merriweather
• เยเซวา วัน และ โฮเซฟิน แซนส์

เครื่องมือสำหรับการจับคู่แบบอักษร

1. Google Fonts เป็นไซต์ที่ต้องดูสำหรับแนวคิดทั่วไปในการเลือกการจับคู่แบบอักษร แบบอักษรทั้งหมดเป็นโอเพ่นซอร์สและใช้งานได้ฟรี
2. FontPair ช่วยให้คุณเห็นการจับคู่แบบอักษรแบบโต้ตอบและแบบอักษรใดๆ จาก Googe Fonts ซึ่งใช้งานได้ฟรี

พัฒนาแบบอักษรของคุณ

ทำไมไม่สร้างแบบอักษรของคุณล่ะ? Apple เปลี่ยนจาก Helvetica Neue เป็นแบบอักษรที่พวกเขาสร้างขึ้นเองในชื่อ San Francisco ซึ่งใช้ได้ดีสำหรับพวกเขา เครื่องมือออนไลน์ฟรีคือ Birdfont แบบโอเพ่นซอร์ส – สร้างและทดสอบแบบอักษรของคุณ!

สีและแบบอักษรออกไป!

เทคนิคข้างต้นเป็นเพียงเทคนิครองสำหรับข้อความและ UX เท่านั้น การออกแบบขึ้นอยู่กับคำติชมและทำซ้ำได้ ด้วยการทดสอบ A/B กับกลุ่มตัวอย่างเล็กๆ ของผู้ใช้และลูกค้า คาดว่าจะมีการเปลี่ยนแปลงการออกแบบหลายประการ ใช้จินตนาการของคุณและสร้างหนทาง!