Membuat Guideline dan Assets Website Justika Probono
Apa itu Guideline dan Assets?
Guideline dan Assets? Dua kata yang tentunya cukup familiar dalam dunia desain. Guideline merupakan panduan untuk mendesain suatu produk desain, contohnya adalah panduan warna (Colour Scheme) dan Panduan Ukuran. Assets merupakan komponen yang dapat digunakan pada proses desain, hal ini meliputi gambar, desain vector, button, dll.
Sebagai Hipster dalam proyek pengembangan perangkat lunak Justika Probono, tentunya saya juga membuat Guideline dan juga Assets desain. Saya akan menceritakan apa saja yang saya kerjakan terkait Guideline dan Assets.
Membuat Color Scheme
Bayangkan anda membuka suatu website dengan style warna yang sangat berbeda pada tiap halamannya, aneh bukan? Maka dari itu perlu adanya guideline untuk menciptakan kesepakatan desain terkait warna. Instrumen yang umum digunakan untuk membuat guideline warna adalah colour scheme/colour pallete. Ini adalah colour scheme pada website Justika Probono :
Warna-warna pada colour scheme tidak mudah karena warna harus saling compliment satu sama lain. Namun, dalam pembuatan colour scheme ini tidak terlalu sulit karena product owner menginginkan style produk mirip dengan Justika.com. Karena itu dalam pembuatan colour scheme saya sedikit banyak terinspirasi dari website tersebut.
Asset Button
Button merupakan komponen yang hampir selalu ada pada semua halaman justika probono. Maka dari itu perlu dibuat asset untuk memudahkan pembuatan button yang seragam pada tiap halaman. Terdapat dua jenis button yang saya buat, yaitu button berwarna oranye dan biru. Masing-masing button pun memiliki fungsi yang berbeda. Selain itu saya juga membuat desain pada saat tombol ditekan
Asset Logo Justika Probono
Logo merupakan wajah dari suatu produk. Maka dari itu komponen ini merupakan komponen yang sangat penting dalam produk perangkat lunak. Komponen ini tertera pada bagian header justika sehingga komponen tersebut selalu ada pada setiap halaman website.
Logo justika mengadopsi dari logo justika.com namun tetap dilakukan beberapa modifikasi.
Asset Infografis Landing Page
Landing page merupakan halaman yang memuat semua informasi tetnang justika probono secara singkat. Maka dari itu perlu penyampaian visual yang baik. Dapat dibilang halaman ini terdapat banyak bagian yang artsy maka dari itu diperlukan adanya pembuata assets
Menggunakan infografis membuat halaman menjadi lebih informatif. Infografis dibuat dalam bentuk asset gambar agar mempermudah pengimplementasianya pada website.
Next Level of Guidelines
Sebagian besar guidelines yang saya buat saya letakkan dalam projek pada aplikai figma. Developer yang ingin mengimplementasikan hasil desain sesuau guideline dapat melihat guide pada aplikasi figma. Namun, terdapat cara yang lebih memudahkan para developer untuk mengimplementasikan desain yaitu dengan cara meletakkan guideline sebagai kode dalam theme.js
Kode di atas menggambarkan guideline warna dan ukuran dalam bentuk kode sehingga developer dapat dengan mudah mengambil warna ataupun ukuran tanpa harus mencari kode warna yang dibutuhkan,
