Sử dụng Grid hiệu quả trong thiết kế giao diện..

Ngày: 29/09/2018 - Sarah Nguyen

Khi thiết kế trang web, một trong những điều quan trọng nhất cần phải làm là thiết kế giao diện người dùng UI, nó là một điều rất quan trọng để truyền tải thông tin từ trang web của bạn. Có rất nhiều style thiết kế trang một trang web. Tuy nhiên, điểm chính của một trang web là truyền đạt nội dung cho người dùng.

Một trong những yêu cầu quan trọng của một trang web cung cấp thông tin là nó mang lại cho người dùng sự tin tưởng. Nếu người dùng thấy rằng trang web của bạn không cung cấp được thông tin họ cần hoặc trang web của bạn không có chức năng mà xu hướng người dùng mong muốn. Họ sẽ rời khỏi trang web của bạn ngay lập tức.

Vậy tại sao phải sử dụng Grid (Lưới) ?

Nếu một trang web được thiết kế với cách bố trí có cấu trúc, thì cảm giác cấu trúc sẽ đến với người dùng ngay ấn tượng ban đầu cho họ, mang lại cho người sử dụng sự tự tin khi truy cập trang web của bạn.

Nhưng điều quan trọng cần nhớ là lưới chỉ là để tham khảo. Nó sẽ hạn chế khả năng sáng tạo của một nhà thiết kế nếu bạn tuân thủ nghiêm ngặt theo nó. Điều này là sai và điều quan trọng là phải nhận ra rằng lưới ở đó giúp bạn đạt được mục đích thiết kế của mình. Nó không “giới hạn” bạn phải tuyệt đối thiết kế theo nó.

Các lưới được sử dụng như là một nền tảng cấu trúc cho một trang web, ví dụ tại Dribble – Trang web tuyệt vời với bố trí lưới mạnh.

Nguồn: Internet

Sushi và Robots – Bạn thực sự có thể nhìn thấy lưới trong này!

Nguồn: Internet

Làm việc với lưới như thế nào?

Bạn đã có ý tưởng về cách bố trí layout web của bạn chưa? Lựa chọn lưới grid của bạn sẽ tùy thuộc vào cách bố trí layout web của bạn. Nhưng bản chất của thiết kế lưới là các cột lưới có cùng chiều rộng.

Thông thường layout web phổ biến nhất là mười hai cột, chia cho 2, 3, 4 và 6. Mười sáu cột cũng phổ biến.

Bố cục theo chiều dọc cũng phải được cấu trúc. Chúng thường có cùng chiều cao với các cột rộng. Tuy nhiên các nhà thiết kế có xu hướng ít ít quan tâm tới cách bố trí lưới theo chiều dọc hơn các cột ngang.

12 Grid Layout:

Ví dụ về sơ đồ bố trí Grid 960:

Nguồn: Internet

Vậy Grids ở đâu?

Có rất nhiều hệ thống lưới có thể được tải về. Các mẫu thường được thiết lập để có độ rộng cụ thể cho phù hợp với các trang web tiêu chuẩn. Ví dụ 960 pixel.

Hệ thống lưới, được tìm thấy tại http://www.thegridsystem.org/ , có các mẫu tuyệt vời và thông tin về các loại hệ thống lưới khác nhau. Bạn có thể tải grid và tìm hiểu về hệ thống lưới, hoặc có thể tự tạo lưới tại http://gridcalculator.dk/ để bắt đầu cho bản thiết kế của mình.

960 px – Lưới được sử dụng cho thiết kế trang web rộng (width) 960 pixel và có hai dạng, 12 cột và 16 cột. Nhưng phổ biến nhất thì vẫn dùng lưới full width 1920 pixel và width là 1170 pixel và chia làm 12 cột. Tôi sẽ minh hoạ với hình bên dưới:

“Hệ thống grid là một sự hỗ trợ cho bạn, học sử dụng nó, nó cung cấp cho bạn kiến thức ban đầu. Từ đó bạn có thể sang tạo những ý tưởng mới phù hợp với phong cách cá nhân của mình.

Các từ như grid, cấu trúc, nền móng và hệ thống đều là những từ đang được sử dụng để mô tả, trong thực tế là một hướng dẫn hữu ích, được sử dụng một cách phổ biến. Một hệ thống grid mang tới kích thước chuẩn cho trang web, khi các yếu tố khác của trang web được thêm vào như hình ảnh, màu sắc, typo … mang lại cho bạn một giao diện chuyên nghiệp. Và đó cũng là ấn tượng của sự chuyên nghiệp cho người sử dụng khi truy cập vào website của bạn.

Một số ví dụ tuyệt vời của các trang web dựa trên grid: