Dalam proses slicing UI, saya telah menyelesaikan tahap penting dalam menyajikan aplikasi kami kepada pengguna. Salah satu langkah yang saya ambil adalah merancang dan mengimplementasikan halaman utama (landing page) dari DEWaS. Menggunakan desain yang telah disiapkan dalam Figma, saya memulai proses slicing UI untuk mentransformasikan desain menjadi sebuah halaman web yang interaktif dan responsif.

Tampilan landing page yang sudah di slicing

Setelah beberapa tahap pengkodean dan penyesuaian, saya berhasil menyelesaikan tugas slicing UI dengan menggunakan teknologi NextJs, Tailwind CSS, dan memanfaatkan ikon dari Font Awesome serta font Inter. Sya memastikan setiap elemen di landing page, mulai dari navbar dengan dropdown menu dan bar menu, jumbotron, hingga berbagai bagian informasi terbaru, rekapan kejadian, kejadian terbaru, dan bagian kerja sama, terlihat sesuai dengan desain dan berfungsi dengan baik di berbagai perangkat.

Satu hal yang saya tekankan dalam proses ini adalah memastikan responsivitas halaman. Saya mengatur responsivitas pada setiap bagian halaman sehingga tampilan tetap optimal di berbagai perangkat, termasuk desktop, tablet, dan ponsel. Dengan demikian, pengguna dapat mengakses dan menjelajahi informasi dengan nyaman, tanpa kehilangan fungsionalitas atau pengalaman pengguna yang baik.