Materi kuliah Pemrograman Web Desain

1. PEMROGRAMAN WEB DESAIN
(RPL203408)
Prinsip Dasar Website
Oleh : Suparno
Blog : www.ngangsuilmu.com
Email : endustong@yahoo.com
STMIK PALANGKARAYA
Kuliah Beneran, Benar-Benar Kuliah

2. Prinsip Dasar Desain Web
Untuk memperindah tampilan halaman web, seorang web designer
harus betul–betul memahami komposisi, baik bentuk maupun warna
yang akan digunakan dalam website yang dibuatnya
Komposisi
Yang dimaksud dengan unik dalam mendesain sebuah website adalah
kesadaran seorang designer untuk tidak meniru atau menggunakan
karya orang lain
Unik
02
01
Dalam mendesain website harus memperhatikan kenyamanan yang
akan didapatkan pengunjung dalam membaca dan kecepatan yang
akan diperoleh pengunjung dalam mencari informasi
Ergonomis
03

3. Prinsip Dasar Desain Web
Diharapkan pengunjung dapat dengan mudah dan cepat mengerti
ketika melihat tanda dan gambar yang ada dalam suatu website
Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan
informatif
Semiotik
Simple
04
05

4. Prinsip Dasar Desain Web
Hierarki prioritas dari pesan yang akan disampaikan, dengan
adanya fokus tersebut diharapkan pengunjung dapat memahami
dan menentukan pesan mana yang lebih dulu harus dibaca atau
dilihat
Website yang konsisten akan memberikan identitas tersendiri dan
mampu memperlihatkan visi serta misinya. Pemilihan style yang
digunakan pada perancangan web dan digunakan pada semua
halaman website.
06
07
Fokus
Konsisten

5. Merumuskan Tujuan Pembuatan Website
01
02
03
04
Website Promosi, berfungsi sebagai media
presentasi dan pengenalan diri atau institusi
Website Customer Service, berfungsi sebagai
media untuk melayani konsumen
Website e-Commerce, berfungsi sebagai media
transaksi on-line
Website informasi/berita, berfungsi sebagai
media informasi berita
Kelompok Website

6. Merumuskan Tujuan Pembuatan Website
Struktur website diperlukan untuk memberikan
kemudahan dalam mengelola suatu website.
Tentunya struktur tersebut harus disesuaikan
dengan isi dari website. Dengan memiliki
struktur yang terorganisasi dengan baik, suatu
website akan memberikan kemudahan dalam
navigasi, editing dan pemeliharaan website
tersebut
Struktur Website
Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungi
oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan
gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada
pengguna hardware dan aplilkasi browser yang berbeda dengan setiap pengunjung.
Target Pengunjung
Faktor yang paling penting dalam suatu
website adalah isi dari website itu sendiri.
Hal tersebut berkaitan dengan manfaat
yang akan diperoleh pengunjung dari
sebuah website.
Isi Website
Fokus Perhatian

7. Konsep Dasar Desain
Komunikatif
Prinsip komunikatif berhubungan dengan corporate identy, isi pesan serta audiens
Estetis
Fungsi estetis ini adalah memberikan
suatu keindahan, sehingga lebih
menarik minat pengunjung untuk
lebih menggali informasi yang
ditawarkan dari suatu website
Ekonomis
Desain web harus memperhatikan
factor ekonomis dalam arti ukuran
file yang digunakan. Hal tersebut
berkaitan erat dengan kecepatan
akses yang ditawarkan suatu web

8. Elemen Layout
Keseimbangan
Hasil susunan satu atau lebih elemen desain sehingga
antara satu dengan lainnya memiliki bobot yang sama
Kontras
Untuk menonjolkan bagian yang dianggap lebih
penting dari bagian lainnya sehingga menarik
perhatian. Bisa juga dinyatakan dengan membedakan
ukuran serta warna dari elemen–elemen layout.
Kontras sebuah objek haruslah kontras positif, jika
kontrasnya negatif maka objek menjadi samar-samar,
bahkan tidak terlihat karena terserap oleh
background.

9. Elemen Layout
Konsistensi
Konsistensi membuat pengunjung nyaman karena
dapat menjelajah situs dengan mudah.
Ketika pengunjung membuka sebuah situs yang
konsisten, dia akan langsung tahu kemana harus
pergi dan dia juga tahu dimana sedang berada.
Ruang Kosong
Pada prinsip desain grafis mungkin
dilihat sebagai ruang yang ‘sia-sia’. Namun ruang
kosong juga berarti kemewahan dan dilihat sebagai
sesuatu yang ‘lebih’ atau sesuatu yang ‘mahal’ dan
dapat memberikan posisi tertentu dalam kaitan
‘brand‘ dengan target konsumen tertentu

10. Elemen Layout - Keseimbangan
Jenis Keseimbangan
Keseimbangan Simetris
Keseimbangan yang memiliki elemen
dengan bobot sama pada dua sisi garis
vertikal imajiner halaman web.
Sehingga bentuknya menjadi terkesan
formal, sederhana, mudah
pembuatannya tetapi terkesan
membosankan dan kurang menarik.

11. Elemen Layout - Keseimbangan
Jenis Keseimbangan
Keseimbangan Asimetris
Keseimbangan yang memiliki elemen
tidak sama bobotnya pada dua sisi dari
garis vertikal imajiner halaman web.
Sehingga bentuknya tampak lebih
dimanis karena adanya ruang kosong,
berkesan santai dan kasual.

12. Elemen Layout - Keseimbangan
Jenis Keseimbangan
Keseimbangan Radial
Semua elemen memancar keluar dengan model
melingkar dari titik tengah suatu objek.
Keseimbangan radial lebih mudah untuk
diimplementasikan karena objek akan seimbang
jika objek berada ditengah.
Untuk itu dengan menempatkan objek pada
posisi tengah maka desain akan nampak
seimbang.

13. Elemen Layout - Kontras
Kontras: Lebih dari sekedar hal yang berlawanan seperti hitam
dan putih atau besar dan kecil.
Kontras membantu mengatur desain dan membuat hierarki,
menunjukkan bagian mana dari desain yang paling penting
(menjadikan pengunjung untuk fokus pada hal itu).
Lihat referensi pada link :
https://www.canva.com/id_id/belajar/desain-
dengan-kontras-20-tips-dari-desainer-studi-
kasus/

14. Elemen Layout - Konsistensi
Ada dua keuntungan pengguna yaitu
mengurangi pembelajaran dan
menghilangkan kebingungan.
Konsistensi membatasi jumlah interaksi dan
operasi yang direpresentasikan, memastikan
bahwa pengguna tidak perlu mempelajari
interaksi baru lagi.

15. Elemen Layout - Konsistensi
Cara menjaga konsistensi:
• Pemilihan dan penggunaan bahasa yang lazim untuk target
pengguna.
• Menerapkan elemen User Interface yang didefinisikan.
• Gunakan layout yang sebagian besar sudah sering dilihat.
Penggunaan layout yang mirip (sering dilihat), akan
memudahkan pengguna karena sudah terbiasa.
• Membuat desain sesuai dengan ekspektasi pengguna.
• Selalu konsisten menggunakan elemen visual pada semua
halaman.

16. Elemen Layout – Ruang Kosong
Sebuah ruang kosong tidak hanya berarti ruang polos pada
website, tapi juga merupakan elemen penting untuk membuat
website terlihat indah dan sempurna.
• Teks lebih jelas dan mudah dibaca
• Ada titik fokus untuk konten penting yang dipresentasikan
• Menciptakan perasaan mewah pada website
• Menjadikan halaman tampak dinamis
Desain yang cantik tidak hanya tentang tata letak teks dan
gambar, tetapi juga harus ada ruang kosong pada wesbite

17. Contoh Ruang Kosong

18. Pemrograman Web Desain
Program Studi Manajemen Informatika
Suparno
www.ngangsuilmu.com
endustong@yahoo.com
0822 9544 8723
Terima Kasih