Z

Training · Bro Zaid Todak ← Semua subjek

Modul 1 — Hierarki

Yang paling penting. Mata orang kena tahu nak tengok apa DULU.

Bila kau masuk kedai, kau nampak papan tanda BESAR dulu, baru harga, baru detail kecil. Website sama. Kau cipta susunan ni dengan saiz, berat (tebal), warna, dan ruang. Kalau semua elemen sama besar, mata sesat, dan otak terus rasa "murah / amatur".

Kandungan SAMA. Yang kanan cuma besarkan yang penting, kecilkan yang sokongan. Mata terus tahu urutan.

Modul 2 — Ruang kosong (whitespace)

Silap paling biasa orang bukan-designer. Ruang kosong BUKAN ruang terbuang.

Instinct kita: "ada ruang kosong, jom isi." Itu salah. Ruang kosong yang buat benda nampak mahal. Ia bagi setiap elemen "bernafas". Fikir butik mewah vs kedai runcit sesak: barang sama bagus, tapi ruang buat satu rasa premium.

Barang sama. Yang kanan cuma bagi ruang lebih. Terus rasa lebih mahal & senang baca.

Modul 3 — Taipografi

Serius, 90% web design ialah tulisan. Font, saiz, jarak baris.

Kebanyakan "wow" datang dari taipografi: font yang kau pilih, betapa BESAR kau berani buat tajuk, dan kontras antara besar & kecil. Website "padu" biasanya tak guna font default (Inter, Arial, Roboto), dia guna font premium (Clash Display, PP Editorial) dengan saiz gergasi.

Perkataan sama. Yang kanan buat tajuk besar + berani, sokongan kecil kelabu. Itu "confidence" yang buat rasa mahal.

Modul 4 — Warna & kontras (dengan disiplin)

Kurang lagi banyak. Satu-dua warna aksen je.

Website murah selalu guna 5-6 warna terang, nampak macam sarkas. Website mahal ada disiplin: satu latar committed (hitam pekat / krim), dan satu warna aksen untuk butang & benda penting. Itu je. Kekangan warna = rupa berdisiplin.

Bila hanya SATU warna terang, warna tu jadi kuat, mata terus tahu itu benda penting (butang, link).

Modul 5 — Gerakan bermakna

Ni kuncinya. Rahsia bukan "ada animasi", tapi "easing" (laju-perlahan pergerakan).

Animasi bukan hiasan, ia pandu mata dan cipta rasa "hidup". Tapi rahsia sebenar ialah easing: cara benda pecut & perlahan. Gerakan yang laju rata (linear) rasa murah macam robot. Gerakan yang mula perlahan, pecut, perlahan semula (eased) rasa mahal & semula jadi.

Tengok dua kotak ni bergerak. Gerakan SAMA jarak, tapi yang kanan rasa lebih "mahal" sebab easing. Detail sekecil ni yang membezakan.

Modul 6 — Grid & irama

Jarak yang konsisten. Otak suka corak; jarak rawak rasa amatur.

Designer pro guna skala jarak berganda, 8px, 16px, 24px, 32px, 64px. Semua jarak ikut skala ni, jadi ada "irama" yang kemas. Amatur letak jarak rawak (7px sini, 13px sana), otak rasa tak kena walaupun tak tahu kenapa.

Yang kanan guna jarak sama (12px) antara semua. Rasa kemas & sengaja. Yang kiri rasa "tercampak".

Modul 7 — Arah seni (art direction)

Satu idea kuat dibawa ke SEMUA benda. Bukan template + isi.

Website "padu" ada satu konsep yang konsisten merentas warna, tekstur, gerakan, DAN ayat, macam satu "dunia". Contoh: brozaidtodak.com ada konsep kuat: laut ribut + bara + "todak" (ikan laut). Bila semua elemen menyokong satu mood, ia rasa dibina sengaja, bukan template dengan gambar dicucuk masuk.

Ujian: kalau kau tutup logo, orang masih boleh teka "ini brand apa / mood apa"? Kalau ya = arah seni kuat.

Modul 8 — Craft & detail

5% terakhir yang rasa macam 50%. Ini yang orang tak nampak tapi terasa.

"Wow" itu sebenarnya 20% idea besar + 80% detail obsesif: peralihan halus, butang yang bertindak balas bila hover, urutan loading yang cantik, easing yang betul di setiap tempat. Tiada satu trick ajaib, ia seratus keputusan kecil yang betul.

Letak cursor atas butang kanan. Perbezaan kecil, tapi keseluruhan site penuh detail macam ni = rasa "mahal".

Modul 9 — Anatomi halaman: page, section & splash

Page itu kertas panjang. "Muka surat" yang kau nampak masa scroll tu sebenarnya dipanggil section.

Ramai ingat landing page ada "page 1, page 2" macam buku. Sebenarnya satu page = satu URL, dan ia macam kertas panjang yang digulung, bila kau scroll, kau cuma membuka gulungan tu ke bawah. Bahagian-bahagian atas kertas tu dipanggil section (seksyen). Kalau setiap section dibuat setinggi satu skrin penuh (designer panggil full-viewport section), ia RASA macam menyelak slide, padahal masih satu page yang sama.

Istilah yang kau akan selalu dengar: hero section = seksyen pembuka paling atas (tajuk besar + butang utama). Above the fold = apa yang pelawat nampak SEBELUM scroll, istilah ni datang dari surat khabar, bahagian atas lipatan yang nampak kat gerai. Footer = kaki halaman. Page sebenar pula = URL berbeza: brozaidtodak.com itu satu page, brozaidtodak.com/skills itu page LAIN.

Scroll dalam kotak kanan tu. Empat "skrin" yang kau lalui = EMPAT section, SATU page. Itulah struktur kebanyakan landing page sebenar (contoh: brozaidtodak.com).

Satu lagi istilah: splash. Splash screen (atau splash page) = skrin pembuka penuh yang muncul SEBELUM kandungan, biasanya logo atau mood pembuka. Contoh hidup kau sendiri: pintu masuk shedanbunga.com (dinding olive + pintu terracotta), dan intro "MEMUATKAN" di site latihan ni sendiri. Splash bagus untuk jenama dan mood, TAPI ada peraturan: tunjuk sekali sahaja per lawatan, cepat, dan jangan halang orang yang datang nak maklumat. Zaman dulu orang buat splash sebagai page berasingan dengan butang "Enter site", amalan tu dah mati, cara moden = lapisan atas page yang sama, hilang selepas sekali tengok.

Kotak kiri dan kanan kedua-dua "site". Rasa sendiri beza splash yang menghalang vs splash yang menyambut.

Modul 10 — Kajian kes: bedah landing sebenar (10camp.com)

Modul 9 bagi teori. Sekarang kita bedah satu landing sebenar yang hidup: www.10camp.com, kedai gear camping. Screenshot di bawah diambil terus dari site live, disusun ikut urutan sebenar dari atas ke bawah. Perhatikan satu benda: setiap seksyen ada SATU kerja. Tiada seksyen "saja-saja ada".

Rumusan — 8 prinsip dalam satu pandangan