Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Merancang struktur halaman utama (homepage) web e-commerce
- Menyusun wireframe dan layout yang jelas untuk beranda
- Membuat komponen hero beserta animasi perpindahannya di Figma
- Menerapkan desain yang tertata untuk tampilan desktop
Capaian Pembelajaran
Mahasiswa mampu merancang homepage web e-commerce yang menarik dan fungsional di Figma, termasuk menyusun navigasi, menempatkan hero section, menampilkan kategori dan produk unggulan, serta menghidupkan hero dengan animasi yang halus.
Anatomi Homepage E-Commerce
Halaman utama toko daring adalah etalase pertama yang dilihat pengunjung, oleh karena itu ia harus langsung menjawab tiga pertanyaan penting: toko ini menjual apa, apa keunggulannya, dan bagaimana cara mulai berbelanja. Sebuah homepage e-commerce yang baik umumnya terdiri dari navbar yang memuat logo, menu, pencarian, dan ikon keranjang; hero banner berisi pesan utama dan ajakan bertindak (call to action); kemudian baris kategori, produk unggulan, testimoni atau logo mitra, serta footer yang berisi kontak dan tautan penting.
Tata letak yang baik mengikuti alur pandang alami pengguna. Saat membuka halaman, pengguna akan memindai area paling atas terlebih dahulu. Elemen penting karenanya harus ditempatkan di area yang terlihat pertama kali agar pengunjung tidak langsung meninggalkan situs. Gambar produk beresolusi tinggi, harga yang jelas, serta tombol ajakan seperti ‘Beli Sekarang’ adalah elemen kunci yang harus mudah ditemukan dan tidak tersembunyi.
Information Architecture
Sebelum menggambar, penting menyusun information architecture (IA), yaitu cara mengorganisir dan mengelompokkan konten agar mudah dicari dan dipahami. Untuk e-commerce, hierarki umumnya dimulai dari Beranda, lalu Kategori Produk, halaman Produk, Keranjang, dan berakhir pada Checkout. Navigasi yang runtut mengurangi kebingungan dan mempercepat pengguna menemukan barang yang dicari.
Penamaan menu juga perlu diperhatikan; gunakan kata yang singkat, mudah dipahami, dan sesuai bahasa pengguna, bukan jargon internal perusahaan. Konsistensi penamaan antara menu dan isi halaman menghindari kekecewaan ketika pengguna mengeklik sesuatu tapi mendapat konten yang tidak sesuai ekspektasi.
Merancang Layout Homepage
- Buat frame Desktop 1440×1024 lalu gambar navbar dengan logo di kiri dan menu di kanan.
- Tambahkan hero section berisi judul besar, subjudul, dan tombol call to action.
- Buat seksi kategori produk menggunakan beberapa kartu bergambar dan label.
- Tambahkan grid produk unggulan yang menampilkan gambar, nama, harga, dan tombol.
- Susun footer dengan kolom kontak, tautan bantuan, dan akun sosial media.
Cara Kerja dan Keunggulan Hero
Hero section adalah area besar di bagian paling atas halaman yang menampilkan pesan utama toko. Ukurannya yang dominan menjadikannya tempat paling efektif untuk menarik perhatian. Tambahkan heading yang kuat, subheading singkat yang menjelaskan nilai jual, serta satu atau dua tombol ajakan yang mengarahkan pengguna ke tindakan yang diinginkan, misalnya mengunjungi koleksi terbaru.
Memilih Warna dan Tipografi
Pemilihan warna pada homepage harus konsisten dengan identitas merek. Pilih satu warna utama sebagai warna primer, satu atau dua warna pendukung, serta warna netral untuk latar dan teks. Warna ideal dan sekundernya harus menghasilkan kontras yang cukup agar teks tetap terbaca, terutama pada tombol dan tautan penting yang menjadi fokus tindakan pengguna.
Tipografi juga menentukan kesan profesional. Gunakan tidak lebih dari dua hingga tiga jenis huruf dalam satu halaman: satu untuk judul dan satu untuk isi. Tetapkan hierarki ukuran yang konsisten, misalnya judul besar, subjudul sedang, dan teks isi kecil namun tetap terbaca. Konsistensi ukuran dan gaya huruf membantu pengguna mengenali bagian penting dengan cepat.
Selain itu, perhatikan desain grid yang rapi. Halaman yang elemen-elemennya sejajar pada jalur yang sama terasa lebih teratur dan profesional. Gunakan jarak antar kartu dan seksi yang konsisten agar mata pengguna tidak tersesat. Desain yang seimbang secara visual juga memberi kesan bahwa toko memperlakukan produk dengan serius.
Hero Animation
Hero animation adalah gerakan pada banner utama, misalnya gambar bergeser otomatis (carousel atau slider), teks yang muncul perlahan (fade in), atau pergeseran halus antar slide. Figma mendukung animasi melalui fitur Smart Animate pada mode prototype. Langkahnya: buat dua atau tiga frame hero dengan tata letak yang sama, hubungkan dengan trigger ‘After delay’ atau tombol panah, lalu atur transisi memakai Smart Animate dengan durasi sekitar 300 hingga 500 milidetik.
Animasi yang baik tidak pernah berlebihan; ia memperkuat pesan tanpa mengalihkan perhatian dari isi. Kecepatan perpindahan pada rentang 200-500 ms terasa paling natural, dan penggunaan easing yang halus membuat pergerakan tidak kaku. Mahasiswa dapat menambahkan tombol panah kiri dan kanan yang memicu perpindahan antar slide untuk meniru perilaku hero pada toko daring sungguhan, sekaligus melatih pengaturan trigger dan transisi di Figma.
Penutup dan Tugas Mandiri
Praktikkan dengan membuat homepage toko digital fiktif lengkap dengan navbar, hero beranimasi minimal dua slide, seksi kategori, dan grid produk. Pastikan konsistensi warna dan tipografi, serta beri nama layer dengan rapi agar mudah dikelola pada pertemuan berikutnya ketika halaman detail dan keranjang ditambahkan.