Panduan Desainer untuk Bekerja Dengan Panduan Gaya & Ubin Gaya
Membuat sebuah identitas merek bukanlah tugas yang mudah. Ini membutuhkan usaha keras tetapi itu juga salah satu tugas kreatif yang paling memuaskan. Proyek web sering mencampur branding dengan desain antarmuka. Ini bisa membingungkan karena ada banyak hal yang harus dilakukan di kedua bidang. Panduan gaya dan ubin gaya adalah sumber yang bagus untuk desainer web, dan meskipun mereka terdengar mirip, mereka melakukannya dua tugas berbeda.
Dalam posting ini, saya ingin mempelajari keduanya, dan membahas manfaat yang bisa Anda dapatkan dari aset kreatif ini. Tidak semua orang perlu (atau suka) membuat panduan gaya atau ubin gaya. Tetapi setiap desainer setidaknya harus memahami apa ini, dan bagaimana mereka bekerja.
Panduan Gaya Untuk Web
Saya telah membaca berbagai pendapat tentang panduan gaya. Beberapa mengatakan ini adalah mockup digital sementara yang lain mengatakan bahwa panduan gaya berbasis kode adalah yang paling berguna.
Either way, tujuan panduan gaya adalah sama untuk web seperti proyek lainnya. Ini mendefinisikan pola yang konsisten, modul UI, dan preferensi kreatif digunakan dalam proses desain. Anda bisa mendapatkan pengukuran piksel-sempurna yang sangat spesifik dan ditetapkan untuk elemen tertentu, atau Anda bisa tetap longgar dan menawarkan panduan dengan contoh visual.
Tidak ada satu pun cara yang tepat untuk melakukan panduan gaya. Satu-satunya cara yang salah adalah menciptakan sumber daya yang sederhana tidak bisa dipahami oleh orang lain.
Tujuannya adalah untuk menciptakan aset yang akan tahan uji waktu. Harus terbuka untuk pengeditan jika sumber daya baru dibuat. Ini juga harus dapat diakses oleh siapa saja yang bergabung dengan tim untuk menyelam langsung ke panduan dengan mudah.
Panduan gaya seharusnya sedetail yang diperlukan untuk proyek. Biasanya termasuk aset yang dapat digunakan kembali, seperti tipografi, tombol, carikan warna, tekstur, dan elemen halaman umum.
Kami baru saja meliput alat panduan gaya hidup yang dapat membantu Anda membangun panduan gaya hidup dari awal. Panduan hidup ini lebih cocok untuk pengembang frontend, tetapi mereka bisa bermanfaat bagi para desainer. Anda dapat membaca lebih lanjut tentang hal ini di posting Smashing Magazine ini.
Sumber daya favorit mutlak saya adalah StyleGuides.io. Ini mencakup dasar-dasar panduan gaya untuk web, termasuk contoh hidup dan studi kasus.
Pustaka pola MailChimp adalah salah satu contoh terbaik yang dapat Anda temukan di StyleGuides.io. Ini panduan gaya hidup daring itu mendefinisikan kisi, tipografi, dan elemen halaman MailChimp.
Ketika Anda mendesain panduan gaya untuk perusahaan web, sudah umum untuk meletakkan segala sesuatu secara online, tetapi Anda juga bisa membuatnya panduan internal, dan simpan di intranet lokal atau tempatkan secara pribadi di belakang halaman login pengguna. Cara Anda mengakses panduan gaya benar-benar tidak masalah. Mereka semua melayani tujuan yang sama untuk menyampaikan warna, pola, dan visual tertentu cocok dengan tema proyek web.
Untuk mempelajari lebih lanjut tentang masalah ini, lihat pos-pos lain ini tentang panduan gaya:
- Panduan Gaya Front-end (24ways.org)
- Buat panduan gaya situs web (creativebloq.com)
- Cara Membuat Panduan Gaya Desain Web yang Sempurna (dtelepathy.com)
Percabangan Menjadi Ubin Gaya
Ubin gaya adalah binatang yang sama sekali berbeda. Ubin ini aset kreatif yang digunakan pada fase desain awal ketika mencoba memaku estetika tertentu.
Situs web Style Tiles dibuat oleh Samantha Warren, dan memiliki semua yang mungkin perlu Anda ketahui. Ada tidak ada templat khusus untuk mendesain ubin gaya. Tetapi contoh Samantha digunakan judul dan jenis paragraf, tautan, pola, dan pilihan warna yang mungkin bersama dengan a logo bermerek.
Ketika bekerja dengan ubin gaya, tujuan Anda akhirnya adalah untuk hadir 2-3 ubin gaya yang berbeda kepada klien atau direktur kreatif. Ubin ini lebih detail daripada papan mood, namun jauh lebih rinci daripada mockup penuh.
Ubin harus cukup rinci untuk memberikan rasa identitas dan mood situs web. Samantha mendorong menggunakan kata sifat untuk menjelaskan setiap ubin secara detail.
Klien bisa lihat melalui ubin yang berbeda, dan pilih potongan favorit mereka. Ini menghemat waktu Anda ketika merancang karena klien telah melihat aset yang mereka sukai, jadi ada sedikit peluang revisi yang besar.
Berikut ini kutipan hebat dari situs web Style Tiles:
Membandingkan ubin gaya dengan toolkit desainer interior adalah analogi yang tepat. Anda tidak ingin menuangkan upaya ke dalam mockup pixel-sempurna hanya untuk membuat klien menyadari bahwa mereka membenci sebagian besar warna dan font.
Sebagai gantinya, gunakan ubin gaya untuk menemukan a tema umum atau bahasa visual untuk digunakan di seluruh situs. Ini bisa termasuk branding / identitas tetapi juga mungkin termasuk Fitur UI, seperti menu dropdown atau tombol CTA.
Anda harus menggunakan ini sebagai aset yang dapat diserahkan di awal proses. Setelah Anda menyelesaikan mockup lengkap, Anda tidak perlu lagi merujuk ubin gaya lagi. Namun demikian pada awalnya, ubin gaya dapat menjadi penting untuk proses kreatif menghemat waktu desainer dan memberikan banyak pilihan kepada klien untuk dipilih.
Jika Anda menghendaki menggali lebih dalam ubin gaya lihat posting terkait ini.
- Ubin Gaya dan Cara Mereka Bekerja
- Ubin Gaya: Alternatif untuk Desain Lengkap
- Membuat Gaya Ubin: Pendekatan Mudah Untuk Arah Desain
Panduan Gaya vs. Ubin Gaya
Perbedaan antara pemandu gaya dan ubin gaya tidak jelas namun pasti. SEBUAH panduan gaya jauh lebih banyak terperinci dan harus digunakan sebagai panduan referensi berkelanjutan untuk tim kreatif. SEBUAH ubin gaya dapat digunakan sebagai papan mood untuk plot ide secara visual untuk diri sendiri atau klien. Mereka sering terbiasa jelajahi ide, dan begitu proyek selesai mereka tidak melayani banyak tujuan.
Ubin gaya seringkali lebih kasar di tepinya, dan digunakan semata-mata dalam proses kreatif awal. Panduan gaya dimaksudkan untuk digunakan di seluruh proses desain dan bahkan sesudahnya untuk referensi di masa mendatang untuk desainer lain yang mungkin bekerja di situs.
Keduanya memiliki kelebihan dan kekurangan. Ubin gaya adalah cepat dan menyenangkan, tapi tdk kekal di alam. Panduan gaya teliti dan berperilaku seperti dokumentasi visual, tetapi mereka juga membutuhkan banyak pekerjaan.
Jadi yang mana yang harus Anda gunakan? Akhirnya tergantung pada proyek.
Proyek yang lebih kecil seperti untuk situs web bisnis kecil bekerja lebih baik dengan ubin gaya. Membangun panduan gaya keseluruhan untuk situs bisnis kecil akan membutuhkan terlalu banyak pekerjaan dan jam yang dapat ditagih. Ini mungkin tidak sebanding dengan biaya untuk sebagian besar klien.
Namun a proyek besar seperti mendesain ulang NY Times akan mendapat manfaat dari ubin gaya dan panduan gaya.
Menemukan bahasa dan suasana hati untuk proyek baru selalu merupakan proses yang berharga. Inilah yang membuat ubin gaya sempurna untuk hampir setiap skenario.
Anda juga bisa bertahan tanpa membuat salah satu dari aset ini. Beberapa desainer pergi langsung dari gambar rangka untuk maket rinci. Dan beberapa klien bahkan tidak menginginkan panduan gaya karena tidak akan digunakan.
Bekerja berdasarkan per proyek dan memutuskan apa yang terbaik untuk masing-masing proyek.
Contoh Langsung
Mari kita selesaikan ini dengan menutupi contoh dari kedua panduan gaya dan ubin gaya. Saya menemukan desain ini saat menjelajahi Dribbble dan saya pikir mereka mencontohkan kualitas yang Anda inginkan dalam panduan gaya Anda sendiri atau ubin gaya.
Panduan Gaya
Panduan gaya Airbnb yang luar biasa ini dibuat oleh Derek Bradley. Ini sangat sederhana tetapi jelas menggambarkan pola, warna, dan elemen halaman utama dapat ditemukan dalam desain.
Berikut panduan gaya digital yang jauh lebih besar yang dibuat oleh perancang Naoshad Alam. Contoh ini adalah jauh lebih terorganisir dengan bagian untuk warna, tipografi, formulir, elemen antarmuka, dan fitur UI lainnya.
Panduan gaya yang lebih rinci akan menempatkan semua elemen desain ini di web, dan termasuk cuplikan kode untuk setiap.
Desainer Cupi Wong membuat panduan ini untuk AfterShip. Tipografi, tombol, pilihan warna, dan elemen halaman umum dibuat dengan hati-hati, dan diorganisir bersama menjadi beberapa bagian.
Ini juga bisa porting ke web, dan dibangun jauh lebih besar sebagai dokumentasi referensi online.
Perancang UI Greg Dlubacz membagikan panduan gaya UI-nya sendiri untuk proyek web. Benda ini sangat besar. Pratinjau layar penuh memiliki tinggi 21.000 piksel!
Benar-benar salah satu panduan gaya digital terbaik yang pernah saya lihat. Ini juga bisa diangkut ke halaman dokumentasi online untuk referensi anggota tim.
Ubin gaya
Perancang UI / UX Abdus Salam menciptakan ubin gaya ini untuk situs web toko makanan organik. Ini sangat mendasar elemen desain datar, beberapa fitur UI kecil, dan a Palet warna.
Desainer Adrian Cantelmi benar-benar menjelaskan dengan ubin gaya divestasi-nya. Ini memiliki warna dan tipografi tetapi juga termasuk ilustrasi vektor.
Vektor ini membantu menentukan merek, suasana hati, dan skema warna keseluruhan dari situs web.
Redesign Advisor Piala Dunia mendapat ubin gaya sendiri dengan fitur yang sangat dasar. Beberapa ikon, beberapa pilihan warna, bersama dengan beberapa desain tombol. Kesederhanaan adalah nama permainannya.
Jika Anda bisa merasakan seperti apa situs itu sekilas maka Anda melakukannya dengan benar.
Berikut adalah contoh menyenangkan dari ubin gaya ditolak yang digunakan untuk proyek perjalanan. Perancang Brennan Gleason hanya menyediakan sampel kecil ubin, tetapi Anda masih bisa merasakan suasana situs web.
Kata-kata terakhir
Jika Anda menelusuri di web, Anda akan menemukan lebih banyak contoh, kiat, dan sumber daya panduan gaya bangunan dan ubin gaya. Tapi saya harap artikel ini bisa menjadi yang utama pada keduanya dan membuat Anda fasih dalam memahami & menciptakan aset desain ini.
