Elemen Penting Yang Terdapat Pada Desain Web

Elemen Penting Yang Terdapat Pada Desain Web – Disadari atau tidak, desain web adalah perjumpaan pertama antara pembaca dengan kita. Semakin baik kesan yang didapat, maka konten  kita akan memiliki kesempatan yang lebih tinggi untuk sampai kepada pembaca. Begitu juga dengan produk atau jasa yang sedang kita jual. Bukan itu saja, tampilan situs web juga mempunyai pengaruh terhadap SEO. Semakin SEO friendly tampilan situs web kita, maka akan semakin tinggilah peringkat yang akan kita dapat.

Anda tak perlu jago untuk mendesain web atau jago koding untuk membuat tampilan web yang memikat sekaligus ramah SEO. situs slot

Elemen Penting Desain Web

Desain web, sama saja seperti fesyen, selalu berubah mengikuti perkembangan zaman. Ada juga trend yang sama sekali baru, ada pula yang merupakan pengulangan dari trend beberapa tahun ke belakang. Tetapi, elemen-elemen esensial di dalamnya tidak banyak berubah. situs slot

Elemen desain web bukan hanya agar web menjadi elok dipandang, akan tetapi juga agar memudahkan pembaca dan Google Crawler ketika menjelajahi web kita. Dengan kata lain, meningkatkan user experience (UX).

Elemen #1: Layout

Layout dari 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. www.americannamedaycalendar.com

Elemen Penting Desain Web

Tip:

– Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.

– Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang penting.

– Sebagian besar orang terbiasa untuk membaca dari kiri ke kanan, maka letakkan main post di sebelah kiri sedangkan sidebar di sebelah kanan.

– Perhatikan pula keseimbangan susunan elemen desain.

Elemen #2: White Space

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

Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014:82):

– Berfungsi sebagai separator untuk setiap elemen desain.

– Memberi fokus terhadap elemen yang ingin ditonjolkan.

– Memberi kesan desain yang lebih clean dan juga relaxing.

– Menciptakan layout yang lebih seimbang dan juga harmonis.

– Meningkatkan keterbacaan teks.

Tip:

– Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen yang lainnya.

– White space juga termasuk jarak antarbaris dan juga antarparagraf dalam body text.

Elemen #3: Jenis Huruf

Prinsip dalam memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di layar, mata manusia lebih cepat lelah daripada ketika membaca di atas kertas.

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

– Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya terdapat 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif.

1. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan pada buku, surat kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR), Garamond, Georgia, Cambria.

2. Sans Serif ialah huruf yang paling cocok untuk digunakan sebab mempunyai tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.

3. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll), memberikan kesan klasik, santai, dan kasual. Karena karakternya yang seperti huruf tegak bersambung (well, ini memang huruf tegak bersambung), jenis huruf script lebih sulit dibaca di layar. Anda dapat menggunakan jenis huruf ini untuk judul post, tapi hindari menggunakannya untuk body text.

4. Dekoratif, sama seperti script, huruf dekoratif juga mempunyai banyak sekali variasi dari mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu. Huruf dekoratif tak terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text. Tapi, Anda bisa menggunakan huruf jenis ini untuk tulisan di image asalkan hanya untuk satu atau dua kata, bukan untuk kalimat panjang.

Elemen Penting Desain Web 1

– Karakter. Huruf mempunyai 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 (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit diolah oleh pembaca, misalnya jenis-jenis huruf script atau dekoratif. Perhatikan contoh huruf di bawah, keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang berbeda. Kata pertama menggunakan tittle case atau kombinasi huruf besar dan kecil, sedangkan yang kedua memakai all caps atau kapital.

– 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. Readibility juga mempunyai hubungan dengan jarak antarhuruf dan jarak antarkata.

– Warna. Apa pun warna favorit Anda, entah itu warna merah, ungu, biru, atau merah muda, Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna yang paling baik untuk body text ialah hitam atau gradasi abu-abu tua. Warna lain yang ada di dalam body text hanya dipergunakan untuk link atau subjudul. Judul? Boleh, Anda boleh memakai huruf berwarna-warni untuk judul atau judul sidebar, tapi pastikan warna yang Anda gunakan konsisten.

– Ukuran. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran yang paling pas untuk body text biasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen yang lainnya dapat Anda sesuaikan dengan bidang layout.

Tip:

– Jenis huruf sans serif paling baik untuk digunakan di layar.

– Gunakan Maksimal 2 jenis huruf di dalam satu situs web. Anda dapat mengkombinasikan antara huruf serif dengan sans serif atau script dengan sans serif. Contohnya, Georgia untuk judul dan Helvetica untuk body text.

– Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Contohnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px untuk footer.

– Anda dapat memilih kombinasi huruf yang paling cocok di Google Fonts.

Elemen #4: Pilihan Warna

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

Warna juga sangat memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam bawah sadar. Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya kenapa pemilihan warna merupakan salah satu elemen penting dari desain sebuah web.

Tip:

– Gunakan warna muda untuk latar dan juga warna tua untuk teks, bukan sebaliknya. Contohnyanya, latar putih atau abu-abu muda untuk latar dan hitam atau abu-abu tua untuk huruf body text.

– Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).

– Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna yang ada di dunia ini, Anda bisa memilih satu di antaranya.

– Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda dapat menggunakan warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

Elemen #5: Navigasi

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

Tip:

– Letakkan navigasi pada 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.

– Gunakan juga menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.

– Anda dapat menggunakan navigasi linear atau navigasi hamburger.