Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

#BedahDesain?—?Ukuran Font dan Jarak Elemen pada design Homepage

10 Desember 2019 | Dwinawan via medium
post image

Artikel ini akan membahas tentang ukuran ukuran yang sering saya gunakan saat membuat design homepage, meliputi: Ukuran font, Jarak antar elemen, Penggunaan warna dan beberapa hal lain nya. Yuk, Langsung saja…. ???? Berikut adalah design homepage yang akan kita bedah Mari kita bahas satu persatu. Menggunakan font dengan ukuran besar dan tebal untuk menarik perhatian user agar fokus membaca title atau judul nya ketika membuka halaman ini. Spesifikasi Font : Inter Extra Bold Ukuran Font : 80px Jarak antar huruf (Character) : -0,2px Jarak antar baris : 85px Warna: #FFFFFF (Putih) Menggunakan font ukuran kecil karena merupakan secondary information atau informasi pendukung. Warna yang digunakan agak abu abu, tidak seputih warna judul, hal ini untuk menciptakan kontras, agar perhatian user tidak tertuju ke deskripsi saat membuka halaman ini. Spesifikasi Font : Inter Regular Ukuran Font : 16px Jarak antar huruf (Character) : 0,5px Jarak antar baris : 30px Warna: #CCCCCC (Abu Abu) Menggunakan font ukuran kecil karena merupakan secondary information atau informasi pendukung. Menggunakan icon bintang di depan nya untuk memperjelas bahwa itu adalah info rating. Menggunakan 2 warna, putih dan abu abu. Warna putih untuk menginformasikan nilai rating nya, warna abu abu untuk menginformasikan jumlah user yang memberikan rating. Kenapa warna nya harus dibedakan? agar mempermudah user untuk mengetahui nilai rating nya. User akan fokus terhadap warna yang lebih terang terlebih dahulu. Spesifikasi Nilai Rating Font : Inter Semi Bold Ukuran Font : 14px Jarak antar huruf (Character) : 0,5px Jarak antar baris : 30px Warna: #FFFFFF (Putih) Spesifikasi Jumlah yang memberi rating Font : Inter Regular Ukuran Font : 14px Jarak antar huruf (Character) : 0,5px Jarak antar baris : 30px Warna: #999999 (Abu Abu) Nama mentor menggunakan warna putih, agar informasi mentor yang pertama kali dibaca adalah nama mentor. Setelah itu dibawah nama mentor terdapat info pekerjaan mentor. Menggunakan warna abu abu agar user bisa fokus membaca satu persatu informasi. Jika menggunakan warna putih semua, user akan kesulitan untuk membaca informasi nya satu persatu. Membedakan warna bisa menjadi cara lain untuk membuat hirarki. Spesifikasi Nama Mentor Font : Inter Semi Bold Ukuran Font : 16px Jarak antar huruf (Character) : 0,5px Jarak antar baris : 28px Warna: #FFFFFF (Putih) Spesifikasi Pekerjaan Mentor Font : Inter Regular Ukuran Font : 13px Jarak antar huruf (Character) : 0,3px Jarak antar baris : 23px Warna: #999999 (Abu Abu) Informasi harga menggunakan huruf tebal, berukuran besar dan menggunakan warna yang mencolok…. IndonesiaIT 2019, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.