Tips Design

Hi everyone, kamu pernah gak sih mau bikin desain user interface tapi bingung mulai dari mana? Yuk sini, baca penjelasan berikut! Pada kesempatan kali ini aku akan berbagi langkah mudah untuk kamu membuat desain tampilan halaman Home dari langkah yang paling awal! Langkah 1 : Mencari Referensi dan Menentukan Konten Sebelum kamu membuat desain suatu tampilan, kamu harus menentukan konten tampilan desain akan seperti apa. Aplikasi atau website apa yang akan kamu buat. Pada tahap ini kamu bisa terlebih dahulu mencari referensi dari desain. Karena tahap ini akan memberikan kamu lebih banyak ide tentang tampilan yang akan kamu buat. Kamu bisa mencari referensi melalui Pinterest.com, Dribbble.com, Behance.net dan Shaynakit.com. Langkah 2: Menentukan Warna dan Gaya Desain Setelah menentukan tema dan referensi yang cocok, kamu bisa mulai menentukan pilihan warna yang akan digunakan untuk desain kamu. Pilihan warna yang bisa kamu tentukan adalah warna primary, secondary dan warna neutral. Warna-warna ini akan digunakan pada aset desainmu seperti button, icon, navigation bar dan lain-lain. Dengan menentukan warna yang akan digunakan, desainmu akan menjadi lebih konsisten dan rapi. Langkah 3: Memilih Ukuran Frame yang Akan Digunakan Membuat Frame pada figma bisa dilakukan dengan menekan huruf F pada keyboard, lalu akan muncul pilihan ukuran Frame. Saat ini mengikuti ukuran yang biasa digunakan adalah Iphone 14 Pro dengan ukuran 393 x 852px. Langkah 4: Membuat Header Langkah selanjutnya adalah memasukan konten header yang telah ditentukan. Untuk contoh kali ini aku memasukan konten berupa foto profil, notif dan detail nama serta kalimat ucapan seperti “Good Morning”. Membuat profile dapat dilakukan dengan menggunakan objek ellips dengan menekan huruf O pada keyboard. Lalu pada pengaturan Fill diubah menjadi image dan kamu dapat memilih gambar yang diinginkan. Selanjutnya kamu dapat membuat text dengan menekan huruf T dan dilanjut dengan menuliskan kalimat “good morning” dengan menggunakan ukuran 12pt dan “Marilyn Dokidis” dengan menggunakan ukuran 18pt. Pembuatan tombol notif di sini menggunakan icon yang ditaruh ke dalam ellips serta digabungkan menjadi group dengan select kedua object dan klik ctrl+G. Jangan lupa untuk menyesuaikan warna icon dan ellips. Icon yang aku gunakan di sini yaitu Iconly. Langkah 5: Membuat Input Field Booking Flight Pada tampilan card ini terdapat beberapa komponen yang harus dibuat untuk melengkapinya. Langkah awal dalam pembuatan ini adalah dengan membuat card terlebih dahulu. Tahap ini dapat dilakukan dengan menggunakan rectangle dengan menekan R. Buat kotak dengan ukuran 353 x 401px dan atur corner radius menjadi 24. Membuat button untuk “One-way” dan “Multi-city” dapat dilakukan dengan text yaitu T dan memasukan texttersebut ke dalam Frame (click F) dengan ukuran 156,5 x 41 pixels. Jangan lupa untuk mengatur corner radius pada Frame untuk mendapat bentuk yang diinginkan. Membuat form untuk “tujuan dan keberangkatan” dengan menggunakan text dan juga menambahkan icon. Untuk form ini digabungkan ke dalam satu Frame dan diberikan batas dengan menggunakan Line dengan menekan huruf L. Jangan lupa untuk tambahkan button dengan menggunakan icon panah yang digabungkan ke dalam ellips. Lalu ubah ukuran corner radius menjadi 12. Form untuk tanggal, kamu dapat menggunakan tahapan yang sama seperti sebelumnya hanya saja Frame yang digunakan memiliki ukuran yang berbeda. Untuk tambahan terdapat icon switch yang bisa kamu dapatkan melalui Figma Community atau dapat kamu buat sendiri dengan ellips dan rectangle. Masih dengan tahap yang sama yaitu Text dan Frame, pada form ke 4 ini yaitu penumpang dan kelas perbedaannya hanyalah ukuran panjang. Selanjutnya kamu dapat membuat “Search Flight” CTA button dengan cara yang sama yaitu menggabungkan text dan icon ke dalam Frame. Selanjutnya atur ukuran tinggi dan panjang dari button tersebut. Langkah 6: Membuat Special Price Pada bagian ini akan dibagi menjadi dua yaitu “Judul” dan bagian "Card". Pada judul menggunakan ukuran font 18pt untuk title dan 12pt untuk subtitle. Selanjutnya untuk button “See more” bisa menggunakan ukuran 12pt yang selanjutnya akan dimasukan ke dalam Frame dengan ukuran 79 x 36px. Untuk card “Promo”, pertama kamu dapat membuat Frame dengan ukuran 287 x 118px terlebih dahulu dan mengatur corner radius menjadi 12px. Langkah selanjutnya menyiapkan icon destination pesawat. Dengan menggunakan dua objek yaitu ellips dan line dash. Bentuk pesawat bisa kita ambil dari icon. Lalu kita dapat membuat text data-data yang dibutuhkan untuk dimasukan ke dalam info card tersebut sepeperti tanggal, tujuan, durasi dan jam penerbangan. Dengan menggunakan ukuran huruf seperti di atas. Langkah selanjutnya adalah menambahkan tampilan promo pada card yaitu dengan icon promo ukuran 32 x 32px dan Frame ukuran 66 x 118px dan corner radius 12 x 12px. Setelah selesai kamu bisa menggabungkan kedua card dengan cara group yaitu klik kanan dan pilih group selection. Langkah 7: Membuat Background Untuk Header Kamu dapat membuat background untuk bagian header agar lebih menarik dengan tahap-tahap berikut ini: Membuat background kali ini menggunakan Frame dengan menekan huruf F. Gunakan ukuran 393 x 291px dan atur corner radius 40px untuk dua sudut saja. Oiya, jangan lupa untuk ceklist clip content. Setelah itu ubah Fill menjadi Linear dengan kode warna #3079D9 dan #1E73E4. Lalu kamu bisa mencari tampilan “Map” pada figma community. Kali ini aku menggunakan melalui link berikut World Map SVG Illustration . Langkah terakhir adalah memasukan map tersebut ke dalam Frame background yang telah dibuat dan ubah opacity map menjadi 40%. Selesai tahap ini kamu bisa langsung taruh background tersebut pada bagian header. Langkah terakhir gabungkan background dengan header, taruh background pada posisi di belakang header yang telah kita buat dengan click kanan dan send to back. Langkah 8: Bottom Navigation Bar Untuk melengkapi tampilan dan fitur pada aplikasi maka akan ditambahkan navigation bar. alasan penggunaan text pada navigation bar adalah untuk mempermudah pengguna mengetahui fungsi bottom tersebut. Tahap pembuatan bottom navigation bar yaitu dengan menggunakan Frame 393 x 107px. Setelahnya, buat fitur yang akan dimasukan ke dalam  navigation bar dengan menggunakan teks dan juga icon seperti contoh di atas. Navigation bar telah selesai dan siap digabung bersama aset lainnya. Langkah 9: Colors Jika keseluruhan desain telah selesai, kamu bisa mulai memeriksa penggunaan warna yang digunakan dan menyesuaikannya. Tentukan Primary Color dan Secondary Color yang akan digunakan. Pada UI design kali ini, aku menggunakan #3079D9 sebagai primary color dan #FFD88F untuk secondary color. Yeay sekarang kamu sudah berhasil membuat tampilan UI homepage untuk aplikasi travel! Semoga langkah pembuatan desain UI untuk Home ini dapat dimengerti yaa dan menambah semangat ya belajar UI. Oiya, kamu juga bisa loh belajar lebih dalam lagi mengenai UI melalui website BuildWithAngga ;)

User-interface design adalah sebuah element penting yang wajib kita perhatikan dalam membangun aplikasi website atau mobile. User-interface design yang menarik dapat membuat pengguna aplikasi menjadi lebih betah ketika menggunakan aplikasi kita dalam mencapai tujuan mereka masing-masing seperti membeli tiket pesawat, memesan makanan, atau mencari teman baru. Sebagai seorang UI UX designer maka ada beberapa hal yang perlu dilakukan sehingga tampilan UI design sesuai dengan target pengguna dan memberikan experience yang baik. Menggunakan Hick’s Law Sebaiknya ketika mendesain sebuah halaman di dalam aplikasi, kita hanya perlu menampilkan beberapa elemen penting saja sesuai dari konteks dari halaman tersebut. Misalnya kita sedang mendesain halaman pembayaran, maka yang perlu kita lampirkan bisa seperti: Nama lengkap, alamat rumah, dan nomor HPMetode pembayaran (apakah transfer manual/credit card)Kode promo sehingga memberikan potongan hemat Kita tidak perlu menambahkan bagian yang kurang penting seperti produk terpopuler atau banner promo lainnya. Biarkan tampilan desain tersebut tetap minimalist sehingga tidak mengganggu perhatian pengguna. Kamu bisa mengenal lebih jauh lagi tentang Hick’s Law pada website resmi LawsofUX. Membatasi Penggunaan Warna Utama Berdasarkan pengalaman saya pribadi selama 8 tahun lebih mendesain tampilan UI design, saya telah mempelajari cara mengkombinasikan warna-warna sehingga projek terlihat lebih eye-catching tanpa merusak selera mata pengguna. Well, kita perlu membatasi warna utama dari aplikasi/website tersebut, misalnya hanya menggunakan dua warna utama yaitu Biru tua dan Biru muda. Namun, kita tidak perlu membatasi warna-warna tambahan lainnya yang menjadi accent colors. Pada bagian yang tidak perlu di-highlight dalam UI design dapat menggunakan warna tersier misalnya menggunakan warna turunan dari warna utama yang saat itu sedang digunakan, misalnya judul makanan berwarna Navy sedangkan kategori makanan bisa berwarna Navy yang lebih pudar sehingga seperti warna abu-abu. Menerapkan Visual Hierarchy pada UI Design Visual Hierarchy adalah sebuah proses yang bagaimana kita mengatur berbagai komponen penting di dalam sebuah layout yang sama. Kita perlu mengatur berdasarkan dari kepentingan komponen tersebut, jadi komponen mana yang harus lebih besar dan mana yang sebaiknya kecil saja karena kurang penting. Visual Hierarchy yang baik dapat membantu pengguna menyadari dan menemukan sesuatu dengan cepat, misalnya aplikasi tabungan dan halaman tersebut bertujuan untuk membantu pengguna melihat saldo tersedia disertai dengan transaksi terbarunya. Ketika mendesain tampilan UI maka kita perlu posisikan diri kita juga sebagai pengguna dari aplikasi tersebut, apakah layout yang kita design dapat membantu pengguna menemukan yang mereka butuhkan dengan cepat? karena jika tidak maka kita perlu meningkatkannya kembali sehingga pengguna dapat menghemat waktu dan semakin betah menggunakan aplikasi kita. Well, begitulah beberapa tips utama yang sering saya gunakan dalam membuat tampilan UI design menggunakan software gratis yaitu Figma yang bukan hanya eye-catching tapi juga dapat memberikan customer experience terbaik dan dapat meningkatkan pertumbuhan bisnis pada perusahaan tempat saya bekerja. Jika kamu penasaran dengan hasil karya buatan saya, maka bisa kunjungi profile Dribbble milik saya yang bisa kamu jadikan referensi projek UI design kedepannya nanti. Sampai jumpa lagi pada artikel-artikel terbaru selanjutnya ya.

Lowongan magang ini telah ditutup karena sudah mendapatkan 3 kandidat yang tepat. Goal Mendesain kebutuhan user-interface website BuildWithAngga dan bekerja sama dengan UI Engineer bersama developer lainnya. Details Magang online dari rumahJam kerja 9 pagi s/d 5 sore Hari kerja Senin s/d JumatMagang selama 3-6 bulanSetelah magang berkesempatan kerja full-time Responsibilities Mendesain user interface website BuildWithAngga Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 2Fresh graduate (Sarjana/SMA) boleh apply Benefits Free akses 1 kelas Premium bebas pilihSertifikat kelulusan magang resmi dari buildwithanggaUang kompensansi/jajan bulanan Challenge Ubahlah tampilan wireframe di atas ke bentuk visual design, gunakan kombinasi warna dan style lainnya yang eye-catching, gunakan beberapa referensi design yang kami sukai: https://dribbble.com/shots/20112429-Bank-Finance-Mobile-App-Designhttps://dribbble.com/shots/22320935-Wealth-Management-Landing-Pagehttps://dribbble.com/shots/20571863-Finance-and-Business-Dashboard Anda wajib menggunakan Figma untuk mengerjakan challenge di atas, apabila sudah selesai copy link projek Figma dan pastikan bisa diakses secara publik. How to Apply Siapkan Resume (CV) & link projek Figma (hasil test) dengan rapihIsi body email dengan professionalIsi subject email dengan xxxKirim lamaran ke email xxxBerdoa semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 4 September 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami BuildWith Angga. Terima kasih.

Tentang Mentor Angga dan Dhimas adalah self-taught UI UX designer yang telah memulai karirnya sejak tahun 2015 sebagai seorang website designer. Mereka berdua telah menyiapkan arahan tepat untuk membantu pemula dalam memulai karir UI UX designer tanpa harus menghabiskan waktu 1-2 tahun lamanya. Let's join us. Konsultasi Anda dapat bertanya beberapa topik di bawah ini: Arahan mulai karir UI UX yang terbaru dan tepatReview Portfolio UI UX design untuk bekerjaTips nego gaji dan menentukan harga projectSoftware recommended untuk UI UX designer Details Konsultasi Jumlah durasi adalah 60 menit per sessionKonsultasi dilakukan secara online via Zoom/Google MeetJadwal konsultasi akan ditentukan bersama mentor setelah melakukan pembayaranDiskusi untuk membangun karir yang lebih matang Cara Booking Harga 1-2 konsultasi Rp 150.000/60 menitPPN 11%Total yang harus dibayar adalah Rp 166.500 Silahkan transfer pembayaran ke rekening:MandiriPT Angga Membangun Indonesia1030007801844BCAPT Angga Membangun Indonesia0280256315Kirim bukti transfer dan email akun buildwithangga.com milik anda melalui WhatsApp +62 857-2207-1646 (Amir)Amir akan menginformasikan kepada mentor terkait dan anda bisa mulai berdiskusi dengan mentor untuk menentukan jadwal yang cocok Pertanyaan Umum Kenapa program konsultasi 1-2 online ini penting untuk saya? Anda dapat menghemat waktu dan biaya untuk mendapatkan trusted guidance dari seorang yang lebih berpengalaman di bidangnya, dengan begitu Anda bisa kembali fokus pada karir yang Anda impikan saat ini. Setelah mengikuti konsultasi 1-2 nanti hasilnya seperti apa? Anda akan mendapatkan pencerahan yang bermanfaat untuk meningkatkan karir yang akan atau sedang Anda jalankan saat ini seperti membangun CV atau portfolio yang lebih baik. Apakah ada jaminan uang kembali? Anda akan mendapatkan uang kembali apabila mentor tidak hadir (tanpa keterangan) pada jadwal yang sudah Anda dan mentor tentukan sebelumnya. Saya ada pertanyaan lain terkait program 1-2, bisa tanya kemana? Anda bisa bertanya tentang program melalui WhatsApp +62 857-2207-1646 (Amir).

Bagi kamu yang memiliki ketertarikan dengan UI/UX design mungkin sudah tidak asing dengan software Figma. Figma telah menjadi salah satu alat desain UI/UX yang populer di kalangan desainer digital. Tools ini menyediakan fitur-fitur handal untuk membuat desain aplikasi yang interaktif. Dalam artikel ini, kita akan mengenal Figma secara singkat dan membahas langkah-langkah untuk membuat prototyping dengan mudah. Pengenalan Figma dan Langkah Membuat Prototyping Figma adalah alat desain berbasis web yang memungkinkan kolaborasi tim desain dan pembuatan prototype antarmuka pengguna. Dibandingkan dengan software desain lainnya, Figma menawarkan keuntungan berupa aksesibilitas dan kemudahan kolaborasi karena dapat diakses secara online dan memungkinkan pengguna untuk bekerja secara real-time. Rapat membahas aplikasi yang akan didesain menggunakan Figma Figma juga digunakan oleh beberapa brand besar termasuk Google, Microsoft, Twitter, Zoom, Dropbox, dan Walgreens. Banyak perusahaan lain di berbagai industri yang juga mengadopsi Figma sebagai alat desain dan prototyping. Figma telah menjadi pilihan yang populer di kalangan desainer dan tim pengembangan di berbagai perusahaan karena kemudahan penggunaan dan fiturnya yang sangat beragam. Dengan Figma kita dapat menghemat waktu karena bisa berkolaborasi seperti mengubah rancangan desain dalam waktu yang bersamaan dengan tim dan memberi komentar. Selain itu Figma memudahkan para desainer dengan adanya sistem berbasis cloud, para desainer akan lebih flexible untuk membuka desain dimana dan kapan saja. Figma juga memiliki banyak plugin yang membantu para Desainer untuk membuat animasi berupa gambar dan asset penunjang lainnya. Dengan begitu, tampilan prototype tidak hanya tampilan sederhana, tetapi mengarah ke tampilan Aplikasi yang sebenarnya ingin dibuat. Apa itu Prototype? Proses pembuatan wireframe sebelum direalisasikan ke bentuk prototype di Figma Dalam proses pembuatan desain aplikasi atau website, tahap yang tidak dapat dilewatkan adalah pembuatan prototype. Prototype merupakan langkah penting untuk mengubah sifat abstrak dari sebuah ide menjadi sesuatu yang lebih konkret. Keberadaan prototype memiliki peran yang krusial dalam desain aplikasi maupun desain website, karena melalui prototype kita dapat menguji fungsionalitas dan navigasi aplikasi sebelum proses pengembangan oleh para programmer dimulai. Dengan adanya prototype, kita dapat mengidentifikasi kelemahan dan penyesuaian desain secara efektif sebelum mencapai tahap implementasi yang kompleks. Prototype memungkinkan kita untuk melakukan perbaikan sebelum user berinteraksi dengan aplikasi atau website yang dikembangkan. Langkah-Langkah Membuat Prototyping dengan Figma Tampilan desain prototype di Figma Dengan menggunakan Figma, prototyping dapat dilakukan secara digital dengan memanfaatkan fitur-fitur yang disediakan. Ini memungkinkan desainer untuk membuat simulasi langsung dari interaksi pengguna dengan UI aplikasi, memperlihatkan alur, tampilan, dan fungsionalitas secara lebih detail dan realistis. Dengan begitu desainer dapat memvalidasi desain, mengumpulkan feedback, dan membuat perbaikan yang diperlukan. Selain itu, prototyping juga dapat digunakan untuk melakukan demonstrasi kepada klien, sehingga mereka dapat memahami bagaimana aplikasi akan berfungsi sebelum tahap implementasi. Berikut merupakan langkah dalam menggunakan fitur prototype yang ada pada figma : 1. Siapkan Design yang akan diaplikasikan ke Prototype Contoh desain aplikasi yang akan di prototyping di Figma Sebelum membuat prototyping, pastikan kamu telah menyelesaikan desain UI dengan lengkap. Pastikan semua elemen desain telah dirancang dengan jelas dan berfungsi dengan baik. 2. Buka Tab Prototype Tab prototype pada Figma Tab Prototype terletak di sebelah kanan atas. Dalam tab ini kita dapat mengatur beberapa hal seperti pengaturan tab yang ingin dipakai, mengatur warna background, dan mengatur halaman pertama yang dijalankan. 3. Pilih Konten untuk Diarahkan Tampilan halaman yang akan dihubungkan satu sama lain di Figma Gambar di atas adalah konten yang sudah diarahkan ke halaman tujuan. Untuk membuatnya, kita hanya perlu klik konten seperti desain button, tulisan, gambar, dll. Selanjutnya tarik ke halaman yang sudah kita buat untuk menjalankan aksinya. 4. Custom Animation Menu custom animation pada Figma Klik pada elemen yang akan dibuat prototypenya. Masuk ke tab prototype dan klik interactions disini kita dapat memilih jenis aksi seperti apa yang ingin kita lakukan untuk menuju ke halaman berikutnya. Untuk animasi yang disediakan sudah cukup banyak dan bisa kita custom sesuai dengan kebutuhan masing-masing aplikasi atau web. 5. Klik Play Fitur play untuk menjalankan prototype di Figma 6. Prototype Berhasil Dibuat Prototype yang berhasil di buat di Figma Kesimpulan Nah itu dia penjelasan mengenai software Figma dan bagaimana tahapan melakukan prototyping. Dengan mengikuti langkah-langkah di atas, kamu bisa membuat prototyping yang keren sesuai ide aplikasi yang ingin kamu buat. Jangan takut untuk eksplorasi dengan elemen desain, plugin, dan fitur yang tersedia di Figma. Let's have some fun and create awesome prototypes with Figma!

Hi, people with the spirit of learning. Pernah ga sih kamu melihat halaman website yang dipenuhi berbagai elemen desain sehingga kamu sulit untuk mengetahui harus mulai melihatnya dari mana? Jika kamu pernah dan merasa kesulitan menemukan fokus pada layar, kemungkinan tata letaknya tidak memiliki hierarki visual yang jelas. Sebelum memulai desain halaman web atau aplikasi, penting untuk memerhatikan hierarki visual terlebih dahulu. Karena hierarki visual halaman dapat mengontrol penyampaian informasi dari sistem ke pengguna. Sehingga pengguna mengetahui ke mana harus memusatkan perhatian mereka. Hierarki Visual di UI/UX Design Sebelum kita membahas konsep hierarki visual dari segi penggunaan size, color, contrast, dan spacing, terlebih dahulu kamu harus mengetahui apa itu hierarki visual dan mengapa hierarki visual sangat penting. Apa itu Hierarki Visual? Hierarki visual mengacu pada prinsip dasar desain untuk mengatur elemen dan menunjukkan urutan kepentingannya. Hierarki visual dapat membantu pengguna memahami struktur informasi, mengarahkan fokus mereka, dan memberikan pengalaman yang lebih intuitif dan efektif. Dengan menggunakan hierarki visual yang tepat, elemen yang paling penting dan relevan dapat menonjol, sementara elemen yang kurang penting diberi penekanan yang lebih rendah. Tampilan hierarki visual di website BuildWithAngga Contohnya, dalam desain tampilan sebuah halaman web, elemen judul biasanya diberi bobot yang lebih besar, tampil dengan gaya huruf yang mencolok, atau ditempatkan di posisi yang lebih menonjol untuk menarik perhatian pengguna. Elemen-elemen sekunder, seperti teks isi atau tombol aksi, dapat memiliki ukuran atau gaya huruf yang lebih kecil dan penekanan yang lebih rendah. Dengan menggunakan hierarki visual ini, pengguna dapat dengan mudah memahami struktur halaman dan mengarahkan perhatian mereka ke elemen yang paling relevan. Mengapa Hierarki Visual Penting di UI UX Design? Visualisasi dari UI Hierarchy By Chris Berridge Hierarki visual penting dalam UI UX design karena perilaku pengguna sebagian besar didasarkan pada harapan pengguna dari interaksi sebelumnya dengan produk digital. Singkatnya, hierarki visual berperan dalam perencaan struktur informasi. Hierarki visual digunakan untuk memastikan bahwa elemen-elemen yang relevan dengan tujuan utama atau pesan inti situs web atau aplikasi terlihat dengan jelas. Pengguna akan langsung melihat dan memahami pesan penting, membantu menghindari kebingungan atau kehilangan informasi yang penting. Sehingga pengguna dengan mudah menemukan apa yang mereka cari. Konsep Dasar Hierarki Visual Kini kamu telah mengetahui apa itu hierarki visual dan mengapa hierarki visual sangat penting di UI UX design. Hierarki visual dapat memengaruhi psikologis pengguna untuk melakukan sebuah aksi. Oleh karena itu, sebelum menerapkan konsep dasar hierarki visual, sebagai seorang designer kamu harus memerhatikan beberapa konsep berikut. 1. Size Hierarki visual untuk penerapan perbedaan ukuran di web W3Schools Jika kita membicarakan tentang ukuran, kita pasti tahu bahwa pengguna lebih suka melihat elemen yang lebih besar terlebih dahulu dibanding elemen kecil. Karena elemen yang lebih besar terlihat jelas dan mudah dibaca. Memperbesar ukuran elemen yang penting akan menarik perhatian pengguna. Selain itu, ketika ingin membuat hierarki visual kita bisa menentukan perbedaan ukuran untuk menciptakan tingkatan dalam informasi yang disajikan. Dengan ukuran yang berbeda, pengguna lebih fokus pada elemen yang lebih relevan dan mengabaikan elemen-elemen yang kurang penting secara visual. 2. Color & Contrast Dalam dunia desain pemilihan kontras warna sangat penting untuk menarik perhatian pengguna. Warna-warna yang sangat kontras secara dramatis lebih menarik perhatian dan menyoroti elemen-elemen penting dalam suatu tampilan visual. Warna dapat digunakan untuk menonjolkan elemen yang penting atau memiliki prioritas tinggi dalam interface. Warna mencerminkan kepribadian dari brand kita. Pemilihan warna yang konsisten dengan merek atau tema desain dapat membantu menciptakan konsistensi visual. Dengan menggunakan warna yang serupa untuk elemen-elemen yang memiliki hubungan atau fungsi yang sama, pengguna dapat dengan mudah mengenali pola dan memahami bagaimana informasi disusun. Hierarki visual untuk penerapan pemilihan warna pada aplikasi workout by Outcrowd Dengan demikian, warna berfungsi sebagai salah satu alat penting untuk mengarahkan perhatian, mengorganisir informasi, dan memberikan makna tambahan pada elemen-elemen visual. Dengan memanfaatkan kekuatan warna dengan bijak, desain atau presentasi visual dapat menjadi lebih efektif dan memiliki dampak yang lebih besar pada pengguna. 3. Spacing Space atau spasi digunakan untuk mengatur tata letak elemen-elemen visual secara keseluruhan. Dengan memberikan ruang yang cukup antara elemen-elemen, baik dalam bentuk margin, jarak antara elemen, atau ruang kosong di sekitar elemen, kita dapat menciptakan tampilan yang terorganir. Spasi yang cukup antara elemen-elemen visual membantu meningkatkan keterbacaan dan pemahaman. Ruang yang memadai antara teks, gambar, atau grafik memungkinkan mata pengamat untuk memproses informasi dengan lebih baik, menghindari kebingungan atau kebingungan antara elemen-elemen tersebut. Hierarki visual untuk penerapan spacing di website BuildWithAngga Dengan demikian, spasi menjadi alat penting untuk mengatur, memisahkan, menghubungkan, dan memberikan penekanan pada elemen-elemen visual. 4. Proximity Proximity atau kedekatan berperan penting dalam mengorganisir elemen-elemen visual dan membentuk hierarki yang jelas. Proximity adalah gagasan bahwa elemen desain yang mirip dan ditempatkan dekat dianggap saling terkait. Elemen yang ditempatkan secara terpisah menandakan bahwa mereka termasuk dalam kelompok yang terpisah. Hierarki visual untuk penerapan proximity di website BuildWithAngga Proximity dapat ditentukan oleh ruang kosong atau warna. Contohnya pada gambar di atas. Dua elemen berisi tips. Kedua elemen tersebut saling terkait membahas Elementor, namun dipisahkan oleh ruang kosong karena kedua tips tersebut sudah berbeda sub topik. Dengan menggunakan whitespace, mata kita dipandu untuk melihat satu konten ke konten yang lainnya. 5. Texture & Style Menggunakan tekstur yang berbeda atau gaya yang mencolok dapat menarik perhatian pengguna dan mengarahkan mereka ke judul, ikon, atau elemen lainnya. Texture dan style memainkan peran penting dalam menciptakan estetika yang menarik dan pengalaman pengguna yang menyenangkan. Hierarki visual untuk penerapan texture and style pada marketing mobile app design by Ramotion Dengan menggunakan tekstur atau gaya yang konsisten dengan merek, pengguna dapat dengan mudah mengenali dan mengasosiasikan desain dengan merek tertentu. Hal ini dapat membangun kepercayaan pengguna terhadap produk atau jasa yang kita tawarkan. Kesimpulan Hierarki visual dalam UI UX design adalah sebuah konsep yang membantu kita mengembangkan produk dan mengoptimalkan pengalaman pengguna. Konsep hierarki visual berfungsi untuk membuat ide lebih jelas, memberikan struktur, menekankan elemen penting, dan meningkatkan pengalaman pengguna. Nah, untuk kamu yang ingin belajar UI UX designer lebih dalam lagi, kamu bisa mencoba belajar pada kelas yang sudah disediakan oleh BuildWithAngga, seperti Kelas Online Complete UI Designer: Visual Design, Prototype, Usability Testing.

Hi, people with the spirit of learning. Kalian masih bingung gimana caranya memilih tipografi yang tepat? Well, pada artikel kali ini kalian akan menemukan jawaban tersebut. Di dalam desain user interface, 70% dari isi kontennya diisi oleh tipografi. Artinya, tipografi memegang peranan yang sangat penting. Tipografi bukan hanya sekadar memilih kata atau font yang tepat untuk desain user interface, tetapi tipografi juga memperhatikan kontras warna, hierarki teks, spasi kosong, dan visual lainnya untuk membantu menyampaikan pesan spesifik tentang brand kamu. Para designer menginvestasikan banyak waktu dan energi untuk membuat tipografi yang lebih baik, karena tipografi yang baik dapat menarik perhatian pembaca untuk memahami pesan yang ingin disampaikan. Penggunaan Tipografi yang Efektif pada Desain User Interface Sebelum kamu membuat desain interface, sebaiknya kamu mengetahui beberapa panduan dasar tentang tipografi, memilih font yang sesuai, ukuran font minimal, dan konsistensi dalam penggunaan tipografi. Yuk, simak penjelasan dibawah ini. Apa itu Tipografi? Dalam desain user interface, tipografi adalah seni dan teknik dalam merancang, dan mengatur tampilan huruf-huruf cetak atau teks untuk membuat semua tulisan dapat dibaca. Tujuan utama tipografi adalah menciptakan tampilan yang mudah dibaca, mudah dipahami, dan menarik bagi mata. Tipografi tidak hanya digunakan pada web design, namun tipografi juga digunakan untuk berbagai bidang seperti periklanan, publikasi, dan desain grafis. Perkembangan teknologi juga telah membawa perkembangan dalam tipografi, termasuk penggunaan jenis huruf digital, desain responsif untuk berbagai perangkat, dan animasi tipografi. Contoh tipografi dalam dunia desain Elemen Dasar Tipografi Sebelum mengetahui cara menggunakan tipografi di UI design, terlebih dahulu kamu harus mengetahui elemen-elemen dasar apa saya yang harus diperhatikan. Font Font adalah sekumpulan karakter huruf, angka, tanda baca, dan simbol yang memiliki bentuk dan gaya tertentu. Setiap karakter dalam font memiliki desain grafis yang konsisten, termasuk bentuk, ukuran, ketebalan, dan properti visual lainnya. Contoh jenis font yang sering digunakan UI designer adalah serif fonts, sans serif fonts, slab serif fonts, script fonts, decorative fonts, dan lainnya. Typeface Typeface adalah keluarga font yang terkait, seperti Serif dan Sans Serif yang umum digunakan. Jadi, sebuah jenis huruf sering kali terdiri dari beberapa jenis huruf. Perbedaan typeface dan font Letter and Line Spacing Spasi huruf dan baris berfokus pada jarak antara huruf dan baris. Keduanya langsung memengaruhi tampilan dan kelegibilitasan teks. Perbedaan line height dan letter spacing Font weight, height, dan size Weight, height, dan size yang berbeda dapat membantu designer untuk membuat interface dengan gaya dan emotional tones yang berbeda. Kombinasi yang baik dari atribut-atribut ini dapat membantu meningkatkan keterbacaan, memperkuat hierarki visual, dan menciptakan tampilan yang menarik secara estetika. Setelah mengetahui elemen-elemen dasar pada tipografi, kamu juga harus mengetahui peran tipografi dalam desain UI. Peran Tipografi dalam Desain UI Dalam desain UI, tipografi berfungsi sebagai alat komunikasi visual untuk menyampaikan konten dalam hierarki yang jelas dan meyakinkan pengguna untuk stay di situs web atau aplikasi yang kamu bangun. Desain tipografi yang jelas dan informatif dapat mendorong pengguna untuk membeli sesuatu yang kita tawarkan. Tipografi dapat menjadi bagian penting dari identitas merek atau produk. Pemilihan jenis huruf yang konsisten dan desain tipografi yang memadai dapat membantu menciptakan nuansa dan identitas yang unik. Dalam desain UI, tipografi yang konsisten digunakan di seluruh aplikasi atau situs web untuk memberikan kesan yang terpadu dan profesional. Contoh tipografi pada website BuildWithAngga Setelah memahami konsep tentang tipografi, sekarang kamu bisa mengetahui bagaimana menggunakan tipografi di UI design. Cara Menggunakan Tipografi di UI Design 1. Pilih Font yang Sesuai Ketika memilih font ada beberapa hal yang harus dipertimbangkan, seperti brand’s personality, produk yang ditawarkan, dan audiens. Setiap konteks akan membutuhkan font yang berbeda sesuai dengan suasana dan tujuan desain. Jika kita ingin merancang untuk merek atau mengomunikasikan pesan khusus, pilih font yang mencerminkan kepribadian dan karakteristik merek atau pesan tersebut. Misalnya, jika ingin merancang untuk merek yang bersifat formal dan profesional, font serif yang elegan mungkin lebih cocok daripada font yang lebih kasual. Sebagai pemula dalam dunia tipografi, kamu bisa memulai dengan menggunakan font dari keluarga yang sama atau satu jenis huruf. Karena font dan jenis huruf yang sama diciptakan untuk bekerja sama secara harmonis. Ketika memilih jenis font penting untuk memastikan font kamu ramah browser web. Google fonts sebagai referensi untuk kamu mencari font yang akan digunakan 2. Perhatikan Ukuran Font Ukuran font sangat penting dalam tipografi karena mempengaruhi keterbacaan, penekanan, dan estetika dari teks yang ditampilkan. Dengan mengatur ukuran font yang berbeda untuk judul, subjudul, dan isi teks, kita dapat membedakan tingkat pentingnya setiap elemen dan membantu pembaca untuk membaca dengan lebih terarah. Ukuran font yang optimal dapat bervariasi tergantung pada konteks desain, media yang digunakan (cetak atau digital), dan preferensi target audiens. Untuk menentukan ukuran font minimal sebernarnya dapat bervariasi. Beberapa jenis font memiliki bentuk huruf yang lebih jelas dan mudah terbaca pada ukuran yang lebih kecil, sementara jenis font lain mungkin memerlukan ukuran yang lebih besar untuk mempertahankan keterbacaan. Selain itu, gaya font seperti tebal atau tipis juga dapat memengaruhi keterbacaan pada ukuran yang berbeda. Ukuran minimal font yang disarankan adalah sekitar 11-12 piksel untuk teks biasa pada layar komputer, dan 14-16 piksel untuk teks pada perangkat mobile. Namun, perlu diingat bahwa ukuran ini bisa disesuaikan berdasarkan jenis font yang digunakan dan kebutuhan desain. Berbagai ukuran font 3. Konsistensi dalam Penggunaan Tipografi Konsistensi adalah kunci dalam menciptakan desain tipografi yang kohesif. Konsistensi tipografi dapat membantu pengguna dalam menavigasi interface dan memahami informasi dengan cepat. Ketika elemen teks menggunakan gaya tipografi yang konsisten, seperti ukuran, jenis font, warna, dan gaya teks yang sama, pengguna dapat dengan mudah mengenali pola dan memahami arti dari setiap elemen. Konsistensi tipografi berkontribusi pada keterbacaan yang baik dan pengalaman pengguna yang lebih baik. Ketika pengguna terbiasa dengan jenis font, ukuran, dan gaya tipografi yang konsisten, mereka dapat dengan mudah membaca dan menginterpretasikan teks dengan nyaman. Kesimpulan Nah, pada penjelasan diatas kamu sudah mengetahui tentang tipografi. Selain dijadikan sebagai alat komunikasi visual, tipografi juga dapat meningkatkan keterbacaan, aksesibilitas user interface, dan meningkatkan penjualan karena desain tipografi yang informatif mendorong pengguna untuk berlama-lama pada situs webmu sehingga tertarik untuk membeli produk atau jasa yang kamu tawarkan. Oleh karena itu, sebagai UI designer kamu harus menciptakan tipografi yang lebih baik lagi. Untuk kamu yang ingin belajar tentang tipografi maupun desain UI, kamu bisa mencoba mengikuti kelas yang sudah disediakan oleh BuildWithAngga seperti Kelas Online Complete UI Designer: Visual Design, Prototype, Usability Testing.

Goals Membantu developer dalam membangun aplikasi/website yang mudah digunakan dan terlihat menarik di mata pengguna, sehingga pengguna jadi lebih nyaman ketika menggunakan dan menghabiskan lebih banyak waktu pada produk tersebut. Responsibilities Mendesain tampilan visual bedasarkan wireframeMembuat prototype sederhanaBekerja sama dengan developer pada tahap slicing Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahTerbiasa menggunakan software FigmaSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium BuildWithAngga Benefits Belajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulananPortfolio berkualitas dan networking Challenge Mengubah bentu wireframe 3 halaman menjadi tampilan menarik (visual design) menggunakan software Figma. Kerjakan visual design (color, typography, layout, etc) pada wireframe yang sudah kami sediakan di bawahSiapkan link projek Figma yang dapat diakses secara publik Wireframe How to Apply Siapkan Resume (CV) & Hasil test (berupa link Figma public) dengan rapihSubmit lamaran magang pada Google Form berikut: joinbwa.com/smpjud Lowongan dibuka pada tanggal 13 Juni 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat.

Goals Mendesain kebutuhan marketing seperti thumbnail kelas, screenshots, postingan Instagram, dan juga sebagainya menggunakan software Figma bersama copywriter dan lainnya. Responsibilities Mendesain thumbnail kelasMendesain screenshot kelasMendesain postingan Instagram Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSering menggunakan software FigmaSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium Benefits Belajar hal baru pada sebuah real-world projectSertifikat kelulusan magangBerkesempatan kerja full-timeUang kompensansi/jajan bulanan Challenge Pelajari design style yang disukai oleh BuildWithAngga pada file Figma berikutSetelah itu buatlah postingan Instagram sederhana (bebas berapa slide) terkait tips UI UX atau Website Development menggunakan styleExport hasil design .PNG lalu jadikan .ZIP dan kirim via email How to Apply Siapkan Resume (CV) & Hasil test dengan rapihIsi subject email dengan Magang Graphic Designer Juli 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 14 Juli 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWithAngga, stay tuned.

Hello, people with the spirit of learning. Ketika ingin membuat suatu website seorang programmer tidak hanya membutuhkan kemampuan yang logis untuk berpikir, tetapi juga membutuhkan kreatifitas yang tinggi. Hal ini karena desain yang menarik dan estetik dapat menarik perhatian pengguna dan membuat mereka lebih tertarik untuk menjelajahi halaman web kita. Seorang programmer yang kreatif dapat menciptakan tata letak yang menarik, penggunaan warna yang tepat, dan elemen desain yang menarik untuk meningkatkan pengalaman visual pengguna. Untuk membuat desain yang menarik bisa menggunakan CSS. Glosarium CSS Web Design Glosarium CSS Web Design ini akan membantu kamu untuk mengingat dan memahami materi tentang CSS. Sebelum mulai, baiknya kita berkenalan terlebih dahulu dengan bahasa pemrograman yang satu ini. Karena ada pepatah mengatakan tak kenal maka tak sayang. Yuk simak penjelasan di bawah ini. Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) pertama kali diperkenalkan oleh *World Wide Web Consortium* (W3C) pada 17 Desember 1996. CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan halaman web di browser. CSS memudahkan kita dalam mengatur jenis font, warna tulisan, dan latar belakang halaman. CSS digunakan bersamaan dengan bahasa markup, seperti HTML untuk membangun suatu website. Hubungan Antara HTML dan CSS HTML dan CSS memiliki kaitan yang sangat erat. Jika kita analogikan maka HTML dapat diibaratkan sebagai konten atau isi dari buku, sedangkan CSS dapat diibaratkan sebagai tata letak dan gaya buku tersebut. Sebagai konten, HTML memuat elemen yang membentuk inti dari buku tersebut. Konten ini serupa dengan struktur dan elemen-elemen dalam HTML yang membentuk halaman web. HTML digunakan untuk membangun dan mengorganisir struktur konten di halaman web, seperti paragraf, judul, dan tautan. Sedangkan CSS berperan sebagai tata letak dan gaya dalam buku mencakup hal-hal seperti penataan teks, pemformatan, ukuran huruf, gaya penulisan, penggunaan warna, dan sebagainya. Tanpa CSS, halaman web akan memiliki tampilan standar yang mungkin terlihat monoton dan tidak menarik. HTML sendiri hanya memberikan struktur dan konten dasar, sementara CSS memberikan kemampuan untuk mengatur tampilan dan presentasi elemen-elemen HTML tersebut. Dengan menggunakan CSS kamu tidak harus pusing-pusing mengutak-atik HTML saat harus memprogram ulang tampilan halaman webmu. Dengan demikian, CSS dan HTML memiliki kaitan yang sangat erat karena keduanya bekerja bersama-sama untuk menciptakan tampilan yang menarik dan fungsional dalam pengembangan web. 20 Istilah CSS Web Design yang Harus Kamu Ketahui Glosarium CSS Web Design menyediakan istilah-istilah umum yang sering digunakan dalam dunia desain website. Berikut 20 istilah umum dalam glosarium CSS untuk desain web. Animation: Teknik yang digunakan untuk memberikan animasi pada elemen dalam halaman web dengan menggunakan keyframes dan properti animasi.Border: Garis yang mengelilingi konten dan padding sebuah elemen.Border Radius: Properti dalam CSS yang digunakan untuk mengatur sudut melengkung dari elemen yang memiliki border.Cascading Style Sheets (CSS): Bahasa pemrograman yang digunakan untuk mengontrol tampilan dan presentasi elemen-elemen dalam halaman web.Class: Nama yang diberikan kepada kelompok elemen yang memiliki atribut dan gaya yang sama.CSS External: Metode pemberian gaya pada elemen HTML dengan menggunakan file terpisah yang berisi kode CSS. Contoh kode program external CSS pada file style.css Contoh kode program external CSS pada file index.html CSS Inline: Metode pemberian gaya pada elemen HTML dengan menggunakan atribut style di dalam file HTML dan hanya mempengaruhi satu baris kode HTML. Contoh kode program Inline CSS CSS Internal: Metode pemberian gaya pada elemen HTML dengan menempatkan kode CSS di dalam bagian <style> di dalam elemen <head> dari dokumen HTML dan berfungsi untuk menentukan tampilan sebuah halaman.</code></strong> di dalam elemen <strong><code><head></code></strong> dari dokumen HTML dan berfungsi untuk menentukan tampilan sebuah halaman.</li></ul> Contoh kode program Internal CSS Display: Properti CSS yang mengontrol bagaimana sebuah elemen ditampilkan di dalam layout, seperti inline, block, atau inline-block.Float: Properti yang digunakan untuk mengatur bagaimana elemen akan mengapung (float) di sekitarnya.Gradient Background: Teknik yang digunakan untuk membuat efek perubahan warna yang halus dari satu warna ke warna lainnya pada latar belakang elemen.Grid: Metode tata letak dalam CSS yang memungkinkan pengembang untuk membuat tata letak dua dimensi dengan menggunakan baris dan kolom.Height: Properti yang digunakan untuk mengatur tinggi (height) sebuah elemen.Margin: Ruang di sekitar elemen yang memisahkannya dari elemen lain. Perbedaan letak margin, border, padding, dan content pada CSS Padding: Ruang di antara konten dan border sebuah elemen.Property (Properti): Bagian dari aturan CSS yang mengatur gaya atau karakteristik tertentu dari elemen yang dipilih.Pseudo-class: Selektor khusus dalam CSS yang memilih elemen berdasarkan keadaan atau interaksi tertentu, seperti :hover, :active, atau :focus.Selector: Bagian dari aturan CSS yang digunakan untuk memilih elemen atau kelompok elemen yang akan diberi gaya.Transform: Properti CSS yang digunakan untuk melakukan transformasi pada elemen, seperti rotasi, skala, atau translasi.Width: Properti yang digunakan untuk mengatur lebar (width) sebuah elemen. Kesimpulan CSS adalah adalah bahasa pemrograman yang digunakan untuk mengatur tampilan halaman web di browser. Dengan menggunakan CSS, kamu dapat menciptakan tampilan website yang menarik, responsif, konsisten, dan efisien, serta memberikan kontrol yang lebih besar dalam mengatur tampilan dan tata letak elemen-elemen dalam halaman web. Kamu bisa belajar CSS dengan mencoba mengikuti kelas yang sudah disediakan BuildWithAngga seperti CSS Website Design dan HTML CSS Bootstrap 5: Finance Landing Page Website.