| Istilah | Maksud dalam pelajaran ini |
|---|---|
| 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. |
Dengar rakaman sambil membaca nota. Butang masa membawa anda ke bahagian audio yang berkaitan. Masa bagi setiap bingkai slaid ditunjukkan secara berasingan.
Lihat semua bingkai yang disimpan bersama konteks transkrip · Transkrip penuh dengan bingkai asal
Perbandingan ini membantu mengenal pasti perkataan yang tidak pasti; ia belum mengesahkan pertuturan yang tepat.
Draf pertama: Zas
Model kedua: seterusnya.
Dalam video kali ni kita nak belajar tentang asas web design.
Macam mana nak buat website yang kami dah design sebelum ni.
Contoh macam ni, contoh ni, eh macam-macam contohlah kita tengok eh.
So kita nak buat design untuk website versi mobile eh.
Saya tak nak ajar awak pasal desktop. [semak: perkataan tidak pasti]
Yang ni awak kena cari sendiri sebab saya nak ajar versi mobile.
Sebab mobile ni lah cara yang kita nak upload dalam on-pay.
Tadi sebelum ni kan saya dah ajar awak kan asas on-pay kan. [semak: perkataan tidak pasti]
So macam mana nak gunakan benda ni [semak: perkataan tidak pasti]
Untuk upload ke dalam OnPay nanti [semak: perkataan tidak pasti]
So jom kita tengok
Asas kepada web design [semak: perkataan tidak pasti]
Okay so [semak: perkataan tidak pasti]
Ada banyak design kat sini
Tapi saya nak ambil design yang
Design mana saya nak ambil
Ini tuan sekejap lama ni [semak: perkataan tidak pasti]
Alhamdulillah
Alhamdulillah
BTS blueprint team sale [semak: perkataan tidak pasti]
Sebab dia ada page
So banyak macam-macam benda [semak: perkataan tidak pasti]
Dan bila ada macam-macam benda ni
Dia berat aku guys [semak: perkataan tidak pasti]
Dia berat sikit
Tapi okey lah [semak: perkataan tidak pasti]
Sebab kita tak install pun
Saya pakai browser je
So dia auto save [semak: perkataan tidak pasti]
Yang paling saya suka
Berada di mana-mana sahaja
Hang pula dah dia
Oh puji
So jangan puji [semak: perkataan tidak pasti]
Saya nak ambil satu contoh
Dan saya nak tunjukkan awak
Daripada skeleton
Kepada versi yang dah finish
Kita ambil blue pen timsial pula [semak: perkataan tidak pasti]
Semua desain [semak: perkataan tidak pasti]
Dia bermula daripada skeleton [semak: perkataan tidak pasti]
Ada tak skeleton kat sini
Contoh, tunjukkan awak
Ini example yang bagus
Awak tengok ni [semak: perkataan tidak pasti]
Tengok kiri kanan
Semua desain bermula macam ni
Lepas tu baru kita cantikkan dia belah kanan
Tapi kanan ni pun tak cantik lagi
Dia ada versi yang lagi cantik lagi [semak: perkataan tidak pasti]
Ok, tapi point dia kiri kanan [semak: perkataan tidak pasti]
Nampak? Ni skeleton yang ni dah first draft
Contoh macam ni
Mula campak-campak bodoh-bodoh macam ni je
Haa, campak bodoh-bodoh je dulu
Tak betul baru kita masukkan colour dia [semak: perkataan tidak pasti]
Haa, beza lah bila kita dah masukkan colour
Kita dah kemaskan dia
Kita dah masukkan detail-retail dia apa semua [semak: perkataan tidak pasti]
Haa, baru dah dia
Malatops macam ni [semak: perkataan tidak pasti]
Ok, ni contoh
Haa, kan? Clean design dia
So inilah kelebihan
Bila kita belajar
Guna
Figma ni
Memang kita boleh buat
Design yang clean [semak: perkataan tidak pasti]
Macam ni [semak: perkataan tidak pasti]
Ok [semak: perkataan tidak pasti]
Lepas tu lagi [semak: perkataan tidak pasti]
Contoh
So
Jom kita buat
Untuk contoh
Yang pertama
Bawah ni
Saya nak ambil
Meta X ni [semak: perkataan tidak pasti]
Bagi contoh [semak: perkataan tidak pasti]
Ok
Saya duplicate frame ni jap [semak: perkataan tidak pasti]
Saya dekat option [semak: perkataan tidak pasti]
Ok [semak: perkataan tidak pasti]
Saya duplicate [semak: perkataan tidak pasti]
Saya letak bawah setiap lah [semak: perkataan tidak pasti]
Bawa lari dia [semak: perkataan tidak pasti]
main bawah ni
ok so [semak: perkataan tidak pasti]
first step yang saya nak awak follow saya adalah
saya nak awak buat
satu frame
kita nak buat satu frame [semak: perkataan tidak pasti]
frame ni kita akan tarik je
dan kita akan pilih
size frame yang standard
kalau saya size frame yang standard
kalau tengok kat sini [semak: perkataan tidak pasti]
dia ada 400 [semak: nombor atau jumlah]
dia ada 300 [semak: nombor atau jumlah]
kita nak lebar tu
yang panjang tak kisah
yang lebar
so lebar standard
pro max ni besar sangat [semak: perkataan tidak pasti]
Tak semua phone susah macam ni [semak: perkataan tidak pasti]
So kita nak ambil size phone yang standard lah [semak: perkataan tidak pasti]
Bagi saya size phone yang standard
Yang semua orang selamat
Saya akan ambil dalam sekitar yang ni
390 [semak: nombor atau jumlah]
13, 14 [semak: nombor atau jumlah]
Ni standard lah [semak: perkataan tidak pasti]
Kalau kita ambil yang besar sangat pun
Masalah juga
Contoh macam ni [semak: perkataan tidak pasti]
14 plus kan [semak: nombor atau jumlah]
So saya ambil 13, 14 iPhone [semak: nombor atau jumlah]
So standard
Tak besar sangat, tak kecil sangat [semak: perkataan tidak pasti]
And then [semak: perkataan tidak pasti]
Kita akan
Tekan ni
Kita akan tarik dia ke bawah
Tarik dia
Tarik dia [semak: perkataan tidak pasti]
Mana nak tarik ni [semak: perkataan tidak pasti]
Oh dia tak keluar tangan [semak: perkataan tidak pasti]
Lenggong tu [semak: perkataan tidak pasti]
Ok tekan sini [semak: perkataan tidak pasti]
Tarik dia
Bawah
Saya biasakan tarik dia panjang sikit lah [semak: perkataan tidak pasti]
Biar macam dia zip [semak: perkataan tidak pasti]
Ok dah [semak: perkataan tidak pasti]
So [semak: perkataan tidak pasti]
Perasan tak sebelum ni kita dah belajar pasal copywriting [semak: perkataan tidak pasti]
Copywriting yang kita dah belajar ni kan
Yang ni
Saya nak awak masukkan copywriting ni
Masukkan semua copywriting ni
Dekat dalam artikel tadi tu
Dan kita dah belajar formula
Save space [semak: perkataan tidak pasti]
Educate apa semua ni [semak: perkataan tidak pasti]
Katalah awak nak ni
Saya boleh je command A [semak: perkataan tidak pasti]
Saya copy ni
Saya masukkan je terus kat sini
Kat sebelah ni
Paste
Mana dia [semak: perkataan tidak pasti]
Mana dia
Oh besar sangat
Haa ambil kau
So kita alih dia
Kita kecilkan dia
Kita ambil scale ni [semak: perkataan tidak pasti]
Kita kecilkan dia lagi [semak: perkataan tidak pasti]
Kecilkan dia lagi
Kita bagi dia kat sebelah tu
Sebagai rujukan je lah
Kita balik kat dah [semak: perkataan tidak pasti]
Haa macam tu
so mungkin saya tak buat dia [semak: perkataan tidak pasti]
bowl lah sekejap lagi, kecilkan sikit [semak: perkataan tidak pasti]
lagi, ok [semak: perkataan tidak pasti]
besar lagi ni
sekejap
tu lah barat dia, ok [semak: perkataan tidak pasti]
kita biar dia dekat situ [semak: perkataan tidak pasti]
jadi, lepas pergi balik dekat [semak: perkataan tidak pasti]
move
saya akan buat ayat ni
tak bowl lah, kecil kat bowl-bowl banyak ni [semak: perkataan tidak pasti]
regular, ok dah [semak: perkataan tidak pasti]
settle, so [semak: perkataan tidak pasti]
barulah kita start, dan bila kita
nak buat design ni, first draft ni [semak: perkataan tidak pasti]
awak kena tahu, saya nak awak masukkan je
contoh macam ni kan
kita buat, kenapa awak nak tekan [semak: perkataan tidak pasti]
speech delay, kita copy [semak: perkataan tidak pasti]
saya akan paste dia, saya akan letak sini [semak: perkataan tidak pasti]
dan mungkin saya akan
kecilkan lagi, aku tulis ni, so kalau saya nak [semak: perkataan tidak pasti]
dia ngam-ngam kat situ, macam ni besar
so saya boleh tukar sini, saya tekan
saya tekan
option ataupun
shift, saya boleh
tarik macam ni, ni pun menarik kat
So yang ni pun saya boleh kecilkan dia [semak: perkataan tidak pasti]
Kenapa anak tu kena special delay [semak: perkataan tidak pasti]
Ini kita buat kepala kat atas [semak: perkataan tidak pasti]
Lepas tu dah settle [semak: perkataan tidak pasti]
Kita kan ada yang nak letak gambar
Kita pun letaklah satu kotak kat sini
Letak kotak
Kotak ni letak center [semak: perkataan tidak pasti]
Kita double click
Kita boleh tulis kat tengah ni [semak: perkataan tidak pasti]
Kita letak ni letak tulisan [semak: perkataan tidak pasti]
Kita buat gambar apa [semak: perkataan tidak pasti]
Gambar
Anak [semak: perkataan tidak pasti]
Nah bukan [semak: perkataan tidak pasti]
Ni speech delay [semak: perkataan tidak pasti]
Bukan English [semak: perkataan tidak pasti]
Gambar
Anak
Mindphone [semak: perkataan tidak pasti]
Contohnya
Kita buat macam ni [semak: perkataan tidak pasti]
Ok [semak: perkataan tidak pasti]
Kita boleh kecilkan sikit
Kita boleh segitakan dia
So kita akan ulang mudalah ni [semak: perkataan tidak pasti]
Kenapa anak terkena
Kenapa anak terkena speech delay
Ha [semak: perkataan tidak pasti]
Kita pun masukkan lah ayat ni [semak: perkataan tidak pasti]
Saya akan buat macam tu lah biasanya
Copy
Saya akan masukkan kat sini [semak: perkataan tidak pasti]
Rupanya
Ada kajian nak putihkan [semak: perkataan tidak pasti]
ni, ni, ni. Lepas tu kita pun [semak: perkataan tidak pasti]
ok. Ok, kita letak [semak: perkataan tidak pasti]
tu lagi. Kalau kita nak [semak: perkataan tidak pasti]
kecikkan sikit, mungkin gambar yang kali ni dia
tak nak besar sangat. Kecik sikit macam ni.
Lepas tu. Ada lagi.
Ada lagi. So, kita kena susun.
Susun ikut kita punya ni.
Susun-susun sampai kita macam
dia sebenarnya bercerita
lengkap dengan penyusunan.
Tapi tak apa. Awak
try dulu buat, sebab
dalam video yang seterusnya, saya akan
belajar template, nak template tak [semak: perkataan tidak pasti]
ok, mesti nak template kan, tapi tak apa [semak: perkataan tidak pasti]
belajar yang susah dulu, nanti boleh dapat [semak: perkataan tidak pasti]
template, berhargai template, nanti dapat yang senang
template tak hargai, ok tak apa
so try dulu buat, try buat sikit-sikit
tengok macam mana, letak-letak-letak
so dalam video yang seterusnya
saya akan bagi awak template, ok tapi
bila awak dah pakai template, boleh tak
saya minta tolong satu je, jangan hilang
kreativiti, sebab masalah bila orang pakai template
saya ni, dia terus akan follow
sepijit-sepijit template, sedangkan template tu
just panduan untuk awak mulakan je
kalau boleh dah pakai, alihkan [semak: perkataan tidak pasti]
dia, ataupun guna
start idea sendiri, ok
lepas tu, macam awak tengok kat sini kan, saya tunjuk
yang ni versi yang dah siap [semak: perkataan tidak pasti]
mana nak dapat gambar ni, yang ni biasanya [semak: perkataan tidak pasti]
kita buat asing lah, macam tu macam ni
yang ni, yang ni [semak: perkataan tidak pasti]
dia buat kat mana ni, oh dia buat sesuatu [semak: perkataan tidak pasti]
orang ajan betul, dia buat sesuatu guys [semak: perkataan tidak pasti]
tengok, dia buat
sesuatu eh, bukan dia pergi ambil [semak: perkataan tidak pasti]
So benda ni
Boleh je dibuat
Semua benda ni boleh dibuat
Macam ni
Ha ni buat satu-satu [semak: perkataan tidak pasti]
Yes
Contoh lah kita ambil satu gambar
Kita ambil gambar
Anak
Menangis
Okay [semak: perkataan tidak pasti]
Kita tekan image
Kita ambil gambar
Inilah [semak: perkataan tidak pasti]
Kita nak Melayu [semak: perkataan tidak pasti]
Atau Cina [semak: perkataan tidak pasti]
Okay [semak: perkataan tidak pasti]
Saya save image
Lepas tu saya pergi dekat sini
Masuk gambar tu [semak: perkataan tidak pasti]
Cuma sekarang ni dah ada satu features baru
Features AI ni
Kita boleh
Hilangkan background dia
Macam sekarang ni kan ada background
Dekat sini ada satu features ni
Image
Dekat ni
Dekat ni
Ha ni [semak: perkataan tidak pasti]
Dekat ni
Ada AI [semak: perkataan tidak pasti]
dia rasa kat sini je [semak: perkataan tidak pasti]
dah hilang dah AI ni [semak: perkataan tidak pasti]
rasa tepi ni je
asset plugin widget
all
ah nanti rasa tunjuk awak [semak: perkataan tidak pasti]
mana AI ni
hilang lah [semak: perkataan tidak pasti]
aduh eh sebab bila kita ada AI tu [semak: perkataan tidak pasti]
kita boleh tanya dia remove kan background [semak: perkataan tidak pasti]
dia nanti akan remove background [semak: perkataan tidak pasti]
tak ada itu ada dekat
sebab tu canva adalah kelebihan
dia juga canva ni [semak: perkataan tidak pasti]
Ada benda-benda yang ada
Tak ada kat sini [semak: perkataan tidak pasti]
Tapi yang ni kalau kata [semak: perkataan tidak pasti]
Saya nak edit image ni [semak: perkataan tidak pasti]
Saya boleh lah [semak: perkataan tidak pasti]
Crop dia ke
Ni apa [semak: perkataan tidak pasti]
Coba edit juga dah [semak: perkataan tidak pasti]
Ni lain dah [semak: perkataan tidak pasti]
Ini ni [semak: perkataan tidak pasti]
Ni gambar ni [semak: perkataan tidak pasti]
Crop
Kalau nak crop [semak: perkataan tidak pasti]
Look for computer [semak: perkataan tidak pasti]
Tak jumpa lah guys
Takpelah
Okay lah saya belanja [semak: perkataan tidak pasti]
Tapi ni awak carilah
Google lah sendiri
Macam mana nak crop gambar ni
Kalau tak pakai lah [semak: perkataan tidak pasti]
Canva ke apa kan
Okay so
Awak dah faham dah [semak: perkataan tidak pasti]
Inilah nama dia skeleton
Bila kita buat skeleton ni
Saya nak awak
Free flow dulu
Daripada idea yang sekarang
Macam ni lah
Masukkan je
Nampak tak cantik kan
Masukkan je
Masukkan je
Dia memang [semak: perkataan tidak pasti]
Bila kita buat [semak: perkataan tidak pasti]
First draft ni
Dia memang
Buat je
Buat je
Masukkan je
Yang lain tak lah [semak: perkataan tidak pasti]
Contoh draft ni
Sebab kalau awak terus nak buat design
Nanti awak akan pressure tau [semak: perkataan tidak pasti]
Sebab nak buat design lawa-lawa terus ni
Susah
Bukan senang
So biasa kita akan buat
Bersih yang
Biasa-biasa dulu
Lepas tu
Barulah kita upkan design dia [semak: perkataan tidak pasti]
Itu step dia
Sebab tu
Dia ada 3 step [semak: perkataan tidak pasti, nombor atau jumlah]
Step pertama
Dia panggil sebagai skeleton [semak: perkataan tidak pasti]
Ataupun
Rangka
Step kedua
Kita buat yang low
Sampai design banting
Kita buat sini
Benda dia sini [semak: perkataan tidak pasti]
Step yang kedua
Dia panggil sebagai
Design ni
Macam ni kan
Ni asal usul ni
Design ni tak lawa [semak: perkataan tidak pasti]
Tapi yang ni kita dah terbuang [semak: perkataan tidak pasti]
Design ni tak lawa tu [semak: perkataan tidak pasti]
Terus saya tunjuk ke awak [semak: perkataan tidak pasti]
Kita yang tak jumpa tu [semak: perkataan tidak pasti]
So bila kita edit [semak: perkataan tidak pasti]
Kita terus terupgrade [semak: perkataan tidak pasti]
Daripada design yang sedia ada
Okay [semak: perkataan tidak pasti]
Jadi awak cuba lubat [semak: perkataan tidak pasti]
Haa sekejap [semak: perkataan tidak pasti]
Saya cari satu lagi lah
Last last
Cari cari cari
Ada ke tak ada [semak: perkataan tidak pasti]
Hmm
F.t.a [semak: perkataan tidak pasti]
Raku right [semak: perkataan tidak pasti]
Hmm
Yang ni kot [semak: perkataan tidak pasti]
Dia berat lah [semak: perkataan tidak pasti]
Kadang-kadang gambar tu
Loading dia keluar tak keluar
Ambil masa sikit
Tunggu sikit
Pop dia keluar [semak: perkataan tidak pasti]
BTS
Bluefin Timsail [semak: perkataan tidak pasti]
Haa
Ni yang tadi lah
Sama lah kan
Ni Mikey Blood [semak: perkataan tidak pasti]
Buat website Mikey Blood pun [semak: perkataan tidak pasti]
Pakai sini [semak: perkataan tidak pasti]
Nampak
Macam 4 je [semak: perkataan tidak pasti, nombor atau jumlah]
Ha [semak: perkataan tidak pasti]
Tentu
Boleh je nak beli apa semua [semak: perkataan tidak pasti]
Ok guys so teruskan [semak: perkataan tidak pasti]
Nanti saya tunjukkan template
Dalam video yang seterusnya
Sorry lah tak jumpa pulak
Jumpa dalam video yang seterusnya
Zas [semak: keyakinan pengecaman rendah, perkataan tidak pasti]