Thiết kế web lưới lệch dùng các ô ảnh to nhỏ khác nhau nhưng căn theo cùng một hệ thống. Nhờ đó, nhiều hạng mục có nhịp mà vẫn dễ tìm. Phong cách Lưới ảnh lệch nhịp dễ học nhất bằng kéo, giấy và vài mảnh bìa.
Hãy làm như trong một giờ học bố cục. Trước khi mở máy tính, bạn sẽ cắt ô, thử ba cách xếp và tự thấy đâu là lệch có chủ đích. Mẫu tham chiếu có trong thư viện giao diện Mạnh An AI.
Mẫu Góc Mới lệch ở đâu, thẳng ở đâu?
Mẫu Góc Mới lệch về kích thước ô, nhưng thẳng hàng ở các mép. Đó là điều cần nhìn ra đầu tiên, vì ô to nhỏ khác nhau vẫn nằm trên cùng một hệ thống.
Ảnh quán cà phê rất cao chiếm cột phải. Cột trái có tiêu đề, hai ô văn phòng rộng khác nhau, rồi một ô nhà hàng nằm ngang. Đáy ô nhà hàng trùng đáy ảnh cà phê, các khe cũng đều.
Mỗi ô có chú thích hai dòng và một nút mũi tên. Tên dự án và địa danh trong ảnh đều là minh họa.
Chuẩn bị gì cho bài tập trên giấy?
Bạn chỉ cần một tờ giấy lớn, bút chì, kéo và ảnh của mình đã in nhỏ. Hãy kẻ tờ giấy thành sáu cột đều nhau. Các cột này là hệ thống, và mọi mép ô phải chạm vào chúng.
- Cắt một ô lớn, rộng bốn cột.
- Cắt hai ô vừa, rộng ba cột.
- Cắt ba ô nhỏ, rộng hai cột.
- Viết tên hạng mục lên từng ô, kèm một dòng ngắn.
Ô to dành cho hạng mục quan trọng nhất, chứ không phải cho ảnh đẹp nhất. Đây là quyết định đầu tiên về nội dung, và nó quan trọng hơn cách xếp. Nếu mọi hạng mục ngang nhau, lưới ảnh cân đối trung thực hơn.
Cách xếp thứ nhất: một ô cao làm cột đỡ
Cách này đặt một ô rất cao ở một bên, còn các ô nhỏ xếp thành hai hàng bên cạnh. Đáy ô cao trùng với đáy tầng dưới, nên khối ảnh có hình chữ nhật gọn gàng.
Studio nội thất: phòng ngủ làm cột đỡ
Studio giả định Phòng Lặng đặt Phòng ngủ cao bên trái, Phòng khách rộng ở trên bên phải. Bếp và Góc đọc nhỏ hơn nằm ở dưới. Mép dưới của cả khối thẳng hàng, khe giữa các ô đều. Lưới vật liệu bên dưới đổi cỡ theo một nhịp khác, nên trang không lặp lại khối đầu.
Cách xếp thứ hai: một dải rộng rồi các ô khóa vào nhau
Cách này đặt một ô ngang rất rộng trên cùng, rồi các ô bên dưới khóa vào nhau. Nó hợp khi có một ảnh khỏe, chủ thể nằm ngang, như một món ăn hoặc một mặt tiền.
Quán ăn: lưới mở đầu bằng cá nướng
Quán giả định Bếp Lửa Hiên mở bằng ảnh cá nướng rộng, tiêu đề nằm trên mảng tối bên phải. Dưới là ba thẻ món và một ảnh đầu bếp cao. Lưới món phía sau có hai ô rộng kẹp hai ô nhỏ. Tuy nhiên, các ô hơi dày chữ và nút, nên nhịp ảnh yếu hơn mẫu gốc.
Cách xếp thứ ba: nhiều ô cao, xen ô chi tiết nhỏ
Cách này dùng các ô cao hẹp khác bề rộng, xen với ô nhỏ cho chi tiết. Nó hợp khi chủ thể đứng, và có những chi tiết đáng nhìn gần.
Thời trang: dáng người và chất vải
Thương hiệu giả định Vải Nghiêng có hai ảnh người cao với bề rộng khác nhau. Bên cạnh là ô Chất vải rộng và thấp, ô Bộ đi làm, ô Phụ kiện nhỏ. Mép trên và mép dưới của cả khối đều thẳng. Chữ “Size guide” trong ảnh nên đổi sang tiếng Việt khi làm thật.
Làm sao biết lệch có chủ đích hay lộn xộn?
Lệch có chủ đích thì giải thích được lý do của từng ô to. Bố cục lộn xộn có thể bắt mắt do ngẫu nhiên, nhưng các mép ô thường không thẳng hàng. Hãy so bài xếp trên giấy với bảng dưới đây.
| Dấu hiệu | Có chủ đích | Lộn xộn |
|---|---|---|
| Mép ô | Chạm cột, khối có mép ngoài thẳng | Lệch vài li, không theo cột |
| Khe giữa ô | Đều nhau | Mỗi chỗ một khác |
| Ô to nhất | Hạng mục chính | Ảnh đẹp nhất, bất kể nội dung |
| Chú thích | Cùng vị trí, cùng dạng | Lúc trên ảnh, lúc dưới ảnh |
| Đường mắt | Đi từ ô to sang ô nhỏ | Không biết nên nhìn đâu trước |
Với thiết kế web lưới lệch, một phép thử nhanh là đặt thước dọc theo các cạnh của khối ảnh. Mép mỗi ô nên thẳng hàng với mép ô bên cạnh hoặc với đường cột. Nếu ô đứng một mình, hãy xếp lại, trừ khi bạn nói được lý do.
Lưới này trên điện thoại và trong mã thế nào?
Trên điện thoại, các ô xếp thành một hoặc hai cột, nên thứ tự đọc phải được quyết định lại. Hãy đưa hạng mục chính lên đầu, giữ một ô to làm nhịp, và luôn hiện chú thích.
Về mã, nên dùng CSS Grid với ảnh img có sẵn kích thước để trang không nhảy khi tải. Thứ tự trong HTML phải khớp thứ tự hợp lý, vì mắt và trình đọc màn hình có thể đi khác nhau. Tiêu chí trình tự có nghĩa của WCAG nói rõ yêu cầu này.
Ô lớn có thể tốn nhiều dung lượng. Hãy nén ảnh theo đúng cỡ hiển thị và dùng cùng một cách xử lý màu. Nhờ đó, lưới vẫn nhất quán dù kích thước khác nhau.
Khi nào không nên xếp lệch?
Không nên xếp lệch khi khách phải so sánh các hạng mục ngang hàng, như sản phẩm cùng loại có giá. Ô to sẽ khiến một sản phẩm trông quan trọng hơn dù không phải vậy.
Với bộ ảnh cao và ít chữ, nhịp ảnh dọc thoáng có thể hợp hơn. Nếu mỗi ảnh cần một đoạn giải thích dài, hãy xem bố cục ảnh và chữ đan xen.
12 ngành khác nên dành ô to cho điều gì?
Thiết kế web lưới lệch hợp với các ngành có nhiều hình ảnh thật. Dưới đây là 12 ngành khác và hạng mục có thể đặt vào ô lớn nhất.
- Kiến trúc: mặt đứng công trình tiêu biểu.
- Khách sạn nhỏ: không gian chung.
- Tiệm hoa: bộ hoa theo mùa.
- Studio ảnh: chủ đề chính đang nhận.
- Đồ gỗ: sản phẩm đặt làm lớn nhất.
- Du lịch: điểm đến chủ đạo.
- Tổ chức tiệc cưới: toàn cảnh một sảnh tiệc.
- Cà phê: quầy pha.
- Trang sức: bộ sưu tập chính.
- Gốm thủ công: dáng sản phẩm tiêu biểu.
- Cảnh quan: khu vườn đã hoàn thiện.
- Trường nghệ thuật: không gian lớp học.
Câu hỏi thường gặp về thiết kế web lưới lệch
Ba câu dưới đây thường được hỏi sau khi thử xếp trên giấy.
Lưới lệch khác lưới cân đối ở đâu?
Lưới cân đối có các ô cùng cỡ, phù hợp khi mọi hạng mục ngang nhau. Lưới lệch dùng cỡ ô để nói hạng mục nào quan trọng hơn.
Cần bao nhiêu ảnh để bắt đầu?
Không có số bắt buộc. Số ô trong các mẫu minh họa thay đổi theo từng khối. Ít ảnh quá thì khó tạo nhịp, nên hãy chuẩn bị thêm ảnh chi tiết.
Có nên dùng ảnh tỉ lệ khác nhau không?
Có, vì lưới này cần cả ảnh ngang và ảnh dọc. Hãy cắt ảnh sao cho chủ thể không mất, và kiểm tra lại từng ô sau khi cắt.
Bắt đầu bài tập từ đâu?
Hãy chọn sáu ảnh thật, in nhỏ và thử cả ba cách trong một buổi. Chụp lại từng cách, rồi hỏi một người ngoài xem họ nhìn ô nào trước. Câu trả lời cho biết bố cục có đúng ý bạn không.
Sau đó, bạn có thể đọc các giai đoạn làm website tại Mạnh An AI và chi phí các gói thiết kế. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi ảnh đã xếp để trao đổi.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
