flash sale
hamburger-menu

Tips User-Experience

Meningkatkan skills menjadi 1% lebih baik

Kelas 3 Teknik Desain Antarmuka Meningkatkan User Experience di BuildWithAngga

3 Teknik Desain Antarmuka Meningkatkan User Experience

Beberapa sentuhan teknik desain antarmuka dapat meningkatkan kemudahan pengguna dalam menggunakan website dan mobile app yang kita bangun. User experience yang bagus dapat membuat pengguna betah lebih lama menggunakan produk kita yang tentunya dapat meningkatkan penjualan dari bisnis tersebut. 3 Teknik Desain Antarmuka Meningkatkan User Experience Teknik desain antarmuka dapat kita mulai dengan membuat sebuah moodboard ui ux design, sebelumnya saya juga telah menjelaskan apa itu moodboard dan manfaat utamanya, kamu bisa coba pelajari saat ini di BuildWithAngga. Setelah mempelajari moodboard tersebut maka kita bisa lanjutkan belajar teknik desain antarmuka meningkatkan user experience design. 1) Gunakan metode KISS, Keep it simple, stupid Membuat desain kita mudah dipahami adalah salah satu kunci kesuksesan bisnis online, kita dapat mulai dengan fokus pada satu tujuan dari website atau mobile app tersebut, apakah kita ingin membantu orang membeli barang secara online? apakah kita ingin bantu orang belajar hal baru? atau bantu orang menonton film terbaru? menggunakan metode kiss ux design buildwithangga Memiliki goal yang jelas akan memudahkan kita sebagai ui ux designer dalam mendesain website yang easy to use oleh pengguna, beberapa hal yang perlu difokuskan adalah: Label pada navigation yang mudah dibacaLabel pada CTA button copywriting yang baikMemberikan space kosong agar pengguna tidak pusingKurangi gimmick yang tidak terkait dari tujuan utama pengguna 2) Membuat design style yang konsisten Pada tahal awal proses design website dan mobile app, perlu kita tentukan warna, jenis font, grid system, dan gaya illustration terlebih dahulu. Karena dengan begitu kita dapat merancang design yang konsisten dan mudah dikenal oleh pengguna baru atau lama. Kamu bisa gunakan software Figma untuk menerapkan design style yang konsisten seperti berikut. Penggunaan warna Hindari penggunaan warna yang berbeda-beda, misalnya pada halaman Home Page warna pada button CTA menggunakan biru, sedangkan pada Profile Page, warna button tersebut menjadi merah atau orange. Hal yang tidak konsisten dapat membuat pengguna pusing dalam menggunakan website dan mobile app kita. penggunaan warna ui ux design yang baik buildwithangga Pemilihan jenis font Tujuan memiliki website adalah ingin memberikan informasi kepada pengguna dalam menggunakan produk atau jasa yang perusahaan kita miliki, pengguna akan menghabiskan 1 jam pertama untuk memahami website tersebut dari informasi yang diberikan, apabila font yang kita gunakan terlalu sulit dibaca maka dapat meningkatkan cognitive load oleh pengguna tersebut dalam memahami produk dan jasa kita. Hindari penggunaan font yang sulit dibaca dan bataskan juga maksimal 2 jenis font berbeda di dalam sebuah projek untuk meningkatkan design yang lebih konsisten dan mudah dikenali dengan cepat oleh pengguna. 3) Mobile-first design, responsive design Saat ini smartphone sudah murah harganya dan banyak sekali yang sudah memilikinya, mereka juga lebih suka menggunakan smartphone dalam mengakses website dan mobile app yang mereka butuhkan, apabila website kita tidak menerapkan responsive design maka pengguna dapat kesulitan memahami konten yang berantakan pada website kita. menerapkan responsive design ui ux buildwithangga Solusi utama untuk ui ux designer adalah menyediakan beberapa layout berdasarkan ukuran layar yang biasanya digunakan oleh pengguna misalnya Desktop, Tablet, dan juga Mobile. UI UX designer juga dapat mempelajari grid system buatan Tailwind CSS atau Bootstrap sehingga front-end developer dapat menerapkan grid dengan mudah. Kesimpulan penggunaan teknik desain antarmuka Saya mengerti bahwa kita sering berpikir design yang kita buat sudah bagus, tapi untuk siapa? pengguna website tersebut atau diri kita? hindari termakan asumsi pribadi dengan cara melakukan usability-testing terlebih dahulu, proses tersebut dapat memberikan feedback yang kaya untuk meningkatkan design website dan mobile app kita. Bagaimana menurut kamu?

Kelas 3 Tipe UX Designer Yang Perlu Kamu Ketahui di BuildWithAngga

3 Tipe UX Designer Yang Perlu Kamu Ketahui

UX (User Experience) Designer adalah salah satu pekerjaan yang sekarang banyak dicari oleh perusahaan. Tugas dan peran UX Designer tidak hanya tentang desain dan keindahan (visual) tapi juga bagaimana membuat suatu produk yang bermanfaat, mudah dan nyaman untuk digunakan. 3 Tipe UX Designer Yang Perlu Kamu Ketahui UX Designer terlibat langsung dalam proses pembuatan produk dan berkolaborasi dengan UI (User Interface) Designer dalam mendesain tampilan produk, baik itu website atau aplikasi. Dalam membuat sebuah produk, UX Designer juga dibantu oleh UX Writer dan UX Researcher. Setelah mengetahui peran UX Designer secara umum, kita tahu bahwa untuk merancang sebuah produk perlu memiliki pemahaman dan keahlian dari setiap peran yang akan dikerjakan. Peran dan tugas UX Designer contohnya seperti user research, interaction design, usability testing, visual design (system) dan sebagainya. Dari beberapa peran yang sudah disebutkan, setiap UX Designer biasanya dapat melakukan berbagai peran sekaligus atau bahkan memiliki satu keahlian khusus dalam peran tersebut. Berikut adalah tiga tipe UX Designer menurut lingkup perannya: 1. Generalist Designer Mayoritas UX Designer memulai karirnya sebagai tipe Generalist. Tipe ini mampu melakukan berbagai tugas seperti user research, interaction design, wireframing, & usability testing. Namun tidak memiliki keahlian khusus. Tipe ini biasanya bekerja pada startup/perusahaan rintisan dan freelance. Lingkup peran Generalist UX Designer Untuk output pekerjaan seorang Generalist UX Designer contohnya setelah melakukan research dan sebagainya, selanjutnya merancang wireframe untuk sebuah produk/sistem yang nantinya akan dikembangkan lagi dan membutuhkan peran dalam visual design untuk interface produk/sistem tersebut. Output Generalist UX Designer 2. Specialist Designer Tipe Specialist Designer lebih mendalami satu jenis bidang UX design secara spesifik dan punya keahlian di bidang tersebut. Contohnya seperti Interaction Designer, Visual Designer, dan UX Researcher. Specialist Designer biasanya bekerja di perusahaan besar yang memiliki tim UX lebih besar dan profesional. Lingkup peran Specialist UX Designer Untuk output pekerjaan seorang Specialist UX Designer contohnya yang memiliki keahlian dalam merancang wireframe yaitu menghasilkan rancangan wireframe baik dalam bentuk sketsa di buku/whiteboard atau wireframe digital. Output Wireframe oleh Specialist UX Designer 3. T-Shaped Designer T-Shaped Designer adalah Specialist UX Designer yang memiliki kemampuan di bidang lain, tidak hanya memiliki keahlian dalam satu bidang UX design, tapi juga memiliki pemahaman yang luas tentang peran UX design lainnya. Lingkup peran T-Shaped UX Designer Untuk output pekerjaan seorang T-Shaped UX Designer contohnya yang memiliki keahlian dalam Interaction Design dalam prosesnya juga memahami proses user research, visual design, prototyping dan usability test yang nantinya menghasilkan sebuah report mengenai bagaimana user berinteraksi dan merespon sebuah produk/sistem. Output T-Shaped UX Designer Kesimpulan UX Designer memiliki banyak tugas dan peran dalam membuat suatu produk. Ada banyak cara yang dapat dilakukan untuk memulai karir sebagai UX Designer, seperti memulai sebagai Generalist Designer agar dapat memahami setiap peran dan apa saja tugas UX Designer di lapangan sebelum nantinya memutuskan untuk memiliki keahlian khusus di bidang UX Design. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat dan baca artikel kita yang lain ya.. 👋

Kelas Apa itu Wireframe dan Cara Membuat Wireframe di BuildWithAngga

Apa itu Wireframe dan Cara Membuat Wireframe

Bekerja sebagai ui ux designer pada startup atau perusahaan besar, maka keseharian kita adalah mendesain kebutuhan aplikasi dan website dari bisnis perusahaan tersebut. Biasanya, kita tidak langsung mendesain high fidelity pada aplikasi atau website tersebut, namun akan dimulai dari proses pembuatan Wireframe. Mengapa penting membuat Wireframe? Wireframe adalah gambaran kasar atau sketsa awal dari aplikasi dan website yang akan kita bangun bersama dengan tim developer nantinya, untuk membuat Wireframe kita tidak membutuhkan modal yang begitu besar. Faktanya, hanya menggunakan pensil dan kertas maka kita sudah bisa membuat rancangan sederhana projek yang akan kita buat nantinya, Wireframe ini benar memberikan benefit yang banyak seperti cepat, murah, dan mudah diperbarui. Low-Fidelity Wireframe Wireframe terbagi dari beberapa jenis dan salah satunya adalah low-fidelity wireframe, seperti yang sudah saya jelaskan sebelumnya, untuk membuat wireframe maka kita hanya bermodalkan pensil dan juga kertas atau buku gambar sederhana. Proses pembuatan low fidelity wireframe Pada lembaran tersebut kita mulai membuat sketsa layout dari aplikasi dan website yang akan dikerjakan, kita hanya perlu fokus pada inti konten dari projek kita atau biasa disebut dengan minimum viable product (MVP). High-Fidelity Wireframe Apabila kita ingin melewatkan pembuatan low-fidelity wireframe pada buku gambar, maka kita bisa juga langsung membuat high-fidelity wireframe menggunakan software design yang tersedia untuk ui ux designer. Pada software tersebut kita mendesain beberapa halaman inti dari projek yang kita kerjakan, benefit utamanya menggunakan software dan membuat wireframe secara digital adalah kita tidak perlu menghabiskan banyak kertas atau buku gambar. Rekomendasi tools untuk membuat Wireframe Membuat wireframe versi digital dapat kita capai dengan mudah dikarenakan sudah banyak sekali software yang dapat kita gunakan sebagai ui ux designer atau developer, di antaranya dapat digunakan secara gratis dan berbayar. Whimsical Web apps favorite saya yang satu ini adalah Whimsical dalam mendesain wireframe mobile app dan website. Saya suka karena tidak perlu download dan install, hanya perlu buka website Whimsical lalu sign up dan kita sudah siap mendesain wireframe. Tampilan software Whimsical Whimsical juga menyediakan banyak komponen yang siap kita gunakan sehingga tidak perlu didesain dari awal lagi untuk menghemat waktu dan tenaga. Miro Selain mendesain wireframe, terkadang kita juga perlu mencoret-coret untuk memberikan informasi tambahan pada wireframe tersebut, oleh karena itu Miro sangat cocok digunakan untuk berkolaborasi dengan designer dan developer lainnya dalam proses pembuatan wireframe. Kesimpulan pembuatan sebuah Wireframe Apabila kita ingin menciptakan aplikasi dan website yang user-friendly, maka langkah pembuatan wireframe ini jangan pernah kita lewatkan, karena ketika melakukan proses desain wireframe kita akan menemukan banyak ide yang bisa digunakan pada aplikasi dan website kita. Terima kasih dan semoga bermanfaat ya.