10 ภาพประกอบการออกแบบและสไตล์ดิจิทัลจากบริษัทยอดนิยม เช่น Apple, Google และ Starbucks

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

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

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

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

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

แตกต่างจากคู่มือแฟชั่นของผู้ผลิตที่ห่อหุ้มโลโก้ของบริษัท การยืนยันพันธกิจ บุคลิกของผู้ซื้อและน้ำเสียง การออกแบบการออกแบบเว็บและคำแนะนำสไตล์จะเน้นที่การนำเสนอแบบดิจิทัล เช่น UX/UI

แต่ในฐานะนักออกแบบ UX เอง ฉันมักสงสัยว่าคุณจะพบอะไรในคู่มือแฟชั่นดิจิทัลของผู้ให้บริการที่มีอิทธิพล เช่น Apple, Google และ Starbucks

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

ตัวอย่างของ Brilliant Digital Style Guides

1. Apple iOS

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

2. Google: เค้าโครงวัสดุ

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

เนื่องจาก Google ได้ทำงานเกี่ยวกับ Product Style มาเป็นเวลาสองสามทศวรรษแล้ว ตอนนี้คุณคงมีปฏิสัมพันธ์กับ Google ในแต่ละวันตามพื้นฐานแล้ว — แอป Google ปฏิทิน มีใครบ้าง? คู่มือการออกแบบและสไตล์นี้ระบุว่า Materials Design คืออะไรและ Google ใช้งานอย่างไร และฉันต้องบอกว่ามันเป็นหนึ่งในไกด์นำเที่ยวที่ดีที่สุดที่ฉันเคยเจอมาทุกเมื่อ

3. สตาร์บัคส์

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

4. Atlassian

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

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

5. Mozilla

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

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

6. บัฟเฟอร์

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

7. Yelp

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

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

8. GOV.เกาะอังกฤษ

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

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

9. DeviantArt

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

10. Disqus

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

ประสบการณ์ที่ได้รับอิทธิพลในการทำคู่มือของคุณเอง?

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

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