Desain Homepage Website Burgerlicious | Pemrograman Web

Dalam pengembangan sebuah website, diperlukan perancangan sebuah User Interface (UI) sebagai antarmuka pengguna. Rancangan desain UI pada homepage menjadi hal yang krusial karena pada page inilah yang menentukan hati pengguna. Desain yang baik akan menarik hati pengguna sehingga mereka akan lebih betah dan berminat untuk melakukan proses bisnis di dalamnya.

A. APA ITU USER INTERFACE

User Interface (UI) merupakan tampilan yang berfungsi sebagai perantara antara pengguna dan sistem, baik pada perangkat lunak maupun perangkat keras. Melalui UI, pengguna dapat berinteraksi secara langsung dengan aplikasi atau perangkat yang digunakan. UI mencakup berbagai komponen visual yang ditampilkan pada layar, seperti tombol, menu, ikon, serta elemen grafis lainnya yang memudahkan pengguna dalam menjalankan fungsi tertentu. Dengan adanya elemen-elemen tersebut, proses penggunaan aplikasi menjadi lebih intuitif dan terarah.

Secara sederhana, UI dapat diartikan sebagai bagian aplikasi yang terlihat dan digunakan oleh pengguna untuk berkomunikasi dengan sistem. Desain UI yang baik akan membantu pengguna memahami alur penggunaan aplikasi dengan lebih cepat dan nyaman.

Lalu, apa itu Homepage?

Homepage adalah halaman pertama dari sebuah situs web. Halaman ini adalah titik awal yang akan dilihat oleh pengguna ketika mereka memasuki alamat situs di browser. Homepage menjadi tempat untuk memperkenalkan diri dan memberikan gambaran umum tentang apa yang akan pengunjung dapatkan. Oleh karena itu, penting untuk merancang halaman utama dengan baik, membuatnya menarik, dan menjadikannya nyaman dilihat.

B. PRINSIP-PRINSIP USER INTERFACE

User Interface (UI) memiliki beberapa prinsip penting yang tidak boleh dilewatkan. Beberapa prinsip tersebut diantaranya:

1. Konsistensi

Setiap elemen dalam antarmuka harus dibuat konsisten di setiap pagenya. Misalkan, tombol ‘login’ dan ‘sign up’ berwarna merah, font yang digunakan semua page Baloo Bhaijaan, dan yang lainnya.

2. Hieararki Visual

Setiap elemen dan page diatur sesuai kepentingan bisnis. Elemen yang sangat diunggulkan dapat dibuat lebih besar, tebal, atau diberi warna yang lebih mencolok. Tujuannya agar pengguna lebih tahu dan kenal dengan produk tersebut.

3. Kesederhanaan

Kurangi desain dan elemen yang tidak dibutuhkan pada proses bisnis untuk menghilangkan distraksi sehingga pengguna dapat lebih fokus pada tujuan utama. Contohnya pada halaman checkout cukup menampilkan ringkasan pesanan, alamat pengiriman, metode pembayaran, dan tombol konfirmasi. Elemen tambahan seperti banner besar, animasi berlebihan, atau informasi yang tidak relevan sebaiknya tidak ditampilkan agar proses transaksi menjadi lebih cepat dan efisien.

4. Kontras

Gunakan perbedaan warna, ukuran, dan bentuk untuk membedakan setiap elemen agar pesan yang ingin disampaikan dapat terbaca oleh pengguna. Contohnya, tombol Pesan Sekarang dibuat lebih besar dan berwarna mencolok, judul menggunakan font lebih besar dari teks biasa, dan label promo diberi warna berbeda agar langsung terlihat.

5. Perataan

Setiap elemen harus memiliki koneksi visual dengan elemen lain sehingga tiap elemen terasa lebih teratur dan rapi. Contohnya, jarak antar menu dibuat sama, alignment teks sejajar, serta penggunaan warna dan bentuk tombol yang konsisten di setiap section agar tampilan terlihat menyatu dan mudah dipahami.

6. Kedekatan

Elemen yang saling berhubungan harus diletakkan berdekatan agar memudahkan pengguna untuk memahami hubungan antar informasi dan menemukan fungsi yang mereka butuhkan dengan cepat. Contohnya, harga diletakkan dekat dengan nama produk, tombol Pesan berada di dalam kartu menu, dan label promo ditempatkan langsung pada produk yang mendapatkan diskon.

7. Umpan Balik

Sistem harus memberikan respons terhadap tiap aksi yang dilakukan oleh pengguna agar mereka mengetahui bahwa perintah telah diterima dan diproses. Contohnya, muncul notifikasi “Berhasil ditambahkan ke keranjang”, perubahan warna tombol saat diklik, atau indikator loading ketika halaman sedang memuat.

C. APA ITU WIREFRAME?

Wireframe adalah kerangka dasar untuk menata elemen seperti teks, gambar, dan layout pada website atau aplikasi sebelum proses pengembangan dimulai. Biasanya dibuat oleh UI/UX Designer menggunakan sketsa atau software khusus, dengan tampilan sederhana berupa garis dan kotak. Wireframe membantu developer memahami struktur dan alur desain sehingga proses pengembangan lebih terarah, mengurangi revisi, dan mempercepat penyelesaian proyek.

Salah satu tools populer yang digunakan untuk membuat Wireframe adalah Figma. Figma Design adalah alat utama bagi orang-orang untuk membuat dan menguji desain untuk situs web, aplikasi seluler, serta produk dan platform digital lainnya. Figma merupakan alat populer untuk proses desain, memberikan umpan balik, dan membuat keputusan yang lebih baik serta lebih cepat.

D. KOMPONEN UTAMA HOMEPAGE

Homepage memiliki beberapa komponen di dalamnya, beberapa diantaranya:

1. Header

Header berisi logo bisnis, judul, dan menu navigasi utama. Bagian ini menjadi hal pertama yang terlihat oleh pengunjung, sehingga perlu untuk memastikan bahwa logo dan judul situs terlihat jelas.

2. Tagline

Tagline adalah pesan singkat yang menjelaskan tentang apa web yang sedang dikunjungi. Biasanya, tagline berisi misi dan visi bisnis yang mudah diingat.

3. Gambar atau Video

Gambar atau video besar yang menarik merupakan cara yang cukup efektif untuk menarik pengunjung. Media ini dapat berisi gambar produk, video profil bisnis, atau konten menarik yang relevan.

4. Call-To-Action (CTA)

CTA merupakan elemen yang mengarahkan pengunjung untuk melakukan tindakan tertentu, seperti mendaftar, berlangganan, login, atau menjelajahi produk. CTA yang baik harus menarik dan mencolok bagi pengunjung.

5. Widget Media Sosial

Tambahkan widget media sosial yang akan mengarahkan ke akun sosial media bisnis. Hal ini memungkinkan pengunjung untuk terhubung dengan organisasi/perusahaan di platform lain.

E. PRAKTIKUM

Setelah memahami teori mengenai desain UI dan homepage, selanjutnya kita akan melakukan praktikum pembuatan desain pada Figma.

Mari mengulik tampilan website kami !

A. ANALISIS 3 WEB SERUPA

1. **DoorDash**

Penerapan prinsip UI:

1. Header Header menampilkan logo dan navigasi utama, yaitu Sign In dan Sign Up. Posisi ini langsung mengarahkan pengguna untuk membuat akun dan masuk ke akunnya.

2. Tagline DoorDash menggunakan tagline “$0 Delivery Fee On First Order” yang langsung menjelaskan platform ini memberikan gratis ongkir saat pertama kali memesan makanan.

3. Gambar atau Video Hero section menampilkan gambar makanan atau ilustrasi orang yang menarik untuk memperkuat konteks layanan.

4. Call-To-Action (CTA) Tombol seperti “Shop Groceries” dibuat dominan agar pengguna langsung melakukan tindakan.

5. Widget Media Sosial Tautan media sosial tersedia di bagian footer untuk memperluas koneksi brand dengan pengguna.

2. McDonald’s Indonesia

Penerapan prinsip UI:

1. Header Header berisi logo McD dan beberapa navigasi yaitu Menu, Promo, Pesan Langsung, Dunia Mekdi, Dunia Anak, Berita terkini, Makin Kenal Makin Sayang, serta Lokasi. Strukturnya konsisten di setiap halaman.

2. Gambar atau Video Menggunakan gambar produk berukuran besar dengan kualitas tinggi untuk menarik perhatian dan menggugah selera pelanggan.

3. Call-To-Action (CTA) Tombol seperti “Pesan sekarang” atau “Lihat Semua Promo” dibuat mencolok dengan warna merah agar mudah terlihat.

5. Widget Media Sosial Ikon media sosial ditempatkan di footer sebagai sarana interaksi lanjutan ke media sosial McD dengan pelanggan.

**3. The Cheesecake Factory**

Penerapan prinsip UI:

1. Header Header menampilkan logo The Cheesecake Factory dan menu navigasi seperti Menu, Locations, Gift Cards, Careers, Reservations, dan Rewards.

2. Tagline Pesan singkat pada bagian atas, yaitu “Ordering Online is as Easy as 1, 2, 3!” menjelaskan konsep kemudahan memesan makanan restoran dan pengalaman makan yang ditawarkan.

3. Gambar atau Video Menggunakan foto makanan berkualitas tinggi dalam format grid untuk menonjolkan produk unggulan.

4. Call-To-Action (CTA) Tombol “Order Now” ditempatkan strategis agar pengguna langsung menuju tujuan utama, yaitu memesan makanan.

5. Widget Media Sosial Tautan media sosial tersedia untuk menghubungkan pengguna dengan konten promosi dan update terbaru.

B. KOMPONEN PAGE

Login

Pada tampilan login, terdapat form login dengan gambar ilustrasi makanan di sebelah kiri. Penempatan ilustrasi ini berfungsi untuk me,berikan visual makanan yang sesuai dengan tema website sekaligus memberikan kesan menarik. Sementara itu, form login di sisi kanan memuat elemen input seperti email/username dan password yang disusun secara sederhana agar mudah dipahami pengguna.

Registrasi

Pada tampilan registrasi, form pendaftaran ditempatkan di bagian tengah halaman tanpa elemen visual tambahan seperti gambar atau ilustrasi. Penempatan ini bertujuan untuk menjaga fokus pengguna sepenuhnya pada proses pengisian data. Struktur form disusun secara sederhana dengan field seperti nama, email, dan password sehingga alur pendaftaran mudah dipahami.

Homepage

Pada tampilan homepage, terdapat gambar burger besar di bagian tengah sebagai fokus utama sehingga langsung menarik perhatian pengguna saat pertama kali membuka halaman sekaligus memberikan kesan menggugah selera. Di bagian atas terdapat navigation bar yang memudahkan pengguna mengakses halaman lain seperti menu, pemesanan, dan informasi tentang bisnis, dan login. Sementara itu, tombol View More berfungsi sebagai CTA yang mengarahkan pengguna untuk mengeksplorasi produk lebih lanjut sekaligus mengganti halaman.

Promo

Page ini berfungsi sebagai area penawaran khusus yang bertujuan menarik perhatian pengguna melalui informasi diskon dan promo yang sedang berlangsung. Judul “Promo Menarik” di bagian atas berperan sebagai penanda konteks sehingga pengguna langsung memahami bahwa konten yang ditampilkan berkaitan dengan penawaran khusus.

Dua kartu promo ditampilkan berdampingan untuk memberikan pilihan yang jelas. Kartu sebelah kiri menonjolkan promo ‘Special Ramadhan’ dengan informasi diskon besar dan periode berlaku, sehingga menciptakan pelanggan akan berburu diskon tersebut. Sementara kartu sebelah kanan menampilkan promo harga spesial dengan tujuan untuk memberikan pilihan penghematan bagi pengguna.

Best Seller

Page Best Seller menampilkan daftar produk unggulan sebagai rekomendasi bagi pengguna. Setiap kartu produk menampilkan nama varian dan visual burger yang menarik sehingga memudahkan pengguna mengenali pilihannya. Tampilan ini membantu pengguna untuk pengambilan keputusan karena produk yang ditampilkan merupakan menu populer.

Ketika salah satu produk diklik, pengguna diarahkan ke halaman detail yang berisi deskripsi lengkap mengenai produk, harga, serta tombol Pesan Sekarang sebagai CTA. Interaksi ini memberikan kesempatan untuk pengguna untuk memahami komposisi dan keunggulan menu sebelum melakukan pemesanan.

Menu

Page Menu Lainnya menampilkan daftar produk tambahan yang dapat dipilih pengguna selain menu best seller. Setiap item disajikan dalam bentuk kartu berisi gambar produk, nama menu, dan harga sehingga informasi dapat dipahami secara cepat. Tampilan grid membantu pengguna melihat banyak pilihan sekaligus tanpa membingungkan.

C. ANALISIS DESAIN

1. Penggunaan Elemen Visual

Desain website kami secara keseluruhan berfokus pada gambar produk sebagai pusat perhatian dengan pendekatan visual yang kuat. Hal ini dilakukan dengan penggunaan gambar makanan berukuran besar dan penempatan elemen yang memprioritaskan eksplorasi menu serta promo. Kesan yang ditampilkan adalah modern, menarik, dan menggugah selera.

2. Pemilihan Warna

Pemilihan warna pada tampilan website didominasi oleh warna merah sebagai warna utama. Warna merah identik dengan industri makanan karena mampu meningkatkan nafsu makan, menarik perhatian, serta memberikan kesan energik dan berani. Selain itu, penggunaan warna merah juga menekankan rasa burger yang pedas dan sensasi meledak di tiap gigitan.

Warna putih digunakan sebagai warna pendukung untuk teks dan beberapa konten guna menciptakan kontras terhadap warna merah. Kontras ini berperan penting agar teks terbaca sehingga informasi seperti judul, harga, dan deskripsi tetap jelas dan nyaman dilihat.

Selain itu, penggunaan warna seperti kuning dan oranye pada elemen tertentu memberikan kesan hangat, menggugah selera, serta membantu menyorot bagian penting seperti promo atau highlight menu.

3. Strukur Page

Struktur halaman yang kami gunakan menggunakan pola hierarki vertikal yang umum pada website bisnis, yaitu Tampilan awal — Promo — Menu — Konten lainnya. Urutan ini sudah tepat karena mengikuti alur psikologis pengguna: melihat produk — tertarik promo — melihat produk populer — eksplorasi menu — memesan makanan.

4. Hierarki Visual

Kami menerapkan hierarki visual melalui:

• Ukuran gambar produk yang besar dan memenuhi layar.
• Judul berukuran besar.
• CTA yang mudah dilihat.
• Pengelompokan menu.

Alur perhatian pengguna akan dimulai dari melihat produk — melihat judul — melihat harga dan promo— memesan makanan.

5. Pemilihan Font

Font yang dominan kami gunakan disini adalah Baloo Bhaijaan dan Baloo Bhaijaan 2 yang memberikan kesan friendly, modern, dan mudah dibaca. Perbedaan ukuran antara judul, deskripsi, dan harga membantu memperjelas level informasi sehingga terbaca dengan baik.

6. Navigasi

Navigasi yang kami tawarkan cukup jelas dan mudah dipahami, meliputi navbar untuk perpindahan pada halaman utama, klik produk untuk detail menu, CTA untuk aksi pemesanan.

F. KESIMPULAN

User Interface (UI) pada homepage merupakan aspek penting dalam pengembangan website karena menjadi titik pertama interaksi antara pengguna dan sistem. Homepage yang dirancang dengan baik mampu menampilkan identitas merek, menyediakan navigasi yang jelas, serta menyampaikan informasi utama secara efektif melalui komponen seperti header, tagline, media visual, CTA, dan widget media sosial. Dengan kombinasi elemen tersebut, pengalaman pengguna menjadi lebih intuitif, menarik, dan berpotensi meningkatkan minat pengguna untuk berinteraksi maupun melakukan proses bisnis di dalam website.

Sekian artikel kali ini. Terima kasih telah membaca. Semoga membantu:)

Our best team:

1. Muhammad Abdillah Aziz (2420506017) — Muhammad Abdillah Aziz
2. Achmad Chanif Rahmatullah (2420506025) — aniip
3. Aldiyan Setyo Nugroho (2420506031) — Aldiyan Setyo Nugroho
4. Senandung Marimby Zahira Malika (2430506050) — Senandung Marimby