SCC / Sales Page / Pelajaran 11
Asas Web Design
Membina rangka halaman mudah alih dari salinan sebelum menggilapkan reka bentuk visualnya.
Nota belajar dalam BM · Kandungan daripada pelajaran Coach Adib
Pelajaran ini menunjukkan bingkai bergerak yang panjang, draf salinan rujukan berdekatan dan tempat letak gambar. Ia menganjurkan rangka → draf pertama → reka bentuk akhir, sementara meninggalkan kerja desktop dan beberapa ciri penyuntingan imej yang tidak diselesaikan.
Berasaskan draf BM; semakan bahasa dan maksud penuh masih belum selesai.
Lihat hubungan topik dahulu
Asas Web Design
Peta ini menunjukkan susunan konsep dalam pelajaran. Klik topik untuk huraian serta bingkai sumbernya.
Fahami satu konsep pada satu masa
Setiap bingkai dikekalkan daripada rakaman asal. Klik imej untuk membukanya pada saiz asal.
Reka bentuk dalam peringkat dan memilih bingkai
Sumber membandingkan kerangka kasar dengan reka bentuk yang lebih maju. Urutan yang dimaksudkan adalah rangka / rangka, draf pertama / kesetiaan rendah dan akhir / kesetiaan tinggi. Versi awal yang tidak sempurna adalah sebahagian daripada karya dan bukannya alasan untuk merancang semuanya dengan sempurna sekaligus.
Tumpuan adalah aset mudah alih untuk dimasukkan ke dalam OnPay kemudian. Tata letak desktop secara jelas di luar demonstrasi ini. Bingkai reka bentuk bukanlah integrasi OnPay atau laman web langsung yang responsif.
Coach Adib mengesyorkan lebar sekitar 390 menggunakan iPhone 13/14 yang telah ditetapkan, dan bukannya saiz Plus / Pro Max yang lebih besar. Contoh yang sedia ada juga menggunakan 360. Tidak ada satu lebar atau satu peranti yang ditetapkan membuktikan kebolehbacaannya pada setiap telefon.
Luangkan bingkai secara menegak agar sesuai dengan aliran. Contoh penyemak imbas kadang-kadang memuatkan perlahan atau membekukan; sumber tidak menetapkan jaminan prestasi.
PERKARA YANG PERLU DIINGAT
- Mulakan dengan aliran dan hierarki.
- Periksa pelbagai saiz skrin sebenar sebelum penerbitan.
Memindahkan salinan dan mencipta tempat penahan
Salin Google Doc sebelumnya di sebelah bingkai dan kurangkannya sebagai rujukan. Tambah blok teks individu di halaman dalam urutan yang dimaksudkan, bermula dengan tajuk. Sesuaikan saiz / penjajaran dan gunakan kotak untuk imej, dilabel dengan apa yang imej harus berkomunikasi.
Penanda tempat yang ditunjukkan adalah seorang kanak-kanak menggunakan telefon. Teruskan menambah slot teks dan imej untuk menceritakan kisah yang koheren dan bukannya menghiasi blok yang tidak berkait.
Draft speech-delay yang disalin mengandungi tuntutan masa skrin dan elektromagnet yang tidak disokong. Memasukkannya ke dalam reka bentuk tidak mengesahkannya. Ia tetap contoh copywriting yang memerlukan kajian fakta sebelum sebarang penggunaan klinikal.
Coach Adib menggalakkan mencuba kaedah kasar sebelum menerima templat dan menyesuaikan templat secara kreatif daripada menyalin setiap susunan dengan tepat.
PERKARA YANG PERLU DIINGAT
- Simpan salinan rujukan berasingan dari objek halaman.
- Tentukan bukti/gambar yang diperlukan untuk setiap blok.
Gambar dan langkah penyuntingan yang belum diselesaikan
Rakaman mencari gambar kanak-kanak, menyimpannya dan menyeretnya ke Figma. Hasil carian bukan kebenaran untuk menerbitkan gambar, dan kemiripan dengan penonton tidak menjadikan foto stok bukti klinikal.
Coach Adib mencari ciri penghapusan latar belakang AI tetapi tidak dapat menemuinya. Dia juga gagal mencari operasi tanaman yang memuaskan dan mencadangkan untuk menemui kaedah atau menggunakan alat imej lain seperti Canva.
Tidak ada resipi pemindahan latar belakang yang berjaya atau tanaman lengkap yang ditunjukkan di sini. Catatan ini tidak mencipta langkah antara muka yang hilang atau menyiratkan bahawa percubaan mengedit berjaya.
PERKARA YANG PERLU DIINGAT
- Gunakan hak imej yang sesuai dan konteks fakta yang relevan.
- Menyelesaikan langkah penyuntingan secara berasingan apabila demonstrasi gagal.
Periksa kerangka sebelum menggilap
Arahan utama adalah draf aliran bebas: letakkan kandungan yang diperlukan terlebih dahulu, walaupun ia kelihatan kasar. Kemudian memperbaiki jarak, warna, tipografi, rawatan imej dan butiran dalam lulus kemudian.
Mencuba menghasilkan reka bentuk yang halus dengan serta-merta boleh mengganggu keputusan kandungan. Menyimpan versi yang berasingan membantu membandingkan penalaran dan mengekalkan draf apabila penyuntingan mengubah penampilan.
Sumber tidak dapat mencari setiap contoh rendah kesetiaan sebelumnya yang ingin ditunjukkan. Ia berakhir dengan menjanjikan pelajaran templat. Contohnya adalah demonstrasi proses, bukan bukti yang diukur bahawa reka bentuk bersih meningkatkan jualan.
PERKARA YANG PERLU DIINGAT
- Lihat semula urutan kandungan sebelum visual selesai.
- Simpan versi lama untuk perbandingan.
Gunakan istilah dengan tepat
| Istilah asal | Maksud dalam pelajaran |
|---|---|
| Skeleton | Rencana kandungan dan susun atur kasar. |
| Low fidelity | Sebuah draf awal dengan butiran visual yang terhad. |
| High fidelity | Reka bentuk visual yang lebih selesai; tidak bersamaan dengan tapak yang digunakan. |
Terangkan dahulu, kemudian semak
Terangkan setiap topik dengan ayat sendiri sebelum membuka isi semakan.
1. Reka bentuk dalam peringkat dan memilih bingkai
Buka isi semakan
- Mulakan dengan aliran dan hierarki.
- Periksa pelbagai saiz skrin sebenar sebelum penerbitan.
2. Memindahkan salinan dan mencipta tempat penahan
Buka isi semakan
- Simpan salinan rujukan berasingan dari objek halaman.
- Tentukan bukti/gambar yang diperlukan untuk setiap blok.
3. Gambar dan langkah penyuntingan yang belum diselesaikan
Buka isi semakan
- Gunakan hak imej yang sesuai dan konteks fakta yang relevan.
- Menyelesaikan langkah penyuntingan secara berasingan apabila demonstrasi gagal.
4. Periksa kerangka sebelum menggilap
Buka isi semakan
- Lihat semula urutan kandungan sebelum visual selesai.
- Simpan versi lama untuk perbandingan.
Soalan semak kefahaman
- Adakah urutan lengkap sebelum gaya?
- Bukti atau gambar apa yang masih hilang?
- Adakah reka bentuk akhir berfungsi di luar lebar bingkai yang dipilih?
Isi semakan datang daripada nota sumber. Ini bukan skema peperiksaan rasmi atau pengesahan setiap perkataan audio.
Tukar kefahaman kepada tindakan
- Buat bingkai mudah alih kasar dari draf bukan klinikal yang sebenarnya, label setiap slot imej, kemudian tiru untuk lulus reka bentuk visual.
Latihan sendiri disimpan pada pelayar ini jika storan tersedia. Jawapan tidak dihantar kepada akaun atau perkhidmatan lain.
Semakan kendiri
Tanda ini merekodkan pembelajaran sendiri, bukan ketepatan kandungan.
Kembali kepada konteks asal
Rakaman audio dan bingkai mengikut masa
Transkrip bergambar
Semua bingkai rakaman yang disimpan
Transkrip Bahasa Melayu asal
Rekod semakan ketepatan
Tonton video asal dalam portal kursus →
Video dibuka dalam portal menggunakan sesi keahlian anda. Rujuk masa pada kapsyen bingkai untuk mencari bahagian yang diterangkan. Fail video belum dilampirkan di sini.
Audio penuh pelajaran
Pemain ini menggunakan rakaman audio sedia ada. Kehadiran rakaman tidak bermaksud setiap perkataan transkrip telah disahkan.
Status semakan kandungan
Seluruh transkrip automatik dan bingkai rakaman asal yang dipilih telah dikaji semula. Nota ini menerangkan antara muka yang dirakam, bukan peraturan perisian semasa yang disahkan. Kegagalan demonstrasi dan salinan kesihatan yang tidak disokong dikekalkan sebagai batasan. Pengesahan audio kata demi kata masih belum selesai.
Format ini menyusun nota sedia ada; ia tidak menambah pengesahan terhadap pertuturan, angka contoh atau dakwaan pengajar. Bingkai diambil daripada rakaman melalui pensampelan; peralihan singkat mungkin terlepas.