PEMROGRAMAN WEB I #2

Pengenalan Unsur
Visual Desain Website
RIZKI MULIONO, M.KOM

TEKNIK INFORMATIKA
Review Materi minggu lalu :
Cara Kerja Web Request
Web page, image,
audio, video file

Respon
Menanggapi permintaan
berbentuk HTML
Hierarki Visual & Struktur Layout
Hierarki Visual

Saat/ Setelah Ditekan

Hierarki Visual (2)
Hierarki Visual (3)
Tuujuan dari Hierarki Visual?
Hierarki Visual memberikan fokus untuk menonjolkan
elemen-elemen yang menarik perhatian mata.
So, Website yang terstruktur dengan baik dapat
menyampaikan informasi secara lebih efektif. Pengunjung
website dapat dengan mudah mengerti apa yang harus
dilihat dan dibaca berikutnya.
No Hierarchy
Ini adalah contoh penulisan dalam poster
tanpa penggunaan prinsip hierarki.
Bagaimana? Pasti kalian bingung harus
membaca dari bagian yang mana dulu, ini
dikarenakan semua ukuran tulisan nya
sama.
Tidak adanya titik fokus atau penekanan
pada tulisan dapat menyebabkan audiens
kebingungan dalam memahami tulisan
mana yang harus dibaca pertama kali dan
mana yang harus dibaca selanjutnya.
Improved Hierarchy
Ini adalah contoh yang sudah
menggunakan prinsip hierarki
dalam tulisannya. Bagaimana? pasti
sudah lebih enak untuk dilihat kan.
Audiens pun akan lebih mudah
mengerti apa yang harus dilihat
pertama kali dan dibaca berikutnya,
seperti dimulai dari judul dan
pelaksanaan workshop, lalu lanjut
ke pembicara, hingga seterusnya ke
narahubung.
Better Hierarchy! (1)

Kalau contoh yang ini tidak perlu diragukan

lagi, tidak hanya membantu audiens dalam
memahami informasi, tetapi juga
menjadikan desain lebih terlihat bagus dan
menarik. Orang-orang akan tertarik untuk
melihat desain tersebut.

Kenapa tulisan pendaftaran dan

narahubung saya buat menjadi di sebelah
kanan dan tidak lanjut kebawah? itu tidak
masalah, karena pada umumnya audiens
akan membaca dari arah kiri ke kanan,
seperti arah panah berikut.
Better Hierarchy! (2)

👀
👀
Tetapi untuk arah ini kita
sesuaikan lagi dengan audiens
nya, misalnya jika audiens
yang kita tuju adalah orang
Arab maka arah penulisan nya
kita ubah menjadi dari kanan
ke kiri.

Hirarki bertujuan untuk

memandu pembaca
memahami alur dan susunan
mulai hingga akhir suatu
tampilan visual.

👀
Desain Web
Desain merupakan perencanaan dalam pembuatan sebuah objek,
sistem, komponen atau struktur.
Desain web meliputi alur informasi, struktur web, desain antarmuka,
navigasi, layout, warna, responsif, dan tipografi. Tujuanya agar lebih
mudah diakses dan mudah dioperasikan.
Desain Web
Desain Web
Unsur-unsur dasar desain
Ø Garis
Ø Bentuk
Ø ruang
Ø Warna
Ø Tekstur
Ø Ukuran
Ø Huruf
Layout Web
Layout adalah
penyusunan dari elemen-
elemen desain yang
berhubungan ke dalam
sebuah bidang sehingga
membentuk susunan
artistik. Hal ini bisa juga
disebut manajemen
bentuk dan bidang.
(Gavin Amborse & Paul
Harris, London 2005)
Menentukan struktur website
Susunan atau kerangka navigasi situs web
a. Struktur Linear
b. Struktur Non-Linear
c. Struktur Hirarki
Navigasi adalah petunjuk posisi dan
arah perjalanan. Di dalam
dunia web, navigasi dianggap penting
agar user yang sedang berada di
dalam halaman tertentu tidak
tersesat dan mudah menemukan
halaman-halaman lain
dalam website Anda. Biasanya, pada
sebuah website, navigasi tertampil
pada menu dan link yang terstruktur.
Struktur Website (Navigasi Page) (1)
A. Linear
Merupakan struktur yang mempunyai satu rangkaian cerita berurutan. Struktur
ini menampilkan satu demi satu tampilan layer secara berurutan menurut
aturannya.
Struktur Website (Navigasi Page) (2)
B. Non - Linear
Merupakan Pengembangan dari linear. pada struktur ini semua kedudukan page
sama, sehingga tidak kenal adanya master atau slave page
Struktur Website (Navigasi Page) (3)
C. Campuran (Composite)
Struktur navigasi composite (Campuran) disebut juga struktur navigasi bebas
yang merupakan gabungan dari ketiga struktur yang ada. Struktur navigasi ini
biasa digunakan dalam pembuatan multimedia karena dapat memberikan
keinteraksian yang lebih tinggi.
Tugas I Kelompok
(Kumpulkan per Kelompok 3 orang)
1. Diskusikan Alamat Web berikut ini (garis, bentuk, ruang, warna,
tektur, ukuran) :
Ø http://connectthedotsinc.com
Ø https://eastroom.com/
Ø https://www.ableton.com
Ø www.insideasiatours.com
2. Sekiranya Anda membuat Website, apakah yang akan
ditonjolkan dari elemen dasar tersebut (kombinasi)? Jelaskan?
 Analisis desain web : https://uma.ac.id/
1. Garis

2. Bentuk

3. Ruang

4. Warna

5. Tekstur
Menu Top
6. Ukuran 13px Logo

7. Huruf font-family: "Open Sans", Verdana, Arial, serif; Menu

Image slide
Left

8. Navigasi Composite
list list
Referensi:
https://medium.com/@wildanhidayatullah/memahami-hierarki-visual-a7fe890e776d
http://blog.pekku.com/hirarki-visual-dalam-desain-website/