Lưới trang web và các dạng lưới trang web phổ biến bất kể lớn hay nhỏ, hoặc đơn giản hay phức tạp như thế nào, đều có các thành phần chung xác định chúng là bố cục lưới nào.
Lưới trang web và các dạng lưới trang web phổ biến
Cột
Cột là các phần dọc trải dài chiều cao của vùng nội dung và là được coi là các “khối xây dựng” lưới điện. Điều độc đáo về cột là càng có nhiều cột trong lưới, lưới càng linh hoạt. Chúng ta sẽ sớm thảo luận sâu hơn về vấn đề này.
Chiều rộng của các cột luôn phụ thuộc vào nhà thiết kế, nhưng về mặt thực tiễn tiêu chuẩn, số lượng cột truyền thống để sử dụng là 12 trên máy tính để bàn, 8 trên máy tính bảng và 4 trên điện thoại di động. Hầu hết các lưới có chiều rộng cột 60-80px. Chiều rộng cột là một người có ảnh hưởng chính về chiều rộng nội dung thực tế của bạn sẽ là.
Hàng
Như bạn có thể đoán, hàng là các phần ngang của lưới. Thiết kế web thường bỏ qua vai trò của các hàng trong lưới. Tuy nhiên, đó không phải là cách tốt và không nên bỏ qua nó.
Mô-đun
Mô-đun là các đơn vị không gian được tạo ra từ giao điểm của các hàng và cột. Các mô-đun, hoặc mô-đun nội dung, như chúng thường được gọi, được coi là các khối xây dựng của một trang, vì mỗi yếu tố thiết kế phù hợp (văn bản, hình ảnh, nút, v.v.) vào các mô-đun được tạo ra bởi các mẫu hình chữ nhật trong lưới.
Máng xối
Máng xối là các đường giữa các cột và hàng tách biệt từng đơn vị này. Kích thước máng xối khá phổ biến là 20px. Vai trò của máng xối là tạo thành không gian âm (bất kể lớn hay nhỏ) giữa các cột và hàng.
Nói một cách đơn giản nhất, máng xối là khoảng trống giữa các cột và không gian giữa các hàng. Máng xối đặc biệt quan trọng đối với bố trí khối xây, trong đó chiều rộng máng xối là một trong những chi tiết quan trọng nhất của bố cục.
Lưới trang web dạng lề
Lề là khoảng trống âm giữa định dạng và cạnh ngoài của nội dung, mà bạn cũng có thể nghĩ là “máng xối bên ngoài”. Lề bên thường có kích thước ở 20-30px trên thiết bị di động và khác nhau rất nhiều giữa máy tính để bàn và điện thoại di động.
Bạn có thể nhận ra từ lề từ HTML & CSS thuật ngữ, trong đó lề được sử dụng làm thuộc tính để tạo không gian xung quanh một yếu tố thiết kế hoặc container. Hãy nhớ rằng kích thước của một lề không ảnh hưởng đến kích thước của nội dung bên cạnh nó. Nó chỉ đơn giản là xác định khoảng không gian xung quanh phần tử, trong bối cảnh lưới bố trí, đề cập cụ thể đến không gian giữa định dạng và cạnh ngoài của nội dung.
Tại sao lưới lại quan trọng trong thiết kế web?
Lưới giúp chia trang theo chiều ngang và chiều dọc, sử dụng hàng và cột. Hệ thống lưới phục vụ như một cách tiếp cận có hệ thống cho phép các nhà thiết kế đặt ra các yếu tố một cách có tổ chức và cung cấp một cách tiếp cận mô-đun để thiết kế các thành phần cho nhiều trang hoặc bố cục. Lưới cũng xác định một tập hợp nhất quán các đơn vị đo lường cố định ra lệnh cho kích thước, khoảng cách và căn chỉnh mà mỗi yếu tố thiết kế phải tuân thủ.
Khái niệm bố trí lưới bắt nguồn từ thiết kế in ấn khi chúng được sử dụng trong bối cảnh kiểu chữ với mục tiêu sắp xếp chữ viết tay trên giấy, đặc biệt là sách và báo. Có nhiều lĩnh vực thiết kế hiện đại phụ thuộc và phát triển mạnh vào bố cục dựa trên lưới. Điều này bao gồm thiết kế web, thiết kế tương tác và đặc biệt là thiết kế đáp ứng.
Trước khi chúng ta khám phá cách thức và lý do tại sao bố cục dựa trên lưới là một tài sản có giá trị cho quá trình thiết kế của chúng tôi như những người tạo web, chúng ta hãy đi sâu hơn vào các thành phần hữu hình tạo nên một hệ thống lưới nhé.
Webvocuc
Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.
- Tham khảo các gói dịch vụ thiết kế website tại webvocuc.vn
- Tham khảo thêm gói chăm sóc web và chạy quảng cáo hiệu quả tại webvocuc.com
