“Thiet ke web ma khong can biet code” – Chuyen that hay chuyen dua?
“Thiet ke web gio de lam, khong can biet code gi ca”. Ban nghe cau nay nhieu lan roi dung khong? Su that: dung, nhung khong hoan toan dung. Ban co the tao mot website ma khong viet mot dong code nao, nhung de co mot web chay tot, ban can it nhieu hieu ve nguyen ly thiet ke.
Minh bat dau tu mot ke khong biet gi ve thiet ke. Web dau tien cua minh xau kinh khung: mau sac loang choang, font chu ky quac, bo cuc lung tung. Nhin lai thay vua buon vua cuoi. Nhung qua trinh do da day minh nhieu dieu.
Nguyen tac thiet ke website co ban (khong can hoc 4 nam Dai hoc)
Day la nhung nguyen tac minh rut ra duoc sau nhieu lan sai va sua:
1. Giup nguoi dung khong can phai suy nghi
Nguyen tac quan trong nhat trong thiet web: Don’t Make Me Think (cua Steve Krug). Khi khach vao web cua ban, ho phai hieu ngay: Toi dang o dau? Toi co the lam gi? Noi de tim thu toi can? Neu ho phai ngung lai suy nghi 3 giay, ban da thieu roi.
2. It hon la nhieu hon
Nhieu nguoi moi thiet ke co xu huong nhet moi thu len trang chu: 10 hinh anh, 5 bang gia, 3 video, 2 form dang ky… Ket qua: website rat roi mat. Hay tu dat cau hoi: Neu chi duoc de 1 thu tren trang chu, toi se de cai gi? Tra loi duoc cau do, ban da biet uu tien cua minh.
3. Mau sac: dung 1 bang mau, khong dung 10 mau khac nhau
Chon 1 mau chinh + 1-2 mau phu. Neutral (trang, den, xam) cho background. Dung mau chinh cho button, link, accent. Dung cung bo mau tren toan bo website. Automatic.css la plugin ho tro cho Bricks theme rat tot ve mat nay.
Chon cong cu thiet ke: Page Builder vs Theme
Khi bat dau, ban co 2 lua chon:
- Theme co san (Astra, GeneratePress, Kadence) + tuy chinh: Nhanh, don gian, nhung gioi han tuy chinh
- Page Builder (Bricks, Elementor, Divi, Breakdance) + thiet ke tu do: Linh hoat, dep, nhung can thoi gian hoc
Ca nhan minh dung Bricks (nhu ChiaseHay). No cho ban kha nang tuy chinh gan nhu vo han ma khong can code. Ban chi can keo tha va chinh sua. Tuong tu nhu can nha Lego – co san cac khoi, ban tu lap rap theo y muon.
Thiet ke web chuan SEO: nhung dieu can biet
- To chuc noi dung bang heading (H1, H2, H3) dung thu tu
- Toi uu hinh anh: WebP, nen nhe, co alt text
- Thiet ke mobile-first: da so nguoi dung xem web tren dien thoai
- Toc do load: hinh anh nhe, code gon, dung cache (RabbitLoader)
- Menu trong: khong qua nhieu muc, de tim kiem
Tong ket
Thiet ke web khong kho neu ban nam duoc nguyen tac co ban. Khong can biet code, nhung can biet cach to chuc thong tin va dat minh vao vi tri nguoi dung.
Thuong hieu cua ban xung dang voi mot website dep. Hay bat dau tu nhung nguyen tac nho nay. Chuc ban thanh cong!
Ban thay kho khan gi nhat khi thiet ke web? Comment cho minh biet voi!
