Lưới và tầm quan trọng của Lưới trong thiết kế

timthumb Lưới và tầm quan trọng của Lưới trong thiết kế

Trong tất cả các tài liệu thiết kế đồ họa trên thế giới. Lưới luôn được coi là một phần không thể thiếu của các tài liệu chuyên ngành này.

 

Trong bài viết lần này chúng tôi tiếp tục cung cấp cho bạn những điều cần biết về Lưới trong thiết kế đồ họa.

1 Lưới và tầm quan trọng của Lưới trong thiết kế

Grid (lưới) là một từ để nhắc tới việc xác định cấu trúc phía sau việc thiết kế. Những đường lưới là những công cụ tổ chức để xác định những vùng làm việc của trang và giúp người thiết kế có những sắp xếp xuyên suốt về vị trí và thứ tự.

Các đường lưới có khả năng hỗ trợ người thiết kế trong việc duy trì khả năng làm chủ, tạo ra những liên kết về thẩm mỹ, và thống nhất toàn bộ thiết kế.

Tầm quan trọng của lưới


2 Lưới và tầm quan trọng của Lưới trong thiết kế

Đơn giản, Lưới là một loạt các đường giao nhau theo chiều đứng và ngang tạo nên những khoảng không gian phân chia trang thành nhiều ô. Chúng là nơi đặt các yếu tố trên trang, và nếu các vị trí phù hợp chúng tạo nên hiệu quả, những sự chuyển động nhịp nhàng lên, xuống, trong, ngoài bề mặt của trang.

Các nhà thiết kế, thông qua Lưới sắp xếp các yếu tố thẩm mỹ để cho chúng làm đẹp lẫn nhau, chứ không phải xung đột, thành lập những đường dẫn cho các thiết kế để có thể nói lên mức độ liên quan, thứ tự quan trọng của các yếu tố thiết kế.

Các nhà thiết kế hoàn toàn làm chủ những yếu tố đồ họa thông qua những vị trí có trên bề mặt lưới với những sự kết hợp nhịp nhàng các yếu tố.

Lưới rất đa dạng về kích thước và hình dạng từ đơn giản tơí phức tạp, dựa trên khoảng cách, số lượng thông tin, yếu tố cần phải đưa vào trong thiết kế. Lưới luôn luôn phát triển song song với các yếu tố được tổ chức bên trong, hệ thống Lưới tái tạo mọi dự án.

Với các tỉ lệ và khả năng tạo cấu trúc, hệ thống lưới thể bắt gặp ở khắp nơi, kiến trúc, nghệ thuật, toán học, âm nhạc, tự nhiên; Lưới được coi là không thể thiếu với các nhà thiết kế.

Dựa trên các phép tính Tỉ lệ vàng, chuỗi Fibonacci, các lý thuyết của các thiên tài hàng đầu như Pythagoras, Vitruvius, Michelangelo, Leonardo da Vinci và Le Corbusier. Bất kể trong lĩnh vực nào Lưới luôn tạo nên sự hài hòa và thống nhất.

Định nghĩa về Lưới


 

3 Lưới và tầm quan trọng của Lưới trong thiết kế

Margins– Xác định ra vùng làm việc của trang, phần người xem sẽ theo dõi các yếu tố đồ họa. Chúng có thể có nhiều kích thước dựa trên định dạng, hay dựa trên số lượng của các yếu tố trong trang.

Trái phải, cũng như trên, dưới, margin bao gồm tất cả phần xung quanh, lớn hay nhỏ dựa trên tỉ lệ của trang.

Trên các trang cần nhiều không gian, phần margin phải đủ lớn để sinh ra phần gutter (được sinh ra từ 2 cột)

Không gian Margin có thể được sử dụng để vị trí của số trang, hay chân trang (footer).

Sử dụng Margin nhỏ cho các thiết kế phức tạp, nhiều yếu tố cần sắp xếp. Margin không phải nơi “tóm” các yếu tố đồ họa; chúng được dùng để phân định vùng làm việc và vùng không làm việc của trang.

4 Lưới và tầm quan trọng của Lưới trong thiết kế

Margin nhỏ sử dụng khi cần một hệ thống lưới phức tạp với nhiều yếu tố cần sắp xếp.

5 Lưới và tầm quan trọng của Lưới trong thiết kế

Margin lớn có thể giảm phần không gian đặt nội dung, nhưng giúp tăng cường khoảng trống đồng thời giúp mắt người xem ngay lập tức tập trung về khu vực thiết kế

Trong một số trường hợp margin vẫn có thể bị phá vỡ bằng cách cho các yếu tố hình ảnh tràn ra khỏi ngoài trang.

Column– Cột là những khoảng không gian chiều dọc mà được sử dụng để căn hàng các yếu tố thiết kế. Cột đơn hay nhiều cột có thể chia trang, dựa trên số lượng và những thông tin hỗn hợp trong trang.

Bề ngang của cột có thể có nhiều kích thước dựa trên chức năng của thiết kế, như các cấp độ của các yêu cầu đa dạng bởi người thiết kế.

Column intervals – Còn được biết tới là Gutter, là các khoảng không gian được tạo bởi cột này với cột kế tiếp. Chúng có tác dụng phân chia khoảng cách giữa các yếu tố trên trang.

Khi sắp xếp nội dung, gutter giúp mắt người đọc không bị nhìn nhầm qua phần nội dung khác.

Flowline – hỗ trợ các cột đứng bằng cách chia trang thành các khoảng ngang để bổ sung việc canh hàng trên toàn Lưới. Chúng giúp nhà thiết kế sắp xếp các yếu tố thẩm mỹ một cách nhất quán, giống như chúng ở trên hoặc dưới dọc theo các cạnh của cột.

6 Lưới và tầm quan trọng của Lưới trong thiết kế

Với thiết kế Web việc sử dụng Lưới đã trở nên quen thuộc. Một trong những người được nhắc tới về việc áp dụng Lưới cho thiết kế web là Khoi Vinh.

Grid Module– Là những khu vực không gian mà hỗ trợ nội dung văn bản và các yếu tố của thiết kế . Dựa trên sự phức tạp của thiết kế mà có thể có số lượng module khác nhau.

Grid module hỗ trợ mắt người tìm kiếm một nội dung cùng một cấp độ xuyên suốt toàn bộ thiết kế (ví dụ ở vị trí A luôn là tiêu đề, B luôn luôn là hình ảnh). Mặc dù vậy cũng nên cẩn thận khi xác định bằng grid module vì việc sử dụng một vị trí cho toàn thiết kế có thể gây nhàm chán.

Người thiết kế có thể thay đổi các hình ảnh hay phần nội dung ở một số nơi, điều này làm tăng sự hài hòa, có nhịp điệu, loại bỏ sự khô cứng và việc lặp lại nhàm chán của thiết kế.

 

Các chức năng của Lưới gồm: Kiểm soát, tổ chức, nhịp điệu, hài hòa, đồng nhất, năng động, dễ đọc, chuyển động, cân bằng, dẫn dắt, tương phản, tương tác, trật tự.

Áp dụng Lưới cơ bản

Luoi 01 Lưới và tầm quan trọng của Lưới trong thiết kế

Ứng dụng và phát triển dựa trên một nền tảng vững chắc, là điểm bắt đầu để nâng cao kỹ năng thiết kế.

Có rất nhiều trường hợp của lưới để người thiết kế có thể sử dụng, tất cả đều phục vụ một chức năng cơ bản. Lưới cho phép người thiết kế kiểm soát một cách thông minh và tổ chức không gian bố cục với các yếu tố hình ảnh năng động, nhịp nhàng, hài hòa trong các mối quan hệ giữa các yếu tố với nhau.

Nó tạo nên một sự liên kết không gian trực tiếp bằng mắt về phía không gian tích cực và dẫn mắt người xem thông qua bố cục.

Mục tiêu sử dụng của Lưới là thống nhất không gian bố cục bởi một cấu trúc phía sau mà người xem không thể thấy. Người thiết kế phải bố cục các yếu tố thẩm mỹ để cân bằng và sự tương phản của các hình dáng trong trang, cùng lúc cho người xem thấy một thiết kế sáng sủa và dòng chảy xuyên suốt thiết kế.

Luoi 03 Lưới và tầm quan trọng của Lưới trong thiết kế

 

Những vùng màu vàng tạo ra những cấu trúc để gây tập trung cho mắt người đọc vào khu vực nội dung, hình ảnh. Sử dụng lưới linh hoạt tạo nên nhịp điệu qua từng trang.

Người thiết kế giúp người xem tăng cường tính tương tác và sự dễ đọc thông qua các bố cục năng động. Việc trải nghiệm với Lưới thực sự quan trọng, hãy sử dụng chúng khôn ngoan và vui vẻ.

Tỉ lệ Lưới và mối quan hệ không gian được xác định bởi kích thước trang, cũng như sự phức tạp của các yếu tố trong trang. Lưới nên phù hợp để thích ứng với các yếu tố thiết kế đặc thù.

Nếu Lưới được xác định tuỳ tiện mà không cân nhắc tới chất liệu và yếu tố sử dụng, nó sẽ làm người thiết kế cảm thấy khó sử dụng.

Một hệ thống Lưới tùy tiện có thể trở thành một “kẻ độc tài” hoặc quá dễ dãi trong việc xác định bố cục, hoặc là cung cấp quá nhiều không gian, hoặc quá ít không gian để thích ứng với nội dung cần thiết.

Không tập trung phát triển hệ thống Lưới thông minh, đơn giản sẽ hạn chế khả năng của người thiết kế, thay vì cung cấp những cấu trúc cơ bản hiệu quả, những thiết kế ý nghĩa.

Luoi 02 Lưới và tầm quan trọng của Lưới trong thiết kế

 

Ví dụ sử dụng Lưới với 4 cột. Với Margin nhỏ để tăng cường khu vực để sắp xếp các yếu tố hình ảnh. Các yếu tố có thể chạy đúng với đường lưới đã xác định.

Chức năng của Lưới

  • Kiểm soát – Control
  • Tổ chức – Organization
  • Nhịp điệu – Rhythm
  • Hài hòa – Harmony
  • Thống nhất – Unity
  • Năng động – Dynamism
  • Dễ đọc – Readability
  • Chuyển động – Movement
  • Cân bằng – Balance
  • Dẫn dắt – Direction
  • Tương phản – Contrast
  • Tương tác – Interaction
  • Trật tự – Order

 Single-Column grids

Lưới đơn

Luoi 04 Lưới và tầm quan trọng của Lưới trong thiết kế

Sắp xếp tạo ra sự đối xứng.

Luoi 05 Lưới và tầm quan trọng của Lưới trong thiết kế

Sắp xếp tạo ra sự bất đối xứng.

Lưới đơn là hệ thống cấu trúc cơ bản nhất. Chúng cung cấp một vùng làm việc đơn giản, phù hợp cho việc trình bày số lượng lớn văn bản.

Không gian của trang được xác định bởi Margins. Ví dụ, một cách tiếp cận phổ biến là sử dụng Margin lớn ở một bên cạnh và phía dưới, phía trên và bên còn lại để margin nhỏ hơn, thường thì margin nhỏ bằng một nửa margin lớn.

Ngoài ra, vị trí của column trên trang kế tạo ra sự đôí xứng. Cũng có thể sử dụng Lưới lặp lại trên các trang với cùng vị trí nhằm tạo ra sự bất đối xứng.

Margin là yếu tố cần cân nhắc quan trọng trong việc sử dụng Lưới đơn và cần sự điều chỉnh để tăng cường sự xuất hiện của các yếu tố thiết kế, đặc biệt là chữ.

Luoi 06 Lưới và tầm quan trọng của Lưới trong thiết kế

Cột đơn không nên quá rộng hoặc quá hẹp và phải phù hợp với chiều dài của dòng văn bản nhằm đáp ứng sự dễ đọc. Kiểu chữ, kích thước, chữ đầu dòng phải cân nhắc cẩn thận để đạt được kết quả tối ưu.

Multiple-Column girds

Lưới nhiều cột

Luoi 08 Lưới và tầm quan trọng của Lưới trong thiết kế

Mutiple-Column chứa nhiều không gian bên trong các cột. Chúng đa dạng và thích hợp với nhiều kiểu sắp xếp. Lưới nhiều cột thích hợp với những dự án phức tạp, như sách, tạp chí, những ấn phẩm nhiều chữ.

Lưới nhiều cột cung cấp những cơ hội để tạo nên nhịp điệu, chuyển động, phân chia, căn hàng thông qua sự tương tác của các yếu tố hình ảnh.

Ví dụ, văn bản và các yếu tố hình ảnh có thể được sắp xếp ở nhiều cột, chia trang, tràn qua các yếu tố khác, một phần trên màu sắc hay chất liệu…hay chạy ra ngoài trang. (Co giãn, định hướng, các vị trí đa dạng thúc đẩy phân cấp và tương phản trong các cột).

Luoi 07 Lưới và tầm quan trọng của Lưới trong thiết kế

Mặc dù vậy nó cũng là nguyên nhân của sự chia nhỏ không gian, và những yếu tố bị chia nhỏ có thể khiến người xem cảm thấy phức tạp và không có trật tự rõ ràng.

Cảm ơn tác giả

GMD Sưu tầm