Skip to main content
Kita sudah berada di penghujung materi ini. Yuk, kita rangkum apa saja materi-materi yang telah dipelajari sejauh ini.
  • Beberapa elemen dasar dalam desain visual adalah tipografi, warna, dan ikonografi.
  • Tipografi adalah ilmu dan teknik dalam mengatur jenis huruf supaya tulisan menjadi mudah terbaca dan menarik saat ditampilkan. Ada tiga langkah yang perlu Anda lakukan dalam tipografi, yaitu:
    • Mengetahui jenis font (Serif atau Sans Serif).
    • Memilih typeface.
    • Memilih spesifikasi font (Regular, Medium, Bold, dll.).
  • Font jenis Serif memiliki ciri khas berupa tambahan garis kecil di sudut akhir setiap hurufnya, sedangkan Sans Serif lebih polos dan simpel tanpa adanya serif.
  • Berikut ini adalah beberapa hal yang perlu Anda perhatikan supaya tipografi tampak sempurna:
    • Legibility : Kemudahan untuk dibaca dengan memperhatikan hirarki dalam penulisan.
    • Branding : Pastikan font yang digunakan sesuai dengan brand perusahaan.
    • Consistency: Ukuran dan font yang konsisten untuk tipe konten yang sama.
  • Warna adalah salah satu elemen yang esensial dalam desain. Pemilihan warna yang tepat dapat memberikan pengaruh yang berbeda pada pemikiran, perilaku, dan suasana hati pengguna.
  • Salah satu cara untuk mengombinasikan warna supaya terlihat serasi dan enak dilihat adalah dengan mengikuti aturan 60-30-10.
  • Berikut ini adalah manfaat warna pada sebuah desain:
    • Menentukan titik fokus : Anda bisa memberikan warna yang terang untuk mengarahkan pengguna menekan suatu tombol aksi.
    • Branding : Warna juga merupakan salah satu elemen branding yang paling kuat untuk mengenali suatu merek.
    • Aksesibilitas : Pastikan untuk menggunakan warna yang kontras dengan latar belakangnya sesuai dengan Web Content Accessibility Guidelines (WCAG).
  • Ikonografi adalah ilmu yang mempelajari cara untuk mengidentifikasi, mendeskripsikan, dan menginterpretasi sebuah konten dalam gambar. Ikonografi bisa berbentuk gambar ataupun ikon yang merepresentasikan suatu hal.
  • Dengan memanfaatkan ikonografi, Anda dapat menjangkau lebih banyak audiens yang mungkin sebelumnya kekurangan literasi atau keterbatasan bahasa. Selain itu, ia juga menghemat tempat daripada penggunaan teks yang biasanya lebih panjang. Ikon juga biasanya digunakan untuk navigasi dari satu halaman ke halaman lain, contohnya ikon tanda panah terbalik untuk ke halaman sebelumnya atau ikon rumah untuk menuju ke halaman Home.
  • Layouting adalah cara untuk mengatur dan menata elemen pada suatu halaman. Dasar-dasar penting dalam mengatur halaman yaitu grid, containment, dan white space.
  • Grid adalah garis bantu yang berfungsi sebagai pemandu dalam mengatur posisi dan ukuran suatu elemen. Pada dasarnya, garis berpotongan ini membagi halaman menjadi kotak kecil yang memungkinkan Anda untuk menata elemen dengan mudah.
  • Layout Grid adalah serangkaian kolom atau baris yang membantu Anda dalam membagi suatu halaman.
  • Containment adalah pembatasan bagian dalam desain supaya lebih mudah membaca informasi. Ada empat cara untuk memberikan batas antar informasi, yaitu :
    • Divider : Garis pembatas antar bagian informasi.
    • Border : Garis bingkai untuk mengelompokkan informasi.
    • Fill : Mengisi suatu area dengan warna yang berbeda.
    • Shadow : Bayangan yang bisa menambahkan kesan tiga dimensi.
  • White Space adalah celah ruang kosong antar elemen pada desain.
  • Penggunaan White Space dapat bermanfaat untuk menekankan titik fokus pada suatu desain. Ia juga dapat mengelompokkan elemen yang berhubungan supaya lebih mudah dibaca. Apabila suatu desain tanpa White Space, desain akan terlihat rumit dan penuh, ia juga dapat menimbulkan kesalahan pada saat menekan suatu tombol apabila antar tombol tidak memiliki jarak
  • Ada tiga jenis cara untuk menambahkan White Space pada desain, yaitu:
    • Line Spacing : Jarak antar baris pada sebuah paragraf teks.
    • Padding : Jarak ke dalam dari sebuah elemen.
    • Margin : Jarak ke luar dari sebuah elemen
  • Prinsip-prinsip desain visual yang perlu Anda ketahui untuk membuat desain yang enak dipandang adalah Emphasis, Hierarchy, Scale & proportion, dan Unity & variety.
  • Emphasis adalah suatu penekanan untuk memancing perhatian. Anda bisa memberikan penekanan pada suatu elemen dengan memberikan warna yang kontras, memperbesar ukuran, menggunakan tekstur, dan menebalkan kata.
  • Hierarchy adalah prinsip visual desain untuk mengurutkan elemen berdasarkan seberapa pentingnya. Dengan adanya Hierarchy ini, pengguna akan lebih cepat fokus dalam mencari informasi yang dibutuhkan.
  • Scale dan proportion adalah dua hal yang berbeda tetapi saling berkaitan. Scale adalah konsep yang menjelaskan hubungan antara elemen tertentu dengan elemen lainnya. Sementara itu, Proportion adalah konsep yang menjelaskan apakah perbedaan ukuran suatu elemen proporsional dan masuk akal atau tidak.
  • Unity adalah teknik untuk mengumpulkan elemen supaya terlihat selaras dan menjadi satu kesatuan. Sementara itu, Variety adalah teknik untuk membuat variasi supaya desain terlihat menarik dan tidak terlihat monoton.
  • Mockup adalah desain yang menunjukkan hasil akhir produk yang bersifat statis. Jadi, ia berupa tampilan masing-masing halaman yang sudah dipoles dengan ilustrasi, ikon, warna, dan font yang berbeda sebagaimana produk aslinya.
  • Design System adalah kumpulan dari berbagai elemen yang bisa digunakan kembali sebagai panduan kepada tim untuk membuat desain yang sesuai dengan standar yang ditentukan. Design System ini bisa berupa palet warna, ikon, tipografi dan juga komponen.
  • Berikut ini adalah manfaat dengan adanya Design System:
    • Membuat tampilan yang konsisten di setiap halaman.
    • Memperkuat brand identity dari perusahaan.
    • Mudah diubah karena cukup mengganti di satu tempat.
    • Menghemat waktu dan komunikasi.
    • Membantu desainer yang baru masuk di tengah proses desain.
  • Sticker Sheet adalah sebuah halaman yang berisi kumpulan elemen yang bisa digunakan kembali dan merupakan salah satu bagian dari Design System.
  • Dengan adanya Sticker Sheet, akan memudahkan Anda menciptakan konsistensi ketika menciptakan halaman-halaman lain. Ia juga dapat membantu desainer yang baru bergabung untuk menyesuaikan diri dengan cepat mendesain aplikasi yang sesuai dengan brand perusahaan.
  • Prototype adalah rancangan desain yang dapat diuji coba berdasarkan ide yang sudah dibuat. Prototipe ini diharapkan dapat mendemonstrasikan bagaimana alur dan experience dari produk yang akan dibuat.
  • Berikut ini tips dan trik dalam membuat High-Fidelity Principle:
    • Mengetahui Lisensi Ilustrasi
      Berikut ini adalah beberapa jenis lisensi yang perlu Anda ketahui:
      • Lisensi CC BY (By Attribution) : Jenis lisensi yang membolehkan Anda untuk menggunakannya dengan syarat harus mencantumkan sumbernya.
      • Lisensi CC ND (No Derivative) : Jenis lisensi yang membolehkan Anda menggunakannya dengan syarat tidak boleh untuk memodifikasinya.
      • Lisensi CC NC (Non Commercial) : Jenis lisensi yang membolehkan Anda untuk menggunakannya tetapi bukan untuk kepentingan komersial.
      • Lisensi CC SA (Share Alike) : Jenis lisensi yang membolehkan Anda untuk menggunakannya dengan syarat harus berada di bawah suatu lisensi yang identik dengan lisensi aslinya.
      • Lisensi Public Domain : Jenis lisensi ini adalah jenis yang paling bebas, di mana Anda dapat menggunakan karya tersebut untuk kepentingan pribadi maupun komersial tanpa harus memberikan atribusi.
    • Memahami Gestalt Principle
      Gestalt Principle adalah salah satu prinsip psikologi yang menggambarkan bagaimana manusia mengelompokkan beberapa elemen yang mirip, mengenali pola, dan menyederhanakan gambar yang kompleks. Dengan Menerapkan Gestalt Principles, kita seperti memberikan sebuah ilusi visual yang membuat pengguna lebih paham tentang bagaimana sebuah tampilan pada produk bekerja. Berikut ini adalah beberapa contoh dari Gestalt Principle:
      • Similarity (kemiripan) : Elemen yang mirip dianggap memiliki fungsi yang sama.
      • Proximity (kedekatan) : Elemen yang berdekatan dianggap memiliki hubungan daripada yang berjauhan.
      • Common region (wilayah umum) : Elemen yang terletak pada area yang sama dianggap sebagai sebuah kelompok.
    • Mengadakan Design Critique Session
      Design Critique Session adalah waktu di mana desainer mempresentasikan hasil pekerjaannya kepada tim untuk mendapatkan feedback. Waktu ini adalah sesi terbaik untuk memberikan pendapat dan saling bertukar pikiran dalam hal desain. Berikut ini adalah beberapa manfaat mengadakan Design Critiques Session:
      • Menambah perspektif dari berbagai sudut pandang.
      • Membuat desain jadi lebih baik.
      • Meningkatkan kepercayaan diri dan keterampilan berbicara.