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.
Mari kita bahas satu persatu… ?
1. Title
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)
2. Deskripsi
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)
3. Rating
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)
4. Informasi Mentor
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)
5. Informasi Harga
Informasi harga menggunakan huruf tebal, berukuran besar dan menggunakan warna yang mencolok dan berbeda dari yang lain untuk menarik perhatian user.
Label “Price” diatas harga hanya untuk menerangkan bahwa ini adalah informasi harga, maka dari itu menggunakan huruf berukuran lebih kecil.
Spesifikasi Info Harga
- Font : Inter Extra Bold
- Ukuran Font : 45px
- Jarak antar huruf (Character) : 0px
- Jarak antar baris : 30px
- Warna: #FE386B (Merah Muda)
Spesifikasi Label “Price”
- Font : Inter Medium
- Ukuran Font : 20px
- Jarak antar huruf (Character) : 0,5px
- Jarak antar baris : 30px
- Warna: #FFFFFF (Putih)
6. Jarak antar informasi
- 50px
- 30px
- 40px
- 50px
7. Tombol
Favorit saya adalah tombol yang lega dan tidak terlalu mepet antara teks di dalam tombol dan tombol nya itu sendiri.
Spesifikasi Tombol
- Dimensi Tombol : 235px X 90px
- Teks di dalam tombol : Inter Extra Bold — 15px
Semoga bermanfaat 🙂
sumber : medium.com – dwinawan
