📱 Penyusunan Layout Microsite pada My Lynk
Modul Pembelajaran Interaktif — Lynk.id
📋 Daftar Isi
1. Urutan Konten yang Benar pada Microsite Lynk.id
Perhatikan ilustrasi layout microsite Lynk.id berikut. Amati bagaimana elemen-elemen tersusun dari atas ke bawah:
@namaanda
Deskripsi singkat profil Anda di sini
Powered by Lynk.id
Gambar di atas menunjukkan tampilan microsite Lynk.id pada layar smartphone.
Pertanyaan yang muncul setelah mengamati:
- Mengapa foto profil dan nama ditempatkan di paling atas?
- Apa alasan link utama diletakkan sebelum link media sosial?
- Bagaimana urutan konten mempengaruhi pengalaman pengunjung?
Struktur Urutan Konten Microsite yang Benar:
| No | Elemen | Posisi | Fungsi |
|---|---|---|---|
| 1 | Foto Profil / Avatar | Paling Atas | Identitas visual, membangun kepercayaan |
| 2 | Nama / Username | Di bawah foto | Identifikasi pemilik microsite |
| 3 | Bio / Deskripsi Singkat | Di bawah nama | Menjelaskan siapa Anda / apa yang ditawarkan |
| 4 | Link Utama (CTA) | Urutan pertama link | Tujuan utama pengunjung (misal: beli produk) |
| 5 | Link Sekunder | Setelah link utama | Informasi pendukung (portfolio, blog) |
| 6 | Link Media Sosial | Bagian bawah | Koneksi tambahan |
| 7 | Footer / Info Tambahan | Paling Bawah | Informasi pelengkap |
📌 Prinsip Penting:
- F-Pattern Reading: Pengunjung membaca dari atas ke bawah, kiri ke kanan
- Inverted Pyramid: Informasi paling penting di atas, detail di bawah
- 3-Second Rule: Pengunjung memutuskan dalam 3 detik apakah akan scroll atau pergi
Coba susun urutan konten berikut dari yang BENAR:
Urutkan elemen berikut (1 = paling atas):
Jawaban: Foto Profil → Nama → Bio → Link Utama → Link Media Sosial → Footer
Diskusikan dengan teman:
- Jelaskan mengapa urutan konten yang benar penting untuk microsite.
- Berikan contoh dampak negatif jika urutan konten salah.
- Presentasikan hasil analisis urutan konten microsite yang baik.
2. Prioritas Link pada Microsite Lynk.id
Perhatikan bagaimana link disusun berdasarkan prioritas pada microsite berikut:
✅ Prioritas BENAR
❌ Prioritas SALAH
- Apa yang dimaksud dengan prioritas link?
- Bagaimana menentukan link mana yang harus di posisi teratas?
- Apa pengaruh prioritas link terhadap konversi pengunjung?
Tingkatan Prioritas Link:
🔴 Prioritas Tinggi (Posisi 1-2)
Link yang menjadi tujuan utama. Contoh: Beli Produk, Daftar Sekarang, Link Pendaftaran
Ciri: Warna mencolok, teks ajakan (CTA), menghasilkan konversi langsung
🟡 Prioritas Sedang (Posisi 3-4)
Link pendukung yang memberikan informasi. Contoh: Portfolio, Katalog, Blog
Ciri: Warna netral, membantu pengunjung memahami lebih lanjut
🟢 Prioritas Rendah (Posisi 5+)
Link tambahan/opsional. Contoh: Media sosial, kontak, tentang saya
Ciri: Warna sederhana, bersifat pelengkap
| Kriteria | Prioritas Tinggi | Prioritas Sedang | Prioritas Rendah |
|---|---|---|---|
| Posisi | Teratas (1-2) | Tengah (3-4) | Bawah (5+) |
| Warna | Mencolok/Kontras | Netral/Sedang | Lembut/Subtle |
| Teks | CTA (Beli, Daftar) | Informatif | Pelengkap |
| Tujuan | Konversi | Edukasi | Koneksi |
| Contoh | Beli Sekarang | Lihat Portfolio | Follow IG |
⚡ Tips Menentukan Prioritas:
- Tentukan tujuan utama microsite Anda (jualan? branding? informasi?)
- Link yang mendukung tujuan utama → prioritas tinggi
- Maksimal 2-3 link prioritas tinggi agar tidak membingungkan
- Total link ideal: 5-7 link (jangan terlalu banyak)
Tentukan prioritas link untuk kasus berikut:
Kasus: Seorang guru les privat ingin mempromosikan jasanya.
Link yang tersedia:
- WhatsApp untuk daftar les
- Testimoni murid
- Instagram pribadi
- Jadwal & harga les
- TikTok edukasi
Jawaban yang tepat: 1) WhatsApp Daftar Les, 2) Jadwal & Harga, 3) Testimoni, 4) Instagram, 5) TikTok
Buatlah daftar 5 link untuk microsite profesi impian Anda, lalu urutkan berdasarkan prioritas. Jelaskan alasan urutan tersebut kepada teman sebangku.
3. Tampilan Mobile Friendly pada Microsite Lynk.id
Bandingkan tampilan mobile friendly vs tidak mobile friendly:
✅ Mobile Friendly
@toko_baju
Fashion Terkini
- ✓ Teks terbaca jelas
- ✓ Tombol mudah diklik
- ✓ Tidak perlu zoom
❌ Tidak Mobile Friendly
Teks terlalu kecil tidak terbaca dengan baik oleh pengguna
- ✗ Teks terlalu kecil
- ✗ Tombol sulit diklik
- ✗ Harus zoom & scroll horizontal
- Apa saja elemen yang membuat microsite mobile friendly?
- Mengapa 80%+ pengunjung microsite mengakses via smartphone?
- Bagaimana cara memastikan tombol mudah diklik di layar kecil?
Kriteria Tampilan Mobile Friendly:
| Aspek | Standar Mobile Friendly | Contoh di Lynk.id |
|---|---|---|
| Ukuran Teks | Minimal 14px untuk body, 16px+ direkomendasikan | Judul profil 18px, bio 14px |
| Ukuran Tombol | Minimal 44×44 piksel (area sentuh) | Tombol link tinggi 48px |
| Jarak Antar Tombol | Minimal 8px antar elemen klik | Margin antar link 8-12px |
| Lebar Konten | 100% lebar layar (responsive) | Link mengisi penuh lebar |
| Gambar | Ukuran proporsional, tidak overflow | Foto profil 80-120px circle |
| Scroll | Hanya vertikal, TIDAK horizontal | Layout single column |
| Loading | Cepat (< 3 detik) | Gambar terkompresi |
📐 Aturan Desain Mobile Friendly di Lynk.id:
- Single Column Layout: Semua elemen tersusun dalam satu kolom vertikal
- Full-Width Buttons: Tombol link memenuhi lebar layar (dengan padding)
- Readable Typography: Font minimal 14px, kontras warna tinggi
- Touch-Friendly: Area klik minimal 44px, jarak antar tombol cukup
- No Horizontal Scroll: Tidak ada konten yang melampaui lebar layar
- Fast Loading: Gambar dioptimasi, font minimal
📏 Visualisasi Ukuran Standar:
← Ukuran minimum area sentuh tombol (44×44px)
← Jarak minimum antar tombol (8px)
← Ukuran font minimum untuk body (14px)
Identifikasi masalah mobile friendly pada contoh berikut:
Temukan 3 kesalahan:
Nama Toko Saya Yang Sangat Panjang Sekali
Kesalahan: 1) Teks terlalu kecil, 2) Tombol terlalu kecil & berdekatan, 3) Layout horizontal (bukan single column)
Buka microsite Lynk.id milik teman atau contoh di internet menggunakan HP. Evaluasi apakah sudah mobile friendly berdasarkan 7 kriteria di atas. Sampaikan hasilnya di depan kelas.
4. Contoh Soal dan Pembahasan
🟢 Soal Mudah (1-5)
Soal 1:
Elemen apa yang harus ditempatkan paling atas pada layout microsite Lynk.id?
Pembahasan:
Foto profil / avatar harus ditempatkan paling atas pada microsite Lynk.id. Alasannya adalah foto profil berfungsi sebagai identitas visual yang membangun kepercayaan pengunjung. Ketika seseorang membuka microsite, hal pertama yang dilihat adalah wajah/logo pemilik, sehingga pengunjung langsung tahu siapa yang mereka kunjungi. Ini sesuai dengan prinsip F-Pattern Reading dimana mata manusia memulai dari bagian atas halaman.
Soal 2:
Berapa jumlah link ideal yang sebaiknya ditampilkan pada microsite Lynk.id?
Pembahasan:
Jumlah link ideal pada microsite Lynk.id adalah 5-7 link. Jika terlalu sedikit (1-2), pengunjung kurang mendapat informasi. Jika terlalu banyak (lebih dari 10), pengunjung akan bingung dan mengalami “decision paralysis” — yaitu kondisi di mana terlalu banyak pilihan membuat orang justru tidak memilih apa-apa. Lima hingga tujuh link memberikan informasi cukup tanpa membingungkan.
Soal 3:
Apa yang dimaksud dengan “mobile friendly” pada microsite?
Pembahasan:
Mobile friendly artinya tampilan microsite dapat ditampilkan dengan baik di layar smartphone tanpa masalah. Cirinya: teks terbaca tanpa zoom, tombol mudah diklik dengan jari, tidak perlu scroll horizontal, dan loading cepat. Ini sangat penting karena 80%+ pengguna mengakses microsite melalui smartphone (biasanya dari bio Instagram/TikTok).
Soal 4:
Apa itu CTA dalam konteks link microsite?
Pembahasan:
CTA (Call to Action) adalah link yang mengajak pengunjung melakukan tindakan tertentu. Contoh CTA: “Beli Sekarang”, “Daftar Gratis”, “Pesan Sekarang”. CTA merupakan link prioritas tinggi yang ditempatkan di posisi teratas karena menjadi tujuan utama microsite. CTA biasanya memiliki warna yang mencolok dan teks yang bersifat ajakan.
Soal 5:
Berapa ukuran minimum area sentuh (touch target) untuk tombol yang mobile friendly?
Pembahasan:
Ukuran minimum area sentuh adalah 44×44 piksel. Standar ini ditetapkan oleh Apple (Human Interface Guidelines) dan Google (Material Design) agar pengguna dapat menekan tombol dengan nyaman menggunakan jari tanpa salah klik. Jika tombol lebih kecil dari 44px, pengguna akan kesulitan menekannya dan berpotensi menekan tombol yang salah.
🟡 Soal Sedang (6-10)
Soal 6:
Seorang pemilik toko online memiliki link berikut: Instagram, WhatsApp Order, Katalog Produk, TikTok, dan Testimoni. Susun berdasarkan prioritas yang benar dan jelaskan alasannya.
Pembahasan:
Urutan prioritas yang benar:
1. WhatsApp Order (Prioritas Tinggi) — Ini adalah CTA utama, tujuan utama microsite adalah agar pengunjung membeli/memesan.
2. Katalog Produk (Prioritas Tinggi) — Mendukung keputusan pembelian, pengunjung perlu melihat produk sebelum order.
3. Testimoni (Prioritas Sedang) — Membangun kepercayaan, mendukung konversi.
4. Instagram (Prioritas Rendah) — Media sosial sebagai koneksi tambahan.
5. TikTok (Prioritas Rendah) — Konten hiburan, tidak langsung menghasilkan penjualan.
Prinsip: Link yang langsung mendukung tujuan utama (penjualan) ditempatkan paling atas.
Soal 7:
Jelaskan perbedaan antara microsite yang menggunakan layout single column dan multi column, serta mengapa Lynk.id menggunakan single column.
Pembahasan:
Single Column: Semua elemen tersusun dalam satu kolom vertikal, dari atas ke bawah. Pengguna hanya scroll ke bawah.
Multi Column: Elemen tersusun dalam beberapa kolom berdampingan (seperti website biasa).
Lynk.id menggunakan single column karena: (1) Mayoritas pengguna akses via HP dengan layar sempit, (2) Single column otomatis responsif di semua ukuran layar, (3) Lebih mudah dibaca — mata fokus pada satu jalur, (4) Tidak memerlukan scroll horizontal, (5) Memaksimalkan ukuran tombol agar mudah diklik.
Soal 8:
Apa yang dimaksud dengan “3-Second Rule” dalam konteks layout microsite dan bagaimana cara memenuhinya?
Pembahasan:
3-Second Rule adalah prinsip bahwa pengunjung memutuskan dalam 3 detik pertama apakah akan tetap di halaman atau pergi. Untuk memenuhinya pada microsite Lynk.id:
1. Foto profil jelas — langsung menunjukkan identitas
2. Bio singkat & informatif — dalam 1 kalimat menjelaskan siapa Anda
3. CTA terlihat jelas — link utama langsung terlihat tanpa scroll
4. Loading cepat — halaman muncul dalam < 3 detik
5. Desain bersih — tidak berantakan sehingga mata langsung fokus ke elemen penting
Soal 9:
Sebuah microsite memiliki 12 link. Apa masalah yang akan muncul dan bagaimana solusinya?
Pembahasan:
Masalah:
1. Decision Paralysis — pengunjung bingung harus klik yang mana
2. Scroll terlalu panjang — link di bawah jarang diklik
3. Konversi menurun — tidak ada fokus yang jelas
4. Tampilan berantakan — terlihat tidak profesional
Solusi:
1. Pilih 5-7 link yang paling penting saja
2. Gabungkan link yang mirip (misal: semua media sosial jadi 1 link “Social Media”)
3. Hapus link yang tidak relevan dengan tujuan utama
4. Gunakan fitur “kategori” jika tersedia di Lynk.id
Soal 10:
Mengapa warna tombol link mempengaruhi prioritas dan bagaimana cara menggunakannya dengan tepat?
Pembahasan:
Warna tombol mempengaruhi prioritas karena mata manusia tertarik pada warna yang kontras/mencolok. Cara penggunaan:
1. Prioritas Tinggi: Warna cerah & kontras (merah, biru tua, hijau). Warna ini menarik perhatian pertama kali.
2. Prioritas Sedang: Warna netral (abu-abu tua, biru muda). Terlihat tapi tidak mendominasi.
3. Prioritas Rendah: Warna lembut (abu-abu terang, outline). Tetap dapat diklik tapi tidak menarik perhatian berlebih.
Prinsip: Maksimal 1-2 warna mencolok untuk CTA. Jika semua tombol warna mencolok, tidak ada yang terlihat menonjol (semua sama = tidak ada prioritas).
🔴 Soal Sulit (11-15)
Soal 11:
Andi adalah seorang content creator yang juga menjual merchandise. Ia memiliki: YouTube (500K subscriber), Toko Shopee, Instagram, Discord komunitas, Podcast Spotify, E-book gratis, dan WhatsApp bisnis. Buatkan layout microsite lengkap dengan urutan konten, prioritas link, dan pastikan mobile friendly. Jelaskan setiap keputusan desain.
Pembahasan:
Layout Lengkap:
Bagian Atas (Identitas):
– Foto profil: Foto Andi yang dikenali subscriber (bukan logo)
– Username: @andi_creator
– Bio: “Content Creator | 500K YouTube | Merch resmi di sini! 🎬”
Link Berdasarkan Prioritas:
1. 🛒 Toko Merchandise (Shopee) — Prioritas Tertinggi. Warna orange mencolok. Alasan: Ini menghasilkan pendapatan langsung.
2. 📚 Download E-book Gratis — Prioritas Tinggi. Warna hijau. Alasan: Lead magnet untuk mengumpulkan audiens loyal.
3. ▶️ YouTube Channel — Prioritas Sedang. Warna merah YouTube. Alasan: Konten utama tapi subscriber sudah tahu channel-nya.
4. 🎧 Podcast Spotify — Prioritas Sedang. Warna hijau Spotify. Alasan: Konten tambahan, perlu promosi.
5. 💬 Join Discord — Prioritas Rendah. Warna ungu Discord. Alasan: Untuk fans hardcore, bukan semua pengunjung.
6. 📸 Instagram — Prioritas Rendah. Warna gradient IG. Alasan: Pelengkap, kebanyakan sudah follow dari sana.
7. 📱 WhatsApp Bisnis — Prioritas Rendah. Warna hijau WA. Alasan: Untuk inquiry bisnis/kolaborasi saja.
Mobile Friendly:
– Single column, full-width buttons
– Font bio: 16px, font tombol: 15px bold
– Tinggi tombol: 48px dengan margin 10px antar tombol
– Total 7 link (masih dalam batas ideal)
– Foto profil 100px circle untuk loading cepat
Soal 12:
Sebuah UMKM katering memiliki 3 target pengunjung berbeda yang mengakses microsite-nya: (1) Pelanggan individu yang ingin pesan makanan, (2) Perusahaan yang ingin catering kantor, (3) Reseller yang ingin jadi mitra. Bagaimana menyusun layout microsite yang melayani ketiga target ini dengan prioritas yang tepat?
Pembahasan:
Analisis Target:
– Pelanggan individu (volume tinggi, nilai per transaksi rendah-sedang)
– Perusahaan (volume rendah, nilai per transaksi sangat tinggi)
– Reseller (volume rendah, nilai jangka panjang tinggi)
Strategi Prioritas:
Berdasarkan volume pengunjung, mayoritas yang datang adalah pelanggan individu. Namun berdasarkan nilai bisnis, perusahaan paling menguntungkan.
Layout yang Tepat:
– Foto profil: Logo katering profesional
– Bio: “Katering Sehat & Lezat | Individu • Kantor • Kemitraan”
Urutan Link:
1. 🍱 Pesan Katering Harian — Warna orange, CTA utama. Target: individu (volume terbanyak)
2. 🏢 Catering Kantor & Event — Warna biru profesional. Target: perusahaan (nilai tinggi, perlu terlihat)
3. 📋 Menu & Harga — Warna netral. Melayani semua target
4. 🤝 Gabung Jadi Mitra/Reseller — Warna hijau. Target: reseller (lebih niche)
5. ⭐ Testimoni Pelanggan — Warna kuning. Membangun kepercayaan semua target
6. 📸 Instagram — Warna IG. Galeri foto makanan
7. 📱 WhatsApp — Warna WA. Untuk konsultasi/tanya-tanya
Keputusan Kunci: Meskipun perusahaan bernilai tinggi, pelanggan individu ditempatkan pertama karena volume pengunjung lebih banyak. Catering kantor di posisi 2 tetap cukup terlihat untuk target korporat.
Soal 13:
Analisis microsite berikut dan identifikasi SEMUA masalah terkait urutan konten, prioritas link, dan mobile friendly. Berikan solusi untuk setiap masalah.
Tampilan: Bio panjang 5 baris → 10 link (semua warna biru sama) → foto profil kecil (30px) di bawah → font size 10px → tombol tinggi 25px → jarak antar tombol 2px → ada scroll horizontal
Pembahasan:
Masalah Urutan Konten:
1. ❌ Foto profil di bawah (seharusnya paling atas) → Solusi: Pindahkan ke paling atas
2. ❌ Bio terlalu panjang (5 baris) dan di atas link → Solusi: Ringkas jadi 1-2 baris, tempatkan setelah nama
3. ❌ Tidak ada nama/username yang terlihat → Solusi: Tambahkan nama setelah foto profil
Masalah Prioritas Link:
4. ❌ 10 link terlalu banyak → Solusi: Kurangi jadi 5-7, gabungkan yang mirip
5. ❌ Semua warna biru sama (tidak ada hierarki visual) → Solusi: Bedakan warna berdasarkan prioritas (1-2 mencolok, sisanya netral)
6. ❌ Tidak jelas mana CTA utama → Solusi: Tentukan 1-2 link utama dengan warna berbeda
Masalah Mobile Friendly:
7. ❌ Foto profil 30px (terlalu kecil) → Solusi: Perbesar ke 80-120px
8. ❌ Font 10px (terlalu kecil) → Solusi: Minimal 14px untuk body, 16px direkomendasikan
9. ❌ Tombol 25px (di bawah standar 44px) → Solusi: Tingkatkan ke minimal 44px
10. ❌ Jarak antar tombol 2px (terlalu rapat) → Solusi: Minimal 8px antar elemen
11. ❌ Ada scroll horizontal → Solusi: Gunakan layout single column 100% lebar, cek tidak ada elemen yang overflow
Soal 14:
Bandingkan strategi layout microsite untuk 2 profesi berikut: (A) Fotografer wedding, (B) Tutor online matematika. Jelaskan perbedaan urutan konten, prioritas link, dan elemen mobile friendly yang perlu ditekankan masing-masing.
Pembahasan:
(A) Fotografer Wedding:
Urutan Konten: Foto profil (profesional) → Nama + “Wedding Photographer” → Bio singkat (pengalaman, lokasi) → Link
Prioritas Link:
1. 📸 Portfolio/Galeri (Tinggi) — Klien HARUS melihat hasil kerja sebelum booking
2. 📅 Booking/Konsultasi WA (Tinggi) — CTA langsung
3. 💰 Paket & Harga (Sedang) — Info sebelum deal
4. ⭐ Testimoni Klien (Sedang) — Bukti sosial
5. 📸 Instagram (Rendah) — Galeri tambahan
Mobile Friendly: Gambar portfolio harus OPTIMIZED (kompresi tinggi), lazy loading agar tidak lambat. Tombol “Booking” harus sangat besar dan mencolok.
(B) Tutor Online Matematika:
Urutan Konten: Foto profil (ramah/edukatif) → Nama + “Tutor Matematika” → Bio (kualifikasi, subject, level) → Link
Prioritas Link:
1. 📱 Daftar Les/WhatsApp (Tinggi) — Konversi langsung ke murid baru
2. 📋 Jadwal & Harga (Tinggi) — Informasi penting untuk ortu/murid
3. 🎥 Video Pembelajaran Gratis (Sedang) — Bukti kemampuan mengajar
4. ⭐ Testimoni Murid (Sedang) — Social proof
5. 📸 Instagram Edukasi (Rendah) — Konten tambahan
Mobile Friendly: Teks harus SANGAT jelas dan terbaca (murid bisa anak-anak). Tidak perlu gambar berat. Font lebih besar dari standar (16-18px).
Perbedaan Utama: Fotografer menekankan VISUAL (portfolio), tutor menekankan INFORMASI (jadwal, harga, kualifikasi). Ini mempengaruhi seluruh strategi layout.
Soal 15:
Rancang layout microsite untuk event organizer yang memiliki 2 event berbeda yang berjalan bersamaan: (1) Workshop Design pada tanggal 15 Januari, (2) Seminar Marketing pada tanggal 20 Januari. Masing-masing event membutuhkan link pendaftaran, info detail, dan kontak. Bagaimana Anda menyusun layout yang efektif tanpa membingungkan pengunjung?
Pembahasan:
Tantangan: Dua event = dua set CTA yang berbeda. Jika dicampur, pengunjung bingung.
Solusi Layout:
– Foto profil: Logo Event Organizer
– Nama: @nama_eo
– Bio: “Event Organizer | 2 Event Terdekat! 👇”
Strategi Pengelompokan Link:
Grup 1 – Event Terdekat (Workshop Design – 15 Jan):
1. 🎨 DAFTAR Workshop Design [15 Jan] — Warna ungu mencolok, CTA
2. ℹ️ Info Lengkap Workshop Design — Warna ungu muda
Grup 2 – Event Berikutnya (Seminar Marketing – 20 Jan):
3. 📈 DAFTAR Seminar Marketing [20 Jan] — Warna orange mencolok, CTA
4. ℹ️ Info Lengkap Seminar Marketing — Warna orange muda
Grup 3 – Umum:
5. 📱 Kontak WhatsApp — Warna hijau netral
6. 📸 Instagram — Warna abu
Keputusan Desain:
– Event paling dekat tanggalnya → di atas (lebih urgent)
– Warna berbeda per event agar tidak tertukar
– Tanggal ditulis di label tombol agar jelas tanpa klik
– Total 6 link (dalam batas ideal)
– Pengelompokan visual (warna) menggantikan separator/judul grup
Mobile Friendly: Tanggal “[15 Jan]” ditulis di teks tombol agar terlihat tanpa scroll. Font tombol 15px bold agar terbaca di layar kecil.
5. Latihan Soal
Kerjakan soal-soal berikut secara mandiri. Diskusikan jawaban dengan guru setelah selesai.
🟢 Latihan Mudah (1-5)
1.
Sebutkan 7 elemen utama dalam layout microsite Lynk.id secara berurutan dari atas ke bawah!
2.
Apa fungsi bio/deskripsi singkat pada microsite dan berapa panjang idealnya?
3.
Sebutkan 3 ciri link yang termasuk prioritas tinggi pada microsite!
4.
Mengapa layout single column digunakan pada microsite Lynk.id? Sebutkan 3 alasan!
5.
Apa yang terjadi jika jarak antar tombol pada microsite hanya 2px? Jelaskan dampaknya bagi pengguna smartphone!
🟡 Latihan Sedang (6-10)
6.
Seorang seniman digital memiliki link: Komisioning (buka slot), DeviantArt, Twitter/X, Ko-fi (donasi), dan Tutorial YouTube. Susun berdasarkan prioritas dan jelaskan alasannya!
7.
Jelaskan hubungan antara “Inverted Pyramid” dan penyusunan urutan konten microsite. Berikan contoh penerapannya!
8.
Seorang siswa membuat microsite dengan 15 link dan semua tombol berwarna merah mencolok. Identifikasi 3 masalah dan berikan solusi untuk masing-masing!
9.
Jelaskan mengapa foto profil yang berukuran 30px TIDAK mobile friendly dan berapa ukuran yang direkomendasikan. Hubungkan dengan konsep “3-Second Rule”!
10.
Bandingkan microsite yang loading-nya 2 detik vs 8 detik. Apa dampaknya terhadap pengalaman pengguna mobile dan apa penyebab loading lambat pada microsite?
🔴 Latihan Sulit (11-15)
11.
Rancang layout microsite lengkap untuk seorang mahasiswa yang ingin membangun personal branding sebagai: (1) freelance graphic designer, (2) content creator di TikTok, dan (3) asisten dosen. Tentukan urutan konten, 6 link dengan prioritas, dan spesifikasi mobile friendly!
12.
Sebuah komunitas belajar online memiliki 3 program: Kelas Gratis (untuk akuisisi), Kelas Berbayar (untuk revenue), dan Mentoring 1-on-1 (eksklusif). Rancang strategi layout microsite yang memaksimalkan pendapatan tanpa mengabaikan pertumbuhan komunitas!
13.
Analisis dan redesain: Microsite sebuah restoran menampilkan urutan: Foto makanan (bukan profil) → Link Instagram → Menu PDF (file 5MB) → Lokasi Google Maps → Reservasi WhatsApp → Review Google. Identifikasi SEMUA masalah dan buat redesain lengkap!
14.
Buat perbandingan layout microsite untuk musim “biasa” vs musim “promo besar” (seperti Harbolnas/Black Friday) untuk sebuah toko fashion online. Jelaskan elemen apa yang berubah dan mengapa!
15.
Anda diminta merancang microsite untuk sekolah yang memiliki target pengunjung: calon siswa baru, orang tua siswa, dan alumni. Masing-masing membutuhkan akses ke informasi berbeda. Rancang layout yang melayani ketiganya secara efektif, dengan mempertimbangkan bahwa 70% pengunjung adalah orang tua yang mengakses via WhatsApp link di grup!