November 2024

Dokumentasi Project Pembuatan Landing Page dan Undangan Digital Oleh Rezza dan Hadyan

        Proyek pembuatan landing page dan undangan digital adalah bagian dari tugas praktikum yang diberikan oleh Pak Abun. Dalam dokumentasi ini, kami akan menjelaskan secara rinci setiap tahapan pengerjaan, konsep desain, fitur utama, serta pengalaman yang kami dapatkan selama proses pengembangan proyek ini.

Pendahuluan

    Pembuatan landing page dan undangan digital menjadi tantangan menarik karena keduanya memerlukan pendekatan desain yang berbeda. Landing page berfokus pada promosi produk secara informatif, sedangkan undangan digital membutuhkan nuansa personal dan interaktif. Kami menggunakan HTML, CSS, dan JavaScript untuk mengembangkan kedua proyek ini.

Proyek Landing Page

Landing page yang kami buat memiliki tema "Makanan Lezat" yang ditujukan untuk mempromosikan produk kuliner. Berikut adalah penjelasan detailnya:

1. Struktur Halaman

1. Header

   • Header menampilkan sambutan "Selamat Datang di Makanan Lezat" yang diikuti dengan tombol "Lihat Produk". Tombol ini dirancang agar mudah diakses dan langsung mengarahkan pengguna ke bagian produk.

2. Body

   • Body terdiri dari katalog produk makanan, seperti martabak mini. Setiap produk dilengkapi dengan:
     • Foto berkualitas tinggi.
     • Deskripsi singkat tentang produk.
     • Informasi harga.
     • Tombol "Beli" yang memudahkan pengguna melakukan pemesanan.

3. Footer

   • Footer mencakup informasi kontak, seperti email dan nomor telepon, yang memudahkan pengguna untuk menghubungi kami.

2. Desain Visual

Konsep desain menggunakan warna merah sebagai elemen utama, yang melambangkan kehangatan dan menggugah selera makan. Warna ini juga disesuaikan dengan produk makanan, seperti ayam geprek yang pedas dan keripik basreng yang renyah.

3. Teknologi yang Digunakan

• HTML: Menyusun elemen-elemen dasar halaman.
• CSS: Memberikan tampilan visual, termasuk tata letak responsif dan skema warna.
• JavaScript: Menambahkan interaktivitas, seperti tombol navigasi dan animasi ringan.

4. Pengujian

Pengujian dilakukan untuk memastikan semua elemen berfungsi dengan baik. Fokus utama adalah memastikan navigasi lancar, tombol "Lihat Produk" bekerja, dan tampilan tetap konsisten di berbagai perangkat.

Proyek Undangan Digital

Undangan digital yang kami buat bertema pernikahan dengan desain elegan dan fitur interaktif. Berikut adalah fitur utama yang telah kami kembangkan:

1. Elemen Utama

1. Header

   • Header menampilkan logo inisial pasangan, memberikan kesan personal yang romantis.

2. Navigasi

   • Navigasi dibuat dinamis sehingga tetap terlihat saat pengguna menggulir halaman.

3. Detail Acara

   • Menampilkan informasi lengkap, seperti:
     • Nama pasangan.
     • Tanggal dan waktu akad nikah.
     • Lokasi acara yang terintegrasi dengan Google Maps.

4. Slide Show

   • Menggunakan JavaScript untuk menampilkan galeri foto pasangan. Fitur ini dirancang untuk memberikan sentuhan visual yang menarik dan dinamis.

5. Formulir Kehadiran

   • Tamu dapat mengisi nama, nomor telepon, dan konfirmasi kehadiran langsung melalui formulir yang tersedia.

6. Footer

   • Footer mencantumkan copyright dengan tulisan "Made by Rezza dan Hadyan."

2. Desain Visual

Desain undangan digital ini menekankan nuansa romantis melalui penggunaan warna pastel, font bergaya klasik, dan elemen dekoratif seperti latar belakang berbentuk permata. Semua elemen dirancang untuk menciptakan kesan elegan dan personal.

3. Teknologi yang Digunakan

• HTML: Membentuk struktur halaman.
• CSS: Membuat tata letak dan elemen dekoratif.
• JavaScript: Menambahkan fitur interaktif, seperti slide show dan formulir.

4. Pengujian

• Slide show diuji agar dapat memuat foto dengan mulus tanpa gangguan.
• Google Maps diintegrasikan menggunakan koordinat akurat untuk mempermudah tamu menemukan lokasi acara.
• Formulir diuji untuk memastikan data yang dimasukkan tersimpan dengan benar.

Proses Pengerjaan

1. Perencanaan

   • Menentukan konsep visual dan fitur utama untuk masing-masing proyek.
   • Membuat sketsa kasar tampilan halaman sebagai panduan.

2. Pengembangan

   • Menulis kode menggunakan kombinasi HTML, CSS, dan JavaScript.
   • Mengoptimalkan tampilan untuk berbagai ukuran layar.

3. Pengujian dan Penyempurnaan

   • Menguji setiap elemen untuk memastikan fungsionalitas dan responsivitas.
   • Melakukan revisi berdasarkan hasil pengujian.

Kesimpulan dan Pelajaran

Proyek ini memberikan pengalaman berharga dalam mengembangkan website yang responsif dan interaktif. Kami belajar tentang pentingnya perencanaan yang matang, penggunaan teknologi yang tepat, serta pengujian yang menyeluruh untuk menghasilkan produk yang berkualitas.

Rekomendasi:

• Untuk landing page, fokuslah pada visual yang sederhana namun menarik agar pesan dapat tersampaikan dengan jelas.
• Untuk undangan digital, pastikan desain mencerminkan tema acara dan tambahkan fitur interaktif untuk meningkatkan kenyamanan pengguna.

Kami berharap dokumentasi ini dapat menjadi inspirasi dan panduan bagi yang ingin mengembangkan proyek serupa. Terima kasih atas perhatian Anda.

Rezza dan Hadyan