View
234
Download
0
Category
Preview:
Citation preview
INTERAKSI MANUSIA DAN KOMPUTER
Astrid Lestari Tungadi, S.Kom., M.TI.
DESIGN WEBSITE
1. Menentukan tujuan website
ATTENTION
1. Menentukan tujuan website
ATTENTION
2. Gambaran jelas tentang situs dan
pembuatan sitemap
ATTENTION
2. Gambaran jelas tentang situs dan
pembuatan sitemap
ATTENTION
2. Gambaran jelas tentang situs dan
pembuatan sitemap
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
1. Klasifikasi Hurufd. Dekoratif
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
2. KarakterHuruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf
yang sesuai dengan karakter situs web atau produk Anda.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
DESAIN3. Jenis Huruf
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN4. Pilihan Warna
ELEMEN PENTING DALAM
DESAIN4. Pilihan Warna
ELEMEN PENTING DALAM
DESAIN4. Pilihan Warna
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.
ELEMEN PENTING DALAM
DESAIN4. Pilihan Warna
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN5. Navigasi
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN6. Tombol “Search”
ELEMEN PENTING DALAM
DESAIN6. Tombol “Search”
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN7. Halaman “About Me/Us”
ELEMEN PENTING DALAM
DESAIN7. Halaman “About Me/Us”
ELEMEN PENTING DALAM
DESAIN7. Halaman “About Me/Us”
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.
ELEMEN PENTING DALAM
DESAIN7. Halaman “About Me/Us”
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN8. Halaman “Contact”
ELEMEN PENTING DALAM
DESAIN8. Halaman “Contact”
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).
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
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.
ELEMEN PENTING DALAM
DESAIN10.Kualitas Image
ELEMEN PENTING DALAM
DESAIN10.Kualitas Image
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.
ELEMEN PENTING DALAM
DESAIN10.Kualitas Image
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
Recommended