DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB Widianto Nugroho, S.Sn.

Presentasi berjudul: "DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB Widianto Nugroho, S.Sn."— Transcript presentasi:

1 DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB Widianto Nugroho, S.Sn. http://widiantonugroho.com

2 Unsur dan prinsip desain Font dan tipografi Warna Layout

3 UNSUR-UNSUR DESAIN

4 Garis Horizontal atau vertikal. Dapat meningkatkan keterbacaan dari desain. Gambar: http://desktoppub.about.com/od/elements/l/aa_lines2.htm

5 Raut Dalam desain web biasanya berbentuk segi empat. Dapat digunakan gambar untuk menghasilkan raut selain segi empat. Gambar: http://www.curtvdl.com/P%20and%20E%20of%20Design/elements.html

6 Tekstur Untuk mendapatkan kesan tentang suatu permukaan. Dapat berupa gambar alami atau efek buatan. Gambar: http://zules.wikispaces.com/Texture

7 Warna Warna web safe untuk web. Gambar: http://www.adobetutorialz.com/articles/401/1/Photoshop- Elements-2-Switch-Colors

8 Arah Untuk menunjukkan pada suatu spot tertentu. Gambar: http://sensingarchitecture.com/867/gestalt-principles-in- architecture-achieving-design-balance/

9 PRINSIP-PRINSIP DESAIN

10 Keseimbangan Distribusi dan pembagian dari berat/ringan dari suatu komposisi sehingga diperoleh suatu keseimbangan. Gambar: http://desktoppub.about.com/od/designprinciples/l/aa_balance1.htm

11 Kontras Bisa didapatkan melalui perbedaan yang ekstrim dari warna maupun raut (kotak lawan lingkaran) Gambar: http://blogs.sitepoint.com/2009/12/03/principles-of-design- contrast/

12 Penekanan Bidang dominan dari komposisi. Bisa didapat melalui ukuran, atau warna Gambar: http://ccit300- f06.wikispaces.com/Elements+and+Principles+of+Design

13 Irama Dapat disebut juga pola, pengulangan, membawa pada konsistensi, sehingga mudah untuk diingat. Gambar: http://norwalk.digication.com/hcaserotti/Graphic_Design_1_- _Principles_of_Design

14 Kesatuan Semua unsur yang mungkin berbeda menyatu menjadi kesatuan yang harmonis. Gambar: http://www.markokauppinen.info/the-basic-principles-of-landscape- design/

15 Desain untuk web ≠ desain untuk cetak Gambar: http://jorgehurtado.com/print/

16 FONT DAN TIPOGRAFI

17 Font sans-serif Sebaiknya menjadi dasar dari konten web. Mudah dibaca secara online. Umumnya terdapat dalam berbagai sistem operasi.

18 Font serif Untuk media cetak, lebih sulit dibaca di layar komputer. Dapat diimplementasikan pada style sheet untuk print.

19 Font monospace Biasanya digunakan untuk menyajikan kode program. Gamba: http://whimsical.nu/tag/monospace-fonts/

20 WARNAWARNA

21 Teori warna Warna primer - sekunder

22 Warna RGB Merah hijau biru

23 Warna pada web Nama warna: – Red, blue, green, purple, dll. Kode heksadesimal: – #FF0000 atau #F00 : merah – #00FF00 atau #0F0 : hijau – #0000FF atau #00F : biru Pada CSS: –

24 Web safe color 256 warna dengan menggunakan kode heksadesimal

25 Makna Warna Perbedaan kultur – Contoh: makna warna merah pada budaya Tionghoa Perbedaan usia – Muda: cenderung lebih cerah Perbedaan gender – Pria: warna-warna dingin: hijau, biru – Wanita: warna-warna panas: merah, orange Trend warna

26 Harmoni warna Gambar: http://www.ideabook.com/store_color_harmony.html

27 LAYOUT

28 Layout dasar

29 Gambar: INTERACTIVE LAYOUT http://bip.softwarejewel.com/technology/why-we-need-web-designers-2500/

30 Fixed layout 1024 px 1280 px

31 Fluid layout Variable width

32 TERIMA KASIH Email: widianto@widiantonugroho.com Web: http://widiantonugroho.com Facebook: http://facebook.com/widianto.nugroho Twitter: http://twitter.com/wnugroho