Landing page poster makanan

Masalah

Permintaannya satu halaman landing untuk menu makanan, dengan ponsel sebagai layar yang paling penting. Menu adalah konten yang dipindai, bukan dibaca: dua pertanyaan yang perlu terjawab dalam hitungan detik adalah ada apa saja dan berapa harganya, dan keduanya harus terjangkau tanpa cubit-zoom atau mencari-cari.

Susunan yang dibangun seperti poster justru melawan itu. Poster dirancang untuk dinding dan jarak baca yang tetap (hurufnya berukuran untuk dibaca dari jauh, sectionnya berjalan berdampingan), dan susunan yang sama di ponsel runtuh jadi satu gulir vertikal panjang, di mana bagian yang kamu cari tidak pernah yang tampil di layar.

Solusi

Satu halaman, satu kolom, dibangun dengan Tailwind CSS dan disusun mobile-first: layar kecil yang menentukan batasannya, dan tampilan desktop yang mendapat ruang lebih, bukan sebaliknya. Isi menunya duduk dalam blok selebar penuh dengan satu skala jarak, jadi iramanya bertahan dari layar terkecil alih-alih diputuskan ulang di tiap section.