Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.

Getting started with UX/UI

  • 8 Usability Heuristics (Explained With Toasters)

    8 Usability Heuristics (Explained With Toasters)

    Maddy Beard
  • What is Information Architecture? (UX Tips and Examples)

    What is Information Architecture? (UX Tips and Examples)

    Andrea Eppy
  • All UX/UI tutorials:

    1. Memahami Hirarki Visual dalam Desain Web

      Memahami Hirarki Visual dalam Desain Web

      Tutorial Beginner

      Hirarki visual adalah salah satu prinsip terpenting di balik desain web yang efektif. Artikel ini akan memeriksa mengapa mengembangkan hirarki visual sangat...

    2. 20 harus-memiliki gambar rangka template dan UI kit untuk Perpustakaan desain Anda

      20 harus-memiliki gambar rangka template dan UI kit untuk Perpustakaan desain Anda

      Tutorial Intermediate

      Wireframing. Pengguna perjalanan. Peta konten. Desain yang berpusat pada pengguna. Arsitektur informasi. Animasi prototipe. Konversi jalan. Fitur...

    3. Memecahkan masalah dengan CSS Grid dan Flexbox: kartu UI

      Memecahkan masalah dengan CSS Grid dan Flexbox: kartu UI

      Tutorial Intermediate

      Pola "kartu" telah melihat sukses besar dalam waktu belakangan ini, tetapi cara kami membuatnya masih terbatas karena CSS tersedia bagi kami. Sampai...

    4. Cara Membuat Slider Split-Screen Dengan JavaScript

      Cara Membuat Slider Split-Screen Dengan JavaScript

      Tutorial Intermediate

      Dalam tutorial video hari ini, saya akan menunjukkan cara membuat elemen slider "split-screen" (atau UI, apa pun yang Anda inginkan untuk menyebutnya) dengan...

    5. Memahami Kualitas dan Karakteristik Warna

      Memahami Kualitas dan Karakteristik Warna

      Tutorial Beginner

      Bergerak dari artikel sebelumnya tentang menentukan dan mengenali warna, mari jelajahi kualitas dan karakteristik warna.

    6. Bagaimana Membuat Efek Perubahan Garis Bawah Ketika Melakukan Hovering Dengan CSS Dan JavaScript

      Bagaimana Membuat Efek Perubahan Garis Bawah Ketika Melakukan Hovering Dengan CSS Dan JavaScript

      Tutorial Intermediate

      Di dalam tutorial hari ini, kita akan menggunakan sedikit CSS dan JavaScript untuk membuat efek menu hover yang cantik. Itu bukan merupakan hasil akhir yang...

    7. Membuat Timeline Vertikal Dengan CSS dan Sentuhan JavaScript

      Membuat Timeline Vertikal Dengan CSS dan Sentuhan JavaScript

      Tutorial Intermediate

      Pada tutorial ini, kita akan belajar cara membuat timeline vertikal yang responsif dari dasar. Pertama, kita akan membuat struktur dasar dengan markup yang...

    8. 20+ Tema Restoran Terbaik WordPress : Dengan Desain Responsif Premium

      20+ Tema Restoran Terbaik WordPress : Dengan Desain Responsif Premium

      Tutorial Beginner

      Saat ini, setiap bisnis harus memiliki situs web. Sebagai pemilik restoran atau kafe, sangat penting bahwa bisnis makanan Anda memiliki keberadaan online...

    9. Panduan Pemula untuk Wireframing

      Panduan Pemula untuk Wireframing

      Tutorial Beginner

      Wireframing merupakan langkah penting dalam proses desain layar. Terutama memungkinkan Anda untuk menentukan hierarki informasi desain Anda, sehingga lebih...

    10. 7 Unit CSS Yang Mungkin Anda Belum Ketahui

      7 Unit CSS Yang Mungkin Anda Belum Ketahui

      Tutorial Beginner

      Mudah bagi kita untuk terpaku menggunakan teknik CSS yang sudah dikuasai dengan baik, tetapi melakukan hal itu membuat kita mengalami kesulitan saat...

    11. Tip Singkat: Bagaimana Menggunakan "picture" HTML5 Untuk Gambar Responsif

      Tip Singkat: Bagaimana Menggunakan "picture" HTML5 Untuk Gambar Responsif

      Tutorial Beginner

      Gambar merupakan salah satu aspek paling menantang dalam desain web responsif. Hari ini kita akan melihat bagaimana elemen , sebuah solusi untuk masalah...

    12. 5 Font Web yang Menarik Perhatian untuk Diunduh dan Digunakan

      5 Font Web yang Menarik Perhatian untuk Diunduh dan Digunakan

      Tutorial Beginner

      Tipografi adalah bagian penting dari desain web yang hebat, dan lebih dari sekadar meningkatkan tampilan situs web Anda. Ketika diterapkan dengan serius,...