Selamat! Kamu sudah berhasil menaklukkan Blogger dan memahami bagaimana sebuah website bekerja, mulai dari mengatur tata letak (layout) hingga menyajikan konten visual dan teks yang menarik.
Tapi, sebagai calon desainer DKV yang adaptif, kamu pasti mulai merasa ada yang kurang.
"Kak, kok di Blogger aku nggak bisa bikin animasi transisi yang estetik ya?"
"Bisa nggak sih layout-nya dibuat lebih bebas, nggak cuma kotak-kotak kaku?"
"Aku pengen bikin portofolio interaktif yang bener-bener mencerminkan gayaku!"
Nah, inilah saatnya kita Naik Kelas! Kita akan bermigrasi dari Blogger ke dunia No-Code Web Builder (pembuat web tanpa kode) yang jauh lebih powerful: WordPress + Elementor dan Framer.
Mengapa? Karena di sinilah kamu bisa mewujudkan imajinasi visualmu secara total tanpa perlu menyentuh baris kode programming yang rumit!
🏆 1. Mengapa Kita Perlu Upgrade ke No-Code Web Builder?
Jika Blogger adalah sepeda yang aman dan stabil, maka No-Code Web Builder modern adalah motor sport yang bisa kamu modifikasi sesuka hati. Ini alasan kenapa industri DKV saat ini sangat menggandrungi platform ini:
Kebebasan Kreatif Mutlak (Pixel-Perfect): Kamu bisa menggeser, menumpuk, dan mengatur ukuran setiap elemen visual secara bebas (bahkan sampai hitungan piksel), tidak seperti Blogger yang kaku karena terikat pada template bawaan.
Animasi dan Interaksi Canggih: Ingin gambar yang berputar saat di-scroll? Atau tombol yang membesar secara halus saat disentuh kursor? Semua bisa dibuat dengan klik-dan-geser (drag-and-drop).
Responsif Tingkat Tinggi: Kamu bisa mendesain tampilan yang sangat berbeda untuk versi Desktop, Tablet, dan HP secara spesifik di satu tempat kerja.
Kebutuhan Industri Nyata: Di agensi desain maupun dunia freelance, kemampuan membuat web dengan platform seperti WordPress atau Framer sangat dicari dan memiliki nilai jual yang tinggi!
🛠️ 2. Dua "Senjata Baru" yang Harus Kamu Kenal
Di kelas XI DKV ini, kita akan fokus pada dua platform no-code paling populer dan relevan dengan desainer visual:
🔹 Senjata A: WordPress + Elementor (The Industry Standard)
WordPress adalah platform (CMS) yang paling banyak digunakan di dunia. Untuk para desainer, kita menggunakan tambahan page builder bernama Elementor.
Cara Kerjanya: Seperti bermain LEGO. Kamu tinggal mengambil blok-blok yang sudah ada (teks, gambar, video, tombol) dari panel kiri, lalu meletakkannya di area desain sebelah kanan.
Kelebihan: Sangat mudah untuk membuat website bisnis, profil perusahaan (company profile), maupun portofolio yang interaktif.
Fokus Belajar DKV: Memanfaatkan widget-widget visual, mengonfigurasi tata letak multi-kolom, dan mengoptimalkan aset gambar agar website tetap ringan saat diakses.
🔹 Senjata B: Framer (The Designer's Dream)
Framer adalah platform baru yang sangat dicintai oleh desainer UI/UX di seluruh dunia karena proses kerjanya yang sangat mirip dengan aplikasi desain Figma.
Cara Kerjanya: Jika kamu bisa mendesain di Figma, kamu pasti langsung bisa menggunakan Framer. Kamu tinggal menggambar frame, memasukkan gambar, teks, lalu klik "Publish" untuk menjadikannya website hidup secara instan!
Kelebihan: Kemampuan membuat animasi transisi, scroll effects, dan interaksi mikro (micro-interactions) yang sangat halus, modern, dan estetik.
Fokus Belajar DKV: Menerapkan Auto Layout, Components, dan animasi transisi yang interaktif untuk portofolio digital yang memukau.
🗺️ 3. Alur Transisi: Dari Blogger ke No-Code
Bagaimana cara memindahkan pola pikir (mindset) dari Blogger ke platform baru ini? Tenang, tidak sulit kok! Ini perbandingannya:
| Di Blogger, kamu terbiasa... | Di WordPress / Framer, kamu akan... |
| Memilih template jadi yang kaku. | Membuat layout sendiri dari nol menggunakan Canvas atau Grid/Flexbox. |
| Menulis artikel di dalam kotak editor teks. | Mengatur layout teks, menambahkan gambar latar belakang, dan memberi jarak (padding/margin) secara visual. |
| Memasang widget bawaan (sidebar). | Membangun elemen interaktif sendiri seperti pop-up, slider gambar, dan formulir kontak. |
| Membiarkan tampilan HP diatur otomatis. | Mendesain sendiri tampilan khusus untuk layar Desktop, Tablet, dan Mobile (Responsif) agar tetap estetik di semua perangkat. |
🎨 4. Latihan Langkah Awal (Memulai Eksplorasi)
Ayo, kita mulai langkah awal untuk mencoba dunia no-code ini secara mandiri dan gratis:
Daftar Akun Gratis:
Untuk Framer: Buka
framer.com Untuk WordPress: Kamu bisa mencoba platform lokal yang menyediakan Elementor gratis, atau gunakan versi uji coba host lokal (seperti LocalWP) di komputermu.
Mencoba Kanvas Kosong:
Buatlah satu halaman tentang dirimu (Landing Page pribadi). Coba masukkan judul, gambar, dan buat satu tombol animasi. Perhatikan bagaimana kamu bebas menaruh elemen tersebut di mana saja, tidak seperti di Blogger!
Terapkan UI/UX-mu:
Tetap ingat aturan emas yang sudah kita pelajari: Jangan biarkan warna terlalu ramai, gunakan jenis font yang konsisten (maksimal 2 jenis), dan buat tombol aksi (Call to Action) yang mudah terlihat!
🎯 Tugas Mandiri: "Welcome to My Canvas"
Tugas Kamu:
Buka Framer atau WordPress + Elementor (pilih salah satu yang paling menarik perhatianmu).
Desain sebuah halaman portofolio satu layar (Landing Page) sederhana yang berisi:
Header (Nama/Logo kamu).
Sapaan utama yang menarik (Hero Section), misalnya: "Hai, Aku [Namamu], Calon Desainer DKV Hebat!".
Satu atau dua gambar karya terbaikmu.
Sebuah tombol interaktif menuju blog Blogger yang sudah kamu buat sebelumnya (beri label: "Lihat Jurnal Belajarku").
Uji coba hasil desainmu di mode Mobile (HP), pastikan tampilannya tidak berantakan.
Kirimkan tautan (link) web barumu yang sudah live ke gurumu untuk dievaluasi!
💡 Refleksi Belajar Hari Ini:
"Dari Blogger kita belajar menyusun informasi. Di No-Code Builder, kita diberi kebebasan tanpa batas untuk menghidupkan informasi tersebut. Jadilah desainer yang berani bereksplorasi!" Selamat naik kelas dan selamat berkarya!
Tidak ada komentar:
Posting Komentar
mohon sertakan identitas
nama :..
komentar
terima kasih