Nếu bạn đang cố gắng xây dựng website freelance cho khách hàng, hoặc chỉ muốn xây dựng portfolio, có thể gặp bài toán này:
Làm sao xây dựng website nếu không có kỹ năng thiết kế web?
Một số lựa chọn:
- Thuê web designer – nhưng designer giỏi không hề rẻ.
- Tìm designer rẻ trên Fiverr/Upwork – nhưng rủi ro cao.
- Tải theme/template miễn phí hoặc trả phí – nhưng đôi khi không đáp ứng đủ yêu cầu.
Một lựa chọn khác: học kỹ năng cơ bản bố cục và thiết kế website, tự xây dựng front-end.
Bạn sẽ không trở thành designer giỏi chỉ sau khi đọc xong bài này. Với website phức tạp, vẫn có thể cần designer chuyên nghiệp.
Nhưng tôi tin bạn có thể học cách lên kế hoạch và thiết kế website đơn giản cho hầu hết doanh nghiệp nhỏ.
Phương pháp này bao gồm:
- Học cơ bản về cách website được cấu thành về mặt trực quan,
- Và nghiên cứu thiết kế web hiện có để lấy cảm hứng, ý tưởng cho mình.
Đây chính là chiến lược tôi dùng xây dựng website The Coder Coder! Đương nhiên thiết kế khá đơn giản, không quá phức tạp. Nhưng đôi khi đơn giản là đủ.
Khi nắm vững cơ bản bố cục và thiết kế web, bạn có thể xây dựng website tùy chỉnh cho portfolio và khách hàng freelance.
Tất nhiên, mỗi website bạn xây dựng mang lại kinh nghiệm. Theo thời gian, bạn sẽ tạo ra thiết kế phức tạp hơn nhờ luyện tập liên tục.
Các bước chính của quy trình:
- Quyết định cơ bản cho website
- Lập kế hoạch bố cục
- Ghép thiết kế lại với nhau
- Xây dựng sản phẩm cuối cùng
Mỗi bước được củng cố bằng nghiên cứu – xem website khác, rút ra phần muốn áp dụng cho mình.
Lưu ý quan trọng: Tôi không khuyến khích copy CSS hoặc hình ảnh không phải của bạn. (Copy-paste không giúp bạn học được gì.) Ý tưởng là lấy ý tưởng, khái niệm sáng tạo, dùng để tạo ra thứ tương tự.
1. Quyết định cơ bản cho website
Trước khi chọn màu hay font, hãy trả lời vài câu hỏi chung:
1. Website quảng bá loại hình kinh doanh nào?
Quán pizza, studio nhiếp ảnh, hay nhà sách? Bất kỳ loại hình nào cũng hưởng lợi từ website.
Ví dụ ở đây: quán cà phê giả định tên "Central Coffee". Vì ai cũng thích cà phê, đúng không?
2. Website sẽ có những trang nào?
Trang thường见: trang chủ, giới thiệu, liên hệ, và trang chuyên biệt theo ngành.
Cách tốt nhất xác định trang và cấu trúc chung: nghiên cứu nhanh online.
2. Nghiên cứu website hiện có
Xem các website hiện có cùng loại hình kinh doanh. Xem 3-4 trang, quan sát các trang chúng có.
Chú ý thiết kế và ghi chú:
- Website có những trang nào,
- Phong cách tổng thể ra sao,
- Dễ điều hướng, tìm thông tin không,
- Và bất cứ điều gì thu hút bạn.
Nơi tốt tìm ví dụ: Theme Forest. Nhiều template miễn phí/premium và theme WordPress. Nên chọn theme phổ biến – thường là ví dụ thiết kế tốt.
Dưới đây là ví dụ quán cà phê từ theme tìm được.
The7
Trang: One-page với các section: Home, About, Location, Offers, Menu, News, Press, Blog Posts
Phong cách: Hiện đại, sạch sẽ, ảnh đẹp
Điều hướng: Dễ dàng
Và một vài website tìm được từ "coffee shop in Chicago":
The Wormhole Coffee
Trang: Homepage, Blog, Location/Contact, Job Opportunities
Phong cách: Hiện đại một chút; ảnh shop mang cảm giác hoài niệm
Điều hướng: Không rõ ràng ngay đây là quán cà phê. Hơi khó điều hướng.
Caffe Streets
Trang: One-page, section: Home, Caffe (About), Menu, Roasting, Time Machine (nước ép), Contact Form
Phong cách: Đơn giản, hiện đại (Squarespace)
Điều hướng: Khá dễ; thích thanh menu dính (sticky) cuộn đến từng section.
Build Coffee
Trang: One-page, section: Homepage, About, Hours, Location, Shop, Catering, Events, Contact
Phong cách: Đơn giản, kết hợp ảnh full-width giữa các section nền trắng có text.
Điều hướng: Khá dễ dàng
Sawada Coffee
Trang: Homepage, About, Food & Drink, Press, Contact & Hours, Our Restaurants, Jobs
Phong cách: Tập trung vào nhiếp ảnh, text gần như thứ yếu
Điều hướng: Hơi khó – suýt không thấy hamburger menu góc phải.
3. Ghi chú cho website của mình
Sau khi xem nhiều website quán cà phê, đã nắm rõ tính năng phổ biến và ý tưởng gì hay/dở.
Dựa trên nghiên cứu, bắt đầu ghi chú cho site riêng.
Với Central Coffee, chọn one-page đơn giản với các section:
- Header
- Home
- About
- Menu
- Location/Contact
- Footer
4. Lập kế hoạch bố cục (Wireframe)
Đã có khung xương, giờ điền nội dung cho từng page/section. Bố cục này gọi là wireframe.
Trong wireframe: chưa design (chưa có font, màu, ảnh). Chỉ xác định loại nội dung và vị trí sơ bộ. Giống bản vẽ kỹ thuật/blueprint.
Header
Thích thanh nav trên top như Seven Coffee demo và Caffe Streets.
Cả hai đều căn giữa, tôi muốn căn trái: logo trước, section sau.
Đó là desktop. Tablet/mobile: chỉ logo và hamburger menu mặc định. Click hamburger → menu off-canvas trượt từ phải ra hiển thị nav section.
Home
One-page site nên "homepage" là màn hình đầu tiên khi load. Thích tagline dưới tên như Seven Coffee.
Sẽ dùng ảnh background (như Build Coffee) với text đè lên. Giống nhau desktop và mobile.
About
Tất cả web đều có About ngắn, có kèm ảnh. Sẽ cho đoạn văn về quán và vài ảnh nội thất để thu hút khách.
Menu
Mỗi web xử lý menu khác nhau:
- Seven Coffee: lưới món kèm giá,
- Caffe Streets: danh sách món,
- Build và Sawada: link ra PDF menu.
Ghét lướt web trên điện thoại phải tải PDF. Sẽ làm menu đơn giản: đồ uống, đồ ăn, kèm vài ảnh.
Location/Contact
Đặt vị trí, giờ mở cửa, liên hệ ở cuối trang. Người dùng thường lướt từ trên xuống.
Đặt call-to-action ở dưới trả lời "tiếp theo làm gì?" – giúp khách hành động: lấy đường đến quán và ghé thăm!
Footer
Footer tối giản: thanh nhỏ chứa copyright.
5. Hoàn thiện wireframe đầy đủ
Dưới đây wireframe hoàn chỉnh desktop và mobile. Tạo bằng Mockflow miễn phí (1 project free, plan trả phí cho nhiều project hơn).
Dễ dùng, thích style sketch vui nhộn 🙂
(Click thumbnail xem ảnh lớn tab mới)
6. Quyết định thông số thiết kế cơ bản
Không làm style quá chi tiết/fancy. Cần xác định cơ bản:
Màu sắc (Color scheme)
Màu sắc là các màu dùng trên web. Giống sơn nhà: thường dùng trung tính (xám, trắng) cho hầu hết không gian. 1-2 màu nhấn sáng cho element quan trọng (link, button).
Cần cảm hứng màu? Canva có palette mẫu.
Central Coffee dùng palette "Fall Collection" từ Canva – tông màu ấm dựa trên nâu.
Mục đích: gợi cảm giác hoài niệm, ấm cúng gắn liền quán cà phê.
Font chữ
Quay lại các web: hầu hết dùng font sans-serif (chữ không có chân). Chọn font đơn giản cho text chính, font nặng hơn cho tiêu đề.
Google Fonts – nguồn font miễn phí cho web. Đừng dùng quá nhiều font – mỗi font family/weight/style đều làm chậm tải trang.
Hình ảnh/Nhiếp ảnh
Chọn style/mood phù hợp loại hình kinh doanh. Quán cà phê: ảnh mời gọi, ánh sáng mềm, cảm giác ấm cúng/hoài niệm cho nội thất, người trò chuyện thư giãn, ảnh đồ ăn/thức uống.
Illustration và logo: công cụ design online miễn phí có sẵn ảnh dùng cho web. Ví dụ:
- Canva
- Vectr
- Snappa
7. Xây dựng website!
Đã có wireframe chỉ bố cục, và tham chiếu design hướng dẫn style front-end.
Không có designer làm PSD chi tiết, nên xây dựng trực tiếp từ wireframe.
Cách tôi thường làm front-end:
- Thiết lập file website
- Tạo cấu trúc folder/file
- Khởi động task runner (dùng Gulp cho project này)
- Tạo file HTML riêng cho mỗi template
Sau đó, với mỗi HTML template:
- Tạo khung xương với element HTML cơ bản
- Xây dựng element trang từng cái một
- Mỗi element: thêm CSS style, trước hết đảm bảo section bố cục đúng
- Kiểm tra giao diện trên trình duyệt khi làm, liên tục chỉnh sửa
Đảm bảo website responsive
Khi xây dựng, thường kiểm tra style mượt mà trên desktop, tablet, mobile.
Desktop: kiểm tra trên máy mình với các trình duyệt khác nhau. Mobile: dùng Chrome DevTools giả lập thiết bị di động.
Lưu ý: công cụ giả lập không 100% giống thiết bị thật. Cuối cùng cần test trên điện thoại thật khi web đã lên mạng.
Một số công cụ giả lập:
- Responsinator.com (miễn phí)
- Screenfly by Quirktools (miễn phí)
- Browserstack (trả phí) – test máy ảo trên thiết bị thật.
Sản phẩm hoàn thiện!
Screenshot website Central Coffee hoàn thành:
Xem site thật trên GitHub.io của tôi.
Vậy là cách tôi design và build website không cần thuê designer.
Hy vọng bài viết hữu ích! Để lại ý kiến bên dưới nhé.
Không muốn bỏ lỡ bài mới? Chưa subscribe? Bấm vào đây để nhận thông báo khi có bài mới trên blog.