พื้นผิวและลวดลาย — ฮีโร่ที่ไม่มีใครรู้จักของ Visual Design

การร่วมทุนเป็นเรื่องสนุก (ฮ่าฮ่า) ในAyagigs Web3 Fellowship ซึ่งเป็นโปรแกรมการเรียนรู้ที่จัดขึ้นโดยความร่วมมือกับCoinbase

ฉันชื่นชมการทำงานของ Product Design Lead, Ajiri Omafokpeและ Program Associate, Folushola Esther พวกเขาทำสิ่งต่างๆ มากมายในการทำให้โปรแกรมนี้ต้อนรับ ให้ความรู้ สนุกสนาน และพาคนทั้งกลุ่มที่คุณชอบดูไปด้วย

เราทำขั้นตอนพื้นฐานเสร็จแล้วและมุ่งหน้าสู่ขั้นตอนหลัก แต่ก่อนหน้านั้นเรามีสัปดาห์แห่งความท้าทายที่เริ่มในวันจันทร์ที่ 21 พฤศจิกายน 2022 เพื่อทดสอบเราเกี่ยวกับสิ่งที่เราได้เรียนรู้ตลอดขั้นตอนพื้นฐาน การทำแบบทดสอบทุกประเภทรวมถึง MCQs, QA, การทดสอบภาคปฏิบัติ (คุณจะไม่เชื่อว่าทำเสร็จภายใน 2 วัน) บทความนี้เป็นงานสุดท้ายสำหรับสัปดาห์ท้าทาย

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

มาเริ่มกันเลย

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

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

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

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

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

ใช้กรณีของพื้นผิวและรูปแบบ

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

ดึงดูดผู้ใช้ให้คลิก

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

ปรับปรุงการนำเสนอข้อมูลด้วยภาพ

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

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

สร้างบรรยากาศและเน้นความเป็นตัวของตัวเอง

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

ให้มันชัดเจน

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

ใช้พื้นผิวเท่าที่จำเป็น

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

ฝึกฝนบ่อยๆทำให้เก่ง

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

ใช้มันด้วยความตั้งใจ

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

สำรวจ สำรวจ สำรวจ...

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

ลิงก์ที่คัดสรรมาเพื่อการสำรวจพื้นผิว

365 พื้นผิวให้ดาวน์โหลด (JPG, PSD, PAT, ABR) — WeGraphics

พื้นหลัง | กราฟิกเบอร์เกอร์

ห้องสมุดรูปแบบ

รูปแบบ ava7 /// 1905 รูปแบบพื้นหลังไร้รอยต่อฟรี

ลิงก์ที่คัดสรรมาสำหรับการสำรวจรูปแบบ

ฟรีเครื่องกำเนิด SVG เครื่องมือสี & เครื่องมือออกแบบเว็บไซต์ (fffuel.co)

Pattern Monster — เครื่องมือสร้างรูปแบบ SVG

รูปแบบที่ละเอียดอ่อน | พื้นผิวฟรีสำหรับโครงการเว็บต่อไปของคุณ (toptal.com)

ตัวสร้างรูปแบบ | สร้างรูปแบบที่ไร้รอยต่อและไม่มีค่าลิขสิทธิ์ (doodad.dev)

ขอบคุณสำหรับการอ่านและมีวันที่ดี!

อ้างอิง

• UXdesign.cc