Prinsip Dasar Desain Web

Presentasi berjudul: "Prinsip Dasar Desain Web"— Transcript presentasi:

1 Prinsip Dasar Desain Web
L. Erawan

2 Prinsip Dasar Desain

3 Titik Fokal nilai Ukuran dan isolasi Titik fokal dapat berupa apa saja, logo, headline, atau gambar dalam halaman web. Titik fokal membantu audiens menemukan titik mulai

4 Kontras Kegunaan kontras pada layar komputer adalah untuk membantu mata membedakan diantara elemen-elemen. Kontras dapat meningkatkan keterbacaan (readability) dan juga dapat menyuarakan pesan dengan lantang atau halus kepada audiens.

5 Keseimbangan asimetris simetris

6 Sistem Grid 960 Berdasarkan teori grid, Nathan Smith menciptakan sistem grid 960. Sistem ini adalah tool berupa template dan lembar sketsa yang digunakan untuk mengatur layout komponen situs web. Sistem ini adalah suatu framework CSS. Lebar template yang 960 piksel berdasarkan artikel Cameron Moll yang berpendapat bahwa lebar 960 cocok untuk layar monitor dengan lebar 1024 piksel. Bilangan 960 juga dapat dibagi dengan 3, 4, 5, 6, 8, 10, 12, 15, dan16 yang menjadikannya sebagai lebar yang ideal untuk grid. Nathan menggabungkan ide-ide tersebut ke dalam kerangka dan menciptakan tiga dasar tata letak: tata letak dengan 12 kolom, 16 kolom, dan 24 kolom.

7 Anatomi Halaman Web Anatomi halaman web terdiri dari: Container logo
navigation content footer whitespace

8 Typography Typography adalah perpaduan antara seni dan teknik mengatur tulisan, agar maksud dan arti tulisan dapat tersampaikan secara visual kepada pembaca dengan baik. Tipografi tidak hanya sebatas pemilihan jenis huruf, ukuran huruf, dekorasi, dan kesesuaian tema, tetapi juga meliputi tata letak vertikal atau horizontal tulisan pada sebuah bidang desain. Ada 2 kategori font : Serif (berkait) San serif (tidak berkait) Aa Aa Times New Roman Arial

9 Typography: Leading Dalam penyajian teks untuk media cetak atau digital, dikenal istilah Leading, yaitu jarak antar baris yang memungkinkan sebuah baris dapat jelas terbaca. Menggunakan Leading dengan baik akan turut membangun keterbacaan huruf yang digunakan. Pada web, leading dapat diatur menggunakan CSS (Cascading Style Sheet): p {line-height: 20px;} Aturan diatas akan mengatur jarak antar baris setinggi 20px. Leading akan berpengaruh banyak pada tampilan teks atau huruf, jadi mempertimbangkan leading dengan baik adalah langkah yang tepat untuk membangun teks yang enak dibaca dan menarik.

10 Color Pemilihan warna, meskipun dianggap sepele namun sangat menentukan kesan dan penilaian seseorang. Warna merah mungkin cocok untuk situs web e-commerce namun tidak cocok dengan situs web yang menyajikan berita. Misalnya: merah memiliki reputasi untuk merangsang adrenalin dan tekanan darah. Merah juga dikenal meningkatkan metabolisme manusia, warna yang menarik, dramatis, dan bergairah. oranye adalah warna yang sangat aktif dan energik, meskipun tidak membangkitkan gairah seperti warna merah. Oranye bisa mewakili sinar matahari dan perasaan bahagia, antusiasme, dan kreatifitas.

11 Roda Warna Untuk mempermudah pemilihan warna, warna digambar dalam sebuah roda yang diciptakan oleh Sir Isaac Newton tahun Warna primer yaitu warna dasar yang terdiri dari Merah, Kuning, dan Biru. Dari warna primer inilah warna-warna lain akan terbentuk seperti warna sekunder dan tertier.

12 Metode Pemilihan Warna
Complements-warna padanan yang dibuat dengan warna yang berlawanan dalam roda warna. Triads - Pemilihan warna menggunakan segitiga sama sisi pada color wheel.

13 Software Bantu Untuk dapat membantu dalam pemilihan warna ini, Anda dapat menggunakan Color Wheel dan Colors Designer’s Guide yang tersedia di toko buku, atau Anda dapat menggunakan software Color Finder seperti: Color Wheel pro, atau Color Schemer

14 Contoh-Contoh Situs

15

16

17

18