Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Branding

Cara Membuat Style Guide untuk Audiens Tertentu

by
Length:MediumLanguages:
This post is part of a series called All About Style Guides.
A Super-Quick Introduction to Style Guides
Using Guidelines to Mind Your Tone

Indonesian (Bahasa Indonesia) translation by Ratnawati (you can also view the original English article)

Style guide bisa menjadi dokumen yang sangat hebat yang bertahan lebih lama dari kebanyakan kultur perusahaan. Apakah Anda sedang membangun merek baru yang segar untuk perusahaan yang belum pernah diketahui, atau Anda membuat ulang merek yang sebelumnya telah dibuat, dengan fokus pada style guide dapat membawa kekompakan pada aset yang dirancang di sekitar merek itu, dan juga tone yang terkait dengan merek.

Pada artikel ini, saya ingin menjelajahi beberapa audiens yang akan Anda buatkan style guidenya, dan beberapa teknik yang dapat Anda gunakan untuk membangun ekosistem branding yang lebih kuat dan lebih berkelanjutan. Artikel ini tidak hanya berlaku untuk web, tapi kami pasti menyertakan beberapa tip khusus untuk style guide berorientasi web.

Pengguna #1. Diri Anda Sendiri

Anda membutuhkan beberapa pengaturan. Anda membutuhkan akuntabilitas. Jika Anda tidak memilikinya, Anda akan gagal membuat merek yang terfokus. Membuat style guide dengan batasan ketat dan struktur dasar untuk desain dan pengembangan akan memberlakukan peraturan untuk Anda, melepaskan Anda dari beban kognitif untuk mencoba membatasi diri Anda tanpa panduan.

Jack White, gitaris untuk White Stripes, terkenal dengan mengatakan:

Katakan pada diri Anda, "Oh, Anda memiliki semua waktu di dunia ini, Anda memiliki semua uang di dunia ini, Anda memiliki semua warna di palet yang Anda inginkan, apapun yang Anda inginkan," maksud saya, itu hanya membunuh kreativitas.

Luangkan waktu untuk mendefinisikan batasan untuk diri Anda sendiri. Jangan lakukan ini secara membabi buta; lakukan melalui penelitian, baik dari catatan langsung Anda dan praktik terbaik Anda yang terdokumentasi/empiris. Berhati-hatilah untuk tidak mengabaikan kreativitas dan intuisi demi penelitian, namun ingatlah penelitian bisa memberdayakan kreativitas dan intuisi.

Batasan yang Seperti Apa?

Pertanyaan ini bukan pertanyaan mudah untuk dijawab, dan sangat tergantung pada keadaan Anda. Nantinya, kita akan membahas beberapa batasan dan panduan yang Anda tambahkan ke style guide untuk orang lain, tapi pertama-tama, Anda perlu memastikan bahwa Anda membuat batasan untuk diri Anda sendiri.

Tujuan dari style guide, pada akhirnya, adalah untuk membuat batasan yang membantu membangun keefektifan inisiatif desain. Demi artikel ini, kita akan mengasumsikan style guide dibangun di seputar merek.

Bersifat membatasi? Tidak, sangat penting. Contoh dari aset merek terkenal MailChimp

Untuk melakukan ini dengan sangat efektif, salah satu langkah pertama yang harus kita ambil adalah dengan mempertimbangkan secara lebih seksama persepsi merek seolah-olah itu adalah manusia. Merek berfungsi sebagai placeholder simbolis untuk merek. Dengan demikian, Anda harus mempertimbangkan untuk menetapkan suara dan tone, dan memfilter semua yang Anda buat melalui suara itu. Ini akan memberi alasan bagi orang untuk mereferensi merek Anda di dalam pikiran mereka. Merek bertindak sebagai juru bicara utama untuk sebuah perusahaan atau organisasi.

Merek bertindak sebagai juru bicara utama untuk sebuah perusahaan atau organisasi.

Apa kaitannya dengan style guide, terutama di web? Tentu semuanya. Dengan mempelajari prinsip-prinsip desain dan prinsip-prinsip psikologis teori komunikasi, Anda dapat memberdayakan persona ini, pendirian dan tone, melalui elemen desain. Misalnya, jika tone Anda bersahabat dengan anak kecil, Anda harus mempertimbangkan warna primer yang cerah dan bukan warna primer biasanya. Anda mungkin mempertimbangkan kata-kata yang lebih pendek daripada kata-kata yang lebih panjang, dan elemen desain mungkin berputar di sekitar citra dan batas jumlah kata yang digunakan dalam elemen tertentu.

Untuk web, ada bagian yang sangat penting yang membantu membentuk tone Anda.

Tips Pro:

  • Bila Anda meminta masukan dari pengguna dalam suatu formulir, ingatlah bahwa formulir adalah percakapan. Jangan letakkan semua energi Anda ke dalam tagline, lalu melupakan tone saat meminta pengguna melakukan sesuatu.
  • Demikian juga, saat memberi tahu pengguna tentang kesalahan, kesuksesan, atau informasi terkait lainnya, pertahankan tone Anda.
Mungkin bukan tone yang akan Anda gunakan
  • Selain menentukan palet warna dan secara visual menunjukkan palet itu, Anda harus mengidentifikasi hubungan simbolis antara warna dan artinya. Misalnya, jika merek Anda mengasosiasikan merah dengan positif, ini harus diidentifikasi, karena itu belum tentu hubungan tersirat atau alami. Memiliki hubungan dan konotasi yang diperkuat dalam style guide Anda akan membantu membuat keputusan desain yang sulit.
Bagian dari branding Skype
  • Jangan hanya memikirkan warna, bentuk, tipe, dan elemen desain statis lainnya; Pertimbangkan animasi sebagai bagian kelas pertama dalam panduan Anda. Misalnya, apakah Anda lebih memilih memudar, slide linier, slide yang mereda, atau pantulan? Merek kurang menarik tanpa animasi, kecuali pada beberapa elemen pilihan. Keputusan ini harus dirundingkan. Sebuah transisi membawa sebuah pesan. Untuk lebih memahami dasar-dasar animasi yang efektif, perhatikan 12 prinsip animasi.
  • Identifikasi semua jenis halaman dasar / template, dan jelaskan fungsinya. Definisi ini harus menunjukkan kerangka gambar dari jenis halaman, serta gaya font.
  • Identifikasi semua modul yang digunakan kembali di seluruh situs, dengan kerangka gambar yang menjelaskan semua aspek desain, termasuk peraturan pilihan warna, batasan ukuran gambar, tanggapan hover, dan aspek interaktif modul lainnya.
  • Identifikasi tidak hanya aspek presentasi, tapi juga semua batasan untuk pengalaman pengguna. Pertimbangkan panduan merek "panduan pengalaman", jika itu akan membantu Anda; Misalnya, menentukan batasan ketat pada kecepatan halaman, atau memerlukan proses pengujian kualitatif untuk setiap desain sebelum dikirimkan.
  • Mengatasi pembatasan dan konten seluler sejak awal dan sering, dan menjadikannya prioritas untuk menentukan perbedaan pendirian dan tone bagi pengguna yang menggunakan seluler versus pengguna yang menggunakan desktop. Sasaran pengguna ini kemungkinan akan bervariasi, dan mengetahui tujuan tersebut dapat menginformasikan pengambilan keputusan perancangan.
  • Mendefinisikan ulang aturan ukuran font pada ukuran layar yang berbeda.
  • Mempersonifikasikan pengguna rata-rata Anda. Pelajari data pengguna Anda, dan tentukan apakah hanya ada satu pengguna khusus, atau jika ada beberapa jenis pengguna. Cari tahu pengguna mana yang paling penting, dan seputar apa bentuk desain Anda yang paling mengkomunikasikan pendirian dan tone Anda kepada pengguna tersebut.
  • Jangan lupakan "sudut gelap" dari situs! Rancanglah tempat yang sulit dijangkau dan sudut yang terlupakan sesuai standar dengan kualitas desain lainnya.
  • Pastikan untuk memiliki set standar yang masuk akal dan dapat digunakan untuk setiap gaya elemen.
  • Saat mengubah gaya elemen yang dibangun, pastikan bahwa aksesibilitas dan kegunaan diimbangi dengan estetika. Style guide Anda harus membatasi Anda untuk mengubah perilaku pengguna dasar yang diharapkan seperti menggulir, hover, atau mengeklik kontrol formulir, tanpa alasan yang jelas dan pasti.

Pengguna #2. Merek Merek

Merek adalah tanda yang mewakili orang, gagasan, praktik, budaya, dan identitas perusahaan. Perusahaan ini, dan orang-orang yang membentuk perusahaan, adalah pengguna kedua untuk style guide; Mereka yang sedang ditandai.

Style guide, pada akhirnya, adalah referensi untuk bagaimana membuat artefak desain yang sesuai dengan merek. Orang-orang yang mewakili merek cenderung menjadi yang paling sering menggunakan style guide. Pembatasan yang Anda berikan untuk mereka yang menggunakannya setiap hari harus ditulis dengan lebih jelas, dengan antisipasi untuk pertanyaan mengenai kepaduan merek. Sebagian besar perusahaan membutuhkan style guide yang bekerja untuk dua jenis orang: paham-desain dan desain-agnostik.

Individu yang Mengetahui Desain

Penyerahan style guide harus melibatkan pelatihan individu yang mengetahui desain mengenai spesifikasi style guide, dan membuat revisi berdasarkan pertanyaan yang diajukan oleh perorangan.

Secara umum, bahasa desain dapat digunakan dengan orang yang mengetahui desain. Style guide harus memberdayakan orang-orang yang tahu akan desain untuk mengeksplorasi dan memperluas pendirian dan tone merek selagi ia berkembang; Merek harus mempertahankan plastisitas agar mereka bisa berubah dan berkembang seiring perubahan pasar.

Individu Desain-Agnostik

Penyerahan style guide harus melibatkan pelatihan individu desain-agnostik tentang pengetahuan merek dan pentingnya berpegang teguh pada panduan. Jika sebagian besar aset yang dikembangkan oleh staf tertentu dikembangkan oleh individu desain-agnostik, batasan dan persyaratan yang lebih ketat harus ditulis ke dalam style guide.

Misalnya, semua contoh penempatan logo, penempatan jenis, frasa merek utama atau taglines, warna, dan pengujian kegunaan / persyaratan harus diidentifikasi secara lengkap.

Adobe membuat batasan penggunaan logo mereka dengan sangat jelas untuk semua (PDF)

Tips Pro:

  • Gunakan contoh yang buruk, baik, bagus, dan terbaik untuk kejelasan maksimal.
  • Jangan membingungkan Desain Agnostik dengan anti desain; umumnya, orang akan bisa mengikuti arahan, dan dengan senang hati akan melakukannya. Jangan membuat panduan terdengar seperti aturan, tapi justru definisikan sebagai alat untuk pemberdayaan.
Bagian dari panduan merek Beano - membuktikan bahwa pembatasan juga bisa menyenangkan (PDF)
  • Eksplisit lebih baik daripada implisit; gunakan penjelasan yang paling jelas, termasuk tangkapan layar jika perlu, untuk menentukan style guide merek.
  • Daftar periksa bisa menjadi hal yang hebat, tapi hanya jika tidak terlalu teknis, luar biasa, atau menuntut.
  • Jangan hanya memberi aturan: berikan alasan. Berikan bahasa yang jelas yang tidak menggunakan terminologi perancangan berat yang menjelaskan panduan Anda.
  • Sediakan warna spot yang sangat jelas dari semua warna merek-sama dan sebangun, beserta kode hex dan informasi pengkodean warna yang sesuai seperti pengenal Pantone.
Contoh dari panduan warna More4 (PDF)
  • Untuk style guide masukan web / HTML, berikan serangkaian kode kerja agar pengguna dapat menyalin dan menempelnya. Identifikasi bagian tertentu dengan komentar HTML.
  • Buatlah dengan jelas semua masalah kualitas gambar; berikan contoh fotografi bagus bagi pengguna, dan pertimbangkan untuk mengidentifikasi ciri-ciri dasar foto yang bagus.
  • Jangan lupa untuk menjelaskan tone pesan kepada pengguna, begitu pula pentingnya pengecekan tata bahasa. Tone harus dipastikan oleh dua orang atau lebih, dan setidaknya satu orang lainnya harus mengoreksi semua salinan dalam desain yang diberikan.

Pengguna #3.  Umum (Pilihan)

Jika merek Anda akan digunakan oleh umum, Anda mungkin perlu memberikan style guide yang sesuai dengan kebutuhan mereka. Secara khusus, style guide untuk umum sering digunakan untuk merek yang berorientasi pada pelayanan. Contohnya adalah Twitter; saat Anda menambahkan logo Twitter atau umpan Twitter ke situs Anda, Twitter peduli tentang tampilannya.

Diambil dari aset merek Twitter

Ini biasanya paling bisa diterapkan saat berhadapan dengan penempatan logo. Beberapa aturan dasar untuk penempatan logo, khususnya:

  • Menyediakan paket logo yang dapat didownload dalam format yang populer, dengan semua versi (ukuran dan variasi) yang berlaku
  • Tentukan jarak; gunakan aturan jempol setidaknya setinggi huruf tertinggi dalam logotype sebagai lapisan di sekitar logo itu sendiri.
  • Tentukan jarak; gunakan aturan jempol setidaknya setinggi huruf tertinggi dalam logotype sebagai lapisan di sekitar logo itu sendiri.
  • Berikan kejelasan seputar warna latar belakang yang mungkin digunakan bersamaan dengan logo, dengan penggunaan kasus dan contoh yang eksplisit.

Style guide Web: Dimana Identitas Memenuhi Interaktivitas

Mungkin yang paling membingungkan untuk memutuskan antara style guide dan pengalaman web adalah kesenjangan antara interaksi dan merek itu sendiri. Sering disebut "feel", kesenjangan ini adalah alasan mengapa sangat penting untuk membentuk dasar dari interaksi. Jarang sekali panduan merek secara memadai menangkap aspek desain interaksi yang didorong oleh identitas. Namun, ini harus menjadi tujuan kita saat menulis style guide! Pertimbangkan untuk menggunakan konsep dan tip berikut untuk style guide Anda karena berkaitan dengan interaktivitas:

  • Tinggikan definisi lapisan interaktif untuk menjadi bagian kelas pertama dalam panduan desain, sama pentingnya dengan warna dan jenis.
  • Tulis "cerita pengguna" untuk membantu menentukan semua jalur dan tindakan pengguna. Daftar cerita pengguna akan membantu menginformasikan interaksi lintas tingkat tinggi, menjaga agar tujuan yang dapat ditindaklanjuti sesuai dengan merek.
  • Jelaskan animasi dengan dua jenis bahasa: pertama, deskriptif, bahasa seragam yang mencoba mendefinisikan secara objektif apa yang dilakukan animasi. Kedua, dengan bahasa subyektif, untuk menggambarkan apa yang seharusnya "dirasakan" dari animasi. Perancang yang baik tahu perbedaan dalam merasakan 2s dan 3s untuk animasi, namun mungkin tidak mengetahui deskripsi matematis perbedaan itu.
  • Bila deskripsi gagal, berikan bentuk dasar interaktif tentang interaksi yang ingin Anda capai. Fokus pada hal-hal kecil dari interaksi; Apa yang terjadi dalam beberapa detik? Apa yang terjadi dalam kasus tak terduga?

Kesimpulan

Panduan untuk membuat style guide ini jauh dari sempurna; Tentu ada ribuan pengetahuan untuk dibagikan tentang style guide. Hal apa yang menurut Anda sangat penting yang telah Anda pelajari? Berbagi dengan kami di bawah ini!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.