Panduan ini diupdate kali terakhir pada: 22/10/2020
Panduan ini mengunakan Bahasa Malaysia dan Bahasa inggeris bercampur-campur.
Pengenalan
Apa itu design system?.
Maksud mudah bagi design system adalah "set of specific design guidelines for a ecosystems ". Ianya bukan sebarang guidelines, tapi perlu mengikut brand dan identity sesebuah oragnisasi atau product. Mungkin tafsiran saya ini kurang tepat. Ini kerana design system bukan sahaja untuk aplikasi tapi lebih luas. Dan membawa banyak makna. Untuk lebih memahami Design system. Boleh lihat link dibawah:
Kita perlukan consistency untuk semua bahagian di dalam Jenama Movahost. Tidak kira untuk material apa sekalipun, samada untuk marketing, digital design, mahupun printing dan pengurusan. Jika semua design konsep,color,etc sama, ini memboleh pengguna lebih mudah mengingati jenama Movahost tidak kira dimana mereka lihat dan dengar. Malah, designer dan developer dapat berkerja dengan lebih cepat,cekap tanpa membuang masa kepada benda yang berulang-ulang. Seperti kata pepatah orang tua, "Mudahkan urusan orang, Tuhan mudahkan urusan kita".
Macam mana nak guna?😵
Panduan ini terbahagi kepada beberapa bahagian. Anda boleh click menu disebelah kiri untuk terus ke bahagian yang diniatkan.
Orang lain boleh guna ke?
Boleh. Tidak semestinya terhad kepada Movahost sahaja. Panduan ini mengunakan 8pt grid system untuk spacing dan 4pt untuk text. Tapi, tidak semestinya anda ikut mentah-mentah panduan ini. Jika keadaan memerlukan untuk melakukan adjustment, silakan ubah. Panduan ini bukan kitab suci dan tidak bersifat mandatori dan hanya sebagai guide untuk design yang lebih baik. Sharing is caring 🥰
Brand
Brand movahost
Tekan disini untuk download AI file
✔️Sila gunakan contrast yang tinggi jika perlu
Untuk background yang gelap atau cerah. Sila pastikan logo Movahost clear
❌Jangan gunakan logo Movahost ditempat yang kurang contrast
Sila pastikan logo clear dan kobinasi yang contrast untuk dilihat pengguna
✔️ Jaga jarak logo dan tulisan
Sila pastikan tulisan dan logo berjarak 16pt dan 8pt jika saiz kecil. Tidak kira aligment logo dari atas atau tepi.
❌ Jangan main letak.
Sila pastikan logo berada ditempat yang sepatutnya.
Spacing
Spacing / jarak yang digunakan dalam design movahost
Seperti diatas, Spacing yang disyorkan adalah gandaan 8 (lapan). Juga dikenali sebagai 8pt. Spacing 8 ini digunakan untuk memisahkan element diantara satu sama lain.
4pt juga boleh digunakan. Seperti material design oleh Google yang mengesyorkan gandaan 4pt unutk aplikasi android. untuk web, disyorkan 8pt. Tetapi sekali lagi, ini hanyalah panduan semata-mata.
Jika element kecil yang berada di dalam kumpulan sama disyorkan jarak yang kecil seperti 4,8,16,24.
Jika kumpulan yang berbeza disyorkan jarak yang besar seperti 24,32.40,48,56, dan seterusnya.
Typography
Saiz tulisan
Saiz tulisan juga syorkan menggunakan gandaan 8. Bermula dari 16pt dan ke atas. Akan tetapi, jarak diantara tulisan disyorkan menggunakan 4pt
Line height
Sila gunakan formula (saiz font + 8 ) untuk line height atau 120%, 110%, 130%.
Gunakan web standard
Gunakan H1 sehingga H6 sebagai rujukan dalam saiz gandaan 8. Body text disyorkan sekurang-kurangnya bersize 16pt untuk mengelakkan orang yang mempunyai masalah mata (visual impairment) tidak dapat membaca. Saiz pt boleh ditukarkan ke em atau rem. untuk website yang responsive.
Color
Warna utama
Digunakan pada element - element penting untuk memberitahu user brand movahost secara separa sedar.
#0F1C46
#14296B
#0F5BFD
#597DFE
#626C86
Warna call to action dan secondary
Digunakan untuk button - button untuk menarik perhatian dan juga text secondary
#16FFB8
#F33367
#FDE50F
#8499C5
#E5EDFC
#D3D6E2
We operate from Monday to Friday. (09:30am - 05:30pm). Closed on weekends and holidays.