#BedahDesain — Ukuran Font dan Jarak Elemen pada design Homepage

Dwinawan
Dwinawan
Dec 9, 2019 · 4 min read

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

  1. 50px
  2. 30px
  3. 40px
  4. 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 :)

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_

Insight

Insight

UI, UX, Bisnis Design

More From Medium

More on Bedah Desain Case Study from Insight

More on Bedah Desain Case Study from Insight

Warna warna dasar yang sering saya gunakan dalam mendesain UI

Dec 16, 2019 · 2 min read

581

More on Bedah Desain Case Study from Insight

More on Bedah Desain Case Study from Insight

#BedahDesain — Baguskah Pop-up di dalam pop-up?

Nov 27, 2019 · 3 min read

403

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade