Membuat Desain UI & UX Website yang Baik dan Benar!

Written by Azriel Muhammadd on Friday, 19 July 2019

Hal pertama yang di lakukan jika ingin membuat website adalah membuat konsepnya, tata letaknya, yang bisa kita anggap itu adalah UI Design. Tampilan yang akan kita buat untuk si pengguna dalam menggunakan Website.

Sebenarnya ada banyak sekali aplikasi design untuk membuat UI design ini. Ada yang berbayar dan juga ada yang diberikan secara cuma-cuma atau gratis, perbedaan diantara keduanya sudah jelas dari berbagai tools yang disediakan. Software Adobe XD dan Gravit Designer adalah software UI gratis terbaik yang saat ini saya pakai. Dan Sketch Up adalah software berbayar yang hanya ada di platform Mac.

Pada kesempatan kali ini, saya akan membuat design UI ini menggunakan software Gravit Designer. Jadi silahkan download dahulu software tersebut di situs resminya di https://www.designer.io dan sesuaikan dengan OS laptop kalian.

Jika sudah selesai di download, maka silahkan install seperti biasa dan silahkan buka softwarenya. Perlu di perhatikan, kalian harus login dahulu untuk menggunakan software tersebut, saya menggunakan Google Plus untuk loginnya.

Jika sudah selesai, maka tampilan awalnya akan seperti ini.

Untuk membuat lembar kerja baru, kalian harus memasukan ukuran lembar kerja yang di butuhkan. Karena ini aplikasi untuk design UI, Maka semua ukuran yang di butuhkan sudah di siapkan, jadi kalian hanya tinggal pilih sesuai dengan kebutuhan. Disini kita akan menggunakan ukuran website yang Website Medium dengan ukuran 1366 x 786. Kenapa 1366x786px? Karena saat ini pengguna komputer/laptop terbanyak memiliki ukuran layar tersebut. Berikut tampilan lembar kerjanya.

Pada lembar kerja tersebut kita akan membuat sebuah desain UI Website yang akan kita buat nantinya. Jadi anggap saja ini sebagai gambaran bagaimana website kita nantinya, jadi pada saat pengkodingan tidak harus memikirkan bagaimana tata letaknya, dan sebagainya.

Komponen utama pada sebuah website yang dapat memudahkan pengguna adalah Navigasi. Dengan Navigasi pengguna tidak akan kebingungan akan pergi kehalaman apa yang di butuhkan. Jadi untuk yang pertama kita akan membuat Navigasi.

Pergilah ke Toolbar diatas, lalu cari Tools Text untuk membuat menu-menu Navigasi yang kita butuhkan. Lalu tuliskan menu apa saja yang diinginkan. Saya disini membuat menu Home, About, Service, Portfolio, dan Contact. Lalu saya juga akan membuat sebuah Logo dari nama saya yaitu AzrielFatur, dengan menggunakan font Pacifico.

Selanjutnya saya akan mengimport sebuah gambar yang akan menjadi background pada website kita nantinya. Jadi silahkan cari sebuah background yang cocok untuk website kamu nantinya. Saya menggunakan gambar pemandangan sungai. Untuk mengimport gambarnya silahkan pergi ke File > Import > Place Image… > Lalu cari dan pilih gambar mana yang akan menjadi background website kamu. Jangan lupa pada layer dibagian sebelah kiri, layer image diletakan dipaling bawah, agar text yang kamu buat tadi tidak ketutupan oleh background.

Lalu kemudian diberikan perbaikan sedikit agar tampilan logo dan menu navigasinya bisa matching dengan background. Diantaranya adalah, saya memberikan warna putih kepada Logo dan Menu, dan mengubah ukuran font logo menjadi 28px.

Selanjutnya saya akan membuat seperti perkenalan pada pengguna tentang website ini. Jadi saya akan memberikan sebuah text di tengah-tengah dengan huruf besar bertuliskan “Hello, I Am Azriel Fatur” dengan tagline “Full Stack Developer” (berdasarkan kemampuan yang saya tawarkan), dan dilengkapi dengan icon social media.

Untuk icon social media bisa ditemukan pada side menu disebelah kiri, lalu pilih tab libraries, lalu silahkan di search saja icon apa yang kamu inginkan. Untuk menggunakannya tinggal di drag & drop saja. Untuk ukuran tinggal diatur saja pada side menu di sebelah kanan setelah kamu men-seleksi menu icon tersebut.

Selanjutnya kita akan membuat section kedua, yaitu section About Me yang akan mendeskripsikan siapa itu kamu, dan seputar tentang diri kamu. Disini saya akan membuat dua bagian yaitu, sisi kiri dengan di isi foto saya, dan dibagian kanan di isi dengan text yang mendeskripsikan saya serta skill kemampuan saya yang dilengkapi tombol. Tetapi sebelum itu, ubah terlebih tinggi lembar kerja desain kamu di side menu kanan, ubah tinggi tersebut menjadi 1366x3000px.

Usahakan dalam setiap projek desain apapun bekerja dengan rapih. Maksudnya susunan layer diberikan nama, diberikan group agar terlihat rapih dan clean tidak berantakan. Selain itu, merapihkan layer juga akan memudahkan kamu dalam mendesain.

Untuk section ini, saya membuat judul section dengan nama About Me dengan menggunakan font Pacifico dan ukuran font 48px. Untuk gambar bisa disesuaikan saya dengan tampilanmu. Lalu membuat text dengan fungsi menjelaskan tentang diri saya dan dibawahny terdapat skill-skill kemampuan saya seputar desain. Dibuat menggunakan rectangle yang diberi corner sebesar 3px dengan code warna #333 dan sebuah tombol learn more. Untuk desainnya silahkan disesuaikan saja.

Selanjutnya saya akan membuat section My Service yang menjelaskan tentang apa saja yang saya tawarkan dalam web ini. Saya membuat 3 service, yaitu UI / UX Design, Front End Designer, dan Back End Developer.

Hampir sama dengan yang sebelumnya, disini saya menggunakan icon yang disediakan oleh Gravit, jadi silahkan cari saja iconnya dilibraries dan sesuaikan dengan keinginanmu. Letakan dan sesuaikan penempatannya agar terlihat pas dan clean.

Selanjutnya pada section ketiga saya akan membuat section Contact Me, yang akan di fungsikan untuk pengguna yang ingin memberikan pesan atau kritik kepada pemiliki web bisa melalui section ini.

Pada section ini saya membuat dua bagian seperti section about. Pada bagian kiri terdapat info mengenai kontak pribadi saya, seperti lokasi, nomor telp, dan alamat email saya. Dan pada bagian kanan terdapat form yang dipergunakan untuk pengguna menghubungi saya melalui form tersebut jika tidak ingin menghubungi secara pribadi.

Dan yang terakhir saya akan membuat sebuah footer yang simple saja, seperti dibawah ini.

Pada footer ini saya membuatnya sebagai pelengkap dari semua section-section diatas, dan saya menampilkan logo dari web saya berserta penjelasannya, sevice yang saya berikan, dan terakhir kontak yang sebenarnya sudah ada di section ke-4.

Materi selanjutnya saya akan mengimplementasikannya hingga menjadi sebuah website. Jadi ikuti perkembangannya trus ya!

Tags : #UI & UX


Shares :


Azriel Muhammadd
Azriel Muhammadd

Programmer pemula yang selalu di temani Cappucino agar mendapatkan mood terbaik untuk mencari inspirasi <3.



MUNGKIN KAMU JUGA SUKA:


SILAHKAN BERKOMENTAR

Einjuro

Einjuro adalah sebuah website pembelajaran yang diperuntukan bagi siswa-siswi diseluruh Indonesia yang ingin mendapatkan pelajaran tambahan diluar sekolah tentnag perkembangan teknologi.

Pages

  • About
  • Contact