Catatan Kuliah - Tutorial Mendesain Web Portfolio
Pendahuluan
- Pengantar tentang video mendesain web portfolio pribadi (kokoali.com)
- Ucapan terima kasih kepada sponsor, Niagawaster
- Niagawaster sebagai penyedia layanan hosting terbaik di Indonesia
- Diskon 10% dengan kupon Koko Aldi dan bonus file Adobe XD dan Figma
Pengenalan
- Pembicara: Koko Aldi Yanto, UI UX Designer dari DOSweb.com
- Website sudah dipublish sejak awal tahun
- Permintaan dari teman-teman di Instagram untuk tutorial
- Mengacu pada video sebelumnya tentang pentingnya website portfolio dan 10 tips membuatnya
Persiapan di Figma
- Mengumpulkan aset: tipografi, warna, ikon, foto
- Tipografi yang digunakan:
- Heading 1: Kanit, ukuran 46
- Heading 2: Kanit, ukuran 30
- Body Text: Roboto, ukuran 16
- Body Text Kecil: Arbutus, ukuran 14
- Warna yang digunakan:
- Hijau (warna brand)
- Kuning (dekorasi)
- Hitam (background)
- Ikon diambil dari Flat Icon
- Disarankan untuk menyiapkan foto sendiri untuk portfolio
Desain Web Portfolio
- Membuat artboard dengan ukuran 1440x dan background hitam
- Menciptakan header dengan menu (Project, Blog, YouTube, Kontak)
- Menentukan tiga aspek penting dalam web portfolio:
- Siapa: Perkenalan diri
- Apa: Deskripsi tentang pekerjaan
- Mengapa: Alasan klien harus memilih kita
Struktur Halaman
- Penjelasan singkat mengenai diri, pengalaman, dan kredibilitas
- Menyiapkan Call to Action (CTA) untuk kontak
- Menambahkan testimonial dari klien
- Menyusun portfolio dengan 4-6 project terbaik
Elemen Desain
- Menggunakan mockup untuk presentasi proyek
- Menjaga konsistensi presentasi
- Menggunakan efek 3D untuk foto
- Menambahkan dekorasi yang bermakna
Menyempurnakan Desain
- Menambahkan section kontak
- Menjelaskan mengapa membuat channel YouTube
- Edukasi tentang UI UX Design
- Branding personal dan exposure kepada klien
- Menyusun testimonial dari klien
Tools dan Footer
- Menyajikan tools yang digunakan dalam desain
- Footer berisi informasi kontak dan email
Proses Konversi ke Website
- Mendesain di Figma kemudian diserahkan kepada developer (Mas Ervan) untuk konversi menggunakan WordPress dan Elementor
- Menjelaskan pentingnya hosting dan domain yang terpercaya
- Memilih Niagawaster untuk hosting dengan diskon 75% dan gratis domain
Penutup
- Mengajak penonton untuk mengikuti tutorial dan membagikan hasilnya
- Meminta untuk follow Instagram dan share video
- Pesan untuk tetap berkreasi dalam desain
Harap dicatat bahwa catatan ini bertujuan untuk membantu dalam mempelajari dan merangkum informasi dari video tutorial. Pastikan untuk menonton video terkait untuk pemahaman yang lebih baik.