วิธีใช้งานในการออกแบบดิจิทัล
ทัศนธาตุเป็นส่วนสำคัญของศิลปะและการออกแบบ มีองค์ประกอบภาพทั้งหมด 7 องค์ประกอบ: เส้น (Line), รูปร่าง (Shape), สี (Color), น้ำหนัก (Value), รูปทรง (Form), ลักษณะผิว (Texture), และบริเวณว่าง (Space) บทความนี้จะครอบคลุมแต่ละองค์ประกอบและอธิบายวิธีใช้งานในการออกแบบของคุณ
ไม่ว่าการออกแบบของคุณจะเป็นอย่างไร คุณสามารถใช้องค์ประกอบภาพเหล่านี้ได้อย่างน้อยหนึ่งองค์ประกอบ เราอธิบายองค์ประกอบภาพเหล่านี้อย่างละเอียดและแสดงวิธีใช้งานใน UI และการออกแบบเว็บ
ตั้งแต่ไอคอน ภาพประกอบ ไปจนถึงกราฟิก และอื่นๆ เส้นเป็นส่วนสำคัญของทัศนธาตุ ในการออกแบบเว็บ เส้นจะแสดงเป็นเส้นบาง หนา จุด สีดำหรือสีอื่นๆ มีรูปแบบต่างๆ มากมายที่สามารถทำได้ติดต่อกัน ลองมาดูตัวอย่างกัน
ลายเส้นเรียบง่ายและภาพประกอบที่รวมอยู่ในการจำลองการออกแบบแอปนี้เรียบง่ายแต่สื่ออารมณ์ได้ การใช้เส้นที่วาดด้วยมือในพื้นผิวที่แตกต่างกัน องค์ประกอบภาพนี้ทำให้การออกแบบมีบรรยากาศที่แตกต่างกัน หากเป็นเส้นโมโนที่มีขนาดสม่ำเสมอและไม่มีพื้นผิว อารมณ์ของการออกแบบจะแตกต่างไปจากเดิมอย่างสิ้นเชิง
สังเกตว่ามีการใช้เส้นในการออกแบบแอปนี้อย่างไร ซึ่งแตกต่างจากตัวอย่างก่อนหน้านี้ เส้นมีความหนาเท่ากัน บางเส้นสีดำและบางเส้นสีชมพูอ่อน ใช้เพื่อเพิ่มการเคลื่อนไหวให้กับฉากภาพประกอบ
ไอคอนเป็นอีกวิธีหนึ่งที่ใช้กันทั่วไปและมีความสำคัญในการใช้เส้นเป็นองค์ประกอบภาพในการออกแบบเว็บ ไอคอนมีความสำคัญต่อประสบการณ์การใช้งานของผู้ใช้ ไอคอนเดียวช่วยให้คุณเปลี่ยนคำและภาษา และทำให้งานง่ายขึ้นเป็นไอคอนเดียวสำหรับการประชุมสากล ตัวอย่างที่ดีของสิ่งนี้คือปุ่มโฮม หากคุณเห็นไอคอนเหมือนบ้านในที่ใดที่หนึ่งในแอปของคุณ คุณสามารถคลิกไอคอนนั้นเพื่อกลับไปยังหน้าแรกหรือหน้าแดชบอร์ดได้
ทัศนธาตุการเชื่อมต่อจากจุดหนึ่งไปสู่อีกจุดหนึ่ง โดยใช้เส้นเพื่อสร้างรูปร่าง เพิ่มบริบทให้กับงานออกแบบของคุณโดยเปลี่ยนเส้นให้เป็นวงกลม สี่เหลี่ยม สามเหลี่ยม หรือรูปทรงที่ซับซ้อนมากขึ้น คุณสามารถรวมรูปร่างและเส้นเพื่อสร้างภาพประกอบและไอคอนที่ซับซ้อนยิ่งขึ้นได้ สังเกตว่าการออกแบบไอคอนถูกเพิ่มในตัวอย่างนี้อย่างไรโดยการเพิ่มสี่เหลี่ยมผืนผ้าโค้งมนที่มีมุม เป็นการเพิ่มที่เรียบง่าย แต่เปลี่ยนการออกแบบ ตอนนี้อาจเป็นปุ่มหรือหัวข้อบนเว็บไซต์
ในตัวอย่างประสบการณ์การเริ่มต้นใช้งานแอปนี้ คุณจะเพิ่มรูปร่างเพื่อเพิ่มคอนทราสต์และความลึกให้กับภาพวาดของคุณ การวาดเส้นด้วยตัวมันเองทำให้วาดภาพได้ดี แต่การเพิ่มสีเหลืองและสีฟ้าที่ด้านบนของสีดำจะดึงดูดสายตาจากส่วนหนึ่งของภาพวาดไปยังอีกส่วนหนึ่ง รูปร่างสามารถเติมด้วยสีและลวดลาย หรือเพียงแค่ล้อมรอบด้วยโครงร่าง
สีเป็นองค์ประกอบภาพที่น่าตื่นเต้นที่จะเล่นกับการออกแบบของคุณและความเป็นไปได้ไม่มีที่สิ้นสุดในทัศนธาตุ หากคุณต้องการเจาะลึกในทฤษฎีสีและเข้าใจความแตกต่างระหว่างโทนสี โทนสี โทนสีอ่อน หรือโทนสีที่คล้ายกันและโทนสีเสริม คุณสามารถศึกษาเพิ่มเติมได้บนอินเตอร์เน็ต
ในการออกแบบเว็บ สามารถใช้สีสำหรับหัวข้อ เนื้อหา ปุ่ม และองค์ประกอบการออกแบบ เช่น ภาพประกอบ ไอคอน และภาพถ่าย คุณสามารถใช้สีเพื่อดึงดูดความสนใจไปยังส่วนต่างๆ ของการออกแบบ หรือใช้พาเลทเฉดสีหรือแบบแผนชุดสีเพื่อเพิ่มการรับรู้ถึงแบรนด์ (เช่น การใช้สีแดงมากขึ้นบนเว็บไซต์ของ Coca Cola ขณะที่ เป๊ปซี่ใช้จั๊มสูทสีน้ำเงิน และสีแดง) อย่างไรก็ตาม คุณตัดสินใจที่จะใช้สีและคิดเกี่ยวกับวิธีสร้างลำดับชั้นและการรวมเข้ากับการออกแบบของคุณ
ในตัวอย่างหน้า Landing Page นี้ นักออกแบบเลือกใช้ชุดสีที่จำกัดคือสีดำ สีขาว และสีเหลืองเป็นสีเฉพาะจุด ที่โลโก้ด้านซ้ายบน คุณจะเห็นว่าสีเหลืองเป็นสีหลักของบริษัท หลักเกณฑ์ในการออกแบบนี้ตรงกับแบรนด์ นอกจากนี้ยังช่วยเน้นปุ่มกระตุ้นการตัดสินใจ (CTA)
ตัวอย่างนี้ใช้สีในทางปฏิบัติเพื่อแยกข้อมูลในตารางและกราฟเหล่านี้ ในแผนภูมิเส้น ตัวเลขจริงใช้เพื่อแสดงถึงกำไรรวมของวันนั้น และสีชมพูแซลมอนใช้เพื่อแสดงถึงต้นทุนรวมสำหรับวันนั้น หากแผนภูมิแสดงตัวแปรเหล่านี้ทั้งหมดด้วยสีเดียวกัน หรือถ้าสีใกล้เคียงกันเกินไป ผู้ใช้จะเข้าใจวันที่ได้ยากขึ้น สีไม่ได้ใช้เพื่อการรับรู้ถึงแบรนด์และความสวยงามเสมอไป อาจจำเป็นต้องเข้าใจเนื้อหาที่คุณกำลังส่ง
น้ำหนักในทัศนธาตุแสดงถึงความสว่างหรือความมืดของสี แม้ว่าภาพวาดของคุณจะมีเพียงสีเดียว คุณก็สามารถปรับเปลี่ยนค่าสีเพื่อสร้างความลึกและคอนทราสต์ได้
ดูจากรูปนี้ว่าการเพิ่มแสงและความมืดให้กับสีน้ำเงินหลักของโลโก้นี้สร้างมูลค่าและเพิ่มมิติได้อย่างไร ด้วยการเปลี่ยนค่าสี คุณสามารถเปลี่ยนรูปร่างสองมิติเป็นรูปร่างสามมิติได้
อย่างไรก็ตาม น้ำหนักไม่จำเป็นต้องเป็นสีเสมอไป คุณยังสามารถเปลี่ยนน้ำหนักสีดำหรือสีเทาได้ ลองดูตัวอย่างทางด้านซ้าย นี่คือเวอร์ชันสีที่ใช้การเปลี่ยนแสงและความมืดของแต่ละสีเพื่อสร้างน้ำหนักและขนาด รุ่นที่ดีสามารถบรรลุคุณค่าในระดับเดียวกันโดยการเปลี่ยนเฉดสีเทา
รูปทรงถูกกำหนดให้เป็นวัตถุสามมิติของทัศนธาตุ องค์ประกอบภาพนี้ไม่ได้ใช้ในลักษณะที่ชัดเจนที่สุดในการออกแบบดิจิทัลเสมอไป การออกแบบ 3D กำลังได้รับความนิยมเนื่องจากกลายเป็นเรื่องธรรมดามากขึ้นในช่วงนี้
มาดูกันว่าแบบฟอร์มและวัตถุ 3 มิติถูกใช้อย่างไรในหน้า Landing Page ของตัวอย่างนี้ ภาพทางด้านขวาเป็นภาพสามมิติของฉากในสำนักงาน นี่ไม่ใช่ภาพประกอบหรือภาพถ่ายของการวาดเส้น แต่เป็นภาพที่สร้างขึ้นด้วยเทคโนโลยี 3D คุณสามารถตรวจสอบความลึกของภาพได้ด้วยการสังเกตมุมมองด้านหน้า มุมมองด้านบน และมุมมองอีกข้างจากมุมเดียวกัน
อีกวิธีในการเพิ่มรูปทรง 3 มิติคือการใช้ม็อคอัพ Apple ทำเสริมนิดหน่อยในด้านแบรนด์และการออกแบบที่สวยงาม เมื่อดูผลิตภัณฑ์ที่แสดงบนเว็บไซต์ เป็นการยากที่จะระบุว่าเป็นภาพถ่ายหรือการแสดงผล 3 มิติ ในกรณีส่วนใหญ่ การเรนเดอร์ผลิตภัณฑ์ 3 มิติจะให้ประสบการณ์ที่ดีขึ้น เช่น ตัวอย่าง Apple Watch ที่แสดงในภาพหลักบนหน้า Landing Page นี้
ลักษณะผิวสามารถเพิ่มมิติให้กับการออกแบบของคุณได้ แทนที่จะใช้แค่สีทึบ ลักษณะผิวเป็นวิธีเพิ่มความลึกและบุคลิกภาพ จากทัศนธาตุ วิธีง่ายๆ ในการเพิ่มลักษณะผิวให้กับการออกแบบคือการใช้มันในการออกแบบ เช่นในตัวอย่างนี้ เบลอเมฆและเพิ่มลักษณะผิวแปรงให้กับส้มและดอกไม้เพื่อสร้างรูปลักษณ์ที่ไม่เหมือนใครให้กับภาพวาดนี้ซึ่งแตกต่างไปจากเดิมอย่างสิ้นเชิง
การเพิ่มลักษณะผิวไม่จำเป็นต้องได้รับแรงบันดาลใจจากตัวอย่างสี วาดด้วยมือคร่าวๆ และสามารถนำไปใช้ในรูปแบบที่ทันสมัยกว่าได้ ในตัวอย่างการออกแบบเว็บนี้ โปรดสังเกตว่ามีการเพิ่มตัวอย่างการไล่ระดับสีและรูปร่างที่เบลอเป็นองค์ประกอบพื้นหลังเพื่อให้รู้สึกถึงลักษณะผิวได้อย่างไร การกระเซ็นของสีม่วงแดง น้ำเงิน และม่วงที่ละเอียดอ่อนเหล่านี้สามารถเชื่อมโยงเฉดสีและดึงดูดความสนใจไปที่ประสบการณ์หน้า Landing Page ของคุณได้
บริเวณว่างหรือที่เรียกว่าพื้นที่สีขาวหรือพื้นที่เชิงลบมีความสำคัญต่อการเพิ่มบริเวณว่างในการออกแบบ UI ของคุณ ในทัศนธาตุ หากช่องว่างสีขาวไม่สมดุล ข้อมูลทั้งหมดจะถูกรวมเข้าด้วยกันในบริเวณเดียว ทำให้ผู้ใช้อ่านและนำทางได้ยาก
ต่อไปนี้คือเคล็ดลับบางประการในการเพิ่มระยะห่างที่สมดุลให้กับการออกแบบของคุณ เช่น การทำงานในตาราง หากคุณต้องการใช้งานเครือข่ายให้ลึกซึ้งยิ่งขึ้น แต่โดยพื้นฐานแล้ว ตารางเป็นวิธีแบ่งช่องว่างออกเป็นคอลัมน์ แถว และแนวปฏิบัติ
ในตัวอย่างการออกแบบเว็บนี้ คุณจะเห็นว่ามีการใช้กริดอย่างชัดเจนเพื่อแบ่งพื้นที่ขององค์ประกอบการออกแบบเท่าๆ กัน ในส่วนหัว การออกแบบจะแบ่งออกเป็นข้อความส่วนหัวขนาดใหญ่เกือบเท่าๆ กันและรูปภาพการออกแบบภายในขนาดใหญ่ และด้านล่างมีส่วนย่อยเพื่อช่วยให้ผู้ใช้อ่านส่วนแผน การประมาณการ และการสร้าง แม้แต่การออกแบบส่วนท้ายยังถูกแบ่งออกเป็นคอลัมน์ต่างๆ อย่างชัดเจน เพื่อช่วยให้ผู้ใช้ค้นหาลิงก์ที่ต้องการได้อย่างแม่นยำ
ในหน้า Landing Page ตัวอย่างนี้ จะมีตารางแสดงอยู่ข้างๆ คุณจึงสามารถเห็นได้ว่าผู้ออกแบบใช้พื้นที่ในการแบ่งเนื้อหาและสร้างการออกแบบที่กลมกลืนกันอย่างไร คุณสามารถดูตาราง 12 คอลัมน์ด้านล่างการออกแบบและกล่องข้อความและรูปภาพที่ขยายหลายคอลัมน์
รวมองค์ประกอบทัศนธาตุหลายรายการ
หลังจากเข้าใจองค์ประกอบทัศนธาตุทั้งเจ็ดแล้ว คุณจะเริ่มเข้าใจว่ามีการใช้องค์ประกอบเหล่านี้อย่างไรในการออกแบบโดยรอบ แม้ว่าเราจะวิเคราะห์แต่ละรายการแล้ว คุณจะเห็นว่าตัวอย่างจำนวนมากที่เราแชร์ใช้หลายทัศนธาตุในการออกแบบเดียว
เป็นเรื่องยากเสมอที่จะให้การวิจารณ์ที่ถูกต้องเกี่ยวกับนักวิจารณ์ศิลปะ เนื่องจากมีความเสี่ยงที่นักวิจารณ์จะเข้าใจผิดว่าเป็นภาพลวงตา เป็นผลให้นักวิจารณ์กลายเป็นประชาธิปไตยไม่ว่าทางตรงหรือทางอ้อม
เป็นเรื่องยากเสมอที่จะให้การวิจารณ์ที่ถูกต้องเกี่ยวกับนักวิจารณ์ศิลปะ เนื่องจากมีความเสี่ยงที่นักวิจารณ์จะเข้าใจผิดว่าเป็นภาพลวงตา เป็นผลให้นักวิจารณ์กลายเป็นประชาธิปไตยไม่ว่าทางตรงหรือทางอ้อม
เป็นเรื่องยากเสมอที่จะให้การวิจารณ์ที่ถูกต้องเกี่ยวกับนักวิจารณ์ศิลปะ เนื่องจากมีความเสี่ยงที่นักวิจารณ์จะเข้าใจผิดว่าเป็นภาพลวงตา เป็นผลให้นักวิจารณ์กลายเป็นประชาธิปไตยไม่ว่าทางตรงหรือทางอ้อม