1 / 32

DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB

Widianto Nugroho, S.Sn. http://widiantonugroho.com. DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB. Unsur dan prinsip desain Font dan tipografi Warna Layout. UNSUR-UNSUR DESAIN. Garis. Horizontal atau vertikal. Dapat meningkatkan keterbacaan dari desain.

pilis
Download Presentation

DASAR-DASAR DESAIN DAN DASAR-DASAR DESAIN DESAIN UNTUK MEDIA WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. WARNA

  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: • <body style="background-color: #0000cc;”>

  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. Email: widianto@widiantonugroho.com Web: http://widiantonugroho.com Facebook: http://facebook.com/widianto.nugroho Twitter: http://twitter.com/wnugroho TERIMA KASIH

More Related