UI Design — Membuat Wireframe User Interface pada Website
Membuat Wireframe UI pada website menggunakan Balsamiq Mockup
Assalamualaikum, halo semua, salam satu canvas!
Pada kesemaptan kali ini gue Bagas bakalan ngasitau kalian tutorial membuat wireframe mockup dengan menggunakan balsamiq. Nah pada tutorial kali ini gue akan membuat wireframe mockup sebuah Website.
Biar cepet yuk langsung kita mulai aja.
Pertama gue mau ngasitau dulu, tiap web sekarang punya banyak tipikal desain user interfacenya (tampilannya). Nah disini gue akan coba buat sebuah tampilan website yang trendy dimasa kini.
Oke pertama langsung drag aja browser yang ada di menu containers ke workspace kalian sampai tampilannya seperti ini .
Setelah itu setting size containers kalian menjadi ukuran 1080 (width) x 3177 (height) yang diatur pada sebelah kanan (atribut size). Dia jadi panjang? Ngga apa, emang gitu, karena kita ngga bisa buat scroll down kaya website ya maka harus dipanjangin kebawah. 😆
Nah setelah itu kita akan masukan gambar untuk digunakan sebagai header atau image carousel. Untuk memasukan gambar kita bisa pilih menu common di menu bar, setelah itu pilih image nanti akan keluar gambar seperti dibawah. Ohiya, fyi, web pada umumnya memiliki bagian mulai dari Header Body sampai Footer.
Kalau sudah seperti gambar diatas, silahkan kalian klik 2x pada image tersebut, nanti akan keluar option untuk memasukan file gambarnya. Setelah itu, silahkan pilih gambar sesuka kalian yang ingin dimasukan, lalu klik open.
Oke kita sudah memasukan gambar, tapi sizenya pasti masih tidak sesuai kan dengan si browser container-nya itu. Nah kita langsung resize aja gambarnya, caranya sama tinggal ganti aja sizenya atau atur dengan cara menarik tiap pojok gambar tersebut.
Oke setelah itu kita bikin navbarnya pakai link bar, link bar ada di menu text langsung drag aja. Nah langsung aja kalian ketengahin, tapi kalo kalian mau ganti kalimatnya bisa kalian klik 2x pada navbar linknya, nanti akan keluar option buat mengganti teks yang ada pada navbar tersebut.
Setelah itu kalian masukan big title sama subtitle nya, itu ada di menu text juga kok. Langsung aja kalian drag trus atur tulisannya mau apa dan ukurannya disesuaikan saja seperti dibawah ini.
Langkah berikutnya kita mulai masuk ke bagian body, nah di body ini adalah isi atau konten dari si web ini jadi kita akan coba bikin menarik dan sederhana. Oke kalian pilih aja field set itu ada di menu common.
Oke, kalau udah ada field setnya kalian masukin aja gambar dan sesuaikan posisinya di samping field setnya itu hingga tampilannya seperti gambar dibawah ini.
Berikutnya kalian masukin block of text, asset ini berada pada menu text. Langsung aja kalian drag kedalam, nah kalian sesuaikan posisinya didalam si field text itu. Kalian bisa atur posisinya dan ukurannya juga.
Kita masuk ke konten berikutnya pada body. Kita akan membuat rectangle atau kotak yang pada bagian tengahnya akan dimasukkan gambar dan teks. Oke langsung aja masukin assetnya.
Oke kita sudah punya rectangle atau kotak, kalian bisa ganti warnanya sesuka kalian. Tapi disini gua mau kasih warna agak keabuan, biar kalem aja karena background gue putih. Kalo sudah di ganti warnanya, silahkan kalian masukkan gambar yang ukurannya lebar seperti gambar dibawah ini.
15. Kalau sudah seperti gambar diatas, sekarang kita masukan subtitle dan block text untuk gambarnya, bisa kalian langsung sesuaikan aja posisinya kalo gua buat seperti dibawah ini.
Oke berikutnya kita buat konten untuk gallery. Langsung msukan aja image dan posisinya kalian sesuaikan aja kalo gua bikin posisi gridnya seperti dibawah ini.
Kalo udah jadi gallerynya kita langsung buat untuk bagian contact us. Langsung aja kita masukan dulu container rectangle lagi.
Setelah itu kita masukan text email dan comment dan atur posisinya seperti dibawah.
Berikutnya masukan text input dan text area yang ada pada menu text. Text input kita gunakan untuk emailnya, dan text area untuk komennya.Llalu sesuaikan posisi seperti gambar dibawah.
Lalu masukan tombol send, itu ada di menu buttons.
Oke karena konten body sudah selesai, kita sekarang masuk ke bagian footer. Langsung aja masukan rectangle.
Setelah itu masukan text seperti dibawah ini (About us, Locate Us, Contact). Kalo sudah kita masukan blok text dan Map. Atur posisi seperti gambar dibawah ini.
Oke, header body dan footer sudah selesai dibuat, berarti kita telah selesai membuat mockup sebuah website pada balsamiq.
Yang saya buat hanyalah sebuah mockup website profil sederhana, jika kamu ingin berkreasi dalam membuat wireframe mockup lain silahkan saja atur kreasi kamu.
EXERCISE
Sebuah pembelajaran tidak ada artinya tanpa sebuah exercise.
Silahkan kamu buat mockup halaman depan sebuah E-commerce milikmu sendiri.
Untuk tugas silahkan lanjutkan membuat mockup halaman sebagai berikut:
- Tampilan Halaman Produk berdasarkan Kategori tertentu
- Halaman Detail sebuah Produk
Oke, sekian dulu untuk tutorialnya! Pegel juga ya guys ehehehe 😆
Sekian dari saya wassalamualaikum warahmatullahi wabarakatuh~
