3 Tips agar proses high fidelity pada desain website menjadi lebih cepat

Dwinawan
Insight
Published in
4 min readOct 12, 2018

Apa itu High Fidelity?
Adalah proses mengubah wireframe atau sketsa menjadi sebuah desain yang presisi dari segi ukuran, warna, bentuk dan juga konten di dalamnya

Suatu hari… Andi mendapatkan tugas untuk membuat sebuah desain website.

Andi telah mengetahui kebutuhan bisnisnya, Andi telah mengetahui kebutuhan user nya,

Andi juga telah mengerjakan struktur halamannya atau wireframe nya bersama para stakeholder, Andi telah mengetahui informasi apa saja yang harus ditampilkan.

Kini saatnya Andi mengubah sketsa atau wireframe menjadi desain high fidelity

Lalu, Andi membuka software design andalan nya.

Selanjutnya Ia mengklik menu File-New. Dan munculah sebuah artboard putih di layar komputer nya.

30 menit kemudian…. artboard itu tetap putih, tidak ada perubahan. Andi bingung mau memulai mendesain dari mana.

Jika Anda pernah mengalami pengalaman seperti Andi, maka tips tips di artikel ini semoga bisa membantu Anda.

Tips Pertama: Fokus di satu bagian dulu

Saat membuat desain website, jangan langsung membuat Artboard atau Canvas yang panjang seperti ini

Kenapa? Dengan ukuran canvas atau artboard yang panjang, sering memancing pikiran untuk memikirkan “bagian ini bagusnya seperti apa ya?” , “bagian itu nanti layoutnya bagaimana ya?”

Anda bisa mencoba untuk fokus di satu bagian dulu. Buatlah Artboard atau canvas yang luasnya hanya untuk bagian tersebut

Fokus di bagian tersebut hingga selesai,

Setelah bagian tersebut selesai, pilih bagian lain yang akan dikerjakan. Lalu ulangi langkah sebelumnya. Buat Artboard / Canvas yang ukurannya sesuai dengan bagian tersebut.

Fokus di bagian tersebut hingga selesai

Setelah itu rangkai menjadi satu

Ulangi langkah langkah tersebut hingga satu halaman website selesai

Inti dari tips ini adalah menjaga fokus pikiran. Karena salah satu hal yang membuat proses desain menjadi lama adalah pikiran yang tidak fokus (terdistraksi)

Tips Kedua: Batasi Referensi

Saya pernah memulai mendesain dengan mencari referensi sebanyak banyaknya. Harapannya agar mendapatkan ide segar.

Setelah menemukan beberapa referensi, saya melanjutkan mencari referensi lainnya. Dan akhirnya saya mendapatkan banyak referensi.

sumber: dribbble.com

Setelah itu, saya melihat lihat semua referensi itu dan bingung mau menggunakan referensi yang mana.

Di lain waktu, saat memulai mendesain, saya mengumpulkan hanya 2 referensi. Referensi pertama untuk warna dan referensi kedua untuk layout serta typography (Teks).

Sumber https://dribbble.com/shots/3928467-Feead-mobile-app
Sumber: https://dribbble.com/shots/3488322-InVision-Design-Education-Web-Portal

Hasilnya cukup efektif. Dengan hanya 2 referensi , membuat pikiran menjadi lebih fokus dan mendorong untuk segera mengaplikasikan referensi tersebut menjadi seperti dibawah ini

Ada quote yang menarik (saya lupa siapa yang pertama kali mengatakan nya):

Referensi itu seperti gula. Sedikit membuat enak. Terlalu banyak membuat eneg.

Tips Ketiga: Di 30 menit pertama, paksa diri untuk langsung memulai

Anda pernah mengalami hal seperti ini?….

Anda melihat kamar Anda sangat berantakan. Lalu Anda mulai dengan merapikan sprei kasur, lalu menata bantal, lalu menata buku dan barang barang lainnya hingga kamar Anda terlihat rapi.

Awalnya terasa berat untuk merapikan kamar, tapi ketika mulai merapikan, tubuh jadi terpancing untuk melanjutkan, hingga kamar menjadi rapi. Bahkan ketika kamar sudah rapi, masih saja mencari cari apa yang masih bisa dirapikan.

Anda bisa mempraktekkan hal tersebut saat memulai mendesain.

Dalam 30 menit pertama, cobalah untuk tidak mencari referensi. Langsung tempatkan semua elemen elemen pada Artboard / Canvas putih Anda. Paksakan diri Anda selama 30 menit untuk terus mendesain.

Jika Anda berhasil memaksakan diri Anda selama 30 menit, Maka besar kemungkinan ide ide segar akan keluar dengan sendirinya.

Semoga bermanfaat :)

--

--

Dwinawan
Insight

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_