Cover_IDXW

Contrast 20 แบบในการออกแบบกราฟิก

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

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

01. Contrast ด้วยความเข้ม-ความอ่อน (Dark and Light Colors)
contrast-1-662x497

 

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

contrast-1b-662x467

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

02. Contrast ด้วยวงล้อสีสัน (Color Hue)

contrast-2-662x603

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

• Monochromatic สีโทนเย็น : ก็เลือกสีเดียวในโทนเย็นมาปรับค่าความสว่าง/มืด

• Analogous สีโทนร้อน : ก็เลือกสีเดียวในโทนร้อนมาปรับค่าความสว่าง/มืด

• Complementary สีคู่ตรงข้าม : ก็เลือกสองสีที่อยู่ตรงข้ามกันเป๊ะๆเลย

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

contrast-2b-1-662x497

 

• Split­-Complementary สามสีเข้ากันได้ : คือการเลือกใช้ชุดสีสามสีที่เลือกจากสี่คู่ตรงข้ามแล้วขยับไปเลือกใช้สีที่อยู่ก่อนหน้าและถัดไปในวงล้อสีโทนใดโทนหนึ่ง

• Triadic สามสีตรงข้าม: คือชุดสีที่ใช้สามสีจากการลากเส้นเป็นสามเหลี่ยมด้านเท่าในวงล้อสี

• Tetradic คู่ตรงข้ามสองชุด: คือการใช้ชุดสีคู่ตรงข้ามสองชุดที่อยู่ใกล้กันในวงล้อสีมาใช้ทำให้มีสีหลักรวมกัน 4 สีนั่นเอง

การนำไปใช้ไม่จำเป็นต้องใช้เนื้อสีตามวงล้อเป๊ะๆก็ได้ เพราะเมื่อนำมาใช้กับความมืด/สว่าง หรือ เข้ม/อ่อน ก็สามารถสร้างความหลากหลายของสีคู่ตรงข้ามได้เช่นกัน

03. Contrast ด้วยอุณหภูมิสี (Temperature)

contrast-3-662x703

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

contrast-3b-662x530

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

04. Contrast ด้วยความเข้มของสี (Intensity)

 contrast-4-662x497

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

contrast-4b-662x643

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

05. Contrast ด้วยรูปทรง (Shape) Organic vs. Geometric

contrast-5-662x497

รูปทรงของสิ่งต่างๆสามารถจำแนกออกเป็น 2 ลักษณะใหญ่ๆคือ Organic รูปทรงเรขคณิต ( สี่เหลี่ยม,สามเหลี่ยม,วงกลม ฯลฯ) และ Geometric รูปทรงอิสระ (รูปทรงอิสระเช่นของเหลว,ธรรมชาติ,เส้นฟรีฟอร์ม) การใช้ความเรียบของรูปทรงเรขาคณิตมาใช้ร่วมกับรูปทรงอิสระจึงจัดเป็นทางเลือกที่น่าสนใจเหมือนการเอาความนิ่งมาตัดกับความสนุกสนานนั่นเอง

contrast-5b-662x497

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

06. Contrast ด้วยรูปทรง (Shape) Edges & Corners

 contrast-6-662x497

นี่ก็เป็นอีกหนี่งวิธีในการใช้รูปทรง คือการออกแบบกับกราฟิกต่างๆที่มีรูปร่างเป็นกล่องมีเหลี่ยมมีมุมทั้งตัวกราฟิกกรอบ เส้นขอบหรือรูปแบบตัวอักษรที่มีลักษณะแข็งกระด้างมาจัดวางร่วมกับสิ่งที่ดูอ่อนช้อยกว่าเช่น สี่เหลียมมุมมนนั่นเอง ในตัวอย่างจึงนำตัวอักษรลักษณะมุมมนดูนุ่มนิ่มมาวางในกรอบที่เป็นสี่เหลี่ยมมุมแหลมเป็นต้นcontrast-6b-662x562
ตัวอย่าง Typography นบนก็แสดงให้เห็นว่าฟ้อนสองแบบที่มีความแข็งกับความพริ้วใหวมาอยู่ร่วมกันได้อย่างน่าสนใจ

07. Contrast ด้วยพื้นผิว (Texture)

 contrast-7-662x497

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

contrast-7b-662x497

ตัวอย่าง
 การออกแบบของภาพนี้แสดงให้เห็นว่าภาพแฮมเบอร์เกอร์ที่ถูกถ่ายมาอย่างสะอาดเนี้ยบกริบ เมือถูกแปะทับด้วย Typo ขรุขระสไตล์ย้อนยุดก็สร้างมิติอารมณ์ Contrast ได้

08. Contrast ด้วย ขนาดและสัดส่วน (Scale & Size)

 contrast-8-662x497

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

contrast-8b-662x874

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

09. Contrast ด้วยจุดเด่น (Visual Weight)

 contrast-9-662x497

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

contrast-9b-662x497

ตัวอย่าง นี่คือชุดโปสการ์ดโปรโมทการท่องเที่ยวที่เอาภาพแลนด์มาร์กสำคัญมาทำภาพกราฟิกที่เด่นสุดทางด้านซ้าย แต่ก็ใช้สีกับตัวหนังสือทางฝั่งขวาเพื่อเน้นเนื้อหาที่สนุกสานต้องการให้เป็นไฮไลต์ด้วยในธีมสดใสเช่นกัน

10. Contrast ด้วยที่ว่างและพื้นขาว (Spacing & White Space)

 canva-10-662x497

เรื่องของ Space และ White Space จัดว่าเป็นสิ่งสำคัญในการออกแบบแทบทุกอย่าง ซึ่งรวมไปถึงการสร้าง Contrast ด้วยเช่นกัน เพราะมันคือการกำหนดระยะห่างและระยะชิดขององค์ประกอบต่างๆอย่างเหมาะสม หากมากหรือน้อยไปก็ย่อมทำให้ภาพรวมดูไม่น่าสนใจ แต่หากใช้  Space ด้วย”ความมาก” และ “ความน้อย”มาช่วยการออกแบบก็สามารถสร้างองค์ประกอบที่ดูดึงดูดสายตาได้เช่นกันcontrast-10b-662x497

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

11. Contrast ด้วยการจัดองค์ประกอบ (Compositional Choices)

 contrast-11-662x497

บางครั้งการจัดวางองค์ประกอบภาพก็สร้าง Contrast ได้เหมือนกัน ด้วยการเลือกที่จะเล่นกับความสมดุลหรือทิศทางของกราฟิกต่างทั้งภาพ,ตัวอักษร และตำแหน่ง โดยเราสามารถใช้หลักกการของกฏการถ่ายภาพมาใช้ร่วมด้วยได้ตามตัวอย่าง• The Rule of Thirds กฏสามส่วน : ง่ายๆคือการแบ่งภาพออกเป็นสามส่วนทั้งแนวตั้งและแนวนอนและพยายามวางจุดโฟกัสของภาพใว้ในตำแหน่งที่เส้นทั้งหมดตัดกันซึ่งจะมีอยู่ 4 จุดด้วยกัน

contrast-11b-662x2022

ตัวอย่าง
ภาพแบนเนอร์บนสุดของเว็บไซต์ใช้หลักการกฏสามส่วนแบบเป๊ะๆเลยคือวางกลางดอกกุหลาบ ข้อความพาดหัว และปุ่ม Shop Now ใว้จรงจุดตัดพอดีๆ

• Diagonals: คือการใช้เส้นนำทางสายตาของผู้ดูให้เคลื่อนไปตามทิศทางที่เราต้องการ ก็เพียงจัดวางสิ่งต่างให้อยู่ในทิศทางที่เราอยากนำเสนอเท่านั้น

12. Contrast ด้วยบางอย่างที่คาดไม่ถึง (Something Unexpected)

 contrast-12-662x497

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

ตัวอย่าง ภาพนี้แค่วาง Typo ให้กรอบของตัวอักษรไปแอบอยู่หลังภูเขาในขณะที่ตัวอักษรมาลอยอยู่ด้านหน้าก็น่าสนใจแล้ว

13. Contrast ด้วยแพทเทิร์น (Repetition & Patterns)

 contrast-13-662x497

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

 

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

14. Contrast ด้วยตำแหน่งและการจัดวาง (Position & Orientation)

contrast-14-662x497

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

contrast-14b-662x497ตัวอย่าง โลโก้ด้านบนแม้จะวางตัวหนังสือต่างๆไม่เสมอ Align กันเลยแต่โดยรวมก็ยังคงสมดุลซ้ายขวาได้ดีอยู่

15. Contrast ด้วยความชิดและห่าง (Proximity & Separation)

 contrast-15-662x497

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

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

16. Contrast ด้วยกราฟิกชี้นำ (Visual Cues)

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

 contrast-16b-662x497

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

17. Contrast ด้วยความซับซ้อนและเรียบง่าย (Complex & Simple Features)

 contrast-17-662x497

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

contrast-17b-662x343
ตัวอย่าง คือชุดสติ๊กเกอร์ที่ใช้ฉากหลังเป็นลายดอกไม้หลากสีสวยงามมาวางคู่กับ Typographic เรียบๆตัวหนังสือนิ่งๆบนพื้นสี่เหลี่ยมสีขาวก็ดูน่าสนใจ

18. Contrast ด้วยฟ้อนต์ต่างชนิด  (Font Combinations)

 contrast-18-662x497

 

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

contrast-18b-662x497

ตัวอย่าง โลโก้นี้ใช้ฟ้อนถึง 3 แบบแต่ก็ดูเข้ากันและเก๋ไก๋ดีทีเดียว

19. ข้อควรระวังเมื่อใช้ Typography

 contrast-19-662x497จากการใช้ฟ้อนต์คนละแบบมาสร้าง Contrast มีข้อควรระวังอยู่นิดหน่อยตรงที่ว่า การเลือกต้องพิถีพิถันนิดนึงไม่อย่างนั้นมันจะไม่ใช่ความ Contrast แต่จะกลายเป็นความ Conflict ซึ่งคือการขัดแย้งกันนั่นเอง นั่นจะทำให้งานดีไซน์ดูไม่สมู๊ทและรู้สึกไม่ลงตัว อีกอย่างก็คือการเลือกใช้ 2 ฟ้อนต์ที่มีความใกล้เคียงกันเกินไปก็ทำให้งานไปไม่สุดได้เช่นกัน และสุดท้ายคือจำนวนฟ้อนต์ที่นำมาใช้ถ้ามากไปก็เปรอะได้เหมือนกัน แต่ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับดีไซน์ของคุณด้วยแหละ

contrast-19b-662x414

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

20. Contrasting ด้วยสไตล์และน้ำหนักตัวอักษร (Typography Style & Weight)

 contrast-20-662x497

และสุดท้ายคือการใช้น้ำหนักความหนาบาง , ความเอียง , ความผอม , ความอ้วน ฯลฯ ของตัวอักษรมาสร้าง Contrast โดยแทบไม่ต้องออกแรงอะไรมากเลย แม้จะเป็นฟ้อนต์เดียวกันก็สร้างความน่าสนใจได้เหมือนกัน แค่ปรับน้ำหนักเล็กน้อย ใช้การเน้นส่วนที่ต้องการเน้นให้เด่นกว่าด้วยน้ำหนักที่หนาหรือบางกว่าส่วนอื่น จนเกิดความแตกต่างอย่างน่าสนใจนั่นเองcontrast-20b-662x946

 ตัวอย่าง เว็บไซต์นี้ออกแบบโดยกำหนดให้ Headline เป็นตัวหนาและส่วนเนื้อหาเป็นตัวบางในทุกช่อง

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

เทคนิค 20 แบบนี้สามารถใช้ร่วมกันได้ แค่ลองปรับให้เข้ากันก็สามารถสร้างงานที่หลากหลาย มีทางเลือกได้ไม่จำกัดเลยทีเดียวและขอบคุณ Canva Design School เจ้าของบทความต้นทางด้วย

Source : Canva Design School