Design Basic + Basic UI Design Tips for KMI ITS

Deden Fathurrahman

DESIGN BASIC + APPLICATION

Fungsi utama desain visual (grafis) adalah sebagai media komunikasi, menyampaikan pesan.

Desain grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin.

Dalam disain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. disain grafis diterapkan dalam disain komunikasi dan fine art.

Seni disain grafis mencakup kemampuan kognitif dan keterampilan visual, termasuk di dalamnya tipografi, ilustrasi, fotografi, pengolahan gambar, dan tata letak.

Elemen Desain

Bentuk Titik Garis Bidang

Teks > tipografi Warna Gambar

Fotografi Ilustrasi Tekstur & Pattern

Bentuk

Bentuk adalah komposisi dari titik, garis, dan bidang

Komposisi tersebut dapat menjadi elemen desain, namun dengan sedemikian rupa dapat menjadi gambar ataupun ilustrasi

Teks | tipografi

Tipografi adalah ilmu yang mempelajari tentang tata letak, karakter dan penggunaan huruf pada suatu desain.

Setiap jenis huruf memiliki karakter yang berbeda-beda untuk dapat mempengaruhi pesan yang hendak disampaikan

Hal yang harus diperhatikan Legibility Readability Clarity Visibility

Jenis Huruf Serif Sans Serif Dekoratif

Warna warna memiliki asosiasi yang sangat kuat dan dapat

memberi dampak psikologis dan fisiologis pada tubuh manusia, dan

warna memiliki pengaruh emosional kepada yang melihatnya. (mood)

Gambar

Gambar bisa terdiri dari Fotografi Ilustrasi Tekstur / Pattern (dekoratif) Olahan Digital

Penggunaan gambar disesuaikan dengan kebutuhan

IlustrasiBitmap

IlustrasiVektor

Ilustrasi

Texture

Olah Digital

Balance

Balance | Keseimbangan Simetris > statis Asimetris > dinamis

Harmony

Harmony | Keselarasan Berhubungan dengan keteraturan

antar elemen, dalam mencapai keserasian seluruh elemen desain

Unity

Unity | Kesatuan Kesatuan antar tiap elemen, dan

juga dengan pesan yang ingin dikomunikasikan

Sequence

Sequence | berurutan, beritme. Membantu pembaca dalam

mengurutkan pandangan matanya sesuai dengan yang diinginkan sehingga pembaca tidak mengalami kesulitan dalam menangkap pesan.

Emphasize

Empasis | memberikan penekanan Ukuran / proporsi antar objek Warna yang kontras Peletakan/ posisi objek

Contrast

Contrast | Pengaturan kontras antar elemen

Gallery

USER INTERFACEElemen

Window Beberapa window bisa menampilkan informasi-informasi berbeda sekaligus pada layar

Icon Mewakili informasi yang berbeda seperti item, icon untuk file, icon folder atau icon untuk program tertentu

Menu Menawarkan perintah-perintah yang disusun dalammenu tanpa harus mengetik

Pointing Alat penunjuk seperti mouse untuk memilih pilihanpada layar

Graphic Gambar yang bisa dicampur dengan teks pada displayyang sama untuk menyajikan informasi

KONSISTENSI < UNITY

Konsistensi dilakukan pada urutan tindakan, perintah, dan istilah yang digunakan pada prompt, menu, serta layar bantuan.

Petualangan MitfasFinalis Gemastik 2010

Play Petualangan Mitfas

Simple

Kiddie

Modern + ellegance

Realism

SHORTCUT-FRIENDLYINFORMATIVE-FEEDBACKCLOSING-DIALOGEASILY-EXPLOREDETC

Case Studies

Tips

Kenali target audiens/pengguna. Start from the concept. Keterbatasan

menciptakan kreativitas. Eliminasikan ide-ide yang tidak berhubungan dengan merancang konsep.

Gunakan bahasa manusia, dan bukan mesin. (intuitive-experience)

TERIMAKASIH Any question?

Design Basic + Basic UI Design Tips for KMI ITS

Design

Transcript of Design Basic + Basic UI Design Tips for KMI ITS