Tahap Awal Pembuatan UI dengan Wireframing

desk-office-pen-ruler

Pembuatan user interface memiliki proses yang tidak sedikit, banyak aspek dan hal yang harus dipertimbangkan dalam pembuatannya. Salah satu teknik dalam membuat rancangan user interface adalah wireframing. Teknik ini merupakan pembuatan prototype untuk sebuah user interface yang bisa menjadi brief atau panduan dalam mendesain dan membuat code dari user interface yang telah di buat wireframingnya.

Wireframing juga merupakan tool yang sangat penting untuk desain produk dan pengembangan sebuah interface software. Selain itu wireframing merupakan media untuk berkomunikasi antara Interaction & UX Designers and Information Architects, Graphic Designer, dan Developer. Dalam sebuah user interface development ketiga orang inilah yang memegang peranan penting terciptanya sebuah produk.

Interaction & UX Designers and Information Architects menggunakan wireframing untuk menjelaskan user workflow. Biasanya hasil wireframing dikombinasikan dengan flowchart dan story board dari rancangan product yang akan disampaikan kepada graphic designer dan programer.

Graphic Designer menggunakan wireframing untuk membuat desain tampilan dari rancangan yang sudah dibuat oleh Interaction & UX Designers and Information Architects. Seorang desainer grafis lebih mengembangkan hasil wireframing pada proses kreatifnya. Hasilnya adalah menciptakan mockup design, prototype interaktif, dan final design yang akan di pakai oleh user.

Developers menggunakan wireframing untuk membuat code dari desain yang sudah dibuat. Dengan menggunakan wireframing maka alur dan rancangan gambar akan semakin jelas sehingga developer lebih mudah untuk membuat code dari user interface yang akan dibuat.

OLYMPUS DIGITAL CAMERA

Wireframing merupakan proses yang detail bagaimana sebuah produk akan terbentuk jika wireframingnya jelas. Ada beberapa pin penting yang harus dipertimbangkan ketika melakukan proses wireframing diantaranya :

  1. Memilih Style
    Style disini menuntut pembuat wireframing untuk menciptakan sebuah pattern design yang nantinya akan digunakan dalam setiap proses wireframingnya untuk mengembangkan sebuah produk. Riset untuk membuat style yang universal juga tidak mudah tentunya, banyak elemen-elemen yang biasa digunakan dalam user interface misalkan button, input text, dropdown, dan lain-lain. Membuat style design wireframing dari setiap elemen dengan universal juga tentu tidaklah mudah, anda perlu mencoba pada beberapa produk sehingga tercipta pattern yang universal.
  2. Memilih Tool dan Media
    Banyak tool dan media yang bisa kita gunakan untuk membuat sebuah wireframing bisa menggunakan software, sketching, papercut, atau stenciling. Jika menggunakan software tentunya tool dan stylenya sudah praktis, banyak tersedia berbagai macam variasi, kita tinggal fokus pada flow dari user interface yang akan kita buat.
    Untuk cara menggambar manual biasanya menggunakan metode sketching dan stenciling, metode ini menggunakan alat tulis dan kertas untuk memproduksi sebuah wireframing. Perbedaan dari kdua metode ini adalah pada prosesnya, sketching biasanya menggunakan varian tool yang lebih banyak seperti pensil, crayon, balpoint, dan lain-lain sehingga hasilnya lebih detail dengan banyak coretan. Untuk metode stenciling lebih rapi dari metode sketching, gambarnya lebih clean dan modern karena tool yang digunakan hanya balpoint dan selembar kertas serta penggaris, jadi lebih terukur.
    Metode papercut adalah metode yang berbeda, biasanya metode ini menggunakan sistem print dan dibuat semacam clipping yang di tempel kembali di dalam sebuah kertas. Sususnan clipping paper yang sudah dipotong tadi dibentuk menjadi wireframing.

Kunci dari wireframing adalah bagaimana kita bisa menyampaikan detail dari produk yang akan kita buat. Dengan wireframing yang bagus hasil produk yang jadi tentunya akan semakin bagus dan lebih cepat dalam pengerjaannya.

Aulia Arif Wardana

Post A Reply

Translate »