Cara Membuat Web Desain Guide Style

Dalam pembuatan website akan mendapatkan lebih banyak dan lebih kompleks dan biasanya bukan pekerjaan yang dilakukan satu orang. Hal ini penting untuk memastikan desain yang konsisten dan dioptimalkan untuk memenuhi tujuan bisnis dan menciptakan pengalaman menyenangkan bagi pengguna.

Salah satu cara untuk memastikan tim yang ada di halaman yang sama ketika merancang bagian yang terpisah dari website atau menyimpan desain dari developer adalah untuk menciptakan dokumentasi atau web desain style guide.

Hal ini bermanfaat untuk memiliki style guide untuk menciptakan pengalaman yang berpadu antara halaman yang berbeda.  Juga membantu untuk memastikan bahwa development masa depan atau produksi pihak ketiga akan mengikuti pedoman mereka dan akan dianggap sebagai bagian dari keseluruhan

Sebuah guide style adalah kumpulan dari elemen-elemen pra-desain, grafis dan aturan desainer atau developer harus mengikuti untuk memastikan bahwa potongan situs web yang terpisah akan konsisten dan akan menciptkan pengalaman yang kohesif diakhir.

Mengapa penting?

Hal ini sangat penting ketika beberapa desainer bekerja pada sebuah website ataupun web aplikasi untuk memastikan bahwa mereka tidak menafsirkan terlalul banyak dan tidak mengubah atau menyesuaikan style didasarkan pada preferensi pribadi. Dalam perkembangannya, memiliki unsur-unsur yang didefinisikan dari website memudahkan bagi developer untuk menggunakan elemen-elemen ini. Selain itu dapat membuat lebih mudah karena mereka akan mendapatkan elemen apa yang harus mereka kode dan akan melihat persis bagaimana mereka perlu melihat dari awal.

Dalam rangka untuk membuat developer hidup lebih mudah dalam menjalankan tugas desainer untuk mencakup semua interaksi yang mungkin seperti hover, link, kunjungan dan bagian lain untuk title, link, button dan lain-lain.

Membuat web desain style guide

Mempelajari produk

Pertama, Anda perlu mempelajari produk sehingga Anda memahami apa yang terdapat didalamnya. Kenali cerita dibalik produk, mengamati tim dan mengetahui visi, misi dan nilai-nilai perusahaan. Hal ini penting untuk menggali lebih dalam produk sehingga style guide Anda akan menghasilkan visual dan emosional akan mewakili organisasi.

Jika Anda seorang desainer yang tidak bisa koding, cukup buka Photoshop dan memberikan dokumen Anda judul dan penjelasan singkat dengan dokumen tersebut. Jika Anda dapat koding, lebih baik untuk membuat dokumen html dengan aset pra-kode sehingga mereka dapat dengan mudah digunakan kembali.

Tentukan tipografi

Menurut Oliver Reichenstein, tipografi adalah 95% bagian dari web desain. Anda harus mendapatkan tipografi yang tepat karena merupakan salah satu alat komunikasi yang penting antara pengunjung dan website Anda.

Mengatur hirarki dan mengidentifikasinya. Ada jenis headline : h1,h2, h3, h4, h5 dan h6. Kemudian pada body nya ada copy, bold dan variasi italic. Pikiran tentang copy kustom yang akan digunakan untuk link yang lebih kecil, intro teks dan sebagainya. Menyediakan font family, weight dan color.

Color Palette

Mulailah dengan menetapkan warna utama untuk style guide Anda yang akan mendominasi website Anda, warna dominan harus mencakup tidak lebih dari tiga warna. Dalam beberapa kasus, bagaimanapun, Anda akan warna sekunder dan bahkan tersier untuk menggambarkan user interface Anda, pastikan Anda mendefinisikannya juga. Juga termasuk warna netral seperti putih, abu-abu dan hitam untuk warna produk utama untuk berdiri keluar.

Voice

Suara yang dimaksudkan adalah salinan yang sebenarnya. Anda telah mempelajari produk sebelum memulai style guide dan menemukan bahwa produk  muda dan trendi. Jika tidak ada arah untuk suara salinan, Anda harus mendefinisikan itu. Hal ini dapat menjadi contoh sederhana diberikan menunjukan suara yang harus profesional namun lucu dan ramah.

Ikonografi

Icon telah ada selama ribuan tahun dan lebih tua dari teks dan kata-kata. Mengambil keuntungan dari menggunakan icon dalam proyek Anda karena icon akan memberikan ide instan untuk pengunjung seperti apa yang terjadi dan apa yang akan terjadi selanjutnya. Memilih ikon yang tepat akan memberikan lebih banyak konteks untuk konten dari palet warna, menyalin atau grafis. Bila menggunakan icon, pastikan untuk memikirkan target audiens, agama, sejarah sehingga Anda menghindari kesalahpahaman. Satu hal lagi, berfikir tentang produk dan nilai-nilainya.

 Gambar

Gambar berbicara ribuan kata-kata. Pastikan untuk menyertakan gambar yang mendefinisikan gaya daa arah gambar website harus digunakan. Sekali lagi, berfikir tentang nilai-nilai produk dan misinya agar dapat menggambarkan sebuah produk tersebut.

 Form

Form adalah apa yang membuat situs web atau aplikasi web interaktif dan dinamis sehingga pengguna dapat memasukan data dan kemudian akan dapat memanipulasi dan melakukan aksinya.

Pastikan untuk membangun hirarki dan termasuk umpan balik mungkin dari form aktif, hover, menambahkan peringatan error dan pesan sukses termasuk hal-hal seperti password yang terlalu lemah, pesan email yang tidak valid atau pemberitahuan yang sederhana misalnya “Email terkirim”.

Tombol

Tombol adalah campuran palet warna, form dan suara. Mengandalkan aset ini sebelumnya dibuat untuk membuat tombol konsisten mencari dan fungsional dengan desain yang digambarkan berbeda.

Spasi

Bagaimana spasi dalam style guide?  Hal ini sangat penting untuk menyebutkan jarak tersebut. Hal ini dapat dalam bentuk grid digunakan untuk layout; dapat spacing didefinisikan antara berita utama, tombol, gambar, form dan elemen lainnya.

Memperoleh jarak yang tepat adalah penting karena memberikan lebih ruang pernapasan untuk unsur-unsur dan konsisten membuat pekerjaan Anda terlihat terstruktur dan profesional.

Kesimpulan

Anda harus mempelajari produk Anda untuk membuat guide style. Pastikan untuk mendapatkan bagian yang berbeda dari hak desain dan memastikan bahwa panduan guide style dan mencakup semua skenario yang mungkin saat menyalakan desain menjadi produk pekerjaan.

Comments

comments