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

  • View
    213

  • Download
    0

Embed Size (px)

Text of 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

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

    Gunak