10 Ilustrasi Panduan Desain dan Gaya Digital dari Perusahaan Populer seperti Apple, Google & Starbucks

Jika Anda pernah bertanya-tanya bagaimana desainer di Apple mendefinisikan setiap aspek kecil di iOS saat mereka akhirnya membuatnya, maka Anda mungkin berada di tempat yang tepat.

Karena inovasi teknologi terus berkembang, desain web terus menjadi lebih formal. Desainer dan pengembang web di seluruh dunia perlu membuat kode yang dapat menerjemahkan dengan mulus dari Laptop ke produk seluler, mempermudah pemahaman navigasi situs, dan berinovasi dengan kemampuan situs internet lainnya — ini semua adalah faktor yang distandarisasi perusahaan dalam panduan desain digital.

Panduan desain elektronik telah menjadi lebih praktis untuk gambaran umum merek dan daya ingat di internet karena mereka menetapkan harapan dan tolok ukur untuk layar tampilan web perusahaan. Mereka sangat penting untuk situs web dan produk yang harus memberikan cobaan berat bagi pengguna.

Dalam pemasangan ini, kami akan menyelami panduan tipe digital secara detail dan menunjukkan kepada Anda beberapa ilustrasi yang mengesankan dari bisnis terkenal yang telah menyelesaikannya dengan benar.

Gaya informasi mode ini harus diperhatikan sebagai manual yang menetapkan kriteria gaya dan desain untuk keberadaan digital perusahaan. Maksud utamanya adalah untuk menghasilkan jenis gaya universal untuk nama merek dan membuat keteraturan tertentu di semua saluran dan media, tempat Anda membangun merek, palet warna, tipografi, saran citra, dan sebagainya.

Tidak seperti panduan mode pabrikan yang merangkum logo perusahaan, pernyataan misi, persona pembeli dan nada suara, desain web dan panduan gaya berpusat pada presentasi digital seperti UX/UI.

Tapi, sebagai seorang desainer UX, saya biasanya penasaran, apa yang bisa Anda temukan di panduan mode digital dari penyedia berpengaruh seperti Apple, Google, dan Starbucks?

Rasakan atau tidak, banyak penyedia membuat detail ini tersedia untuk umum — mereka tidak membuatnya cukup mudah untuk ditemukan. Jadi, setiap kali saya menemukan satu, saya menandainya. Berikut adalah beberapa yang terbaik yang saya temukan secara signifikan.

Contoh Panduan Gaya Digital Cemerlang

1. Apple iOS

Panduan desain dan gaya Apple sangat menarik karena membahas cara merancang metode yang berfungsi penuh. Monterey, salah satu versi terbaru dari OS X Apple, memiliki antarmuka konsumen yang lebih disederhanakan daripada pendahulunya, Yosemite. Apple mendemonstrasikan perbedaan yang halus namun nyata ini dengan perbandingan grafis yang sangat bagus dan kemudian membahas tentang alasan yang mendukung setiap aspek tunggal dari tata letak sistem yang sedang berjalan. Ini memberi Anda jendela ke dalam pikiran para desainer.

2. Google: Tata Letak Bahan

Google memelopori desain dan gaya busana yang diidentifikasi sebagai Struktur Produk, yang hadir sebagai perpaduan antara Desain dan gaya Skeuomorfik (gradien, tekstur, elemen ringan) dan Gaya Datar (sederhana, penuh warna, geometris.) Dalam melakukan ini, mereka memadukan hal positif aspek-aspek yang terkait dengan setiap desain dan gaya desain, meskipun menghindari hal-hal negatif.

Karena Google telah bekerja menuju Gaya Produk selama beberapa dekade sekarang, Anda mungkin sudah berinteraksi dengannya setiap hari — aplikasi Google Kalender, siapa saja? Manual desain dan gaya ini menjelaskan secara spesifik apa itu Desain Material dan bagaimana Google menggunakannya. Dan saya harus mengatakan bahwa ini adalah salah satu panduan tipe terbaik yang pernah saya temui.

3. Starbucks

Ini hanyalah salah satu panduan desain dan gaya paling minimalis yang pernah saya lihat — tetapi, ini menyimpan banyak fakta praktis. Ini menempatkan penekanan yang signifikan pada kode dan Anda dapat menjelaskan bahwa itu dibangun oleh pembangun, untuk pembangun. Ini tidak memiliki elemen terkait nama merek, sehingga berjalan di antara panduan desain situs web dan pustaka kode.

4. Atlassian

Rangkaian barang dagangan yang dijadikan model Atlassian sangat besar — ​​jadi, tentu saja, mereka memiliki panduan mode yang sangat besar. Dari hal-hal mendasar (seperti palet warna dan tipografi) hingga komponen (seperti tabel dan tooltips) hingga perpustakaan pola yang lengkap, buku panduan ini memiliki hampir semua hal yang dapat Anda andalkan dari produk sebesar ini.

Mungkin yang terbaik dari semuanya, alasan mengemudi manual tipe lengkap dirangkum dalam 3 kondisi yang tampak sederhana di situs web rumah.

5. Mozilla

Tutorial desain elektronik ini terutama berkaitan dengan branding dan komunikasi. Tetapi dengan Mozilla mendapatkan taktik "privasi dan web terbuka di seluruh dunia" akhir-akhir ini, sungguh menakjubkan melihat bagaimana mereka meniru ini dalam desain mereka.

Beranda Mozilla juga melakukan karir yang fantastis dengan menguraikan bagaimana UX/UI-nya seharusnya dapat diakses oleh pria dan wanita dengan gangguan penglihatan atau cacat — satu hal yang inklusif dan penting karena pengetahuan akan menjadi jauh lebih revolusioner.

6. Penyangga

Pedoman tipe buffer sedikit dan ringkas, kemungkinan dari grid melalui modals semua dalam satu posisi. Ini adalah pengingat yang menyenangkan bahwa tutorial mode elektronik Anda tidak harus mencolok jika menyampaikan semua poin ideal. Perusahaan yang mencari tempat untuk memulai dapat mempertimbangkan catatan dari faktor pedoman desain sederhana Buffer dan membangunnya dari sana.

7. Yelp

Jika Anda mencari contoh yang dapat diandalkan dari desain situs web dan buku panduan gaya, Yelp's mendapatkannya termasuk. Tidak hanya lengkap, tetapi menjelaskan prosedur Desain Atom sebagai buku masak, dan membagi komponen situs web sebagai zat yang berkontribusi pada hidangan.

Detail ini memiliki semuanya: tipografi, tata letak, variasi, wadah, navigasi, dan cuplikan kode untuk setiap bagian. Mereka melakukan pekerjaan yang bagus untuk menjelaskan apa sebenarnya setiap elemen itu, di mana itu benar-benar harus digunakan, dan bagaimana itu harus dijalankan.

8. GOV.Kepulauan Inggris

Situs web solusi pemerintah Inggris telah umum digembar-gemborkan sebagai contoh utama UX berkualitas tinggi. Mengapa? Karena itu menampilkan gaya dan desain yang tidak rumit dan cepat digunakan yang menampung terlalu banyak informasi dan fakta.

Jika Anda tertarik dengan apa yang dapat membuat tata letak yang benar-benar bersih dan kuat (petunjuk: biasanya dimulai dengan penggunaan warna solid, tipografi, dan spasi), maka manual tipe GOV.UK layak untuk dilihat sekilas. Sangat mirip dengan situs internet, ini sangat sangat sederhana tetapi sangat mencerahkan.

9. DeviantArt

Informasi gaya DeviantArt yang baru bersifat eksklusif karena benar-benar lebih dari sekadar informasi — ini adalah pengetahuan. Ini menceritakan sebuah kisah dan memanfaatkan visual yang berani dan lebar untuk membenamkan orang dalam keahlian emosional merek DeviantArt. Karena itu, ini benar-benar buku panduan model branding, jadi hanya produk seperti warna dan tipografi yang dilapisi.

10. Diskusi

Warna, ikon, tipografi, dan logo ... Disqus mempertahankannya lebih pendek dan manis dengan informasi ini. Tapi itu semua bisa ditawarkan dengan cara yang cukup menyenangkan dan terorganisir. Buku panduan ini dapat digunakan sebagai contoh yang bagus untuk "tempat untuk memulai" ketika membuat pedoman gaya yang Anda miliki, karena menyentuh semua dasar.

Pengalaman Dipengaruhi untuk Membuat Manual Anda Sendiri?

Sekarang bisa menjadi saklar Anda. Dengan memanfaatkan tutorial tipe elektronik di perusahaan Anda, Anda dapat mengomunikasikan bahasa desain merek Anda kepada desainer dalam, organisasi, rekan pemasaran, dan bahkan klien.

Mulailah dengan faktor dasar standar (bayangan, tipografi, logo, citra), sertakan beberapa rekomendasi penggunaan (“lakukan dan Anda tidak boleh”), dan bahkan memasukkan beberapa bagian bersih jika Anda perlu (modul, templat, cuplikan kode. Gunakan contoh dari penyedia lain untuk belajar dari yang terbaik. Tenaga kerja Anda akan membuat pola reguler dalam waktu singkat.