Mendesain gerakan yang punya tujuan

Gerakan adalah bagian dari bahasa sebuah antarmuka. Saat sebuah panel terbuka, sebuah kartu berpindah, atau halaman berganti, ada kesempatan untuk membantu pengunjung memahami apa yang terjadi. Tulisan contoh ini merangkum pendekatan sederhana untuk merancang animasi portfolio yang tetap nyaman dibaca.

Mulai dari tujuan gerakannya

Sebelum memilih durasi atau easing, tentukan informasi yang perlu disampaikan. Perpindahan kamera dapat menunjukkan perjalanan antarproyek. Reveal ringan dapat mengarahkan perhatian ke judul berikutnya. Perubahan warna pada timeline dapat menjelaskan posisi baca. Setiap gerakan sebaiknya mempunyai hubungan yang jelas dengan isi halaman.

• Orientasi: tunjukkan dari mana pengunjung datang dan ke mana mereka bergerak.
• Hierarki: beri ruang bagi judul, isi utama, dan tindakan berikutnya.
• Umpan balik: jelaskan bahwa interaksi sudah diterima oleh antarmuka.

Sisakan waktu untuk membaca

Dalam presentasi proyek yang mengikuti scroll, pengunjung tetap membutuhkan bagian yang tenang. Biarkan sebuah proyek menetap cukup lama agar judul, deskripsi, dan teknologinya dapat dipahami. Perpindahan yang terlalu rapat membuat setiap proyek terasa seperti cuplikan, padahal informasi tersebut adalah alasan utama orang mengunjungi portfolio.

Gerakan yang baik memberi petunjuk, lalu memberi ruang bagi isi untuk berbicara.

Hormati preferensi pengunjung

Tampilan statis perlu dirancang sebagai pengalaman yang lengkap. Judul, proyek, dan navigasi harus tetap bisa digunakan ketika animasi dikurangi. Preferensi reduced motion dapat menjadi sinyal untuk menghilangkan transformasi dan membiarkan konten muncul langsung. Untuk animasi JavaScript, terapkan preferensi yang sama pada logika animasinya.

@media (prefers-reduced-motion: reduce) {
  .article-card {
    animation: none;
    transition: none;
    transform: none;
  }
}

Tinjau satu bagian dalam satu waktu

Cobalah halaman dengan mouse, keyboard, dan layar sentuh. Gulir maju lalu mundur. Ubah ukuran layar di tengah halaman. Perhatikan apakah informasi masih mudah ditemukan dan apakah pengunjung bisa melanjutkan tanpa menunggu animasi. Catatan kecil dari percobaan ini menjadi dasar untuk iterasi berikutnya.

AKHIR CATATAN /