fbpx

Design system

Alpha v00.1

Hello

Design system untuk Movahost.

Panduan ini dibangunkan oleh team yang awesome fabulous di Tombark Technology Sdn. Bhd.

Design system ini akan dikemaskini mengikut keperluan masa hadapan dan perancangan. Maklum balas amat dihargai.

menu.

Pengenalan

Brand

Spacing

Typography

Color

Button

Component

Repeated elements

Banner

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:

Kenapa design system untuk Movahost?

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

© 2023 movahost.my. All Rights Reserved. Tombark Techology Sdn Bhd

chevron-downcross-circle