สร้างคลังภาพของคุณ: เคล็ดลับและความท้าทายในการออกแบบ

เผยแพร่แล้ว: 2020-12-17

ความแตกต่างที่สำคัญอย่างหนึ่งระหว่างนักออกแบบรุ่นเก๋ากับรุ่นน้องคือห้องสมุดภาพที่เขา / เธอสร้างขึ้น

Visual Library คืออะไร?

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

ลองยกตัวอย่าง: ในฐานะนักออกแบบคุณได้รับมอบหมายให้สร้างเว็บไซต์ใหม่

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

ออกแบบโดย Alex Dimitrov

ไม่มีเวลาพิจารณาหัวข้อมากนักดังนั้นจึงอยู่ในส่วนหัวได้อย่างถูกต้อง ส่วนหัวมีส่วนประกอบอะไรบ้าง?

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

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

คุณสามารถออกแบบส่วนหัวได้กี่วิธี? หลายร้อยวิธี มีองค์ประกอบหลายประเภทภูมิประเทศสีการซ้อนทับปุ่มองค์ประกอบและอื่น ๆ อีกมากมาย เป็นการทดลองที่น่าสนใจที่จะทำ

วิธีสร้างไลบรารีภาพ

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

นี่คือตัวอย่างบางส่วน:

เฟสบุ๊ค:

ที่มาของภาพ: Dribbble

Gmail:

ที่มาของภาพ: Dribbble

Twitter:

ที่มาของภาพ: Dribbble

มีเพียงตัวอย่างมากมาย ยิ่งการออกแบบซับซ้อนมากเท่าไหร่คุณก็จะก้าวหน้าได้เร็วขึ้นเท่านั้น แต่มันทำงานอย่างไร?

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

ที่มาของภาพ: Dribbble

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

นักทัศนศิลป์ทุกคนจำเป็นต้องสร้างห้องสมุด

ตัวอย่างที่ชัดเจนของเรื่องนี้คือ Kim Jung Gi - อัจฉริยะที่สามารถสร้างงานศิลปะที่เหมือนมีชีวิตได้โดยใช้มุมมองใดก็ได้

ศิลปะโดย Kim Jung Gi

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

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

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

กราฟิกโดย Suzanne Helmigh

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

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

ที่มาของภาพ: Artstation

ความท้าทายในการออกแบบเว็บไซต์

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

1 - ปุ่ม

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

ที่มาของภาพ: Dribbble

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

2 - การ์ด

การ์ดหรือกล่องเป็นส่วนประกอบที่พบได้ทั่วไป สามารถเก็บเนื้อหาได้ทุกประเภทแม้ว่าองค์ประกอบทั่วไปบางอย่างอาจเป็นส่วนหัว / ส่วนท้าย + เนื้อหาหลัก

ที่มาของภาพ: Dribbble

งาน : ใช้เนื้อหาสร้างการ์ดด้านบนออกแบบ 10 รูปแบบให้แตกต่างกันมากที่สุด เปลี่ยนสไตล์เพิ่มองค์ประกอบใหม่หมุนใช้การไล่ระดับสีเงาไอคอนและภาพประกอบ พยายามที่จะไปกับมัน

3 - ความคิดเห็น

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

ที่มาของภาพ: Dribbble

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

เป้าหมายของแบบฝึกหัดเหล่านี้คือการหาวิธีทำองค์ประกอบทั่วไปในรูปแบบใหม่ ๆ ที่คุณไม่เคย รู้ มาก่อน

4 - แถบเลื่อน

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

ที่มาของภาพ: Dribbble

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

5 - รูปแบบการป้อนข้อมูล

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

ที่มาของภาพ: Dribbble

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

สรุป

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

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