Tất Tần Tật Về Hệ Thống Lưới - Grid System - IDesign

Sau khi bạn đã chuẩn bị xong tất cả mọi thứ, bao gồm màu sắc, hệ thống chữ viết, và nhiều thứ khác trước khi bắt tay vào dự án, giờ là lúc để bạn bắt tay vào tìm hiểu và làm việc với hệ thống lưới trong thiết kế của bạn.

The Grid System website

Hệ thống lưới giúp bạn xây dựng cấu trúc vững chắc và định hình thiết kế của bạn. Cảm giác giống như khi bạn nhìn vào hệ thống phân cấp và nhịp điệu trong typography (nghệ thuật sắp đặt và kỹ thuật ghép chữ trong in ấn – người dịch), bạn hoàn toàn có thể cảm nhận được điều tương tự khi sử dụng hệ thống lưới. Cũng giống như việc lập trình, có một vài khuyến nghị trong việc sắp xếp các mô-đun và các phần của đoạn mã. Một hệ thống lưới hiệu quả sẽ đem lại cho bạn khá nhiều lợi ích trong việc thiết kế trang web.

Hệ thống lưới không chỉ hữu ích với những nhà thiết kế hoặc phát triển phần mềm, nó cũng mang lại hiệu quả cho cả người dùng. Trước giờ, tôi vẫn luôn nhấn mạnh tầm quan trọng của trải nghiệm người dùng thông qua thiết kế. Vì suy cho cùng, tất cả những gì người dùng muốn đó chính là tiếp nhận thông tin, và tôi tin rằng bạn sẽ muốn cho người dùng một trải nghiệm tốt nhất có thể. Và một hệ thống lưới vững chắc (sau khi qua giai đoạn phát triển) sẽ cho phép bạn thực hiện được điều đó, bằng các tạo ra sự nhất quán và quen thuộc (để tạo dựng niềm tin cho khách hàng) trong thiết kế của bạn.

Nếu trang web của bạn được thiết kế tốt, một hệ thống lưới sẽ góp phần phản ánh chất lượng trang web đến người dùng của bạn. Sử dụng hệ thống lưới không có nghĩa là các thiết kế của bạn sẽ trở nên nhàm chán hay vuông vức như những khối hộp. Như với việc thiết kế web phản hồi, nhiệm vụ của bạn là tạo ra một thiết kế độc nhất, mang phong cách riêng – và bạn phải luôn nhớ rằng: hệ thống lưới sẽ là công cụ giúp bạn thực hiện điều đó, chứ không phải là giới hạn của bạn.

Vậy hệ thống lưới là gì?

.. một cấu trúc bao gồm một loạt các đường ngang và dọc, được sử dụng để sắp xếp nội dung.

 Về cơ bản, một hệ thống lưới là một cấu trúc bao gồm một loạt các đường ngang và dọc giao nhau, được sử dụng để sắp xếp nội dung. Trong các thuật ngữ cơ bản hơn (dễ hiểu hơn) một hệ thống lưới là một giải pháp giúp các nhà thiết kế có thể làm việc với cấu trúc, giúp cho việc trình bày cũng như quản lý nội dung và hình ảnh một cách dễ dàng hơn.

Hệ thống lưới từ lâu đã được sử dụng trong in ấn, nhưng với sự ứng dụng của hệ thống lưới trong việc thiết kế, cũng như sự xuất hiện dày đặc của hệ thống lưới trong cấu trúc CSS, giờ đây, chúng được sử dụng khá phổ biến và được xem như một chuẩn mực.

Sử dụng một hệ thống lưới trong thiết kế của bạn là một cách để đạt được tính nhất quán, còn không thì sẽ rất khó khăn để có thể làm chủ được thiết kế của bạn. Một lần nữa, sự thống nhất và tính nhất quán chính là chìa khóa để tạo một trang web mà người dùng của bạn sẽ dễ dàng điều hướng, đọc và hiểu. Một trải nghiệm người dùng tốt được tạo ra bằng cách tương tác với người dùng của bạn và xây dựng một cảm giác quen thuộc với họ – và một hệ thống lưới giúp bạn làm điều đó bằng cách cung cấp một cơ sở vững chắc để phát triển thiết kế của bạn.

Mặc dù người dùng không thể nào nhìn thấy được hệ thống lưới, bạn có thể sử dụng nó để trợ giúp bạn trong việc tạo bố cục cho thiết kế của bạn. Nhưng, giống như tất cả các quy tắc khi thiết kế (và đôi khi là phát triển) các quy tắc được tạo ra để bạn phá vỡ chúng. Bạn không nhất thiết phải cứ bám dính lấy hệ thống lưới, nhưng bạn cần phải thật sự hiểu rõ hệ thống lưới, trước khi bạn có thể phá vỡ các quy tắc của nó.

Trên web, chúng tôi có nhiều cấu trúc CSS có sẵn, cũng như nhiều công cụ hỗ trợ để tạo ra hệ thống lưới của riêng mình. Bạn hoàn toàn toàn quyền quyết định xem nên sử dụng lựa chọn nào – ví dụ như cấu trúc CSS có thể quen thuộc với bạn với tư cách là một nhà phát triển, vì vậy bạn cũng có thể thử sử dụng nó với thiết kế – nhưng hãy dành thời gian suy nghĩ xem tại sao thiết kế với một hệ thống lưới là một lựa chọn tốt, đây là một cách giúp cho bạn có được sự nhất quán, kiên định với hệ thống lưới về sau này.

Lợi ích của việc sử dụng Hệ thống Lưới:

Sau đây là những lợi ích trong việc sử dụng hệ thống lưới – bắt đầu khi bạn lần đầu tiên thiết kế trang web, sau đó chuyển qua giai đoạn xây dựng và phát triển, cũng như khi quản lý cả thiết kế và xây dựng trang web trong tương lai – hệ thống lưới luôn tỏ ra thực sự hữu ích.

Điểm mạnh của hệ thống lưới là cho phép bạn thiết kế theo tỷ lệ, cân bằng giữa tất cả các yếu tố khác nhau mà bạn có trong thiết kế của bạn. Một hệ thống lưới rất linh hoạt, để bạn có thể gần như biến nó theo nhu cầu của bạn khi bạn đang thiết kế các bộ phận khác nhau của trang web.

Hệ thống lưới trong Photoshop

Sử dụng một hệ thống lưới trong thiết kế của bạn cũng giúp bạn có được sự nhất quán và quen thuộc – điều này sẽ rất hữu ích khi bạn muốn có được sự đồng bộ, thống nhất trong thiết kế của bạn. Hơn thế nữa, nó còn hỗ trợ rất nhiều trong việc lập trình, bạn có thể chọn ra các phần tử đồng nhất trong thiết kế và áp dụng hiệu ứng mô-đun này cho mã và cấu trúc CSS của bạn.

Nhược điểm của việc sử dụng các hệ thống lưới:

Tất nhiên thì cái gì cũng có 2 mặt, vậy nên hãy cùng xem qua một vài khuyết điểm của hệ thống này

Đầu tiên, nhiều người – đặc biệt là những người mới học thiết kế hoặc mới sử dụng thiết kế lưới – có thể thấy rằng hệ thống lưới hơi thiếu tự nhiên và hạn chế sự sáng tạo của người thiết kế. Thật không may, điều này đôi khi có thể xảy ra và đôi khi, bạn sẽ cảm thấy như bạn bị bắt phải suy nghĩ theo khuôn khổ, thiếu tính sáng tao, điều này dẫn đến việc các thiết kế của bạn sẽ nhạt và vô vị. Trong những trường hợp này, tôi sẽ khuyến khích bạn dừng việc sử dụng hệ thống lưới- thay vào đó, hãy thử chỉnh sửa, ‘đùa nghịch’ với một vài phần tử trên trang cho tới khi bạn thực sự nắm rõ cấu trúc và sau đó thử chuyển sang áp dụng hệ thống lưới cho thiết kế của bạn xem sao (tí nữa chúng ta sẽ bàn thêm về phần này nhé) và xem thử các ý tưởng của mình hoạt động như thế nào với cấu trúc lưới mà bạn có. Nếu ý tưởng của bạn không phù hợp với thiết kế lưới đó, chắc có lẽ đã tới lúc thay đổi thiết kế hoặc hệ thống lưới khác rồi đấy.

Hệ thống lưới cũng thực sự, thực sự “khó nuốt”. Bạn không chỉ cần có ý chí sắt thép trong lần đầu sử dụng chúng (nhưng chắc là bạn sẽ làm quen nhanh trong chốc lát thôi), mà đôi khi bạn còn phải áp dụng rất nhiều kiến thứ về số học và tính toán. Chính bản thân tôi học toán cũng chả giỏi giang gì lắm – vì vậy cá nhân tôi thấy khá là khó khăn với việc này. Bên cạnh đó, bạn cũng sẽ tốn khá nhiều thời gian trong việc tìm hiểu khái niệm hệ thống lưới và lợi ích của chúng với thiết kế của bạn – nhưng hy vọng bạn sẽ bắt đầu thấy được hiệu quả của chúng ngay sau khi áp dụng chúng vào thiết kế của bạn. Hệ thống lưới thật sự rất khó xài, nhưng chắc chắn kết quả đạt được sẽ tương xứng với công sức và thời gian bạn bỏ ra

Sử dụng hệ thống lưới trong thiết kế của bạn

Dưới đây là một vài mẹo thiết thực và đơn giản để sử dụng các hệ thống lưới trong các thiết kế của bạn:

• Đặt lớp phủ hệ thống lưới vào thiết kế của bạn. Nếu bạn cảm thấy thoải mái khi thiết kế trên trình duyệt bằng cách sử dụng cấu trúc CSS (được tạo sẵn hoặc của riêng bạn), vậy thì ổn thôi- nhưng nếu không, tôi khuyên bạn nên tạo một lớp phủ cho hệ thống lưới của bạn cho thiết kế của bạn. Cho dù bạn đang ở trong Photoshop hay một chương trình đồ họa yêu thích nào khác, hãy thiết lập một lớp hệ thống lưới trên cùng và cố định nó lại. Bằng cách này, bạn luôn có thể bật và tắt lớp lưới hiển thị nếu bạn muốn.
• Tạo một số hướng dẫn để giúp bạn. Sau khi đã có một lớp phủ cố định ở nơi bạn muốn, điều tiếp theo cần làm là tạo một số chỉ dẫn để giúp đỡ chính bạn. Nói chung, bạn nên tạo ra một điểm đánh dấu cho mỗi điểm đầu và kết thúc vào một cột trong hệ thống lưới của bạn. Tại thời điểm này, điều này sẽ giúp bạn xác định và quản lý hệ thống lưới hiệu quả hơn.
• Cố gắng làm việc với những hạn chế và ràng buộc. Nhiều người có thể nghĩ rằng làm việc với hệ thống lưới là tự thân nó đã có ràng buộc sẵn rồi, nhưng điều đó không đúng lắm. Làm việc với các hệ thống lưới – và đặc biệt là của riêng bạn – ví dụ, rất dễ dàng để tạo ra một hệ thống lưới gồm 16 cột, khi đó 6 có thể là một giải pháp khôn ngoan hơn. Học cách thiết kế với những ràng buộc – không chỉ trong hệ thống lưới của bạn – sẽ giúp bạn về lâu dài, vì bạn sẽ có thể tập trung thiết kế vào những gì quan trọng nhất và có liên quan đến trải nghiệm người dùng của bạn.
• Chú ý đến khoảng trống của bạn. Có rất nhiều thứ chúng ta cần để ý trong hệ thống lưới, ví dụ như số lượng cột hiện có – chiều rộng của cột, khoảng trống giữa mỗi cột và khoảng bao nhiêu khoảng trống thì sẽ là hợp lý cho các yếu tố trên. Tuy nhiên, đừng quên khoảng trống theo chiều dọc có sẵn cho bạn và đảm bảo rằng bạn cũng sử dụng lưới với khoảng cách có sẵn ở đó. Ví dụ, sử dụng khoảng trống giữa các cột cũng như khoảng trống giữa các cột một cách hợp lý có thể khiến cho thiết kế của bạn, cũng như khoảng cách giữa các phần tử được sắp xếp một cách hoàn hảo.

Nhiệm vụ của bạn đây!

Bây giờ chắc bạn cũng nắm được kha khá ý tưởng về hệ thống lưới rồi nhỉ? Chẳng hạn như khái niệm cơ bản của chúng cũng như cách ứng dụng chúng một cách hiệu quả vào thiết kế của bạn này. Bài viết tiếp theo sẽ nói về việc làm thế nào để lựa chọn hệ thống lưới của bạn – và liệu bạn nên tạo ra hệ thống lưới của riêng mình hay sử dụng hệ thống lưới có sẵn.

Trong khi chờ đợi, tôi muốn bạn làm một vài nhiệm vụ nào. Gọi là nhiệm vụ thì cũng hơi “đao to búa lớn” nhỉ? Chỉ đơn giản là lấy quyển nháp ra phác hoạ và dạo chơi với hệ thống lưới một chút thôi. Giờ hãy suy nghĩ về cấu trúc và sử dụng các cột trong hệ thống lưới như là một điểm tựa để đặt các nội dung của bạn lên. Những gì bạn tạo ra có thể không có gì tốt đẹp vào sáng hôm sau, nhưng ít nhất nó sẽ giúp bạn tập trung suy nghĩ về hệ thống lưới, hãy thoải mái tạo ra một vài bản nháp để luyện tập thêm về hệ thống lưới nhé!

Nguồn: Webdesign.tutsplus.com

Người dịch: Đình Nhân