Tips User-Interface

Sebagai freelancer ui ux designer, terkadang klien minta kita mengerjakan projek website design atau mobile app design dengan cepat. Oleh karena itu kita dapat menggunakan template figma gratis yang tersedia di internet. Well, faktanya tidak boleh langsung menggunakan template figma begitu saja, berikut beberapa tips yang perlu dipelajari. Lisensi penggunaan template Template figma memiliki beberapa lisensi, kita wajib menemukan file template figma yang menggunakan lisensi 4.0 atau creative common untuk bisa digunakan sebagai projek komersil misalnya untuk projek klien freelance. Shaynakit menyediakan ribuan template figma website design dan mobile app design yang berlisensi 4.0. Rekomendasi template figma Kali ini saya akan share beberapa template figma terbaik dan paling banyak digunakan untuk projek latihan atau komersil, sehingga freelance website designer dapat bekerja lebih cepat lagi. Foodyar website design landing page restaurant website design Sebuah template figma yang cocok digunakan sebagai landing page bisnis makanan dan edukasi, menggunakan style trendy dengan komposisi layout menarik dan meningkatkan user experience. Silahkan download template Foodyar di sini. Store dashboard website design dashboard page for business transactions Klien sering meminta freelance website designer untuk design dashboard keperluan bisnis mereka, maka kita bisa coba gunakan template figma yang satu ini dengan informasi-informasi penjualan bisnis. Download template store dashboard di sini. Finding house landing page landing page for selling and buying houses Penjualan rumah di seluruh dunia meningkat drastis, agency mulai memperkerjakan freelance website design untuk mengerjakan marketplace jual beli rumah secara online dengan layout yang professional. Template figma yang satu ini cocok digunakan oleh kita untuk memulai projek jual beli rumah tersebut. Mulai download template figma Finding house di sini. Modifikasi template sebelum dijual Saya menyarankan freelance website designer menggunakan template figma yang berlisensi 4.0 dan wajib melakukan modifikasi terlebih dahulu sesuai kebutuhan projek freelance. Karena jika tidak maka design yang diberikan kepada klien akan serupa dengan hasil design dari designer lainnya yang menggunakan template figma tersebut. Berdiskusi dengan klien sebelum pakai template Jujur kepada klien bahwa kita akan menggunakan template figma yang tersedia, apabila klien tersebut butuh cepat selesai projeknya dan tidak keberatan, maka kita bisa gunakan template website design figma tersebut. Good luck.

UI Design adalah sebuah tampilan yang sering kita lihat pada aplikasi mobile misalnya aplikasi gojek, ovo, dana, tokopedia, netflix, dan aplikasi lainnya. Tugas kita sebagai UI Designer bekerja sama dengan developer dan UX designer untuk merancang aplikasi tersebut menjadi lebih menarik ketika digunakan oleh pengguna. Sebelum kita berkarir sebagai UI designer maka ada beberapa hal utama yang perlu kita pelajari sehingga hasil design yang kita buat nanti juga memberikan kualitas yang tinggi, terlebih lagi apabila kamu saat ini belum punya background design. Mulai Dari Belajar Graphic Designer Saya mengawali karir sebagai Graphic Designer untuk memperkuat beberapa komponen design seperti color, grid, layout, typography, dan lainnya. Maka dari itu kamu juga bisa memulainya dengan mempelajari komponen-komponen pada graphic design untuk membuat sebuah design guideline pada perusahaan tempat kamu bekerja nantinya. Mempelajari Color Combination Color memiliki peran penting pada sebuah design aplikasi, setiap aplikasi memiliki tujuan dan vision yang berbeda-beda maka dari itu mereka menggunakan warna yang berbeda, misalnya aplikasi keuangan menggunakan warna biru yang memiliki arti kepercayaan dengan loyalitas yang sangat tinggi. Mulai Belajar Typography Pengguna website atau aplikasi seperti diri kita, orang tua, dan saudara tentunya membaca beberapa informasi yang disajikan pada aplikasi tersebut, misalnya ingin membeli makanan martabak maka kita akan cari item yang berjudul martabak pada app tersebut. Oleh karena itu kita perlu mempelajari typography sebagai pondasi utama UI designer sehingga kita bisa memilih jenis font yang sesuai dengan tema aplikasi yang kita design ke depannya, beda tema maka beda jenis font. Belajar Tata Letak (Layout) Setelah kita mempelajari color dan typography maka kita bisa masuk kepada layout yang di mana kita akan belajar menata judul, harga, foto produk, dan lainnya pada posisi yang benar. Kita juga bisa mulai mengenal istilah-istilah UX sehingga melakukan proses layouting menjadi lebih mudah untuk menciptakan aplikasi dan website yang menarik dan mudah digunakan. Membuat MoodBoard Design Kita butuh sebuah moodboard yang berisi inspirasi-inspirasi design yang akan kita gunakan sebagai benchmark dari design aplikasi kita nantinya, oleh karena itu kita perlu belajar memilih referensi yang tepat, tidak harus banyak tidak juga sedikit, intinya cukup dari segi warna, illustration, layout, dan interaction (animation). Kita bisa menggunakan beberapa software design gratis seperti Figma, Miro, Dribbble, Adobe XD, dan software lainnya untuk mulai pembuatan moodboard dan melakukan pembelajaran utama kita sebagai UI designer.

Hello people with the spirit of learning! Gimana progres belajar kalian sejauh ini? Di sini ada yang sudah tahu cara menggunakan Auto Layout pada Figma? Kalau belum, yuk, kali ini kita akan belajar secara singkat cara menggunakan Auto Layout Figma– sebuah fitur yang memudahkan kamu dalam proses design! Auto Layout memiliki fungsi membuat frame pada UI design kalian menjadi lebih dinamis. Sebagai contoh, kalian tidak perlu mengubah ukuran frame untuk mengikuti isi teksnya karena frame akan menyesuaikan. Alias, Auto Layout memungkinkan kita membuat component yang responsif. Masih banyak fungsi Auto Layout yang memudahkan kamu di Figma menjadi lebih praktis. Oleh Karena itu, Auto Layout merupakan fitur unggulan di tools ini. Pada latihan kali ini, kita akan membuat daftar menu makanan. 1) Siapkan Element-nya Mari kita siapkan beberapa elements seperti Shape lingkaran, Text dan siapkan plugins bernama “Unsplash” untuk mengambil image. 2) Memberi Text dan Shape Caranya, pada bagian Toolbar, pilih “T” (Text) dan ketik nama menu makanan yang kamu mau. Lalu di sampingnya, pilih Shape dan pilih Ellipse untuk si bentuk lingkaran. Tekan Shift sembari menarik kursor sehingga membentuk bentuk lingkaran yang sempurna. 3) Mengaktifkan Auto Layout Select semua elements dan tekan Shift+A untuk mengaktifkan Auto Layout. Di bagian sidebar, ubah padding menjadi 10 dan spacing between items menjadi 20. 4) Mengaktifkan Fill Container Aktifkan fill container. Caranya, di bagian “Frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container. 5) Masukan Image dengan Plugins Klik shape lingkaran pada menu namun pastikan kamu sudah install plugins “Unsplash”. Jika sudah, klik kanan ➡️ ”Plugins” ➡️ “Unsplash”. Search image yang kamu mau lalu pilih dan tunggu hingga image muncul di dalam shape. Ulangi sampai terlihat menjadi list menu makanan yaa 😊 Kamu hanya perlu men-duplicate menu yang sudah ada dan dengan aktifnya Auto Layout, kamu tidak perlu lagi mengubah pengaturan ukuran/jarak/jenis font satu persatu lagi karena nanti menu yang kamu duplicate akan menyesuaikan pengaturan dari menu sebelumnya. Selamat! Kamu sudah bisa menggunakan Auto Layout pada Figma 🎉 p.s: untuk menghapus Auto Layout, cukup klik tanda “+” pada bagian Auto Layout di side bar menjadi tanda “-”. Dan untuk membuat UI Design di atas, kita tinggal menambahkan container daftar menu makanan ke dalam frame baru yang sudah kita design yaa😉 . Proses Membuat UI Design List Menu 1) New Frame Pada bagian toolbar, kita pilih Frame lalu atur ukuran frame pada sisi sidebar dengan W: 375 dan H: 781. 2) Background Menu Untuk background, kita pakai warna putih. Kembali lagi ke toolbar, pilih shape lalu pilih rectangle dengan ukuran W: 375 H: 259. Atur posisi ke Align horizontal center dan Align center. 3) Image for Background Menu Seleksi shape tadi dan masukan plugins “Unsplash”. Seach image “Dining” untuk mendapatkan image restoran seperti UI di atas. 4) Cara Membuat Gradasi Image Duplicate Image dengan menekan shortcut Shift+D. Pada image kedua, kita ke Fill pada sidebar dan pilih Solid maka akan muncul beberapa opsi. Setelah itu kita pilih Linear. Ubah opacity warna pada kotak pertama menjadi 0% dan kotak kedua 100%. Drag kotak pertama ke kanan hingga berada di tengah. Pastikan juga image ini berada di atas shape pertama. (Caranya, kalian bisa klik kanan lalu Bring to front.) 5) Judul Restaurant Untuk memberi judul resto, ketik nama resto sesuai imajinasi kalian dengan ketentuan font yang bebas juga. Di sini, aku pakai Poppins dengan size 16px. font style Semibold. Letakan di atas dengan jarak atas 84px dan kiri 44px 6) Bottom Navigation Bar Untuk icon Home, Search & Profile; kita bisa dapatkan dengan install plugin “Iconify” Select icons Aktifkan Auto layout (Shift+A) Atur menjadi Horizontal direction di sidebar Spacing between items: 88px Fill dan pilih warna yang kamu mau Ubah ukuran container menjadi W:376 H:52 Corner radius menjadi 40px untuk atas dan bawah. Pilih container Navigation bar bawah dan atur posisi dengan memilih Align horizontal center dan Align bottom pada sisi sidebar. 7) Upper Navigation Dapatkan icon Back dan Share dari plugin “Iconify” Beri jarak atas 48px dan kiri 40px Tebalkan icons dengan cara pilih “Stroke” pada bagian sidebar dan ubah menjadi 2. Begitu juga dengan icon bintang, kamu bisa dapatkan di plugin “Iconify” dan fill icon sesuai warna yang kamu inginkan. Terima kasih sudah membaca artikel ini yaa! Jika kalian ingin tahu lebih dalam tentang peng-aplikasian Auto Layout, kami menyediakan banyak kelas yang membahas tentang Auto Layout pada Figma lohh! Sebagai contoh, kamu bisa mengikuti dulu kelas gratisnya yaitu kelas freemium “UI Style Guide”. Selamat belajar dan mencoba teman-teman! 📚 Link plugins : Unsplash https://www.figma.com/community/plugin/738454987945972471/Unsplash Iconify https://www.figma.com/community/plugin/735098390272716381/Iconify