Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Ukuran Font dan Jarak Elemen pada Homepage Yang Bisa Kalian Jadikan Referensi!

- Advertisement -
- Advertisement -
- Advertisement -

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 🙂

sumber : medium.com – dwinawan

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles