Dalam pembuatan sebuah website pastinya memerlukan tampilan UI/UX yang sesuai standard an menarik bagi user. Dalam pembuatan desain user interface ini memiliki aturannya tersediri. Bagi yang belum mengerti apa itu user interface memiliki arti tampilan dalam sebuah website yang digunakan untuk berinteraksi antar platform seperti computer, tablet, dan ponsel smartphone atau perangkat gadget lainnya yang dapat mengakses website yang dapat di mengerti oleh user.
Dalam pembuatan desain user interface (ui/ux) ada beberapa hal yang harus di ketahui terlebih dahulu, yaitu:
- Mengidentifikasi masalah yang akan di selesaikan
- Memiliki kemampuan product knowledge yang baik
- Menganalisa dan melakukan riste tampilan UI dari competitor
- Mengumpulkan data untuk semua produk secara keseluruhan
Setelah mengetahui apa saja yang akan dilakukan dalam pembuatan desain user interface, step selanjutnya adalah membuat desain pada wireframe, membuat mockup, kemudian membuat prototype.
Membuat Wireframe
Wireframe adalah sebuah rancangan awal dalam sebuah pembuatan desain untuk web yang dilakukan secara manual dengan menggunakan photoshop. Wireframe sendiri dapat di berupa sketsa yang di gambar dengan tangan secara sketch, gambar visual yang di buat dengan software atau halaman dengan menggunakan coding tertentu.
Kelebihan dari penggunaan wireframe ini dapat memberikan tampilan website lebih detail dan jelas dari elemen yang ada tentang bagaimana developer akan membuat coding untuk website. Dan memperlihatkan desain yang lebih interaktif dari layout yang ada pada keseluruhan di page website, yang pastinya mempermudah developer membuat website.
Pembuatan wireframe dapat menggunakan beberapa tools, salah satunya flowchart atau yang juga disebut dengan mind mapping sofeware diantaranya; Visio, web prototyping software diantaranya; Gliffy, hingga XHTML Wireframes.
Baca juga: Manfaatkan designer untuk membantu proses development website
Mendesain Mockup
Pembuatan desain user interface pastinya memerlukan mockup. Lalu apa itu mockup?
Mockup adalah sebuah visual preview dari konsep awal pembuatan desain yang diberikan efek visual yang nyata sehingga bentuknya mirip layaknya desain sungguhan. Dalam mendesain website, pembuatan mockup ini menjadi step yang harus dilakukan, terlebih untuk mengukur UI/UX yang baik sebelum hasil final desain interface di implementasikan.
Membuat desain mockup image bisa di buat di Photoshop, sedangkan untuk pembuatan mockup sebuah website bisa di lakukan di Mockingbird, MockFlow, HotGloo, Invision, Proto.io dan masih banyak lagi software mockup lainnya.
Untuk membuat desain user interface tampilan mockup kamu perlu memperhatikan beberapa hal:
- Pemilihan warna yang konsisten dan selaras dengan thema website atau identitas dari brand
- Menggunakan icon yang unik, dan menciptakan ciri khas brand website tersebut
- Gunakan ukuran image yang standar, dan tidak terlalu besar
Merancang Prototype
Membuat desain user interface juga memerlukan prototyping, apa itu prototype?
Prototype merupakan sebuah rancangan interaksi antara user (pengguna) dan tampilan (interface) dimana user dapat melihat dan berinteraksi dengan user interface (UI) secara langsung. Meski bukan tampilan asli, namun prototype di buat layaknya user mengakses website seperti nyata.
Baca juga: Cara membuat prototype yang interaktif untuk mobile apps
Dengan membuat prototype, user akan memberikan pendapat dan masukan mereka agar konsep desain yang telah dirancang bisa di lakukan pengerjaan oleh developer dengan lebih sempurna. Dan memberikan masukan atas feature mana yang tidak di mengerti dan dapat melakukan perubahan desain sebelum developer mulai mengerjakan halaman website tersebut menggunakan Bahasa pemrograman.
Dalam langkah-langkah pembuatan desain UI/UX menggunakan wireframe, mockup dan prototype masing-masing memiliki kegunaannya tersendiri untuk itu ketiga langkah ini adalah step yang paling mudah dilakukan apabila ingin membuat sebuah website atau bahkan tampilan dalam mobile apps.
