Mari kita UXploration dengan fake project #2

Tutorial Jun 16, 2020

Tulisan ini adalah lanjutan dari UXploration part 1. Sebaiknya jika kalian belum membaca part pertama, coba kalian baca dari awal agar tahu tahap sebelum ini dan terbiasa runtut membaca.Oke pada part ini kita akan belajar membedah apa saja yang kita butuhkan untuk mendesain sebuah UI.

Apakah ini kita langsung implementasi mendesain UI?

Wohoho tidak boboho, langkah kita masih jauh seperti kamu mendapatkan si dia...

Dalam step ke 2 ini kita analisis data apa saja yang kita perlukan sampai menetukan warna,font,icon dan visual lainnya.Oh iya waktu itu saya lupa memberi batasan UI yang dibuat. Yap batasan UI yang kita akan buat nanti halaman beranda dan detail makanan saja. Kenapa tidak sampai full? ya nanti sisanya kalian bisa UXploration sendiri dengan kreativitas kalian.

UX Work: Woman's hands drawing a wireframe
Photo by Kelly Sikkema / Unsplash

Jadi step kali ini, apa saja yang harus kita lakukan?. Dalam tahap ini ada 4 tahap yaitu....

Cari Moodboard/Referensi

Yoi ini pasti, yang pertama kita cari moodboard atau referensi kalian bisa cari manapun dribbble,behance,uplabs, atau yang lain.Manfaat moodboard sendiri adalah memberikan rekaan kepada klien,mengorganisir ide dan memberikan kesempatan untuk bereksperimen.

Review: Evernote.design, kitabnya para designer
Mencari sebuah referensi adalah salah satu kegiatan wajib yang dilakukan para designer untuk mendapatkan ilham saat mendesain suatu halaman aplikasi ataupun mendesain grafis. Tak jarang para desainer mencari referensi selain dengan cara sebat sama nyuprut ipok mereka juga cari dari berbagai penjuru …

Nah disini saya mencari referensinya dari dribbble, sudah menemukan beberapa moodboard yang nantinya akan menjadi referensi saya dalam mendesain UI.

Source: https://dribbble.com/shots/9388179-Delivery-App
Source: https://dribbble.com/shots/6683848-Book-a-restaurant-table-and-order-online-free-ios-kit

Analisis Komponen UI

Dalam artikel yang dibuat om Dwinawan, beliau menjelaskan tips menyusun layout UI. Ya ini sangat berguna sebelum esekusi UI.

  1. Taruh semua komponen yang diperlukan
  2. Pilih mana yang komponen utama dan pendukung
  3. Ubah setiap komponen menjadi elemen UI
  4. Susun elemen elemen UI tadi sesuai dengan urutan kebutuhan dari user
  5. Pertimbangkan Faktor Scalability
  6. Persiapkan layout untuk semua kondisi
Tips menyusun layout UI untuk app atau website
Salah satu proses dalam mendesain sebuah User Interface adalah mendesain tata letak atau layout. Berikut adalah studi kasus sebuah konsep aplikasi saat proses pembuatan layout. Langsung taruh semua…

Yang kita perlu garis bawahi adalah point 1 dan 2, untuk part ini. Di poin pertama taruh semua komponen yang diperlukan, iya benar exercise semua komponen yang diperlukan tanpa harus memikirkan tata letak dulu, Kemudian pertimbangkan informasi apa yang paling penting untuk dilihat oleh user. Informasi yang paling penting akan menjadi komponen utama dan selain itu akan menjadi komponen pendukung. Sebagai contoh untuk UXploration kali ini saya sudah memilah komponen yang diperlukan pada halaman ini:

Komponen Utama: Nama Restaurant (sebagai nama aplikasi),Foto Makanan, Nama Makanan.

Komponen Pendukung: Deskripsi Makanan,Alamat,Rating dan Harga.

Bikin Guideline

Guideline sendiri hampir sama dengan Design System, namun untuk skala kecil disini guideline yang dimaksud hanya berupa seperti ukuran font,icon,jenis font yang dipakai hingga warna dasar apa yang digunakan.Agar lebih mempermudah dan mempercepat menentukan guideline, saya mengambil:

Font: Roboto dengan tipe medium,reguler dan light ukuran 16pt (rekomendasi ukuran UI pada mobile)

Warna: hanya mengambil beberapa warna dari Atlassian.design

Icon: Feather Icon  atau juga bisa install pluginnya.

Aset Gambar/Foto: Foodiesfeed

8 Rules for Perfect Typography in UI
Typography plays an important role in User Interface, and improving your typographic design is an important step in improving both UI and UX.
Source: https://www.atlassian.design/

Dan berikut hasil guideline sederhana yang saya buat

Beberapa aset yang saya gunakan

Tentukan tools yang akan digunakan

Untuk tools sendiri tidak harus 'mematok' satu saja kalian bisa menggunakan apapun senyaman kalian. Jika bisanya pake sotoshop,sketch atau yang lain tidak masalah. Tapi yang harus diingat kenapa kita harus menentukan tools yang akan digunakan? Selain untuk dokumentasi portofolio kalian, tools ini berguna memberi tahu client/agency/startup jika kalian mendapatkan proyek akan dikerjakan menggunakan apa dalam tanda kutip skill kita mumpuni di software/tools ini. Nah disini saya akan menggunakan tools figma. Yang nantinya setiap proses dan hasil temen temen bisa lihat.

Kesimpulan:

Pada part UXploration #2, kita sudah belajar analisis data apa saja yang kita perlukan sampai menetukan warna,font,icon dan visual lainnya. Untuk detailnya sebagai berikut:

Tools: Figma

Font: Roboto ukuran 16pt

Warna: hanya mengambil beberapa warna dari Atlassian.design

Icon: Feather Icon

Aset Gambar/Foto: Foodiesfeed

Oke cukup sekian dulu UXploration kali ini tunggu part 3. Yang dimana kita akan esekusi menjadikan User Interface.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.