Website E-Commerce | IndoGoods (Showcase)
WIREFRAME (Low Fidelity)
Wireframe / low fidelity adalah sketsa sederhana dan dasar dari tata letak halaman atau aplikasi yang menggunakan bentuk dan garis dasar tanpa detail visual, membantu tim memahami struktur dan hierarki konten secara cepat dan mudah.
Terdapat Beberapa Halaman , Antara lain :
1.Register & Login Page 3.Single & Sidebar Cart Page
2.Home & Shop Page 4.Cart & Checkout Page
Halaman Registrasi dan Login
Pengguna harus membuat akun dan login sebelum membeli produk di website.
Halaman Utama (Home)
- Header:
- Logo: Di kiri atas untuk identitas toko.
- Navigasi Utama: Tautan ke "Home", "Shop", "About", dan "Contact".
- Searching: Fitur pencarian produk.
- Keranjang Belanja: Ikon dengan jumlah item yang mengarah ke halaman keranjang.
- Akun Pengguna: Ikon untuk mengelola profil dan pesanan.
- Konten Utama:
- Judul Halaman: Menampilkan kategori produk.
- Produk: Daftar produk dalam bentuk grid dengan gambar, judul, harga, dan label.
- Footer:
- Informasi Kontak: Alamat email, nomor telepon, dan alamat fisik.
- Tautan Media Sosial: Koneksi ke akun media sosial.
- Hak Cipta: Informasi hak cipta dan pemilik website.
Halaman Shop
- Produk dalam Grid: Sama seperti halaman utama, tapi lebih detail.
- Sorting: Mengurutkan produk berdasarkan harga, popularitas, dll.
- Pagination: Navigasi untuk beberapa halaman produk.
Halaman Single Page
- Informasi Produk: Nama, spesifikasi, deskripsi, harga, ulasan.
- Tombol Kuantitas: Memilih jumlah unit.
- Tombol Tambahkan ke Keranjang: Menambahkan produk ke keranjang.
Halaman Cart Sidebar
- Popup Modal: Menampilkan produk yang dipilih dengan tombol checkout dan tombol cart.
Halaman Checkout
- Judul Halaman: Menunjukkan proses checkout.
- Formulir Informasi Pelanggan: Nama, email, alamat, dan nomor telepon.
- Formulir Informasi Pengiriman: Metode dan alamat pengiriman.
- Formulir Informasi Pembayaran: Metode dan detail pembayaran.
- Ringkasan Pesanan: Daftar produk, total harga, biaya pengiriman.
- Tombol Checkout: Menyelesaikan proses pembayaran.
MOCKUP ( High Fidelity )
Mockup / high fidelity adalah representasi rinci dan realistis dari desain akhir, lengkap dengan warna, tipografi, dan elemen visual lainnya, yang digunakan untuk menunjukkan tampilan produk akhir dan memastikan kesesuaian desain sebelum pengembangan dimulai. sama seperti wireframe sebelumnya
Terdapat Halaman , Antara lain :
1.Register & Login Page 3.Single & Sidebar Cart Page
2.Home & Shop Page 4.Cart & Checkout Page
Others..
Sketching Planning: membuat sketsa kasar untuk merencanakan ide atau konsep desain. Ini adalah tahap awal dalam proses desain di mana desainer membuat gambar cepat dan sederhana untuk mengeksplorasi berbagai ide dan struktur dasar sebelum masuk ke detail yang lebih kompleks.
User Flow: diagram yang menggambarkan langkah-langkah yang diambil pengguna saat berinteraksi dengan sebuah aplikasi atau situs web. Ini menunjukkan jalur pengguna dari titik awal hingga tujuan akhir, membantu desainer memahami bagaimana pengguna akan menavigasi melalui sistem dan memastikan pengalaman pengguna yang mulus.
Storyboard: rangkaian gambar atau sketsa yang menunjukkan urutan visual dari sebuah cerita atau alur interaksi pengguna. Ini sering digunakan dalam desain dan pengembangan produk untuk merencanakan dan mengkomunikasikan pengalaman pengguna secara visual, mirip dengan cara film atau animasi direncanakan.
Notasi Dialog: representasi tertulis dari percakapan atau interaksi antara pengguna dan sistem. Ini digunakan untuk merencanakan dan mendokumentasikan bagaimana dialog atau pesan akan muncul dalam aplikasi atau situs web, membantu memastikan bahwa komunikasi dengan pengguna jelas dan efektif.
Site Map: diagram yang menggambarkan struktur dan hierarki halaman dalam sebuah situs web. Ini menunjukkan bagaimana halaman-halaman diorganisir dan bagaimana mereka terhubung satu sama lain, membantu desainer dan pengembang merencanakan navigasi dan struktur informasi yang logis dan user-friendly.
