Proses Mengubah Wireframe menjadi High Fidelity + Tutorial Design

Pada artikel ini, kita akan membahas proses mengubah wireframe menjadi high fidelity.

Ini adalah wireframe untuk halaman depan sebuah aplikasi pencarian tempat makan. Langkah apa yang harus dilakukan untuk mengubah menjadi High Fidelity? Yuk kita bahas.


1. Apakah sudah memiliki guideline?

Jangan buru buru membuka aplikasi Sketch, Adobe XD atau Photoshop.

Jika kita bekerja di sebuah perusahaan yang telah memiliki guideline ataupun design system. Maka kita harus mengikuti aturan aturan tersebut.

Jika kita bekerja secara freelance dengan klien, maka tanyakan dulu ke klien, apakah mereka sudah memiliki guideline atau design system? Jika sudah, maka minta mereka untuk mengirimkan dokumentasi nya.

Kenapa sih musti mengikuti guideline?
Jawaban cepetnya adalah, untuk menjaga konsistensi design dan juga mempercepat proses development. Detailnya kita bahas di artikel tersendiri

2. Jika belum memiliki guideline atau design system?

Jika memang belum ada guideline atau design system yang harus diikuti, maka diskusikan dengan anggota tim, ataupun diskusikan dengan developer ataupun diskusikan dengan klien hal berikut….

“Apakah visual style nya mau mengikuti guideline dari iOS, atau Android (Material Design), atau akan membuat visual style tersendiri?”

Jika mengikuti guideline dari iOS ataupun Android, maka sebagai designer kita harus membaca aturan aturan tersebut. Bisa diakses disini


3. Jika keputusannya adalah membuat visual style tersendiri?

Sekali lagi jangan terburu buru untuk membuka Sketch, Adobe XD atau Photoshop.

Analisa dulu elemen elemen yang akan kita buat menjadi high fidelity design. Kalau kita lihat wireframe diatas, maka urutan elemennya adalah sebagai berikut:

  1. Elemen Kolom Pencarian (Search Bar)
  2. Elemen untuk menampilkan Kategori Makanan
  3. Elemen untuk menampilkan tempat makan terdekat

4. Cari Referensi

Setelah menganalisa elemen elemen apa saja yang akan di design, maka selanjutnya adalah mencari referensi untuk tiap elemen tersebut.

Untuk mencari referensi, kalian bisa menggunakan situs mobbin.designSebuah situs yang mengumpulkan screenshot dari aplikasi aplikasi.

Contohnya, untuk mencari referensi elemen kolom pencarian. Kita bisa melihat design kolom pencarian aplikasi seperti Uber , AirBnb atau aplikasi yang lain.

— Tips mengumpulkan referensi:

“Jangan banyak banyak. Referensi itu seperti gula, sedikit bikin enak, kebanyakan bikin eneg”

Dengan mengumpulkan referensi, bisa memberikan kita pandangan baru tentang bagaimana mendesain sebuah kolom pencarian ataupun bagaimana menempatkan kolom pencarian.

Untuk elemen menampilkan kategori makanan, kita juga bisa mengumpulkan referensi dari aplikasi aplikasi yang sudah ada


5. Mulai membuat High Fidelity Design

Kini buka aplikasi designmu. Kita mulai dari membuat canvas atau artboard.

Karena ini adalah aplikasi iOS, maka untuk Artboard nya saya menggunakan ukuran 375px X 667px


Setelah itu tambahkan status bar diatas. Untuk status bar nya ini kalian bisa mendownload resource nya disini


Setelah itu, buat teks “Home” sebagai Judul Halaman. Berikut spesifikasi teks-nya:

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 28px
  • Weight nya Heavy
  • Jarak antar huruf nya 0.5 (di Sketch)
  • Jarak dengan pinggir kiri halaman: 20px

Setelah itu menambahkan background gradasi. Berikut spesifikasi gradasi nya

  • Bagian Atas (Warna #F5F6F8 | Opacity: 0 dari 100)
  • Bagian Bawah (Warna #F5F6F8 | Opacity: 100 dari 100)

Setelah itu buat kolom pencariannya. Berikut adalah spesifikasi dari kolom pencariannya

  • Width (Panjang): 335px
  • Tinggi (Height): 50px
  • Background: #FFFFFF
  • Radius: 10
  • Shadow (Warna: #697E99 | Opacity: 10 dari 100 | X: 0 | Y: 10 | Blur: 20)

Lalu tambahkan teks di dalam kolom pencarian sebagai placeholder. Berikut spesifikasi teksnya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 14px
  • Weight nya Regular
  • Warna #BEC4CD
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu tambahkan icon di dalam kolom pencarian.

Untuk icon nya kalian bisa menggunakan icon dari material design, kalian bisa mendownloadnya disini


Setelah itu tambahkan teks “Category”. Berikut spesifikasi dari teks nya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 20px
  • Weight nya Bold
  • Warna (Warna: #000000 | Opacity: 80 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu buat 3 kotak untuk menampung gambar. Berikut spesifikasi dari 3 kotak

  • Ukuran tiap kotak: 130px X 130px
  • Jarak antar kotak: 15px

Setelah itu tambahkan teks dibawah setiap kotak sebagai title. Berikut spesifikasi teksnya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 15px
  • Weight nya Bold
  • Warna (Warna: #000000 | Opacity: 80 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)
  • Jarak dengan kotak atasnya: 10px

Setelah itu tambahkan teks dibawah setiap title. Berikut spesifikasi teksnya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 12px
  • Weight nya SemiBold
  • Warna (Warna: #000000 | Opacity: 40 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu, tambahkan efek shadow pada 3 kotak. Berikut spesifikasi shadow nya

  • Warna: #54677F
  • Opacity: 25 dari 100
  • X: 0
  • Y: 10
  • Blur: 20

Setelah itu masukkan gambarnya. Gambar saya ambil dari Unsplash.com


Setelah itu, tambahkan persegi panjang dengan dengan radius sehingga berbentuk oval. Berikut spesifikasinya

  • Width: 30px
  • Height: 15px
  • Radius: 200
  • Background: #4BC75F

Setelah itu tambahkan teks “NEW”, di dalam persegi panjang hijau. Berikut adalah spesifikasinya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 7px
  • Weight nya ExtraBold
  • Warna (Warna: #FFFFFF)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu, tambahkan tiga garis di bagian kanan atas sebagai icon menu.


Setelah itu tambahkan lingkaran merah di dekat icon menu, sebagai penanda terdapat notifikasi


Setelah itu tambahkan teks “Near You”. Berikut spesifikasinya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 20px
  • Weight nya Bold
  • Warna (Warna: #000000 | Opacity: 80 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu tambahkan kotak putih dibawah Teks “Near You” untuk menampilkan tempat makan terdekat. Berikut spesifikasi kotak putihnya

  • Width: 335px
  • Height: 198px
  • Background: #FFFFFF
  • Shadow (Warna: #697E99 | Opacity: 10 dari 100 | X: 0 | Y: 10 | Blur: 20)

Setelah itu tambahkan Nama tempat makan nya. Berikut spesifikasinya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 18px
  • Weight nya Bold
  • Warna (Warna: #000000 | Opacity: 80 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu tambahkan icon bintang sebagai rating di sebelah kanan

Untuk icon nya kalian bisa menggunakan icon dari material design, kalian bisa mendownloadnya disini


Setelah itu tambahkan icon lokasi.

Untuk icon nya kalian bisa menggunakan icon dari material design, kalian bisa mendownloadnya disini


Setelah itu tambahkan keterangan jarak tempat makannya. Berikut spesifikasi teks nya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 12px
  • Weight nya Regular
  • Warna (Warna: #000000 | Opacity: 40 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu tambahkan informasi jumlah reviews. Berikut spesifikasi teks nya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 12px
  • Weight nya Regular
  • Warna (Warna: #000000 | Opacity: 40 dari 100)
  • Jarak antar huruf nya 0.5 (di Sketch)

Setelah itu, tambahkan 3 kotak untuk menampung gambar. Berikut spesifikasinya

  • Width: 92px
  • Height: 92px
  • Jarak antar kotak: 10px
  • Jarak kotak kiri dengan pinggir kiri box putih: 20px
  • Jarak kotak kanan dengan pinggir kanan box putih: 20px

Setelah itu masukkan gambarnya


Setelah itu tambahkan ornamen teks “Home” di bagian atas. Berikut spesifikasi teksnya

  • Font Nunito Sans (Kalian bisa mendownload nya disini)
  • Ukuran 110px
  • Weight nya Black
  • Warna (Warna: #274871 | Opacity: 5 dari 100)
  • Jarak antar huruf nya 0 (di Sketch)

Setelah Selesai?

Jangan lupa untuk meminta feedback kepada teman atau anggota team. Dan yang terpenting adalah meminta feedback kepada developer. Karena mereka lah yang akan mengeksekusi design mu menjadi aplikasi sungguhan.

Tanyakan ke developer, apakah elemen seperti ini memungkinkan untuk dibuat atau tidak.


Semoga Bermanfaat