Tips Design

Hello people with the spirit of learning! Kamu sering tidak merasa kesulitan cari color palette yang cocok baik untuk UI Design maupun ilustrasimu? Color palette sangat berpengaruh lho pada aspek desain kamu, karena warna selain memperindah namun juga mempunyai kemampuan untuk "mempengaruhi" psikologis kita. Oleh karena itu, kita perlu memilih warna yang tepat sesuai dengan tujuan karya kita. Terus bagaimana dong? Apa pinterest jadi jalan ninja nya? Oh tidak, selain pinterest berikut adalah 3 website yang bisa jadi preferensi kamu saat cari color palette! Coolors Website ini selain menyediakan macam-macam color palette tapi juga up-to-date lho! Karena disini kita dapat eksplorasi color palette yang lagi trendy di jaman kekinian tanpa harus searching dua kali. Selain itu, Coolors juga menyediakan extension yang bisa digenerate langsung ke Adobe & Chrome kita, efektif banget yah? Color Tool - Material Design Salah satu fitur dari Material Design ini dibuat khusus bagi kalian yang ingin eksplor color palette untuk User Interface kalian dengan 6 screen yang berbeda! Uniknya, kita juga bisa terapin primary, secondary dan color text secara langsung di website ini. Jadi kamu tidak perlu khawatir revisi warna untuk klien, karena Color Tool ini bisa di share link sehingga semua orang bisa mengaksesnya! Color Palette Generator - Canva Lhoo, kok ada Canva disini? Jadi, ternyata Canva juga menyediakan fitur color palette namun tidak seperti biasanya. Karena kita bisa mendapatkan color palette kita sendiri dari image / foto kita! Tidak perlu pusing lagi menghadapi klien yang masih ragu dengan color palette, karena bisa kita sesuaikan karakteristik dan produk klien kita dengan generator ini! Bagaimana? Jangan lupa dicatat yah websitenya karena siapa tau bisa digunakan kedepannya! Bagi kalian yang ingin mempelajari cara menggunakan color palette yang benar pada User Interface kalian, kalian bisa mengikuti kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Karena selain visual design, kita juga bisa mempelajari User Interface secara menyeluruh. Jadi tunggu apa lagi? Selamat belajar!

Hello people with spirit of learning! Suka merasa ribet ga kalau harus sedia alat tulis dan kertas buat brainstorming product yang mau dibuat? Atau mungkin kalian sedang kerja dan kolaborasi secara remote yang pastinya ga mungkin rekan kerja kalian bisa brainstorming bareng apalagi ngerevisi di waktu yang bersamaan kan? Nah kalo punya kendala seperti itu, coba deh pakai whimsical. Disini saya coba merangkum jadi 3 point kenapa whimsical bisa jadi solusi kalian dalam brainstorming sebelum ngedesign. Dashboard Pertama, kalian bisa kunjungin website whimsical.com, disini saya ga akan ngasih tau cara daftar dan loginnya karena saya yakin kalian udah pada bisa ya. Cukup daftar akun emailnya aja, atau kalo ga mau ribet juga bisa daftar pakai akun google mail yang udah kalian punya. Kerja Bareng Secara Real Time Sebelum kalian bisa kerja bareng, di whimsical perlu invite akunnya dulu (ya jelas juga ya, kalo ga diundang nanti siapa aja bisa ngacak-ngacak projectnya dong ya). Caranya simple, pilih menu Share, Export & Print. Setelah itu, lanjut pilih menu Get Shareable Link yang ada pada baris menunya. Nah, setelah itu kalian bisa masukkan email akun teman kolaborasinya dan pastinya udah terdaftar di whimsical yaa. Oya, perhatiin juga nih ketiga menu yang ada di bagian Add guest. Karena masing-masing menu itu fungsinya beda-beda. Viewer: Akun ini cuma bisa melihat project yang kalian buat aja.Commenter: Akun ini bisa melihat dan juga komen revisi sama brainstorming yang udah kalian buat.Editor: Akun ini punya kendali yang sama seperti pemilik utama. Bisa mengubah tampilannya atau bisa juga hapus tampilan yang udah kalian buat. So, pastiin tipe guestnya ya sebelum ngundang akunnya. Ok, kalo tadi udah ngebahas tentang whimsical dan cara kolaborasi bareng. Sekarang kita cari tau, emangnya di whimsical bisa buat brainstorming apa aja sih? 1. User Flow Pertama, di whimsical kalian bisa membuat user flow atau mungkin ada yang nyebutnya flowchart. User Flow ini jadi tahap yang penting banget buat kalian nentuin alur produk yang akan dibuat. Sehingga kalian punya gambaran tentang halaman apa saja yang akan dibuat nantinya. And the next step is... 2. Sitemap Kalo udah selesai bikin user flow, kalian bisa lanjut ke bagian sitemap biar kalian bisa lebih punya gambaran tentang design yang akan dibuat. Nah, di sitemap ini kalian bisa nentuin screen apa aja yang akan dibuat dan ga hanya itu, dengan membuat sitemap kalian juga bisa punya gambaran tentang konten apa aja yang harus dibuat dalam setiap halamannya. 3. Wireframe Yang terakhir ada wireframe yang mungkin dari kalian udah tau proses ini ya. Jadi, di wireframe ini kalian menuangkan semua hasil brainstorming dari tahap user flow dan juga sitemap dan mengubahnya ke tampilan visual dalam bentuk layouting (tanpa memikirkan warna dan tipografinya). Nah itu dia beberapa keuntungan brainstorming menggunakan whimsical yang pastinya bakal bikin proses brainstorming kalian jadi makin lebih cepat. Jika kalian tertarik mempelajari lebih dalam tentang proses brainstorming di whimsical, silahkan bergabung pada kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Dalam kelas itu, kita akan bersama-sama membedah dan mempelajari proses apa saja yang harus dilakukan dalam mendesign biar prosesnya jadi lebih cepat dan efisien. Ga hanya itu, kalian juga akan mempelajari bagaimana caranya mengubah brainstorming menjadi product design yang menarik dan menjual. Sampai jumpa di kelas yaa! Terima kasih.

Hello people with the spirit of learning 👋. Siapa disini masih bingung mencari Icon untuk Visual Design kita? Jika iya, di artikel ini kita membahas tentang 5 website Icon Gratis untuk UI/UX Designer🤩. Lets Go🔥 1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita. 2. Feather Apa itu Feather? Feather adalah kumpulan ikon open source yang cantik. Setiap ikon dirancang pada kisi 24x24 dengan penekanan pada kesederhanaan, konsistensi, dan fleksibilitas. Disini kita bisa mengatur Size dan juga Stroke widthnya sesuka kita sebelum mendownloadnya. selain itu, icon yang disediakan oleh feather berstyle outline. 3. HeroIcons Apa itu HeroIcons? Heroicons merupakan Satu set 450+ ikon SVG berkualitas tinggi berlisensi MIT gratis untuk Anda gunakan dalam proyek web Anda. Tersedia sebagai ikon SVG dasar dan melalui perpustakaan React dan Vue pihak pertama. Selain mudah kita pakai, Heroicons juga menyediakan soft file Figmanya juga. Selain Style Outline, Heroicons juga memiliki Style Solid 4. Flaticon Apa itu Flaticon? Flaticon adalah layanan web yang dapat digunakan untuk mengunduh ikon vektor dengan cepat dan mudah, untuk digunakan secara bebas pada situs web atau blog Anda. 5. Material Icon Apa itu Material Icon? Material Icon adalah simbol yang menyenangkan dan dibuat dengan indah untuk tindakan dan item umum. unduh di desktop untuk menggunakannya dalam produk digital Anda untuk android, ios, dan web Okay people with the spirit of learning👋. Itulah 5 website Icon Gratis untuk visual design kita sebagai seorang UI/UX Designer. Semoga artikel ini bermanfaat

Hello people with the spirit of learning 👋. Di artikel ini kita akan membuat fancy navigation dengan sangat mudah di figma🤩. oke langsung saja kita mulai, lets go🔥 Step 1: Buatlah Rectangle Buatlah Rectangle (r) dengan ukuran 375x80 (*Weightnya harus sesuaikan dengan ukuran frame yang kita pakai) Step 2: Buatlah Ellipse Buatlah Ellipse (e) dengan ukuran 80x80Lalu Pastikan Rata tengah dengan rectangle seperti digambar diatas. Setelah itu Duplicate Ellipse tadi,Lalu jadikan ukurannya menjadi 64x64Pastikan rata tengah dengan Ellipse sebelumnya Step 3: Boolean Groups Seleksi Rectangle dan Ellipse yang kita duplicate tadiLalu pergi ke menu Boolean GroupsSetelah itu pilih Subtract selection Step 4: Outline Stroke Pilih Rectangle yang sudah kita Subtract selection tadiLalu Klik kananPilih Outline stroke Step 5: Corner Radius 1. Klik 2x pada Rectangle 2. Pilih 2 Titik Anchor Point seperti di gambar (*pastikan sudah melakukan step 4) 3. Setelah itu diberi Corner Radius 24 Step 6: Finishing Terakhir kita tambahkan beberapa component: Tambahkan beberapa IconTambahkan juga corner radius di beberapa sudut Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :) Oiya, kalau kita mau meng convert fancy navigation ini kedalam bentuk code, kita bisa mengikuti kelas Full-Stack Laravel Flutter: E-Commerce App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus membeli sepatu online.

Hello people with the spirit of learning.  Dalam pengembangan sebuah aplikasi mobile, akan ada banyak aspek  yang perlu diperhatikan, salah satunya adalah tampilan dari sebuah aplikasi. Tampilan yang menarik dalam sebuah aplikasi mobile seringkali menjadi hal yang cukup penting untuk diperhatikan. Oleh karena itu, pada tips ini kita akan membahas mengenai 5 website yang dapat kita jadikan sebagai inspirasi sebagai Flutter Developer.  1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita.  2. Dribbble Mungkin sebagian banyak orang sudah tahu apa itu Dribble. Dribbble merupakan sebuah website yang dapat menjadi platform untuk designer dalam memamerkan karya mereka. Selain itu, dribbble juga dapat menjadi platform untuk designer sebagai tempat untuk menaruh portofolio desain-desain yang telah mereka buat serta mencari pekerjaan secara online. Oleh karena itu, Dribbble dapat menjadi platform yang tepat untuk developer juga dalam mencari inspirasi desain yang baik jika sedang ingin mengembangkan sebuah aplikasi.  3. Pinterest Pinterest merupakan sebuah sosial media asal Amerika yang dibuat untuk menemukan ide dalam bentuk gambar seperti resep, inspirasi rumah dan gaya, UI/UX Design dan banyak lagi. Kita juga dapat mencari inspirasi-inspirasi desain jika ingin mengembangkan sebuah aplikasi. Cukup ketik kata kunci seperti “UI Design” dan kita akan menemukan banyak sekali UI Design yang sangat bagus.  4. Uplabs Uplabs merupakan sebuah platform asal California yang dapat menjadi referensi kita dalam mencari ide design pada saat mengembangkan aplikasi. Uplabs juga menyediakan fitur dimana kita dapat mendownload UI Kits yang kita inginkan dalam bentuk File Figma, Adobe XD dan bahkan Sketch.  5. Collect UI Collect UI merupakan platform yang menyediakan banyak sekali inspirasi UI Design. Kita juga dapat memilih kategori UI Design sesuai dengan apa yang sedang kita butuhkan. Collect UI menampilkan desain-design pilihan atau hand picked yang berasal dari Dribbble, sehingga Collect UI hanya akan menerima desain yang berasal dari Dribbble. Okay people with the spirit of learning, itulah 5 website yang dapat kita jadikan sebagai referensi ketika sedang mengembangkan aplikasi kita. Semoga tips ini bermanfaat. 

Hello people with the spirit of learning! Banyak objek yang dapat kita buat dengan menggunakan software Blender. Dan jika kita masih pemula, Coin adalah salah satu objek yang paling mudah untuk dibuat dan memiliki beberapa komponen yang bisa kita pelajari sekaligus. Nah, untuk membuatnya, kita hanya perlu menyiapkan objek Cylinder dan objek Text. Dan untuk langkah-langkahnya adalah sebagai berikut: Step 1: Menambahkan Objek Cylinder Buka Software Blendernya, dan hapus objek Cube yang ada pada tampilan awal Blender dengan menekan “X” dan pilih DeleteSetelah itu kita bisa tekan “Shift + A”, kemudian pilih “Mesh” dan kita pilih “Cylinder” Step 2: Membuat Base Objek Coin  Kita bisa pipihkan objek Cylinder tersebut dengan menekan “S” dan “Z” dan kita arahkan cursornya kedalam objek Cylinder untuk mengubah skalanya ke sumbu Z atau verticalKemudian kita bisa masuk ke “Edit Mode” dengan menekan “Tab” pada KeyboardSelanjutnya kita seleksi Face yang ada di bagian atas dan bagian bawah objek Coinnya dengan menggunakan “Face Select” yang ada pada samping menu Edit ModeKalau sudah, kita tekan “i” untuk “Inset Face” dan kita tarik kedalam (Lebarnya bisa dilihat di contoh gambar)Setelah itu kita akan Extrude kedalam dengan menekan “E” “S” dan “Z” dan kita tarik kedalam untuk menambahkan segment kedalam objek coinnya. (Bisa dilihat di contoh gambar) Step 3: Menambahkan Bevel pada Objek Coin Sebelum menambahkan Bevel, kita akan masuk dulu ke Object Mode atau tekan “Tab”Dan kita tekan “Ctrl + A” kemudian pilih “Scale” untuk meng-Apply Objek Coinnya Kemudian kita masuk ke Edit Mode lagi dengan menekan “Tab”Kita bisa seleksi setiap garis melingkar pada objek Coin dengan seleksi garis atau “Edge Select”Kemudian kita tekan “Ctrl + B” dan Scroll ke atas, dan kita tambahkan kurang lebih 3 atau 4 garis Step 4: Menambahkan Modifier Subdivision Surface Kita bisa masuk ke area Properties yang ada di bagian kanan, dan kita pilih icon bergambar kunci inggris atau “Modifier Properties”Kemudian kita klik “Add Modifier” dan pilih “Subdivision Surface”Kalau sudah, kita akan masuk lagi ke Objek Mode dengan menekan “Tab” Setelah itu kita tekan “W” dan pilih “Shade Smooth” Step 5: Menambahkan Object Text Tekan “Shift + A” dan pilih “Text”Kemudian masuk ke Edit Mode atau “Tab” dan ketikkan “$” atau dollar Kalau sudah, kita masuk lagi ke Objek Mode atatu tekan “Tab”Setelah itu letakkan posisi text “$” di tengah objek Coin dengan menekan angka “7” untuk melihat view dari arah atasDan tekan “G” untuk memindahkan posisinya, dan juga “S” untuk mengubah skalanya. Step 6: Finishing Setelah selesai menambahkan Text, kita akan Extrude objek Textnya agar memiliki tinggi yang sama dengan objek Coinnya. Kita akan masuk ke “Object Data Properties” atau icon yang bergambar huruf ”a”Kemudian pilih “Geometry” dan tambahkan 0.1m pada bagian “Extrude” Oiya, jumlahnya bisa berbeda, jika size objek yang kita buat juga berbeda, jadi sesuaikan saja tingginya dengan objek Coinnya. Dannn akhirnya selesai! Itu tadi adalah cara simple untuk membuat objek Coin. Temen-temen tinggal tambahkan material dan lighting, agar objek coinnya jadi lebih realistis (untuk dasarnya bisa dilihat di kelas gratisnya buildwithangga) Oiya, materi ini juga ada pada kelas Mastering Blender 3D: Design Icon Set, disitu saya jelaskan secara detail, dan juga ada beberapa tambahan yang buat objek 3D nya menjadi lebih menarik dan enak untuk di lihat. Dan yang lebih penting, di kelas itu juga saya ajarkan bagaimana cara menyiapkan objek 3D yang siap digunakan dan siap untuk dijual! Sekian Tips kali ini, semoga bermanfaat, dan Selamat Belajar!

Hello people with the spirit of learning! Pada kali ini kita akan membuat prototype sederhana. Gimana caranya ? Simak sampai akhir yuk. 1. Menyiapkan asset design Sebelum kita melakukan prototyping, sebaiknya kita sudah memiliki design yang sudah siap untuk prototyping. Kamu bisa mencari asset design pada halaman website shaynakit.com 2. Import to Figma Setelah berhasil unduh asset design yang kita inginkan, Import file asset design ke Figma. Caranya, klik icon import pada cursor yang ada di gambar atau kamu langsung bisa drag file ke figma secara langsung. 3. Ubah device ke Prototype Jika sudah berhasil import file design, selanjutnya open project tersebut kemudian pada right sidebar, ubah device menjadi prototype Jika berhasil, maka screen akan terdapat tanda node untuk menghubungkan screen yang lain. 4. Buat koneksi pertamamu Pilih screen pertama kamu, lalu click tanda plus, dan tarik ke tujuan screen berikutnya. Selain itu kamu juga bisa melakukan hotspot menggunakan element. Seperti gambar di bawah ini. Pilih input field email kemudian tarik ke tujuan screen berikutnya. 5. Buat interaksi dan animasi sederhana a. Buat frame terbaru untuk membungkus elements plane menjadi 2 screen. b. Pada screen screen pertama, putar element pesawat 180 derajat, Dan ubah layer opacity menjadi 0% c. Select semua screen dan buat menjadi multiplayer component d. Kemudian klik combine as variant pada right sidebar e. Hasilnya akan menjadi seperti ini f. Kemudian koneksikan screen 1 ke screen 2, ubah aturan menjadi seperti ini g. Kemudian pada left sidebar terdapat asset, pilih component plane tadi kemudian tarik ke splashscreen. Oh ya, sebelumnya logo splashscreen tersebut sudah dihapus ya, dan hasilnya akan jadi seperti gambar dibawah ini. h. Kemudian pada screen login, lakukan duplikasi menggunakan ctrl+D atau alt+D i. Kemudian tarik tiap component, disini saya membagi 2 menjadi atas dan bawah. Untuk inputan saya sembunyikan di bawah, sedangkan untuk illutrasi dan title saya sembunyikan diatas, namun masih di dalam screen/frame tersebut. j. Selanjutnya, buat koneksi screen splashscreen ke screen login, dan atur animasi menjadi seperti gambar dibawah ini. k. Dilanjutkan dengan mengoneksikan screen login ke screen login ke 2 dengan detail animasi seperti dibawah ini l. Tadaa, prototype animasi sederhana kamu sudah jadi. Untuk menguji prototype kamu udah berhasil apa belum kita lanjut ke step 6. 6. Menjalankan prototyping a. Ketika kamu sudah membuat prototyping, kamu perlu untuk menjalankan prototype tersebut sudah berhasil apa belum, dengan cara pastikan starting frame kamu sudah benar. Dengan melihat pada rightsidebar-prototype. b. Klik pojok kanan atas, dengan icon play c. Kemudian akan muncul tab baru yang berarti prototype sedang dijalankan. Hello people with the spirit of learning! Gimana untuk tips kali ini? Sangat mudah bukan ? Jika terdapat kendala bisa DM langsung ke @buildwithangga atau @cika.design. Terima kasih telah membaca artikel ini dan jangan lupa untuk tag kami.

Hello people with the spirit of learning! Pernah ga kalian sudah membuat screen yang banyak pada project UI Design lalu tiba-tiba kalian ingin mengganti warna dari sebuah button? Apa yang akan kalian lakukan? menggantinya satu persatu? Well, itu akan memakan waktu yang sangat lama. Bayangkan jika kalian memiliki 100 button, apakah kalian akan rela membuang waktu hanya untuk mengganti button saja? Tapi tenang, pada artikel ini kita akan mempelajari bagaimana caranya membuat component pada figma, agar proses revisi dan pembuatan design kalian jadi lebih cepat dan efisien. Oke, siapkan koneksi internet kalian dan juga akun figmanya ya. Let’s Start! Step 1 : Buat Project Baru Pertama, buat sebuah project baru dengan memilih + New pada menu yang ada di bagian atas tampilan dashboard figma. Step 2 : Ubah Nama Project Kalian bisa ubah nama dari project yang baru saja dibuat dengan mengklik bagian Untitled, lalu ubah namanya sesuai kemauan kalian. Step 3 : Menambahkan Frame Baru Untuk menambahkan wireframe baru, kalian dapat menekan F pada keyboard atau memilih icon pagar seperti menu yang ada pada gambar diatas. Setelah itu kalian bisa klik bagian artboard dimana saja untuk membuat wireframe baru, lalu atur ukuran dari framenya menjadi W: 400 x H: 100. Step 4 : Membuat Button Utama Dalam membuat button, kalian bisa menggunakan Rectangle Tool dengan cara memilih menu seperti gambar diatas atau menekan R pada keyboard. Setelah membuat objectnya, atur ukuran buttonnya menjadi W: 300 x H:60. Step 5 : Mengatur Bentuk Radius Button Agar bentuk buttonnya tidak terlalu kaku, kalian bisa mengubah ujung tepinya atau biasa disebut dengan radius, dengan mengubah bagian yang ada seperti gambar diatas. Ubah radiusnya menjadi 40. Step 6 : Ubah Warna Button Untuk mengubah warnanya, kalian bisa seleksi terlebih dahulu object button yang telah dibuat. Setelah itu, pilih persegi kecil seperti gambar diatas untuk masuk ke pengaturan warna. Ubah kode warnanya menjadi 6A67FB pada bagian kolom Hex. Jika kalian memiliki kode warna yang lain, silahkan digunakan sesuai kebutuhan yaa. Step 7 : Menambahkan Teks Pada Button Gunakan menu Text (T) untuk membuat sebuah tulisan baru yang akan kalian gunakan pada bagian button. Untuk pengaturan teksnya, kalian bisa ikuti seperti ini yaa. Typeface: Roboto, Typefont: Medium, Size: 22px. Lalu, jangan lupa atur rata tengah teksnya dengan memilih menu Text align center. Step 8 : Membuat Component Setelah semuanya tersusun rapih, seleksi kedua objectnya (button + teks) dengan cara klik pada layer dan jangan lupa tahan tombol Ctrl atau Command. Langkah selanjutnya, klik kanan pada layer yang telah terseleksi. Lalu pilih Create component dan kalian telah membuat satu komponen yang siap dipakai ulang dalam membuat project lebih cepat. Step 9 : Menggunakan Component Untuk mengecek component yang telah kalian buat sebelumnya, kalian bisa cek pada bagian Assets, lalu pilih Local components, setelah itu buka nama frame dari component yang kalian buat. Untuk menggunakan componentnya, kalian hanya perlu menggeser object componentnya, lalu letakkan pada tempat yang kalian inginkan. Step 10 : Mengubah Tampilan Dengan Cepat Untuk mengubah tampilan dari semua componentnya dengan satu langkah, kalian perlu double click pada component yang ada pada bagian Assets. Setelah itu kalian bisa ganti tampilannya, seperti contoh diatas saya mengganti warna dari component utamanya, lalu component lainnya secara otomatis akan berganti warna juga. Wow cepat banget kan, gak perlu ganti satu persatu. Sekarang proses membuat UI Design jadi lebih cepat dan efisien banget pokoknya. Jangan lupa tag hasil belajar kalian ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian penasaran dan tertarik untuk mempelajari tips-tips UI Design, silahkan bergabung pada kelas 3D Blender & UI UX Landing Page. Dalam kelas itu, kita akan bersama-sama mempelajari bagaimana caranya mendesign tampilan UI Design secara cepat, dan juga kita akan mempelajari bagaimana caranya membuat 3D Modelling agar tampilan UI Design lebih terlihat unik dan menarik. Silahkan bergabung, sampai jumpa di kelas yaa! Terima kasih.

Hello people with the spirit of learning! Kali ini kita akan mendesign tampilan Login UI Mobile Sederhana melalui Figma. Mari kita coba! Step 1: Menyiapkan Referensi Sebelum kita memulai mendesign suatu tampilan, pasti kita perlu mencari inspirasi terlebih dahulu. seperti layout, warna, Illustration, icon dan lainnya. Biasanya saya mencari referensi di Pixel.buildwithangga.com dan dribbble.com Step 2:  Membuat Frame (Artboard) Untuk membuat framenya, bisa kita tekan huruf “F” pada keyboard, Lalu pilih ukuran yang diinginkan. Biasanya saya menggunakan ukuran iphone 11 Pro (375 x 812). Step 3: Membuat Headline Setelah berhasil membuat Frame Langsung saja kita buat Title teks agar pengguna bisa mengetahui bahwa mereka sedang berada di Login Page.  Pertama kita tekan huruf “T” pada keyboard lalu klik di area Frame.selanjutnya langsung saja kita ketik teksnya “Welcome Back,”. lalu kasih margin 30px dari kiri dan margin 30px dari atas.Setelah itu, kita atur terlebih dahulu typeface, jenis font, ukuran fontnya dan warnanyaKemudian untuk membuat subtitlenya, kita copy saja bagian teks titlenya. lalu kita ubah caption teksnya dan juga teks propertiesnya. jangan lupa kasih margin 6px dari title teks dan margin 30px dari kiri. Step 4: Menambahkan Ilustrasi Oke langsung saja kita tambahkan ilustrasi agar lebih menarik. lalu Kasih margin 30px dari bawah Headline dan margin 30px dari kiri dan juga kanan. oiya Disini saya menggunakan illustration dari pixel.buildwithangga.com. Kita bisa mendownloadnya dari website tersebut. Step 5: Membuat Form Input Login Selanjutnya, mari kita membuat form input login pagenya. Pertama kita buat title teks “Email Address”, lalu kasih jarak 30px dari ilustrasiSetelah itu buatlah rectangle dengan menekan huruf “R” pada keyboard, lalu klik di area frame.Selanjutnya ubahlah Width dan Height rectangle tersebut menjadi 315 x 50 dan kasih corner radius 12. Jangan lupa kasih margin 6px dari teks “Email Address” dan margin kiri kanan 30pxKemudian ubahlah rectangle tersebut menjadi outline dengan cara menghapus Fillnya dan menambahkan stroke, Lalu beri warna light “9FADBC”.Setelah itu, tambahkan icon di dalam rectangle tadi lalu kasih padding 12px dari kiri dan 13px dari atas dan juga bawah. oiya disini saya menggunakan icon gratis buatan Alexander berikut ini linknya: https://www.figma.com/file/IQ2DGwDh2zWHb9bU4Hg9K9/Free-Basic-%26-Essentials-Icons-Set?node-id=0%3A1 (Pastikan Icon yang di copy seluruh grup iconnya).Selanjutnya tambahkan juga teks di dalam rectangle, lalu kasih padding 12px dari icon dan padding 14px dari atas dan bawahNah untuk membuat form input passwordnya. tinggal duplicate saja dengan cara tekan shortcut “Command + D” untuk pengguna Mac os dan “CTRL + D” untuk pengguna windows. Setelah di duplicate ubahlah caption tersebut dan kasih margin 30px dari form email address, seperti gambar diatas Step 6: Membuat Button CTA Forgot Password Oke selanjutnya mari kita buat button teks untuk forgot password. Caranya sangat mudah Pertama buatlah teks “Forgot Password” Lalu atur properties teks tersebut pada di gambar diatas ini. Setelah itu kasih margin 6px dari atas form input password dan margin 30px dari kanan Step 7: Membuat Button CTA Login Buatlah rectangle berukuran 315x50 lalu beri corner radius 12Buatlah rectangle berukuran 315x50Setelah itu beri jarak 30px dari teks “Forget password?” dan 30px dari kiri dan juga kananKemudian beri warna Biru “0079FB”Selanjutnya buatlah teks “Login” di dalam rectangle tersebut dengan padding 14px atas bawah dan padding 138px kiri kanan (Pastikan diatas layer rectangle tadi) Step 8: Membuat Button CTA Daftar akun Duplicate Button CTA “Forgot Password”Setelah itu ubah teks tersebut menjadi “Don’t have an account? Sign Up”Kemudian Bloklah teks “Don’t have an account? Sign Up” tersebutLalu ubahlah warna dan Jenis font seperti yang digambar (Pastikan “Don’t have an account?” dalam keaadan diblok)Selanjutnya kasih margin 30px dari bawah dan 90px dari kiri dan juga kanan Step 9: Finishing & Upload Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :)

Hello people with the spirit of learning! membuat wireframe secara cepat, kalian dapat menggunakan tools Whimsical yang bisa diakses melalui website. Oke langsung aja kita mulai. Step 1 : Kunjungi Website Whimsical Pertama, kunjungi website whimsical.com, setelah itu bisa daftarkan akun menggunakan Google mail atau membuat akun email baru pada whimsical. Step 2 : Halaman Utama Dashboard Setelah mendaftarkan akun dan juga masuk menggunakan akun yang telah terdaftar sebelumnya, kalian akan masuk ke bagian dashboard utamanya. Step 3 : Tambahkan Project Wireframe Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 4 : Menambahkan Frame Baru Berikutnya, untuk membuat sebuah frame baru, kalian bisa menekan F pada keyboard, atau pilih menu Add Frame lalu pilih ukuran frame yang ingin kalian pakai. Step 5 : Menambahkan Element Pada Frame Untuk menambahkan element atau objek pada tampilan wireframe, kalian dapat memilih menu Add Element lalu pilih element yang ingin digunakan seperti Rectangle, Solid Button, atau yang lainnya. Step 6 : Ubah Warna Background Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 7 : Tambahkan Text dan Icon Setelah itu, buat header menu menggunakan Add Text (T) lalu untuk iconnya kalian bisa gunakan icon yang telah tersedia pada whimsical menggunakan menu Add Icon (X). Step 8 : Menambahkan Object Lain (Button & Wireframe Image) Setelah menambahkan dan mengatur ukuran teks, tambahkan sebuah button menggunakan Solid Button (B) dan juga tambahkan satu buah wireframe untuk gambar menggunakan menu Image (I). Step 9 : Finishing dengan Menambahkan Element Lain Setelah itu, kalian bisa lanjut mebuat tampilan wireframe pada section berikutnya hingga selesai pada bagian footer suatu halaman. Dan kalian telah menyelesaikan satu tampilan wireframe yang akan diubah ke visual design pada tahap design berikutnya. Nice! kalian telah menyelesaikan tampilan wireframenya, jangan lupa untuk tag hasil belajarnya ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian tertarik untuk mempelajari proses design mulai dari wireframe, visual design, dan juga prototyping, kalian bisa mengikuti kelas Wordpress & UI/UX Design, di dalam kelas itu kita akan mempelajari proses design UI hingga mengubah ke dalam bentuk website menggunakan Wordpress.