High-Fidelity Prototype

 High-Fidelity Prototype

URL Link: Video1

Transkrip

Selamat datang di materi High-Fidelity! Saya ucapkan selamat untuk teman-teman yang telah berjuang sampai sini. Anda telah melewati berbagai hal seputar UX. Mulai dari berempati dengan pengguna untuk mencari kebutuhan mereka, hingga melakukan eksplorasi ide untuk mencari solusi yang tepat. Anda juga telah memulai tahap Prototype dengan membuat Storyboard dan Wireframe.

Sebenarnya Anda bisa saja membuat Low-Fidelity Prototype dengan menggunakan Wireframe yang telah Anda buat sebelumnya untuk mendapatkan feedback secepat mungkin terkait fungsionalitas aplikasi. Namun, di sini kita akan membuat High-Fidelity Prototype terlebih dahulu untuk mendapatkan feedback yang lebih komprehensif terkait tampilan aplikasi.

Untuk membuat High-Fidelity Prototype, kita perlu membuat High-Fidelity Design yang biasa disebut dengan Mockup. Mockup adalah desain yang menunjukkan hasil akhir produk yang bersifat statis. Jadi, ia berupa tampilan setiap halaman yang sudah dipoles dengan ilustrasi, ikon, warna, dan font yang berbeda sebagaimana produk aslinya.

Pada materi ini Anda akan mempelajari berbagai elemen dasar desain visual dalam membuat desain, seperti:

• Tipografi

• Warna

• Ikonografi

Selain itu, Anda juga akan memahami cara mengatur elemen supaya terlihat rapi dengan mempelajari:

• Grid

• Containment

• White Space

Selanjutnya, kita akan belajar beberapa prinsip desain visual yang perlu Anda ketahui untuk membuat desain yang enak dipandang, seperti:

• Emphasis

• Hierarchy

• Scale & proportion

• Unity & variety

Sudah tidak sabar dengan materi ini? Yuk, kita lanjut ke materi selanjutnya.

Selamat belajar!.

Elemen Dasar Desain Visual

Desain Visual adalah hal yang penting pada pembuatan produk. Karena hal yang biasa dilihat pertama kali oleh pengguna adalah tampilan sebelum masuk ke fungsional. Jika produk tidak memiliki tampilan visual yang menarik, bisa-bisa pengguna akan mendapatkan kesan pertama yang kurang menyenangkan. Sebaliknya, produk dengan tampilan visual yang menarik akan membekas di hati penggunanya.

Untuk membangun desain visual, dibutuhkan elemen-elemen dasar yang esensial seperti tipografi, warna, dan ikonografi. Mari kita ulas satu per satu.

Tipografi

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. Hal tersebut adalah:

1. Mengetahui jenis font

Ada dua jenis font yang populer, yaitu Serif dan Sans Serif. Berikut ini adalah perbedaan dari keduanya.

 Font jenis Serif memiliki ciri khas berupa tambahan garis kecil di sudut akhir setiap hurufnya yang disebut dengan serif. Font jenis ini memberikan kesan formal dan profesional, contohnya adalah logo lama Google yang dipakai pada sebelum tahun 2015. Sedangkan Sans Serif lebih polos dan simpel tanpa adanya serif. “Sans” sendiri artinya “tanpa” dari bahasa Prancis. Font jenis ini memberikan kesan kasual dan santai, contohnya adalah logo baru yang dipakai Google.

 

2. Memilih typeface

Typeface adalah sekumpulan huruf, angka, dan simbol yang memiliki karakter khusus. Setiap typeface dibedakan berdasarkan dari ketebalan huruf, bentuk serif, dan panjang garisnya. Contoh typeface dari jenis Serif adalah Times New Roman, Raleway, dan Rockwell. Sedangkan typeface dari jenis Sans Serif adalah Arial, Calibri, dan Verdana.

 

3. Memilih font

Font adalah style pada suatu typeface yang lebih spesifik, seperti ukuran, ketebalan, dan kemiringan huruf yang berfungsi untuk memberikan penekanan pada suatu teks. Sebagai contoh dari keluarga typeface Roboto, terdapat berbagai macam style seperti ini:

 

Selain ketiga hal di atas, ada beberapa hal yang perlu Anda perhatikan supaya tipografi tampak sempurna, antara lain: 

1. Legibility : Kemudahan untuk dibaca dengan memperhatikan hirarki dalam penulisan. Sebagai contoh adalah headline pada koran biasanya akan menggunakan teks dengan ukuran yang lebih besar dan tebal. Hal ini tentu akan membantu pengguna untuk mencari hal yang penting dan dibutuhkan dengan cepat bukan?

2. Branding : Kesesuaian font yang digunakan dengan brand perusahaan. Perlu diingat bahwa tipografi juga menjadi salah satu poin penting yang menunjukkan ciri khas brand suatu produk.

3. Consistency : Konsisten dalam ukuran dan font untuk tipe konten yang sama. Jangan sampai dua header yang setara memiliki font yang berbeda. Selain itu, sebaiknya jangan menggunakan lebih dari tiga typeface yang berbeda, karena akan mengganggu konsentrasi.

 

Warna

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. Hal ini karena setiap warna memiliki emosi psikologi masing-masing. Contohnya seperti ini:

 

Selain tentang psikologi warna, Anda juga perlu memahami cara mengombinasikan warna supaya terlihat serasi dan enak dilihat. Salah satu caranya adalah mengikuti aturan 60-30-10. Aturan ini sering digunakan dalam berbagai macam desain. Berikut adalah salah satu contoh dan pengertiannya:

 

• 60% warna netral untuk background.

• 30% warna utama untuk sebagian besar elemen, seperti app bar dan menu.

• 10% warna aksen untuk hal-hal kecil, seperti warna tombol dan toggle.

Berikut adalah manfaat warna pada sebuah desain:

• Menentukan titik fokus : Anda bisa memberikan warna yang terang untuk mengarahkan pengguna menekan suatu tombol aksi.

• Branding : Sama seperti font, warna juga merupakan salah satu elemen branding yang paling kuat untuk mengenali suatu merek. Sebagai contoh Google konsisten menggunakan warna Biru, Merah, Kuning, dan Hijau untuk logo-logo aplikasi yang dibuatnya.

 

• Aksesibilitas : Gunakan warna yang kontras dengan latar belakangnya sesuai dengan Web Content Accessibility Guidelines (WCAG). Jika warna latar belakangnya terang, jangan gunakan warna teks yang terang juga.

 

Ikonografi

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.

Sebagai contohnya adalah simbol shut down pada komputer Anda.

 

Ia hanya berupa lingkaran dan garis, tetapi banyak orang tahu bahwa ikon ini merepresentasikan power pada sebuah perangkat.

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 biasanya digunakan untuk transisi dari satu halaman ke halaman lain, contohnya ikon tanda panah terbalik untuk ke halaman sebelumnya atau ikon rumah untuk menuju ke halaman Home.

Hal lainnya yang perlu Anda perhatikan adalah gambar. Seperti sebuah pepatah, “Sebuah gambar bernilai seribu kata”. Gambar dapat menjelaskan suatu hal yang tak bisa diungkapkan  dengan kata-kata, seperti foto produk asli yang ditawarkan pada marketplace. Gambar juga dapat membuat tampilan aplikasi menjadi lebih menarik dan hidup. 

Ilustrasi juga dapat mengubah emosi pengguna. Misalnya ketika kita salah mengakses suatu halaman pada website, biasanya akan muncul halaman error dengan kode 404. Berikut ini adalah contohnya:

 

Membuat tampilan halaman 404 yang menarik akan memberikan pengalaman tersendiri bagi pengguna. Ia sekaligus menunjukkan identitas brand yang kuat. 

Sama seperti elemen lainnya, salah satu tips dalam menerapkan ikonografi adalah konsistensi. Gunakanlah ikon dengan style yang sama untuk semua halaman. Jangan gunakan ikon dengan tipe solid dan outline secara bersamaan. Berikut adalah contoh perbandingannya:

 

Layouting (Mengatur Elemen)

Pada materi sebelumnya Anda telah mempelajari elemen-elemen dasar untuk membuat sebuah desain. Namun, komponen seperti tipografi, warna, dan ikonografi saja tidak cukup untuk membuat tampilan yang bagus. Hal lainnya yang perlu Anda perhatikan adalah layouting. Layouting merupakan cara untuk mengatur dan menata elemen pada suatu halaman.

Berikut adalah manfaat jika Anda mengatur layout dengan baik:

• Memastikan desain terlihat menarik dan rapi.

• Membantu pengguna berinteraksi.

• Membuat desain yang accessible.

Lalu, bagaimana cara membuat layout yang baik? Anda bisa saja langsung mencari inspirasi berbagai halaman yang sudah sering digunakan, seperti halaman home, login, dan checkout. Namun, di sini kita akan membahas dasar-dasar yang penting dalam mengatur halaman, yaitu grid, containment, dan space. Yuk, kita bahas satu per satu.

Grid

Pernahkah Anda merasa desain yang sudah dibuat tidak rapi? Sebagai contoh dalam membuat dua kolom daftar menu yang kita pelajari pada latihan wireframe. Anda mungkin tidak yakin apakah kedua desain memiliki lebar yang sama, atau jarak yang sama dengan pinggir halaman. Nah, untuk mengatasi itu, kita akan memanfaatkan Grid. 

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. Berikut ini adalah contohnya:

 

Dengan mengetahui letak masing-masing elemen ini pada suatu Grid, Anda dapat membuat sebuah elemen sejajar dengan elemen lainnya dengan mudah. 

Tidak cukup sampai di situ saja, ada juga yang namanya Layout Grid. Layout Grid adalah serangkaian kolom atau baris yang membantu Anda dalam membagi suatu halaman. Dengan memanfaatkan fitur ini, Anda dapat mendesain dengan lebih cepat. Berikut ini adalah contoh penggunaannya:

 

Gambar di atas adalah contoh layout grid dengan jumlah 4 kolom yang merupakan guideline dari Material Design. Dengan menggunakan Layout Grid, tampilan aplikasi Anda menjadi lebih rapi karena pembagian antar elemen menjadi presisi.

Containment

Containment adalah pembatasan bagian dalam desain supaya lebih mudah membaca informasi. Ada empat cara untuk memberikan batas antar informasi, yaitu :

1. Divider : Garis pembatas antar bagian informasi.

2. Border : Garis bingkai untuk mengelompokkan informasi.

3. Fill : Mengisi suatu area dengan warna yang berbeda.

4. Shadow : Bayangan yang bisa menambahkan kesan tiga dimensi.

Berikut adalah contoh implementasinya:

 

Dengan penambahan containment ini, pembagian informasi menjadi lebih jelas, bukan?

White Space

Tentu Anda sudah mengenal spasi. Anda sering menggunakannya untuk memisahkan antar kalimat supaya lebih mudah dibaca. 

"Bayangkanjikasebuahtulisantidakmenggunakanspasisepertiini."

Tulisan di atas pasti susah dibaca, bukan? Penggunaan spasi ini juga sangat berguna di dalam dunia desain, namanya yaitu Negative Space atau White Space. 

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. Selain itu, 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:

1. Line Spacing : Jarak antar baris pada sebuah paragraf teks.

2. Padding : Jarak ke dalam dari sebuah elemen.

3. Margin : Jarak ke luar dari sebuah elemen

Supaya lebih jelas, bandingkan kedua gambar berikut:

 

Contoh gambar di atas adalah perbedaan antara tidak menggunakan White Space dengan yang menggunakan White Space. Dapat dilihat desain yang menerapkan white space terlihat lebih rapi dan mudah dibaca. Berikut adalah penerapan Line Spacing, Margin, dan Padding pada desain tersebut:

 

Line Spacing digunakan untuk mengatur jarak antar teks pada satu paragraf. Kemudian ada Padding yang digunakan untuk membuat jarak ke dalam dari kotak yang dibuat. Lalu, yang terakhir ada Margin untuk memberikan jarak antar tombol..

Prinsip Desain Visual

Setelah mempelajari elemen dasar dalam desain visual dan cara mengaturnya, sekarang kita lanjut untuk belajar prinsip desain visual. Dengan menerapkan prinsip ini, desain yang Anda buat akan lebih enak dipandang. Apa saja prinsip tersebut? Yuk, kita kupas satu per satu.

Emphasis

Emphasis adalah suatu penekanan untuk memancing perhatian. Bayangkan seseorang yang berpidato tetapi nadanya datar-datar saja tanpa ada penekanan, pasti akan membosankan, bukan? Begitu juga dengan desain, penekanan diperlukan untuk membuat desain semakin menarik dan mengarahkan pembaca pada titik fokus tertentu, bisa berupa tombol atau kata tertentu. Lalu, bagaimana caranya?

Anda bisa memberikan penekanan pada suatu elemen dengan memberikan warna yang kontras, memperbesar ukuran, menggunakan tekstur, dan menebalkan kata. Penekanan ini tidak boleh sembarangan karena Anda harus menyesuaikannya dengan kebutuhan bisnis dan pengguna.

Sebagai contoh, lihatlah desain pada halaman keranjang ini:

 Di sini kita memperbesar ukuran dan menebalkan teks pada nama serta harga karena itulah yang paling dibutuhkan pengguna. Informasi tentang kustomisasi tetap ada, tetapi cukup dengan ukuran yang biasa saja, karena itu hanya informasi tambahan. Selanjutnya di sini juga diberikan warna pada tombol “Pesan” karena inilah tujuan utama pada halaman ini yang akan berguna untuk kebutuhan bisnis.

Hierarchy

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. Hal ini sama seperti ketika membuat dokumen, terdapat tingkatan-tingkatan dalam menuliskan judul seperti ini:

 

Supaya lebih paham, lihatlah kedua desain ini:

 

Cobalah untuk mencari bagian “Promo” dengan cepat. Tentu desain yang menggunakan hirarki lebih cepat, bukan?

Proportion

Scale dan proportion adalah dua hal yang berbeda tetapi saling berkaitan. Scale adalah konsep yang menjelaskan hubungan antara elemen tertentu dengan elemen lainnya. Sedangkan Proportion adalah konsep yang menjelaskan apakah perbedaan ukuran suatu elemen proporsional dan masuk akal atau tidak.

Sebagai contoh, lihatlah fitur untuk menambah dan mengurangi jumlah pesanan ini:

 

Jika salah satu ukuran tombol diubah, desain menjadi tidak proporsional dan tidak enak dilihat. Oleh karena itu, memastikan proporsi pada desain menjadi seimbang adalah hal yang perlu diperhatikan. Pastikan juga ukuran elemen memiliki besar yang sama pada halaman yang berbeda. 

Unity & variety

Unity adalah teknik untuk mengumpulkan elemen supaya terlihat selaras dan menjadi satu kesatuan. Sedangkan Variety adalah teknik untuk membuat variasi supaya desain terlihat menarik dan tidak terlihat monoton.

Sebagai contoh dari Unity dapat dilihat dari aplikasi Youtube Music berikut:

 

Seperti pada video rekomendasi, walaupun terdapat berbagai macam komponen seperti gambar, teks judul, dan nama artis. Namun, ia tetap seperti sebuah satu kesatuan elemen. Konsistensi juga berperan penting di sini, dengan menggunakan jenis dan ukuran huruf yang sama untuk header, desain tampak serasi dan terkesan sama.

Kemudian untuk contoh dari Variety dapat dilihat pada aplikasi Google Photos berikut:

 

Biasanya sebuah galeri memiliki jumlah kolom yang sama, tetapi di sini ada satu baris yang hanya menggunakan satu kolom yang menjadi pembeda dari elemen lainnya. Jadi tidak monoton kan? 

Pada tahap wireframe, mungkin Anda tidak memikirkan tentang beberapa teknik yang disebutkan tadi. Namun, ketika membuat mockup, inilah saatnya menerapkan prinsip-prinsip tadi untuk membuat desain yang menarik. Selamat berkreasi!.

Latihan Membuat Mockup

Anda telah mempelajari berbagai macam teori elemen dasar desain visual dan cara mengaturnya. Selain itu, Anda juga sudah belajar tentang prinsip-prinsip dasar yang membuat desain lebih rapi dan menarik. Nah, sekarang saatnya untuk menerapkan ilmu-ilmu tersebut dalam sebuah latihan membuat Mockup.

Mockup adalah desain yang menunjukkan hasil akhir produk yang bersifat statis. Ia berupa tampilan masing-masing halaman yang sudah dipoles dengan ilustrasi, ikon, warna, dan font yang berbeda sebagaimana produk aslinya. Pada latihan ini kita akan memanfaatkan Wireframe yang sebelumnya sudah kita buat sebagai referensi dalam membuat Mockup, yaitu sebuah halaman Home pada aplikasi pemesanan kopi seperti berikut: 

 

Sudah siap? Mari kita mulai berlatih dengan mengikuti langkah-langkah berikut:

Menyiapkan Project 

1. Silakan buka kembali project Figma pada latihan sebelumnya. Anda dapat menemukannya pada halaman utama Figma seperti berikut:

 

Anda juga dapat menggunakan tautan berikut untuk melihat wireframe dari studi kasus kedai kopi: Wireframe Aplikasi Pemesanan Kopi.

2. Supaya lebih mudah dalam pengaturan desain, buatlah halaman baru pada project tersebut. Caranya Klik tanda panah ke bawah pada pojok kanan atas. Kemudian klik ikon tambah (+) untuk Add new page.

 

Beri nama Hi-fi dan tekan Enter. Anda juga bisa mengganti nama halaman Page 1 dengan cara klik dua kali dan ganti namanya dengan Lo-fi. Sehingga, terdapat dua halaman seperti ini: 

3. Sama seperti ketika membuat Wireframe, mari kita buat Frame untuk halaman Home terlebih dahulu. Caranya Klik menu Frame tool (F) yang berbentuk seperti tanda hashtag (#) dan buat ukurannya sama dengan yang ada di Wireframe, yakni 360x788. Kemudian ganti namanya menjadi Home.

Latihan Memasukkan Gambar Banner

Pada latihan ini, Anda akan mengetahui cara menambahkan gambar ke dalam komponen beserta memahami tipe-tipe yang dipilih.

1. Kita mulai dari yang paling atas, yaitu bagian Banner. Namun, sebelum melangkah lebih jauh, unduh dan extract terlebih dahulu asset yang akan digunakan untuk materi ini pada tautan berikut:

o Asset Mockup Aplikasi Kedai Kopi

2. Untuk membuat banner, buat bentuk persegi panjang menggunakan Rectangle Tool (R) dengan ukuran 360x160.

 

3. Kemudian untuk memasukkan gambar banner ke dalam kotak, pilih elemen tersebut dan klik pada bagian thumbnail warna pada properti Fill. Lalu, ganti tipe pada dropdown yang ada di pojok kanan atas dari Solid menjadi Image.

 

4. Nah, sekarang Anda bisa menambahkan gambar dengan cara klik tombol Choose image dan pilih gambar Banner dari aset yang sudah diunduh tadi. Selain itu, Anda juga bisa melakukan drag and drop atau copy paste untuk memasukkan gambar.

  

5. Mantap! Gambar sudah tampil di halaman desain. Anda juga bisa mengubah tipe gambar dengan menggantinya melalui dropdown seperti berikut ini:

 

Ada empat pilihan tipe yang bisa Anda gunakan, antara lain:

• Fill : menyesuaikan ukuran gambar sesuai dengan ukuran elemen.

• Fit : memperlihatkan gambar secara penuh walaupun mungkin ada sisa ruang kosong.

• Crop : mengatur ukuran dan memindahkan gambar sesuka hati.

• Tile : menampilkan gambar sesuai ukuran aslinya, apabila ada sisa akan diulang-ulang.

Selain itu, Anda juga bisa memanipulasi suatu gambar dengan mengubah pengaturan pada Exposure, Contrast, Saturation, Temperature, Tint, Highlights, dan Shadows..

Latihan Memanfaatkan Grid & Padding 

Pada latihan ini, Anda akan memahami penggunaan grid dan padding untuk membuat desain yang rapi. 

1. Nah, kita lanjut untuk membuat kolom pencarian. Namun, supaya elemen ini terlihat rapi, gunakan Grid sebagaimana yang sudah kita pelajari pada materi Layouting. Untuk menambahkan grid pada suatu Frame, klik Frame Home → Klik Icon Tambah (+) pada properti Layout Grid → Klik icon untuk mengubah pengaturan → Ganti size (lebar) Grid menjadi 8px. Maka akan muncul Grid seperti ini:

 

2. Selanjutnya kita akan menerapkan prinsip layouting yang lain, yaitu White Space. Di sini Anda akan memberikan Padding dari pinggir halaman sejauh 16 px. Usahakan setiap elemen yang akan dimasukkan tidak melewati batas tersebut. Pada grid dengan lebar 8 px di atas, batasnya adalah 2 kotak (2x8=16 px). Sebagai contoh di sini kita akan menambahkan kolom pencarian menggunakan Rectangle (R) berukuran 328x32.

 

Dengan bantuan Grid ini, Anda bisa memastikan jarak elemen ke atas, kiri, dan kanan adalah presisi 16 px, bukan mengira-ngira saja. Tentu ini akan membuat desain Anda lebih rapi, kan?

 

3. Lanjutkan dengan mengganti warnanya menjadi putih (FFFFFF) dan ubah radius 8px seperti berikut:

 

4. Untuk menampilkan atau menyembunyikan Grid, Anda dapat mengaturnya melalui ikon mata seperti berikut atau menggunakan shortcut Ctrl+Shift+4

Latihan Menggunakan Ikon dari Material Design

Mari kita lanjutkan dengan menambahkan ikon pencarian. Sebenarnya bisa saja Anda membuat ikon sendiri. Namun, itu akan membutuhkan waktu, belum lagi gaya pada satu ikon dengan ikon lainnya bisa saja berbeda. Oleh karena itu, pada awal latihan ini kita memanfaatkan ikon dari Material Design. Ada dua cara untuk melakukannya, cara pertama yaitu langsung mengunduh ikon dari https://fonts.google.com/icons. Cara kedua yaitu memanfaatkan Plugin Material Design yang ada di Figma. Nah, untuk latihan ini kita akan menggunakan cara kedua.

1. Langkahnya yaitu klik logo Figma → Plugins → Browse plugins in Community.

 

Cara cepat lainnya yang bisa Anda lakukan adalah menggunakan shortcut Ctrl+/ untuk Quick Action. Kemudian, cari menggunakan kata kunci Plugin dan pilih Browse plugin in Community seperti ini: 

Fitur Quick Action ini ke depannya sangat berguna karena Anda bisa mencari berbagai macam aksi melalui fitur ini.

2. Selanjutnya cari Plugin dengan nama Material Design Icons dan klik Install. 

3. Setelah plugin berhasil terinstal, kembali ke halaman project dan klik kanan pada luar kanvas dan pilih Plugins → Material Design Icons.

 

4. Setelah tampil pop up, cari icon “search” dan drag and drop ke dalam kanvas seperti ini:

 

5. Selanjutnya tambahkan teks menggunakan Text Tool (T) dengan tulisan “Cari kopi pilihanmu!”. Lalu, ubah ikon dan teks tersebut menjadi warna abu-abu (BBBBBB) seperti berikut:

  

Latihan Mengganti Tipografi dan Margin

Pada latihan ini, Anda akan memahami cara mengustomisasi teks dan shortcut untuk mengetahui jarak antar elemen. 

1. Nah, mulai dari sini kita juga akan memikirkan tentang tipografi. Jika dilihat, teks di atas terlalu tebal untuk sebuah petunjuk kolom pencarian, maka di sini kita memilih font Inter dengan jenis Regular dan ukuran 14. Anda dapat mengubahnya pada properti Text pada panel sebelah kanan. Hasilnya terlihat seperti ini:

 

2. Jika dilihat pada panel setting terdapat berbagai macam properti untuk mengatur teks, berikut ini adalah beberapa contohnya:

 

• Line Height : Mengatur jarak antar baris.

• Letter Spacing : Mengatur jarak antar huruf.

• Auto Width : Mengatur lebar elemen menyesuaikan dengan panjang teks.

• Auto Height : Mengatur tinggi elemen menyesuaikan dengan jumlah baris teks.

• Fixed Size : Mengatur lebar dan tinggi dengan nilai tetap secara manual.

• Text Align : Mengatur rata kiri, tengah, kanan, atas, dan bawah.

3. Sebagai informasi, kita akan terus menggunakan typeface Inter pada keseluruhan teks supaya aplikasi terlihat konsisten, yang berbeda hanya jenis dan ukurannya saja. Berikut adalah contoh header yang menggunakan font Inter dengan jenis Bold dan ukuran 18:

 

4. Selain menggunakan Grid seperti contoh sebelumnya, Anda juga bisa melihat jarak antar elemen (margin) dengan klik elemennya terlebih dahulu, kemudian tahan Alt dan gerakkan kursor ke elemen lain. Sehingga, muncul jarak margin seperti berikut:

 

Untuk mengganti jarak margin, Anda bisa melakukannya melalui properti margin yang ada di sebelah kanan atau dengan cara pilih kedua elemen menggunakan Shift dan geser garis yang ada di tengah kedua elemen seperti ini:

 

Latihan Menggunakan Frame

Pada latihan ini, Anda akan mengetahui perbedaan Group dan Frame ketika ukuran komponen berubah.

1. Sebelum lanjut ke bagian filter kategori, Anda perlu menggabungkan elemen-elemen pada kolom pencarian. Jika pada latihan Wireframe kita menggabungkan elemen menggunakan fitur Group, di sini kita menggunakan Frame. Supaya mengetahui perbedaannya, ubahlah ukuran Group dan lihat apa yang terjadi.

 Seperti yang Anda lihat, ukuran ikon pencarian juga ikut membesar dan mengecil secara tidak proporsional. Nah, supaya ikon tetap proporsional, manfaatkanlah Frame.

2. Apabila sudah terlanjur menjadi Group, Anda bisa mengubahnya menjadi Frame melalui dropdown properti di panel kanan, seperti ini:

 

Namun, jika belum diubah menjadi Group, Anda bisa menggabungkannya dengan memilih elemen menggunakan Shift. Kemudian klik kanan dan pilih Frame selection (Ctrl+Alt+G).

 

Perbedaan elemen yang berupa Group atau Frame dapat dilihat pada ikonnya. Ikon Group berupa persegi putus-putus seperti ini:

 

Sedangkan ikon Frame berbentuk pagar (#) seperti ini:

 

3. Salah satu kelebihan Frame yaitu terdapat fitur Clip Content, di mana Anda dapat menyembunyikan elemen yang tidak dibutuhkan seperti ini:

 

Dapat dilihat walaupun kita mengubah ukuran Frame, elemen yang di dalamnya tidak ikut berubah.

4. Jika dilihat sekali lagi, radius pada sebelah kanan tidak terlihat. Supaya tetap terlihat, sesuaikan ukuran Rectangle dengan ukuran Frame. Caranya, ubah properti pada Constraint menjadi Scale seperti berikut:

 

Mantap! Kolom pencarian kini sudah selesai dan dapat dimodifikasi dengan mudah. Silakan kembalikan ukuran kolom pencarian ke ukuran sebelumnya untuk menyesuaikan dengan desain Wireframe.

Latihan Menggunakan Components

Pada latihan ini, Anda akan mengetahui cara untuk membuat dan memanfaatkan Component untuk komponen yang sering digunakan.

1. Bagian selanjutnya adalah filter kategori. Buat lingkaran dengan menggunakan Ellipse Tool (O) dengan jarak 12 px dari teks di atasnya. Tahan Shift untuk membuat lingkaran sempurna dengan ukuran 48x48. Kemudian, ubah properti Fill menjadi gambar Icon Category All seperti ini:

 

2. Lalu gunakan Text Tool (T) untuk menambahkan teks di bawahnya. Jangan lupa untuk mengatur margin teks dengan ikon di atasnya menjadi 8px. Konfigurasi selengkapnya seperti berikut:

 

Pastikan sudah menggunakan Auto Width dan Align Center supaya teks selalu dalam satu baris dan rata tengah.

3. Jika sebelumnya Anda sudah mengenal Group dan Frame, sekarang kita akan berkenalan dengan Components. Anda perlu menggunakan Components jika terdapat elemen yang digunakan berulang lagi pada sebuah desain. Untuk membuat sebuah Components, caranya cukup klik kanan pada elemen dan pilih Create Components.

 

Anda dapat melihat logo dari Component adalah seperti ini:

 

Anda juga dapat melihat semua Component yang sudah dibuat pada tab Asset yang ada di panel sebelah kiri seperti ini:

 

• Untuk mengetahui manfaat dari Component, buatlah Instance dengan drag and drop component dari Asset atau duplicate (Ctrl+D) component tersebut seperti ini:

 

Perbedaan dari Component dengan Instance dapat dilihat pada logonya seperti berikut:

 

Dapat dilihat logo dari Instance adalah berupa belah ketupat kosong, Sedangkan logo dari Component utama atau biasa disebut dengan Main Component adalah belah ketupat berisi pola seperti gambar di atas.

• Kelebihan dari penggunaan Component adalah jika terdapat perubahan pada Main Component maka semua Instance akan juga ikut berubah. Berikut adalah contohnya.

 

Dengan adanya fitur ini, Anda dapat membuat elemen yang konsisten dengan mudah, tanpa harus mengubah satu per satu ketika terjadi perubahan desain. Mantap, bukan?

• Walaupun begitu, Anda tetap bisa memodifikasi setiap instance sesuai keinginan. Sebagai contoh di sini setiap teks diganti menjadi seperti berikut:

 

Nah, walaupun teks telah diubah, Anda tetap dapat mengganti pengaturan dari teks pada satu tempat, seperti berikut:

 Sangat efisien, bukan? Karena banyak sekali manfaat yang didapatkan dari penggunaan Component, kita akan menggunakannya untuk setiap elemen yang digunakan berkali-kali seperti tombol, Card, App bar, dan lain sebagainya.

Sebagai tambahan, berikut adalah beberapa menu tambahan yang muncul jika Anda melakukan klik kanan pada instance:

 

• Reset all overrides : Menghapus modifikasi yang sudah dilakukan menjadi pengaturan awal seperti Main Component.

• Detach instance : Melepas instance menjadi elemen biasa (frame).

• Go to main component : Menuju ke lokasi Main Component.

• Push overrides to main component : Mengubah konfigurasi Main Component sesuai dengan konfigurasi pada instance yang dipilih.

Latihan Menerapkan Auto Layout dan Bulk Insert

Pada latihan ini, Anda akan mengetahui penerapan Auto Layout untuk mengatur orientasi, jarak, dan urutan beberapa komponen dengan cepat dan otomatis. Selain itu, Anda juga akan mengetahui cara untuk mengganti banyak gambar sekaligus dengan menggunakan bulk insert.

1. Untuk mengatur urutan dan jarak komponen dengan mudah, kita akan menggunakan salah satu fitur unggulan dari Figma, yakni Auto Layout. Caranya, pilih elemen yang ingin diatur kemudian klik ikon tambah (+) pada properti Auto Layout atau bisa juga dengan klik kanan dan pilih Add auto layout (Shift+A).

 

Dengan menggunakan Auto Layout, Anda dapat mengatur beberapa hal berikut:

• Mengatur orientasi komponen, apakah horizontal atau vertikal dengan mudah.

• Mengatur jarak margin antar elemen.

• Mengatur jarak padding yang ada di dalam Auto Layout.

• Mengatur alignment pada suatu konten.

• Mengubah urutan dan menambahkan elemen dengan cepat.

2. Di sini kami akan mencontohkan untuk menambahkan dua kategori baru pada list kategori tersebut. Namun sebelum itu, non-aktifkan dulu konfigurasi Clip Content pada Frame Home supaya dapat melihat setiap elemen seperti berikut:

 

Seperti yang dilihat, Anda dapat menambah dan mengubah urutan elemen dengan sangat mudah. Sangat membantu, bukan?

Jika di kemudian hari Anda ingin menghapus Auto Layout, lakukan langkah klik kanan dan pilih Remove auto layout (Alt+Shift+A) atau melalui ikon kurang (-) di sebelah kanan properti Auto layout.

 

3. Selanjutnya kita ingin mengubah gambar pada setiap ikon kategori. Tentu jika mengubah gambar satu per satu akan melelahkan, bukan? Nah, di sini ada sebuah tips untuk menambahkan banyak gambar sekaligus. Caranya, gunakan shortcut Ctrl+Shift+K dan pilih gambar-gambar yang ingin dimasukkan. Kemudian, pilih pada elemen mana gambar ingin dimasukkan.

 

Anda telah menyelesaikan desain menu filter kategori dengan cepat. Mantap! Masih banyak ilmu yang akan Anda pelajari. Tetap semangat, ya!.

Latihan Memanfaatkan Style dan Layout Grid

Pada latihan ini, Anda akan mengetahui cara untuk memanfaatkan Style untuk property yang sering digunakan dan mengetahui manfaat layout grid untuk membuat desain yang rapi dan terstruktur. 

1. Pada bagian awal menu, terdapat header teks dengan judul Menu Favorit. Jika Anda menggunakan Text Tool (T), ia akan membuat teks dengan konfigurasi teks terakhir seperti ini:

 

2. Nah, di sini kita akan menyimpan pengaturan style pada teks “Mau ngopi apa hari ini?” dan menerapkannya pada teks “Menu Favorit”. Berikut urutan langkahnya:

• Pilih teks yang ingin dijadikan style.

• Klik ikon titik empat pada samping properti Text.

• Klik ikon tambah (+).

• Beri nama style, sebagai contoh namanya adalah “HeaderText”.

 

Kemudian untuk menggunakan Style tersebut, cukup pilih teks → klik ikon titik empat → pilih style “HeaderText”.

3. Anda juga dapat mengubah style yang sudah disimpan dengan menekan ikon “Edit Style” pada nama Style seperti berikut:

 

Ketika style diubah, keseluruhan teks yang menerapkan style tersebut juga akan berubah. Tentu ini akan memudahkan Anda ketika terjadi perubahan desain atau font yang digunakan. Keren, bukan?Bukan hanya itu saja, dengan menggunakan tipografi yang konsisten, aplikasi akan terlihat menyatu dan terhubung satu sama lain. Ini merupakan salah satu prinsip dari desain visual, yakni Unity.

Jika Anda ingin melepaskan style pada suatu teks, tekan ikon “Detach style” pada sebelah kanan properti seperti ini:

 

4. Selain membuat Style pada Text, Anda juga bisa melakukan hal yang sama pada pengaturan Fill (Color), Stroke, dan Effects. Sebagai contoh, berikut adalah Color Style dengan nama MainTextColor yang diambil dari teks “Mau ngopi apa hari ini” yang bernilai 1D232E dan diimplementasikan di teks “Menu Favorit”.

 

5. Seperti yang sudah dijelaskan pada materi, selain Grid untuk menambahkan garis bantu berupa kotak-kotak, juga terdapat Layout Grid untuk menambahkan garis bantu berupa kolom atau baris. Caranya, klik ikon tambah (+) pada properti Layout grid → klik ikon Grid → ganti Grid menjadi Columns pada pojok kiri atas → ubah count menjadi 2, margin menjadi 16, dan Gutter menjadi 16 sesuai dengan panduan dari Material Design.

 

6. Dengan menggunakan dua kolom ini, Anda dapat membuat daftar menu dengan lebih presisi seperti berikut:

 

Simak detail properti untuk setiap komponen tersebut di bawah ini:

• Margin gambar ke teks header : 12.

• Gambar : size 156x156, corner radius 8.

• Teks Judul : Inter Bold, size 14, line height : 20, warna 1D232E (MainTextColor).

• Teks Harga : Inter Medium, size 10, line height : 20, warna 1D232E (MainTextColor).

Perhatikan di sini kita menggunakan ukuran dan ketebalan yang berbeda untuk menunjukkan Hierarchy seperti yang sudah kita pelajari sebelumnya.

7. Sama seperti sebelumnya, terapkan Auto Layout (Shift+A) supaya ketika teks judul lebih dari satu baris, Anda tidak perlu mengaturnya lagi. Semuanya akan diatur secara otomatis oleh Auto Layout. Anda juga dapat mengatur jarak antar elemen di dalamnya menjadi lebih mudah.

 

8. Karena desain daftar menu ini akan digunakan berulang kali, kira-kira apa yang harus dilakukan selanjutnya? Ya, betul! Kita akan membuatnya menjadi Components (Ctrl+Alt+K). Setelah selesai membuat Components, buat instance untuk menu kedua menggunakan Alt+Drag.

 

9. Untuk memastikan setiap komponen tertata teratur, gabungkan kedua Component tersebut dengan menggunakan Auto Layout (Shift+A). Kemudian Duplicate (Alt+Drag) dan buat Auto Layout (Shift+A) kembali seperti ini:

 

Sehingga, hasil akhir pada layer terlihat seperti ini:

 

Di sini Anda juga dapat melihat ikon Auto Layout yang menyesuaikan dengan orientasinya, ada yang horizontal dan vertikal.

10. Langkah terakhir pada bagian ini yaitu menyesuaikan teks dan gambar sesuai yang sudah dipelajari sebelumnya seperti ini:

 

Latihan Menambahkan Effect dan Ikon pada Bottom Navigation

Pada latihan ini, Anda akan memahami cara untuk menambahkan efek berupa bayangan dan ikon pada komponen Bottom Navigation.

1. Anda telah mencapai bagian akhir dari pembuatan mockup ini, yaitu pembuatan Bottom Navigation. Buat terlebih dahulu Rectangle (R) dengan ukuran bebas dengan warna putih (FFFFFF) seperti berikut:

 

2. Loh, kok putih? Kalau tidak kelihatan bagaimana? Di sinilah peran efek Shadow sebagai Containment yang akan kita tambahkan. Caranya yaitu pilih elemen → Klik ikon tambah (+) pada properti Effects → klik icon Drop Shadow → ubah pengaturan seperti di bawah ini:

 

Seperti yang Anda lihat, Anda dapat mengatur beberapa hal berikut:

• Koordinat lokasi bayangan

• Tingkat blur (pengaburan)

• Tingkat spread (penyebaran)

• Warna bayangan dan persentase transparansi

3. Langkah selanjutnya adalah menambahkan ikon. Buka plugin Material Design Icons terlebih dahulu dan masukkan beberapa ikon dengan nama berikut:

• Home

• Shopping Cart

• Assignment

• Account Circle

 

4. Kemudian rapikan menggunakan Tidy Up (Ctrl+Alt+Shift+T) dan Align Vertical Center (Alt+V).

 

Sehingga, hasilnya menjadi seperti ini: 

5. Kemudian tambahkan teks menggunakan Text Tool (T) dengan spesifikasi Inter Medium, dan ukuran 10 di bawah masing-masing ikon. Pastikan juga menggunakan Text Align Center supaya ketika ada perubahan, teks tetap di tengah.

 

6. Kemudian gabungkan setiap ikon dan teks menjadi Frame dengan klik kanan → Add auto layout (Shift+A). Kemudian atur alignment di tengah supaya ikon tetap berada di tengah seperti ini:

 

7. Kemudian gabungkan Rectangle background dan keempat elemen menggunakan Auto Layout dan lihatlah apa yang terjadi.

 

Rectangle background otomatis hilang dan efek shadow berpindah ke Frame 13 merupakan hasil dari Auto Layout. Itulah fitur dari Figma supaya penggunaan elemen menjadi efisien.

8. Jika dilihat kembali, ukuran setiap ikon berbeda-beda menyesuaikan dengan panjang teks karena efek dari Auto Layout, sehingga jarak antar ikon bisa tidak proporsional seperti ini:

 

Best-practice ketika Anda ingin membuat ikon adalah menggunakan Fixed Size daripada Hug Content pada setiap elemen. Berikut ini adalah contohnya:

 

Di sini kita juga mengatur jarak elemen yang ada di dalam Auto Layout supaya ada white space di antara ikon.

9. Terakhir, untuk memberikan Emphasis (penekanan) pada lokasi halaman sekarang, kita akan memberikan warna untuk ikon Home dengan warna coklat tua (886345) dan abu-abu muda (BBBBBB) untuk ikon lainnya. Ganti semua elemen di dalam satu Frame sekaligus dengan mengganti properti pada Selection colors (bukan pada Fill) seperti ini:

 

10. Hore! Mockup halaman Home telah selesai. Berikut adalah hasil akhir dari latihan desain ini:

 

Keren! Anda telah belajar banyak hal pada latihan Mockup kali ini. Anda sudah bisa memanfaatkan fitur Figma seperti Frame, Auto Layout, Component dan Style. Kemudian mengetahui cara memasukkan tipografi, warna, dan ikon dengan cepat. Berlanjut dengan mengatur elemen menggunakan Grid, Containment dengan efek Shadow, dan White Space menggunakan padding dan margin. Tidak ketinggalan, Anda juga menerapkan beberapa prinsip desain visual seperti Emphasis, Hierarchy, Proportion, dan Unity. 

Nah, sekarang adalah giliran Anda untuk membuat mockup desain yang sesuai dengan tema studi kasus Anda sendiri. Berikut adalah contoh lengkap dari aplikasi pemesanan kopi:

 

Anda juga dapat melihat Project Figma dari mockup tersebut pada tautan berikut

• Mockup Aplikasi Pemesanan Kopi

Bersambung ke:

Design System