Tips Design

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.

Portfolio sangat dibutuhkan untuk ui ux designer melamar magang atau pekerjaan full-time maupun freelance ui ux designer. Kali ini saya ingin bagikan beberapa tips yang perlu dilakukan ketika membuat portfolio yang baik dan menarik. 1) Gunakan storytelling Kita membuat portfolio bukan hanya untuk ui ux designer lainnya namun untuk setiap orang yang membuka portfolio design kita, oleh karena itu penting sekali menggunakan kalimat yang mudah dipahami seperti menggunakan bahasa keseharian mereka. Kita juga perlu bercerita terkait projek tersebut tentang bagaimana kita melakukan sebuah riset awal pada masalah apa saja yang dialami oleh pengguna, dan bagaimana kita menggunakan insight tersebut untuk memulai mengerjakan projek design website atau mobile app. 2) Sediakan final design Pada portfolio, kita perlu menambahkan design yang sudah selesai dan dilakukan uji coba sebelumnya agar terlihat lebih realistis (jadi bukan cuma gambar doang). Membuat prototype dengan Figma lalu kita lampirkan pada laman website portfolio dapat membuat hasil kerja atau latihan terlihat lebih menarik dan professional. Apabila sebelumnya kamu memiliki versi design lebih dari satu, misalnya minggu ini kamu baru saja mengerjakan versi 1.0 lalu ada perubahan sesuai feedback pengguna menjadi versi 1.4, alangkah baiknya jika kita lampirkan juga versi-versi sebelumnya, namun perlu kita pilah-pilih kembali ya kira-kira versi mana yang paling berkesan untuk dibaca. 3) Tambahkan bagian testimonial Pembaca portfolio kita akan lebih yakin dan percaya kepada kita apabila mereka dapat membaca testimonial langsung dari orang-orang yang telah menggunakan design buatan kita. Mereka (para reader) akan berpikir bahwa kita bukan sekedar design lalu tinggal, tapi juga sekaligus melakukan validasi design tersebut pada proses usability-testing ke pengguna asli. Kita tidak perlu menambahkan ratusan testimonial, cukup 1-5 saja dengan pesan yang detail maka sudah dapat membuat portfolio menjadi lebih kuat, menarik, dan professional. Silahkan dicoba terlebih dahulu dan nanti lihat hasilnya.

Saat mendesain antarmuka sebuah website terkadang kita sebagai UI Designer merasa kesulitan atau bingung untuk memilih warna dan memadupadankan warna yang cocok untuk desain kita, apalagi saat kita mengalami creative block. Tips Pemilihan Warna Desain Antarmuka Website Berikut ini, beberapa tips pemilihan warna untuk desain antarmuka website: 1. Pilih Warna Primary Color Picker UI Design by Egor Kosmachev Tips pertama yaitu memilih warna primary atau warna utama atau warna dari brand yang akan kita desain. Ini akan lebih mudah lagi ketika klien kita sudah memiliki/memutuskan warna primary untuk desain yang akan kita buat. Untuk memilih warna primary kita harus mengetahui dulu kesan apa yang ingin kita sampaikan kepada user saat melihat desain website kita, apakah ingin terlihat fun, formal, minimalis atau yang lainnya. Jika kalian masih bingung untuk memilih warna primary kalian bisa coba cek website Grasshoper. 2. Pilih Kombinasi Warna Color Documentation UI Design by Tyler Wain Setelah menemukan warna primary untuk desain kalian, kalian bisa memilih tipe kombinasi warna apa yang akan kalian gunakan. Tipe kombinasi warna yang umum digunakan adalah complementary, monocromathic, analogues, triadic. 3. Perhatikan Kontras Web UI Design by Adrian R. M. Setelah kalian sudah mendapatkan warna yang kalian butuhkan untuk mendesain antarmuka sebuah website jangan lupa untuk memperhatikan kontras agar desain website kalian terlihat lebih jelas dan user dapat membaca informasi dengan mudah. Cara yang paling mudah yaitu jika warna background kalian gelap maka gunakan warna teks terang, dan jika warna background kalian terang maka gunakan warna teks gelap. 4. Menggunakan Website Color Generator Color Generator Web UI Design by UI Zones Untuk memilih warna desain antarmuka website, kalian juga bisa menggunakan bantuan dari website color generator, yaitu website yang akan memberikan kalian pilihan-pilihan kombinasi warna dari warna yang ingin kalian gunakan. Ada banyak website color generator yang dapat kalian coba, kalian bisa lihat di post instagram @buildwithangga tentang 5 Color Palette Tools. 5. Melihat Website Inspirasi Desain Web UI Design by Claudia Carvalho Tips yang terakhir, kalian bisa membuka website inspirasi desain seperti Dribbble, Awwwards, dll. Kalian bisa cek rekomendasi website inspirasi desain di website BWA pada menu tips dengan judul 5 Website Untuk Mencari Inspirasi Website Design. Dengan melihat contoh-contoh website pada web tersebut kalian bisa melihat kombinasi warna mana yang bisa kalian gunakan untuk desain kalian. Kesimpulan Terkadang saat memilih warna untuk desain antarmuka sebuah website, kita merasa bingung harus memilih warna apa. Namun, kita tidak perlu bingung lagi karena banyak tips-tips yang dibagikan dan juga website yang dapat mempermudah kita sebagai UI Designer untuk memilih warna yang cocok untuk website yang akan kita desain. Terima kasih sudah membaca artikel ini. Semoga bermanfaat ya 👋.