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

การจัดวางตามแนว (Alignment)

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

แล้วถ้าผมลองจัดข้อมูลในแนวชิดซ้ายล่ะ? ลองเทียบดูแล้วจะเห็นว่า ผลงานดูน่าสนใจขึ้นใช่ไหมครับ อีกทั้งการอ่านก็ง่ายขึ้นด้วย

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

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

แล้วถ้าข้อมูลเหล่านั้นถูกจัดเรียงชิดซ้ายล่ะ? เห็นชัดเลยใช่ไหมครับว่า มันดูเรียบร้อยและอ่านง่ายขึ้นกว่าแบบจัดกลาง ยิ่งเป็นข้อมูลเรียงหลายคอลัมน์แบบนี้ ยิ่งเห็นชัดเจน

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

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

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

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

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

มาดูตัวอย่างเสริมความเข้าใจตรงนี้เพิ่มกัน

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

ที่เรารู้สึกเช่นนั้นก็เพราะว่า เส้นขอบยึดแนวทางซ้ายของกีตาร์ไม่ได้เป็นเส้นตรง!!! แล้วอย่างนี้จะแก้ไขยังไงล่ะ? ลองคิดดูซิ…

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

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

ในหลายๆ ผลงาน ผมเลือกใช้การจัดเรียงชิดซ้ายซะส่วนใหญ่ แต่ก็ใช่ว่าจะไม่ใช้การจัดกลางเลยนะครับ

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

เส้นที่มองไม่เห็น

งานที่ดูโปร จะเห็นได้ชัดเจนว่าเป็นงานที่มีการจัดวางแนว หรือมี Alignment แน่นอน ซึ่งถ้าพูดเป็นภาษา Designer ก็คืองานที่มีเส้นกริด (Grid) และเส้นไกด์ (Guide) ซึ่งเป็นเครื่องมือที่สำคัญที่สุดในการออกแบบสื่อกราฟฟิกทุกประเภทเลย

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