Elemen Penting untuk Desain Website dan App

  • Whatsapp

Desain web adalah tampilan web yang pertama kali kita lihat saat membuka suatu web, maka dari itu dalam sebuah web hal yang sangat penting mengenai desain webnya. Maka sebelum membuat web tentu kita harus menentukan desain web yang akan kita buat, namun ada elemen di dalam web yang perlu anda pahami. Berikut 10 elemen penting desain web yang perlu dipahami:

Elemen Penting Desain Web

Baca juga

 

1. Layout

Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan keseimbangan layout secara keseluruhan. Susunan paling umum adalah atas-bawah-kiri-kanan.
Tip:
Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.
Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang penting.

2. White Space

White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda yang belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya. Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda.

Fungsi ruang kosong :
Berfungsi sebagai separator untuk setiap elemen desain.
Memberi fokus terhadap elemen yang ingin ditonjolkan.
Memberi kesan desain yang lebih clean dan relaxing.
Menciptakan layout yang lebih seimbang dan harmonis.
Meningkatkan keterbacaan teks.

Tip:
Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen lainnya.
White space juga termasuk jarak antarbaris dan antarparagraf dalam body text.

 

3. Jenis Huruf

Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya.

Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

  • Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya ada 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif.
  • Karakter. Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai dengan karakter situs web atau produk Anda.
  • Legibility. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah.
  • Readibility. Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama.
  • Warna. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda, Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna paling baik untuk body text adalah hitam atau gradasi abu-abu tua.
  • Ukuran. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling pas untuk body text biasanya antara 10-12px.

 

4. Pilihan Warna

Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri.

Tip:

Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya.
Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).

5. Navigasi

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs Anda.

Tip:

Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web Anda.
Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris navigasi.

 

6. Tombol “Search”

Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan, sedangkan tombol search adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

 

7. Laman “About Me/Us”

Jika Anda bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis yang sama sekali baru, atau bukan pemilik situs web yang sangat terkenal, laman “About Me/Us” memiliki beberapa fungsi:

Memperkenalkan diri/perusahaan Anda.
Memperkenalkan jasa/produk yang Anda miliki.
Menjelaskan secara spesifik bidang yang Anda geluti.

 

8. Laman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif.  Karena terus terang, seseorang yang sulit dihubungi sering kali membuat frustrasi. Anda bisa meletakkan laman kontak di beberapa tempat: navigasi, header, footer.

Apa saja yang harus ada di laman kontak:

Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel.
Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.
Form (opsional).

 

9. Footer yang Informatif

Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial. Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi lain yang memudahkan pembaca.

 

10. Kualitas Image

Walau bagaimanapun, kita harus tetap mempertimbangkan aspek-aspek visual untuk memikat pembaca. Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten. Untuk uk min 150 ppi

 

Dari 10 elemen di atas perlu kita pahami elemen yang berpengaruh untuk suatu web.

 app recipe

Editor’s Picks