Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Có gì trong một hệ thống lưới grid? Một framework lưới là xương sống cho hầu hết các thiết kế web, cung cấp cấu trúc cho trang web của bạn cũng như cách bạn tổ chức nội dung và hình ảnh.

Có vô số các hệ thống lưới bạn có thể mua hoặc tải về miễn phí. Bạn cũng có thể tạo ra cho chính mình một lưới nếu thích. Nhưng chắc chắn một điều là, bạn sẽ thu lại được nhiều lợi ích từ việc sử dụng chúng trong công việc của mình (Như mỗi mẫu ví dụ web trong bài viết này đã làm)

Lưới Grid là gì?

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

 Một lưới là tập hợp các dòng vô hình – chạy theo chiều dọc và ngang – giúp bạn tìm được nơi đặt nội dung. Cấu trúc được thiết kế theo cột, hàng khoảng cách bằng nhau có lề (rãnh) phân cách ở giữa.

Hệ thống lưới đã có từ rất lâu. Những nhà thiết kế ấn phẩm in càng ngày càng sử dụng nhiều hệ thống lưới và các lưới vào các dự án thiết kế kĩ thuật số. Trong thiết kế website, nhiều hệ thống lưới sử dụng trong định dạng của framework và trở thành định dạng chuẩn.

Lợi ích của việc sử dụng lưới là nó giúp tổ chức nội dung để tạo ra một thiết kế nhất quán. Trong khi người dùng sẽ không bao giờ nhìn thấy lưới, thiết kế trên cơ sở lưới tạo ra một cảm giác về dòng chảy, sự hài hòa, làm cho web của bạn đẹp hơn và dễ sử dụng hơn.

Lợi ích và hạn chế của Lưới 

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hệ thống lưới giúp người giúp người giúp người thiết kế web ở mọi cấp độ hoàn thiện dự án một cách dễ dàng và nhất quán. Nhưng với một số vẫn không hoàn toàn yêu thích việc sử dụng kĩ thuật này.

Lợi ích

  • Tạo ra sự nhất quán giữa các trang
  • Tạo ra sự cân bằng giữa các yếu tố và khoảng trắng
  • Giảm thiểu không gian chật trội
  • Giảm code vì không không khởi tạo framework từ scratch
  • Cho phép lưới phụ trong framework
  • Kiểm soát thiết kế và cấu trúc
  • Đem lại thiết kế ổn định
  • Dễ dàng di chuyển và đặt các yếu tố ở vị trí khác

Hạn chế

  • Một số người cho rằng lưới “triệt tiêu” sự sáng tạo
  • Khó dùng với những trang web có nội dung ít
  • Một số trang web giống nhau
  • Hệ thống lưới có thể khó dùng cho những người dùng mới

Các loại lưới

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Có 4 loại lưới cơ bản: manuscript, column, modular và hierarchical. Và một loại hệ thống lưới quan trọng nhất trong thiết kế web hiện nay là web responsive.

Lưới Manuscript được phát triển ở dạng khối. Các khối này định vị vị trí của các yếu tố trong khung tổng thể của thiết kế. Kiểu lưới này dùng cho khối lượng văn bản lớn như blog.

Lưới Column là điều mà bạn đang mong đợi – các cột chạy dọc trang. Nhiều hệ thống lưới chứa một số loại định dạng cột để tổ chức nột dung được sự dụng phổ biến trong thiết kế web .

Lưới Modular là dạng mở rộng của lưới Column. Nó bao gồm cả cột và hàng để tổ chức thông tin (ví dụ có thể liên tưởng đến một bảng). Một trang web theo kiểu xe điện ngầm sẽ được thiết kế trên cơ sở lưới Modular

Lưới Hierarchical là một định dạng lưới tự nhiên và sử dụng một tập các vật thể để tạo ra không gian theo chiều dọc và ngang. Trong nhiều trường hợp, các đối tượng được đặt trên bề mặt và sau đó sắp xếp theo thứ tự. Những người thiết kế tạo một hệ thống lưới tài liệu có thể sử dụng định dạng này.

Lưới Responsive là phần của mã hóa cứng của một web có khả năng điều chính kích thước theo thiết bị truy cập. Lưới Responsive dựa tỉ lệ phần trăm để xác định kích thước và vị trí hơn là sử dụng một khung cứng. Hầu hết người thiết kế sử dụng một framework để tạo lưới Responsive để tiệt kiệm thời gian. Có rất nhiều framework có sẵn để dụng, trong đó có nhiều framework là nguồn mở và có thể tải về miễn phí,

Hệ thống lưới phổ biến

Khi nói đến thiết kế web và hệ thống lưới, một trong những thứ và bạn cần là sự tương thích. Có thể bạn sẽ cần đến những framework responsive cho dự án của mình. Không thể bỏ qua thiết kế web reponsive bởi quá nhiều trang web đang được truy cập trên nhiều thiết bị.

Sau đây là 11 hệ thống lưới phổ biến (chúng đều miễn phí)

Bootstrap

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Là framework gần đây được sử dụng phổ biến nhất trên web.

Zurb Foundation

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Framework này sử dụng nhanh cho người dùng, người thiết kế, người phát triển và dễ học cách dùng.

Skeleton

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Framework  là một tập hợp các file CSS và bao gồm một cơ sở 960 lưới kích thước cho mọi thiết bị 

Hệ thống lưới Responsive  

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hệ thống lưới này cho phép bạn điều chỉnh số cột và đưa nó vào đúng chỗ trong thiết kế của bạn.

CSSWizardry-Grids

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

 

Hệ thống lưới này gọn gàng, có thể đảo ngược và dễ hiểu

CSS Smart Grid

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Lưới này xây dựng trên 960 khái niệm và quy mô phổ biến cho nhiều thiết bị 

Gridlock

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Lưới này hoạt động bằng cách tổ chức các ô trong hàng và bao gồm các tùy chọn tương thích và linh hoạt

Simple Grid

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Hệ thống lưới này tạo web không giới hạn, mỗi yếu tố một cấp độ và dễ sử dụng.

Golden Grid System

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

 Hệ thống này bao gồm “gộp cột”, khe lề, một đường cơ sở và phần nội dụng theo chiều dọc và ngang

Gumby

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Framework dùng một lưới tạo ra các hàng ngang và cũng xác định chiều rộng tối đa, có khả năng chưa nhiều cột.

Unsemantic

Hoàn hảo hơn với hệ thống lưới Grid trên cơ sở web

Đây là sự kế thừa tương tác của hệ thống lưới 960 phổ biến. Nó hoạt động giống 960 nhưng dùng tỉ lệ phần trăm cho lưới chứ không dùng thông số pixel

Một Framework hoặc hệ thống lưới có thể không phải là lựa chọn tốt nhất cho mọi nhà thiết kế, phát triển. Nhưng có một số công cụ có thể giúp bạn bắt đầu ngay cả khi bạn muốn thiết kế lưới PSD của riêng mình.

Bạn đã sẵn sang để thiết kế  lưới? Bạn đã có những công cụ bạng đang mong chờ chưa? Hệ thống lưới nào là sự lựa chọn của bạn? Hãy chia sẻ hệ thống lưới sử dụng trong web của bạn ở phần bình luận nhé.

Tác giả bài viết: Liên Nguyễn

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây