Prinsip Dasar Desain Web

Slides:



Advertisements
Presentasi serupa
Kategori Desain Grafis
Advertisements

MAKALAH MEDIA PEMBELAJARAN PENGEMBANGAN MEDIA
PRINSIP DESIGN IMK.
Desain web – pertemuan 10 CSS (Part 3).
PEMBUATAN MEDIA PRESENTASI DENGAN POWER POINT
Drs. Iwan Wijaya PELATIHAN MEDIA PRESENTASI DENGAN Ms. POWER POINT 2007 SELAMAT DATANG di.
13 CSS ( CASCADING STYLE SHEET II ) Bayangkan jika kita memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap.
DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB Widianto Nugroho, S.Sn.
Unsur / Komponen Desain Grafis
TIPS Presentasi dengan Power Point
Perancangan Grafis dan Tipografi
Chapter 8 Desain Web.
PENGOLAHAN CITRA DIGITAL
Modul -4 : CSS 1 Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking Cascading Style Sheet (CSS) Modul-4 :
Desain permodelan grafis
PENGERTIAN CSS.
CSS.
KEMENTERIAN PENDIDIKAN NASIONAL
KEMENTERIAN PENDIDIKAN NASIONAL
Jurusan Perencanaan Wilayah dan Kota Fakultas Teknik Universitas Indonusa Esa Unggul Topik 10 Teori Warna.
CSS (Cascading Style Sheet)
CSS Eksternal & Style Elemen
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
Oleh : Fajar Y. Zebua ◊ ◊ Id YM : fajarzebua ◊ Mobile Phone :
Keseimbangan, Penekanan, Kesatuan
Teknik Pembuatan Powerpoint
UNSUR DAN PRINSIP PERANCANGAN TAMAN
Pembuatan Media Presentasi
Semua isi di dalam PPT ini bersumberkan:
Basic Design Principles
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Teknologi Dan Rekayasa
Modul Design & Pemrograman Web
Irma Damayantie, S.Ds., M.Ds Prodi Desain Interior - FDIK
Perkenalan CSS.
KONSEP DASAR DESAIN WEB
DESAIN.
Sesi 2 Memahami tipografi sebagai seni meramu teks untuk memvisualisasikan pesan yang berhasil.
Definisi Desain Grafis
KOMPUTER APLIKASI IT XHTML & CSS MODUL 06
PENGERTIAN FONT SERIF DAN SANS SERIF
KEMENTERIAN PENDIDIKAN NASIONAL
Microsoft Power Point.
Bahasa visual Untuk Media internal.
Almuntaqo Zain Komputer Almuntaqo Zain
Tips Membuat Desain & Layout Surat Kabar
Typography & Color Oleh : Denny Sagita, S.Kom., M.Kom Contact Us
Definisi Desain Grafis
Perancangan Grafis dan Tipografi
( Materi Publikasi ) Design grafis.
Cascading Style Sheet (CSS)
Komunikasi Visual Iklan Cetak
PENGETAHUAN WARNA ROSITA CAROLINA OLEH : MATA KULIAH
ELEMEN SITUS WEB A. Ridwan Siregar.
PRINSIP-PRINSIP KOMPUTER/MEDIA GRAFIS
KOMPUTER/MEDIA GRAFIS
Sesi 2 Memahami tipografi sebagai seni meramu teks untuk memvisualisasikan pesan yang berhasil.
Konsep Pewarnaan Website
Warna, Symbol, Safety dan Typography OSKAR JUDIANTO SSn. MM. MDs.
PUTRI ANGGRAENI WIDYASTUTI
Cascading Style Sheet (CSS)
Metode untuk Menciptakan Komposisi Desain yang Harmonis
Cara Merancang Halaman Web
Abdu Hari Wijaya Nurul Fajri
Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: Inline CSS Embedded (memasang kode ke dalam bagian External.
Bahasa visual Untuk Media internal.
Mengidentifikasi Perangkat Lunak Pembuat Grafis Definisi Desain Grafis Tujuan Desain Grafis Manfaat Desain Grafis Elemen Desain Grafis Prinsip Dasar Desain.
KELAS XI MULTIMEDIA SMT. 1 SMK KARYA SEMBAWA BANYUASIN 20 Oktober 2014.
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
KEMENTERIAN PENDIDIKAN NASIONAL
Transcript presentasi:

Prinsip Dasar Desain Web L. Erawan

Prinsip Dasar Desain

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

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.

Keseimbangan asimetris simetris

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.

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

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

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.

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.

Roda Warna Untuk mempermudah pemilihan warna, warna digambar dalam sebuah roda yang diciptakan oleh Sir Isaac Newton tahun 1666. 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.

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.

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

Contoh-Contoh Situs