EcoTopia Sphere (Desain UI/UX)

Ringkasan

Ini adalah sisi desain dari EcoTopia Sphere, platform web edukasi gaya hidup ramah lingkungan. Seluruh antarmuka, alur pengguna, dan sistem visualnya saya rancang lebih dulu di Figma sebelum diimplementasikan menjadi kode. Halaman implementasinya ada sebagai project tersendiri, EcoTopia Sphere.

Peran Saya

Saya berperan sebagai UI/UX Designer sekaligus yang membangunnya. Pekerjaan desain mencakup penyusunan arsitektur informasi untuk konten edukasi yang cukup banyak, perancangan wireframe tiap halaman, pembuatan sistem komponen, dan prototipe interaktif di Figma sebagai acuan implementasi.

Tantangan Desain

Konten edukasinya banyak, artikel, showcase inovasi, dan ruang aksi komunitas, sehingga tantangan utamanya adalah menata semuanya agar tetap mudah dijelajahi dan tidak terasa padat. Selain itu, nuansa "ramah lingkungan" harus terasa tanpa jatuh ke klise hijau yang berlebihan.

Proses Desain

Saya mulai dari pemetaan konten dan alur navigasi, lalu menurunkannya menjadi wireframe low-fidelity untuk menguji struktur tiap halaman. Setelah kerangka terasa mantap, baru masuk ke high-fidelity: tipografi, skala spasi, warna, ilustrasi kota hijau, dan state komponen. Layout dirancang mobile-first lalu dinaikkan ke breakpoint yang lebih lebar.

Sistem Desain

Dibangun kumpulan token dan komponen yang dapat dipakai ulang, tombol, kartu, kartu artikel, tag kategori, formulir, dan pola statistik, sehingga tampilan tetap konsisten saat jumlah halaman bertambah dan implementasinya lebih mudah diprediksi.

Prototipe dan Serah Terima

Prototipe Figma dengan tautan antar-frame dipakai sebagai satu-satunya acuan saat implementasi. Karena saya juga yang membuat kodenya, keputusan desain bisa langsung diuji di browser dan disesuaikan bila ada yang tidak pas.

Hal-hal yang Saya Pelajari

Proyek ini mempertajam kemampuan menyusun arsitektur informasi untuk konten dalam jumlah besar, menjaga sistem komponen tetap ringkas, dan menutup jarak antara file desain dan kode nyata.

Hasil

Rancangan ini menjadi dasar EcoTopia Sphere yang sudah berjalan, dengan tampilan yang konsisten di berbagai ukuran layar. File Figma-nya bisa dilihat lewat tautan di atas.