Cara Membuat Panduan Gaya Desain Web – Membangun situs web menjadi semakin kompleks dan biasanya bukan pekerjaan satu orang. Penting untuk dapat memastikan bahwa sebuah desain yang konsisten dan juga dioptimalkan untuk dapat memenuhi beberapa tujuan bisnis dan juga menciptakan beberapa pengalaman yang sangat menyenangkan bagi para pengguna. Salah satu cara untuk memastikan tim memiliki pemahaman yang sama saat mendesain bagian terpisah dari situs web atau saat menyimpan gambar developer adalah dengan membuat dokumen desain atau panduan gaya web.
Cara Membuat Panduan Gaya Desain Web
hns-info – Ada baiknya memiliki panduan gaya untuk menciptakan pengalaman yang konsisten di antara situs yang berbeda. Ini juga membantu memastikan bahwa pengembangan atau produksi pihak ketiga di masa mendatang mengikuti pedoman merek dan dilihat sebagai bagian dari keseluruhan merek. Luke Clum tahun lalu menggunakan panduan gaya sebagai langkah pertama Anda dalam desain web, dan saya ingin membahas lebih dalam bagaimana Anda dapat membuat panduan gaya desain web yang bisa diterapkan untuk proyek Anda.
Baca Juga : Segala Hal Dasar Yang Wajib Diketahui Tentang Website
Jika Anda memiliki situs web yang perlu sering diperbarui, atau yang melibatkan banyak orang untuk memelihara atau memperbaruinya, ada baiknya Anda memiliki panduan gaya desain web. Ini membantu memastikan bahwa setiap orang yang terlibat dengan situs web Anda berada di halaman yang sama dan memahami seperti apa semuanya secara konsisten. Tapi apa sebenarnya panduan gaya desain web itu? Apa isinya? Dan bagaimana Anda bisa membuatnya sendiri? Inilah pertanyaan-pertanyaan yang ingin kami jawab di sini.
Apa itu Panduan Gaya?
Panduan gaya adalah kumpulan elemen, grafik, dan aturan yang telah dirancang sebelumnya yang harus diikuti oleh desainer atau pengembang untuk memastikan bahwa setiap bagian dari situs web konsisten dan pada akhirnya menciptakan pengalaman yang kohesif.
Mengapa ini penting?
Ketika banyak desainer bekerja di situs atau situs web besar, sangat penting untuk memastikan bahwa mereka tidak menafsirkan secara berlebihan dan mengubah atau menyesuaikan gaya sesuai dengan preferensi pribadi. Menentukan elemen situs web selama pengembangan memudahkan pengembang untuk menggunakan kembali elemen tersebut.
Selain itu, ini dapat mempermudah karena Anda dapat membuat kode elemen dan melihat dengan tepat bagaimana tampilannya dari awal. Untuk membuat hidup lebih mudah bagi pengembang, merupakan tanggung jawab perancang untuk menyertakan semua kemungkinan interaksi seperti penunjuk, klik, kunjungan, dan status tombol, tajuk, tautan, dll.
Membuat Panduan Gaya Desain Web
1. Pelajari Merek
Pertama, Anda perlu meneliti merek untuk memahami apa artinya. Pelajari sejarah merek, amati tim dan temukan visi, misi, dan nilai-nilai perusahaan. Penting untuk menggali lebih dalam merek sehingga panduan gaya yang Anda buat mewakili perusahaan secara visual dan emosional.
Jika Anda seorang desainer yang tidak tahu cara membuat kode, buka Photoshop dan berikan judul dan deskripsi singkat tentang dokumen itu dan untuk apa dokumen itu. Jika Anda tahu cara membuat kode, lebih baik membuat dokumen HTML dengan konten yang sudah dikodekan sebelumnya sehingga dapat digunakan kembali dengan mudah.
2. Tentukan tipografi
Menurut Oliver Reichenstein, tipografi menyumbang 95 persen dari desain web. Anda perlu mendapatkan tipografi dengan benar karena ini adalah salah satu alat komunikasi terpenting antara pengunjung dan situs web Anda. Bangun situs web dengan pembuat web.
Dengan aplikasi Startup dan aplikasi Slides, Anda dapat membuat situs web tanpa batas dengan editor situs web online yang dilengkapi dengan elemen, templat, dan tema bawaan dan berkode. Menetapkan dan mengakui hierarki. Ada jenis tangkapan: h1, h2, h3, h4, h5 dan h6. Kemudian teks utama, variasi bold dan italic. Pikirkan tentang teks khusus yang digunakan untuk tautan yang lebih kecil, teks pengantar, dll. Tentukan font, berat dan warna.
3. Palet warna
Sungguh menakjubkan bagaimana orang memandang warna dan mengasosiasikan corak dengan merek terkenal. Pikirkan Coca-Cola, Anda melihatnya merah sekarang. Mulailah dengan menetapkan panduan gaya Anda untuk warna primer yang akan mendominasi situs web Anda. Warna dominan harus mengandung tidak lebih dari tiga warna.
Namun, dalam beberapa kasus Anda memerlukan warna sekunder dan bahkan tersier untuk mengilustrasikan UI Anda. Pastikan untuk memasukkan ini juga. Tambahkan juga warna-warna netral seperti putih, abu-abu, dan hitam untuk menonjolkan warna utama merek.
4. Suara
Audio yang saya maksud adalah salinan asli dari aslinya. Anda meneliti merek tersebut sebelum memulai panduan gaya dan menemukan bahwa merek tersebut berjiwa muda dan trendi. Jika tidak ada instruksi untuk nada salinan, maka Anda harus menentukannya.
Ini bisa menjadi contoh sederhana yang menunjukkan bahwa suaranya harus profesional tetapi menyenangkan dan mengundang. Alih-alih mengatakan, “Anda mendapatkan kesalahan 404”, Anda dapat mengatakan, “Astaga, Anda merusak web. 404 error.” Jika suaranya lebih berorientasi bisnis, Anda tidak akan melakukannya. Kehebatan ada dalam hal-hal kecil.
5. Ikonografi
Ikon telah ada selama ribuan tahun dan mendahului teks dan kata. Manfaatkan penggunaan ikon dalam proyek Anda, karena memberi pengunjung gambaran langsung tentang apa yang terjadi dan apa saja yang akan dapat terjadi pada selanjutnya. Memilih sebuah ikon yang sangat tepat kemudian memberi sebuah konten Anda yang lebih banyak sebagai konteks daripada sebuah palet warna, teks, atau grafik.
Saat menggunakan simbol, pastikan untuk mengingat audiens target, agama, dan sejarah untuk menghindari kesalahpahaman dan kesalahpahaman. Satu hal lagi yang perlu disebutkan: ingat merek dan nilainya, sehingga Anda tidak menggunakan ikon yang digambar tangan pada halaman bank yang besar.
6. Keterangan
Gambar berbicara seribu kata. Pastikan untuk menyertakan gambar yang menentukan gaya dan arah gambar yang digunakan di situs. Pikirkan kembali nilai dan misi merek. Misalnya, sedekah air menggunakan gambar yang mencolok dengan emosi yang kuat, tujuan yang baik, dan menarik emosi orang sehingga mereka cukup beruntung untuk menerima kebutuhan pokok seperti air, makanan, listrik, dan pendidikan.
7. Formulir
Formulir membuat situs web atau situs web Anda interaktif dan dinamis, memungkinkan pengguna untuk memasukkan informasi yang nantinya dapat Anda edit dan kerjakan. Pastikan Anda menentukan hierarki dan menyertakan semua reaksi dari formulir aktif, penunjuk, tambahkan kesalahan, peringatan, dan pesan sukses, termasuk hal-hal seperti sandi lemah, email tidak valid, atau pesan sukses sederhana seperti “email terkirim”.
8. Tombol
Tombol-tombolnya adalah campuran palet warna, bentuk, dan suara. Andalkan sumber daya siap pakai ini untuk membuat tombol yang konsisten dan fungsional dengan desain berbeda.
9. Interval
Bagaimana bisa ada spasi di panduan gaya? Sangat penting untuk menyebutkan intervalnya. Itu bisa dalam bentuk kisi-kisi yang digunakan untuk pengaturan; itu dapat didefinisikan antara header, tombol, gambar, bentuk, dan elemen lainnya. Memilih media yang tepat adalah penting karena memberikan elemen lebih banyak ruang untuk bernafas, dan penggunaan yang konsisten akan membuat pekerjaan Anda tetap terstruktur dan profesional.
10. Lakukan dan jangan lakukan
Terakhir, tetapi tidak kalah penting: Jadikan bagian ANJURAN dan JANGAN terlihat seperti FAQ yang menyoroti kesalahan yang paling umum, dan sebagai gantinya berikan contoh bagaimana hal-hal seharusnya terlihat dan bekerja.