INTERAKSI MANUSIA DAN KOMPUTER · Jenis Huruf Prinsip memilih huruf untuk web ... handwriting,...

INTERAKSI MANUSIA DAN KOMPUTER

Astrid Lestari Tungadi, S.Kom., M.TI.

DESIGN WEBSITE

1. Menentukan tujuan website

ATTENTION

2. Gambaran jelas tentang situs dan

pembuatan sitemap

ATTENTION

3. Informasi yang Disajikan

ATTENTION

4. Segmen Pengguna

ATTENTION

ELEMEN PENTING DALAM

DESAIN1. 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.


DESAIN1. Layout

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 membaca dari kiri ke kanan,

maka letakkan main post di sebelah kiri, sedangkan sidebar di

sebelah kanan.

Perhatikan pula keseimbangan susunan elemen desain.


DESAIN2. 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.


DESAIN2. White Space

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

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.


DESAIN3. 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.



1. Klasifikasi Hurufa. 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.



1. Klasifikasi Hurufb. Sans Serif adalah huruf yang paling cocok untuk

digunakan karena memiliki tingkat readibility yang lebih

tinggi di layar komputer jika dibandingkan dengan huruf

serif. Memberikan kesan formal sekaligus kasual.

Contoh: Helvetica, Arial, Trebuchet, Verdana, JosefinSans.



1. Klasifikasi Hurufc. Script memiliki banyak sekali variasi (brush,

handwriting, kaligrafi, dll), memberikan kesan klasik,

santai, dan kasual. Anda bisa menggunakan jenis huruf

ini untuk judul post, tetapi hindari menggunakannya

untuk body text.



1. Klasifikasi Hurufd. Dekoratif, sama seperti script, huruf dekoratif juga

memiliki banyak sekali variasi dari mulai yang betul-betul

alfabet, simbol, hingga ikon-ikon tertentu.

Huruf dekoratif tidak terlalu cocok digunakan untuk

web fonts baik untuk judul maupun body text.

Tetapi, Anda bisa menggunakan huruf jenis ini untuk

tulisan di image asalkan hanya untuk satu atau dua

kata, bukan untuk kalimat panjang.



1. Klasifikasi Hurufd. Dekoratif



2. KarakterHuruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf

yang sesuai dengan karakter situs web atau produk Anda.



3. LegibilityLegibility adalah tingkat kemudahan mata mengenali suatu

karakter/huruf tanpa harus bersusah payah (Lia Anggraini S.

& Kirana Nathalia, 2014).

Ada beberapa jenis huruf yang sulit dibaca sehingga pesan

yang ingin disampaikan pun sulit diolah oleh pembaca,

misalnya jenis-jenis huruf script atau dekoratif.



3. LegibilityPerhatikan contoh huruf berikut, keduanya memakai jenis

huruf yang sama, tetapi memiliki legibility yang berbeda.

Kata pertama menggunakan title case atau kombinasi huruf

besar dan kecil, sedangkan yang kedua memakai all caps atau

kapital.



4. ReadibilityReadibility 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 berhubungan dengan jarak antarhuruf dan

jarak antarkata.



5. WarnaApa 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.

Warna lain di dalam body text hanya dipergunakan

untuk link atau subjudul.

Judul? Boleh, Anda boleh memakai huruf berwarna-warni

untuk judul atau judul sidebar, tetapi pastikan warna

yang Anda gunakan konsisten.



6. UkuranUkuran 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.

Untuk judul, header, sidebar, dan elemen lainnya bisa

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 bisa mengkombinasikan antara huruf serif dengan sans

serif atau script dengan sans serif.

Misalnya, Georgia untuk judul dan Helvetica untuk body text.

Gunakan variasi ukuran huruf untuk menandai skala prioritas

aliran informasi.

Misalnya, 12px untuk body text, 10 px untuk text snippet di

sidebar, 8 atau 9px untuk footer.


DESAIN4. 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.

Warna juga memengaruhi psikologi pembaca, menciptakan mood,

bahkan menyelusup ke alam bawah sadar.

Warna, bisa menyampaikan simbol dirinya sendirinya bahkan

tanpa disertai oleh teks.

Itu sebabnya mengapa pemilihan warna merupakan salah satu

elemen penting dari desain sebuah web.



Tip:

Gunakan warna muda untuk latar dan warna tua untuk teks,

bukan sebaliknya. Misalnya, 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 di dunia ini, Anda bisa

memilih satu di antaranya.

Pilih hanya SATU warna yang akan di-highlight. Untuk

variasi, Anda bisa menggunakan warna lain tapi

dengan tone yang sama atau gradasi dari warna utama.


DESAIN5. 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 website Anda.

Navigasi juga bertujuan seperti sistem kearsipan: mudah

menyimpan dan menemukan data.


DESAIN5. Navigasi


DESAIN5. Navigasi

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.

Gunakan menu dropdown untuk memisahkan antara subtopik

dengan sub-subtopik.

Anda bisa menggunakan navigasi linear atau navigasi

hamburger.


DESAIN6. 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.



Tip:

Letakkan tombol di tempat yang mudah dilihat. Biasanya di

sebelah navigasi atau di bawah header.

Gunakan tombol berupa huruf atau simbol. Jika menggunakan

simbol, HANYA gunakan simbol lup yang merupakan simbol

universal.

Untuk pengalaman pengguna yang lebih baik, Anda bisa

menggunakan fitur Google custom search.


DESAIN7. Halaman “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.

Membangun engagement dengan pembaca. Percaya atau

tidak, pembaca lebih suka membaca tulisan dari

seseorang yang dia “kenal” daripada dari penulis

misterius.

Jika Anda adalah blogger, laman “About Me” akan memudahkan

calon klien menemukan informasi tentang siapa Anda.



Tip:

Letakkan laman “About Me/Us” di navigasi agar mudah

ditemukan.

Laman “About Us” bisa dipergunakan untuk menceritakan visi

dan misi perusahaan atau organisasi.

Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa

menceritakan tentang siapa diri Anda, tetapi hanya jika itu

relevan atau berpengaruh terhadap citra diri yang ingin Anda

tonjolkan. Tidak usah terlalu panjang, ini profil, bukan cerpen.



Tip:

Anda juga bisa memasukkan informasi yang berguna seperti

prestasi, testimoni, atau seluruh akun media sosial. Kontak?

Ya, Anda bisa memasukkan juga kontak di laman “About

Me”.

Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan

satu saja dengan pose yang sekiranya membentuk citra diri

Anda.

Jika Anda adalah profesional, sertakan juga skill dan jasa yang

Anda berikan.


DESAIN8. Halaman “Contact”

Halaman 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.

Halaman kontak juga mempermudah mereka untuk menghubungi

kita. Karena terus terang, seseorang yang sulit dihubungi sering

kali membuat frustrasi.

Anda bisa meletakkan halaman 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).


DESAIN9. 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.


DESAIN10.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.



Tip:

Gunakan foto atau ilustrasi dengan resolusi yang cukup agar

tidak blur, minimal 150 PPI. Jika Anda belum familiar dengan

ini, Anda bisa melihatnya di properties. Klik kanan image →

properties → details.

Gunakan file PNG agar meskipun ukurannya dikompres,

resolusi dan ketajaman warnanya tidak berubah.

Akan lebih baik jika Anda menggunakan foto atau ilustrasi

sendiri.

Jika Anda menggunakan foto dari stock images, pastikan Anda

memakai foto gratis, bukan yang berlisensi seperti

Shutterstock, Depositphotos, dll.



Tip:

Gunakan foto yang relevan dengan konten.

Jika menggunakan foto dari situs web lain, sebutkan

sumbernya berupa direct link, bukan hanya menyebutkan

“Foto: Google”. Sebab Google adalah mesin pencari, bukan

penyedia foto gratis.

Jika Anda menggunakan foto sendiri dan ingin menggunakan

watermark, gunakan watermark sewajarnya.

Anda yang menggunakan CMS WordPress bisa memanfaatkan

plugin image editing untuk mengatur tampilan images.

PROJECT III

Desain suatu website (menggunakan Edraw atau

Photoshop atau Corel Draw) sesuai tujuan dari studi

kasus Anda.

Desain website berjumlah minimal 4 halaman (Home

dan About Us/Contact Us wajib ada).

PROJECT III

PEMBAGIAN KELOMPOK DAN STUDI KASUS:Kelompok 1:

1761003 & 1761008 → Website Bank berstandar nasional

Kelompok 2:

1761001 & 1761009 → Website Sekolah Playgroup dan

Taman Kanak-KanakKelompok 3:

1761007 & 1761013 → Website Berita

Kelompok 4:

1761002, 1761004, & 1761005 → Website E-Commerce

INTERAKSI MANUSIA DAN KOMPUTER · Jenis Huruf Prinsip memilih huruf untuk web ... handwriting,...

Documents

Transcript of INTERAKSI MANUSIA DAN KOMPUTER · Jenis Huruf Prinsip memilih huruf untuk web ... handwriting,...