Hệ thống lưới trong thiết kế by Nhat Minh

HỆ THỐNG LƯỚI TRONG THIẾT KẾ _Nguyễn Nhật Minh

5 11 14 19 26

GIỚI THIỆU

LỊCH SỬ PHÁT TRIỂN

THẾ NÀO LÀ HỆ THỐNG LƯỚI

CÁC YẾU TỐ CĂN BẢN

NHỮNG CON SỐ

64 83 118 120

‘‘HẸN HÒ’’ VỚI LƯỚI

TẦM QUAN TRỌNG CỦA LƯỚI

KẾT

TÀI LIỆU THAM KHẢO

GIỚI THIỆU.

Trước khi chúng ta bắt đầu, tôi muốn bạn thư giãn đôi mắt, tạm thời chưa nghĩ tới bất cứ vấn đề trong thiết kế mà bạn đang mong chờ tìm đọc, hãy ngắm nhìn tấm ảnh tuyệt đẹp về một góc của thành phố New York của tác giả Alejandro Cerutti. Bạn thấy gì? Chắc hẳn đa số các bạn sẽ nhận thấy ánh xanh bao trùm toàn bức ảnh, và rồi điểm thêm ánh đèn cam cam từ cánh cửa sổ như một điểm neo thu hút ánh nhìn. Với tôi, ngoài những sắc màu bắt mắt thu hút đến lạ kì của bức ảnh, còn là sự ngay ngắn, cân đối giữa những cánh cửa sổ.

ĐIỀU GÌ TẠO NÊN CẢM GIÁC ĐÓ ?

Hệ thống lưới - Giới thiệu

‘’Đó là bố cục’’ Đây có lẽ là câu trả lời đơn giản nhất, dễ truyền tải nội dung tới bất cứ ai dù họ không biết về thiết kế hay nghệ thuật. Tuy nhiên, đó chỉ là câu trả lời đơn giản. Vậy điều gì làm nên một bố cục đẹp? Làm thế nào để xây dựng được một bố cục đẹp? Bố cục là cả một quá trình, vậy thì hệ thống nào là nền tảng để xây dựng nên quá trình đó? . Đó chính là hệ thống lưới trong thiết kế - Grid System Lại có những câu hỏi khác được đặt ra: Tại sao lại là hệ thống lưới? Nó quan trọng đến vậy sao? Đúng vậy. Có thể bạn không tin nhưng sự thực là chúng ta đang sống trong thế giới của hệ thống lưới. Hãy liếc nhìn ngay xuống nền nhà, bạn thấy gì chứ: gạch lát nền nhà xếp đều tăm tắp như giấy vở ô ly. Hãy nhìn vào bàn phím máy tính hay bàn phím ảo của điện thoại: phím chữ xếp thành từng hàng từng hàng song song với nhau. Hoặc đơn giản hơn là liếc nhìn lại bức ảnh góc phố ở New York phía đầu quyển sách này. Giờ thì bạn cũng dần hiểu ý tôi rồi chứ? Hệ thống lưới tồn tại ở khắp nơi dù bạn có nhận ra hay không. Và không chần chừ thêm nữa, hãy lật từng trang giấy và nghiền ngẫm từng chút để tìm hiểu về thứ nhỏ nhoi nhưng đầy thú vị này nhé.

GRID SYSTEM Hệ thống lưới - Giới thiệu

‘’Grids are the most misunderstood and misused element in page layout. A grid is only useful if it is derived from the material it is intended to handle’’ - Derek Birdsall/Notes on Book Design

LỊCH SỬ PHÁT TRIỂN

Trước khi hệ thống lưới được áp dụng vào thiết kế in ấn, sau này là thiết kế web, ban đầu lưới đơn giản là những đường kẻ để sử dụng trong việc sắp xếp các chữ viết tay, chia đọan và khoảng cách của tiêu đề và nội dung. Sau thế chiến II, một số nhà thiết kế đồ họa gồm Max Bill, Emil Ruder và Josef Müller-Brockmann, chịu ảnh hưởng bởi những ý tưởng hiện đại của Jan Tschichold (được coi là cha đẻ của New Typography), bắt đầu đặt những câu hỏi liên quan tới việc bố trí bố cục của một trang. Họ bắt đầu đưa ra một hệ thống linh hoạt (flexible system) có thể giúp các nhà thiết kế có được sự tổ chức, mạch lạc trong trang. Kết quả là hệ thống lưới typographic hiện đại đã liên kết với Phong cách typographic quốc tế (the International typographic style – hoặc Swiss design). Müller-Brockmann đã giúp tuyên truyền hệ thống lưới trong thiết kế đồ họa đầu tiên ở Châu Âu và sau đó ở Bắc Mỹ. Và sau đó vào những năm 70, lưới typographic là một phần của chương trình giảng dạy thiết kế đồ họa tiêu chuẩn ở châu Âu. Trong những năm 1980 đã có sự phản ứng chống lại sự phát triển của lưới, đặc biệt sự lạm dụng thái quá và có phần cứng nhắc nhàm chán khi sử dụng lưới, dẫn tới một số nhà thiết kế từ chối sử dụng hệ thống này. Ngày nay, hệ thống lưới đã dần dần lấy lại vị thế của mình. Nó được sử dụng rộng rãi, được đánh giá như một yếu tố thiết kế căn bản và được giảng dạy tại các trường thiết kế. Trong kiến trúc, hệ thống lưới giúp ích trong việc vẽ các bản thảo các công trình, thành phố. Trong mỹ thuật lưới dùng để chỉ ra các tỷ lệ, số đo của người, đối tượng. Các họa sĩ dùng lưới để hỗ trợ vẽ, điêu khắc, tranh tường …

Hệ thống lưới - Lịch sử phát triển

THẾ NÀO LÀ HỆ THỐNG LƯỚI ?

Hệ thống lưới là hệ thống các đường kẻ ngang dọc giao nhau để tạo nên những khoảng không gian phân chia trang thành nhiều ô, nó giúp bạn tổ chức lại cấu trúc trong thiết kế của mình. Lưới được coi là những giàn giáo vô hình tạo nên sự gắn kết trong thiết kế. Lưới tạo ra một quy tắc có hệ thống và phù hợp cho các đối tượng trong thiết kế. Nói cách khác lưới chính là cách bạn tổ chức bố cục cho thiết kế của mình dựa trên các đường kẻ ngang, dọc trước khi bạn thực sự bắt tay vào thiết kế và lựa chọn các yếu tố khác như: font chữ, màu sắc, hình ảnh, … Việc tạo ra một hệ thống lưới như thế sẽ tạo ra một nhịp điệu cho mắt, giúp cho việc nhìn các đối tượng trong bản thiết kế dễ dàng và dễ chịu hơn. Khi mà thiết kế hiện đại hướng đến sự đơn giản, gọn gàng và chuyên nghiệp thì lưới chính là một sự lựa chọn hoàn hảo của các nhà thiết kế.

Thế nào là hệ thống lưới

LƯỚI TRONG THIẾT KẾ IN ẤN Trong thiết kế in ấn, các trang được thiết kế, hoặc là sử dụng Lưới hoặc là Template. Trước khi thiết kế (bìa sách, poster, tạp chí ...) nhà thiết kế thường chọn/tạo cho mình một hệ thống lưới phù hợp giúp cho việc sắp xếp, tổ chức, và lặp lại các yếu tố trên một trang. Nó cũng có thể tuân theo các tỷ lệ tiêu chuẩn đã có, hoặc một tỷ lệ họ cảm thấy phù hợp. Sử dụng lưới vừa để sử dụng linh hoạt, nhưng cũng giúp cho các trang có một sự thống nhất về cách tổ chức, bố trí. Ngược lại với lưới. Những Template thường được sử dụng cho các yếu tố hiển thị lặp đi lặp lại, đã được nghiên cứu về thói quen sử dụng cho người dùng. Những Template thường được sử dụng cho thiết kế có thay đổi ít hoặc chủ yếu là nội dung.

LƯỚI TRONG THIẾT KẾ WEBSITE Gần đây, lưới được sử dụng rất nhiều trong thiết kế website bởi lẽ chức năng của lưới đáp ứng rất tốt các nguyên tắc thiết kế website như: tính định hướng, khoảng cách, sự ngay ngắn, rõ ràng và tính nhất quán, … Thiết kế bằng lưới cũng khiến việc cắt slide và chuyển sang html được dễ dàng hơn (mặc dù điều này cũng đồng nghĩa việc bạn phải rắc rối hơn khi làm việc với CSS).

Thế nào là hệ thống lưới

Một trong các ví dụ nổi bật của website dạng lưới để tham khảo là tờ The New York Times online, bất chấp lượng thông tin dày đặc, trang web trông vẫn gọn gàng, ngay ngắn. Người đã có công xây dựng trang web này được như vậy chính là cựu giám đốc thiết kế của tờ báo: Khoi Vinh – một người Mỹ gốc Việt. Cùng với Mark Boulton, 2 ông là những người tiên phong tiêu biểu trong việc xây dựng và hoàn thiện hệ thống lưới. Trang web của Khoi Vinh (subtraction.com) cũng là một trong những trang web mẫu mực và thường xuyên được lấy làm ví dụ như là một trong những trang web được thiết kế bằng lưới một cách đẹp mắt.

CÁC YẾU TỐ CĂN BẢN.

FORMAT

Định dạng của một tác phẩm là nơi những yếu tố thiết kế như chữ, ảnh, … được trình bày. Trong một quyển sách hay tạp chí thì định dạng của nó là một trang giấy. Đối với một trang website thì định dạng của nó là màn hình của trình duyệt.

MARGIN

Đây là khoảng cách giữa trang thiết kế của bạn và phần nội dung bên trong. Nó giới hạn phần nội dung, để cho thiết kế của bạn không bị “tràn” ra ngoài trang giấy. Margin nhỏ được sử dụng trong các thiết kế phức tạp, cần nhiều sự sắp xếp, còn margin lớn thì làm giảm phần không gian đặt nội dung, tăng khoảng trống đồng thời tập trung sự chú ý vào phần nội dung

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ế. Tức là khi đã xác định được phần nội dung thiết kế, bạn sẽ chia phần nội dung thiết kế thành các cột dọc. Việc chọn 1 hay nhiều cột là tùy vào mục đích thiết kế và cảm quan của người thiết kế. Các cột có thể tạo cảm giác gọn gàng, có trật tự, chúng cũng có thể tạo ra thiết kế tĩnh nếu có rất ít sự thay đổi trong văn bản hoặc ít cách trình bày các khối văn bản

Margin

Column

Hệ thống lưới - Các yếu tố căn bản

MODULE

Các mô-đun là các đơn vị không gian riêng biệt được xác định bằng cách khoảng cách đều đặn. Mô-đun là các khối cơ bản của hệ thống lưới. Khi lặp lại theo hướng nào đó thì nó sẽ tạo nên các cột hoặc hàng. Góc trên bên trái của một mô-đun được coi là ‘’góc hoạt động’’-nơi thu hút ánh mắt nhìn đến đầu tiên, và ngược lại góc dưới bên phải của mô-đun là ‘’góc thụ động’’-nơi sự chú ý là ít nhất khi mắt lướt nhìn môđun nào đó

SPATIAL ZONES

Spatial Zones là một vùng tập hợp các khối mô-đun lân cận. Mỗi vùng sẽ có một chức năng cụ thể trong bản thiết kế Một tập hợp các khối mô-đun theo chiều ngang có thể sẽ phù hợp để đặt một tấm ảnh dài. Một tập hợp các khối mô-đun theo chiều dọc có thể sẽ phù hợp để đặt một đoạn văn bản dài. Một tập hợp các khối mô-đun lớn có thể dùng để đặt một tấm ảnh rất to, một khối văn bản lớn hoặc nếu trên các trang website có thể là video.

FLOWLINE

Flowline là những đường thẳng nằm ngang có tác dụng phân chia các cột đứng bằng cách chia trang thành các khoảng ngang để bổ sung việc căn theo 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, tạo nên điểm bắt đầu, kết thúc cho chữ và ảnh.

Column Flowline

Module Margin

Margin

Spartial Zones

Hệ thống lưới - Các yếu tố căn bản

GUTTER

Đây là khoảng cách giữa các cột, để phân chia khoảng cách giữa các yếu tố trên trang. Sự có mặt của các khoảng trống sẽ làm cho thiết kế của bạn trông dễ thở hơn, giúp mắt người đọc không bị nhìn nhầm qua phần nội dung khác

MARKER

Marker là những thứ giúp người xem dễ theo dõi thông tin được lặp đi lặp lại ở cùng một vị trí. Markers xác định vị trí của số trang và biểu thị chúng.

RUNNING HEADER/ FOOTER

Running Header, hay còn gọi là header, là phần thông tin xuất hiện ở phía trên cùng của mỗi trang giấy. Ở đây sẽ gồm có những thông tin như tiêu đề, chương, mục, tác giả, … Running Footer là phần thông tin xuất hiện ở dưới cùng, gồm những thông tin như số trang, chú thích, …

Running Header

Column Flowline

Module Margin

Margin

Spartial Zones

Gutter

Running Footer

Marker 25

Hệ thống lưới - Các yếu tố căn bản

NHỮNG CON SỐ.

Hệ thống lưới - Những con số

Chắc hẳn khi đọc đến đây bạn cũng đã tự hỏi về một cụm từ ‘’tỷ lệ’’ mà thi thoảng xuất hiện trong những phần nêu trên. Tỷ lệ thì có liên quan gì đến hệ thống lưới? Tỷ lệ chính là đáp án cho việc làm thế nào để chia các đường lưới cho phù hợp và hài hòa. Điều này hoàn toàn tùy vào sự tính toán và tỷ lệ mà bạn lựa chọn thôi. Hệ thống lưới chủ yếu là … toán học Khi nói đến các hệ thống lưới chúng ta phải tách riêng hình thức và chức năng. Chúng ta phải suy nghĩ về tính thẩm mỹ và tỷ lệ cũng như việc xem xét kết quả của các cấu trúc. Điều này khá là khó khăn cho các nhà thiết kế đã được dạy trong trường, hay làm việc một cách cảm tính “Bạn sẽ thấy đúng, khi bạn cảm thấy thế”. Việc cảm thấy là một phản ứng để tạo cấu trúc.

Tỷ lệ, phương trình được dùng khắp mọi nơi trong hệ thống lưới. Các quan hệ đo lường, từ thiết kế tờ rơi tới sự phức tạp của thiết kế báo chí. Để thiết kế một hệ thống lưới thành công, bạn phải nằm lòng với các tỷ lệ và tỷ lệ, sự hợp lý, các bộ số tỷ lệ như 01:02, 02:03, 03:04 và những tỷ lệ bất quy tắc dựa trên việc xây dựng các vòng tròn, như tỷ lệ vàng 1:1.681 hoặc các kích thước tiêu chuẩn DIN 1:1.4146. Những tỷ lệ này đã quá quen thuộc trong xã hội hiện đại, từ các kiến trúc xung quanh chúng ta đến các khuôn mẫu tự nhiên. Sử dụng các tỷ lệ thành công trong hệ thống lưới có thể là yếu tố quyết định trong thiết kế, nghệ thuật. Tuy tỷ lệ vàng không hẳn là công thức cho tất cả, nhưng nhờ nó đã làm nên tính thẩm mỹ.

Hệ thống lưới - Những con số

TỶ LỆ VÀNG 30

Tôi lại tiếp tục có một câu hỏi: ‘’Kim tự tháp Giza và Mona Lisa có chung điều gì với Twitter và Pepsi?’’ Câu trả lời là tỷ lệ vàng nếu bạn đang bối rối. Tất cả đều được thiết kế dựa trên tỷ lệ vàng. Tỷ lệ vàng là một tỷ lệ toán học. Nó được tìm thấy trong thiên nhiên và khi được dùng trong thiết kế, tỷ lệ vàng tiếp nhận bố cục mĩ thuật tự nhiên làm cho mắt chúng ta dễ chấp nhận hơn. Nhưng cụ thể tỷ lệ vàng là gì và sử dụng nó như thế nào để hoàn thiện thiết kế của bạn? Tỷ lệ vàng, hay còn được gọi là Golden Section, Golden Mean, Divine Proportion, … thường được chỉ định bằng ký tự φ (phi) trong bảng chữ cái Hy Lạp nhằm tưởng nhớ đến Phidias, nhà điêu khắc đền Parthenon. Tỷ lệ vàng tồn tại khi lấy một đường thẳng chia làm hai phần, đoạn thẳng dài hơn (A) chia đoạn nhỏ hơn (B) sẽ bằng tổng chiểu dài 2 đoạn (A+B) chia cho A, kết quả là con số xấp xỉ 1.618

Hệ thống lưới - Những con số

Nhưng đừng để tính toán làm nản lòng vội. Trong thiết kế, tỷ lệ vàng hướng đến tính thẩm mĩ, kiến tạo và nâng tầm cái đẹp thông qua sự hài hòa và tỷ lệ. Khi áp dụng vào thiết kế, tỷ lệ vàng mang đến tính thẩm mĩ như một nhân tố đặc biệt. Sự hài hòa và tính ước lệ này đã được khám phá hàng thế kỉ trước, tồn tại trong các tác phẩm âm nhạc, tác phẩm nghệ thuật và cả thiết kế, tất cả đều có ở xung quanh bạn: từ kim tự tháp Giza tới đền Parthenon ở Hi Lạp; từ The Creation of Adam của Michelangelo trên trần nhà nguyện Sistine đến bức Mona Lisa; và logo Pepsi đến logo Twitter.

Khuôn mặt và cơ thể con người cũng tuân theo tỷ lệ này và ngoài ra, não của chúng ta có vẻ được lập trình để ưa chuộng những vật thể và hình ảnh có tỷ lệ vàng. Nó gần như là sự thu hút tự nhiên và hình ảnh dù có chút tùy chỉnh gần đúng tỷ lệ vàng đều có tác động lớn tới trí óc của chúng ta.v

Hệ thống lưới - Những con số

ĐƯỜNG XOẮN ỐC VÀNG

Lấy một hình vuông và nhân 1 cạnh với 1.618, ta có một hình chữ nhật có tỷ lệ hài hòa. Bây giờ, nếu chồng hình vuông lên hình chữ nhật, hai khối sẽ cho ta tỷ lệ vàng.

Nếu tiếp tục dùng công thức tỷ lệ vàng cho hình chữ nhật mới ở phần bên phải của hình trên, dần dần bạn có một mô hình với các hình vuông nhỏ dần.

Hệ thống lưới - Những con số

Nếu lấy sơ đồ Tỷ lệ vàng như hình mẫu, vẽ một vòng cung từ một góc đến góc đối diện của mỗi hình vuông, bạn sẽ vẽ đường cong đầu tiên của đường xoắn ốc vàng. Bằng việc thêm vòng cung vào mỗi hình vuông, chúng ta đã có sơ đồ của Đường xoắn ốc Vàng cùng với sự xuất hiện của dãy số Fibonacci – 1 dãy số mà mỗi số là tổng của 2 số trước nó. Bắt đầu từ số 0, dãy số là: 0,1,1,2,3,5,8,13,21,3 4,55,89,144, ...

Đi xa hơn và vẽ 1 vòng tròn trong mỗi hình vuông – bạn sẽ có những đường tròn theo tỉ lệ 1: 1.618 và tỉ lệ cân bằng với nhau.

Hệ thống lưới - Những con số

THẾ GIỚI QUANH BẠN

Bạn sẽ tìm thấy tỷ lệ tuyệt đẹp này trong thiên nhiên – dương xỉ, hoa, vỏ sò biển, thậm chí bão – đó có lẽ là lý do tại sao chúng ta thấy nó rất hấp dẫn. Bởi vì nó thực sự tự nhiên nhất. Con người rất khôn ngoan, họ biết cách áp dụng cùng phương pháp đó để mang lại sự nhảy cảm, dễ chịu trong thiết kế, trong những công trình kiến trúc trong suốt quá trình lịch sử. Hãy chiêm ngưỡng thêm một số ví dụ dưới đây để thư giãn đôi mắt và tìm cảm hứng nhé.

Hệ thống lưới - Những con số

CÔNG TRÌNH PARTHENON Kiến trúc Hy Lạp cổ đại sử dụng Tỷ lệ vàng để xác định các mối quan hệ giữa chiều rộng của một tòa nhà và chiều cao của nó, kích thước của hàng hiên và thậm chí là cả vị trí của cấu trúc các cột. Kết quả cuối cùng là một tòa nhà mà chúng ta được nhìn thấy hoàn toàn nằm trong các tỷ lệ.

LAST SUPPER- LEONARDO DA VINCI Leonardo da Vinci cũng như nhiều nghệ sĩ khác qua các thời đại, đã sử dụng quy tắc Tỷ lệ vàng để tạo ra tác phẩm tuyêt vời trường tồn cho đến ngày nay. Trong bữa tiệc, các con số được sắp xếp thấp hơn hai phần ba (lớn hơn hai phần của Golden Ratio), và vị trí của Chúa Giêsu là hoàn toàn được vẽ bằng cách sắp xếp hình chữ nhật theo tỷ lệ vàng trên vải.

Hệ thống lưới - Những con số

TWITTER (REDESIGN) Giám đốc sáng tạo của Twitter Doug Bowman đã đăng hình này trên trang Flickr của mình để giải thích làm thế nào công ty sử dụng tỷ lệ vàng trong bản redesign của mình vào năm 2010. “Cho bất cứ ai tò mò về tỷ lệ của #NewTwitter, để biết rằng chúng tôi đã không hề bỏ qua các tỷ lệ nào,” ông giải thích.

APPLE ICLOUD Việc thiết kế biểu tượng iCloud của Apple đã được dựa trên cơ sở toán học vững chắc của Tỷ lệ vàng, như Takamasa Matsumoto giải thích trong bài viết trên blog cá nhân (phiên bản gốc tiếng Nhật tại đây) và thể hiện trong hình ảnh chú thích

Hệ thống lưới - Những con số

ÁP DỤNG TRONG THIẾT KẾ

1. BỐ CỤC - XÁC ĐỊNH KÍCH THƯỚC VỚI TỶ LỆ VÀNG Tham khảo Tỷ lệ vàng là một cách định hướng hữu ích để xác định kích thước cho bố cục. Một cách dễ dàng áp dụng Tỷ lệ vàng là dùng tỷ lệ 1:1.618 cho xác định kích thước. Ví dụ: với chiều ngang (width) 960 pixel, bạn chia nó cho 1.618 và chiều cao (height) của bạn sẽ là 594 pixel. Bây giờ, dùng layout đó chia thành 2 cột theo Tỷ lệ vàng và ta có thành phẩm. Làm việc trong 2 khối này thì layout của bạn sẽ tuân thủ tỷ lệ hài hòa cuả Tỷ lệ vàng Hai cột layout rất hợp với thiết kế web và bạn sẽ thấy nhiều online content trong dạng này.

National Geographic đã chấp nhận layout dạng này và làm web của họ rất thoáng, dễ đọc và sắp xếp gọn chỉnh chu. Nó cung cấp cho độc giả website một cảm giác tự nhiên của trật tự, cân bằng và có sự phân cấp

Hệ thống lưới - Những con số

2. KHÔNG GIAN – BỐ CỤC VỚI MÔ HÌNH TỶ LỆ VÀNG Không gian là một nhân tố quan trọng hàng đầu trong mọi thiết kế, để nó trở thành việc sử dụng không gian âm dương, và nó thường quyết định thành bại của thiết kế. Ước lượng các khoảng cách có thể tốn rất nhiều thời gian, thay vào đó, hãy dùng mô hình Tỷ lệ vàng và để những hình vuông chỉ cho bạn vị trí đặt mỗi thành phần. Điều này đảm bảo cho khoảng cách và tỷ lệ một cách chính xác, không phải “ước chừng”, những thay đổi nhỏ đạt đến Tỷ lệ vàng có thể tạo nên sự khác biệt. Thêm vào đó, nếu bạn có quá nhiều thành phần, bạn có thể đặt nhiều mô hình tỷ lệ vàng để đạt tỷ lệ hài hòa trong toàn bộ thiết kế của bạn. Mariya Tereshkova đã tạo nên mẫu thiết kế giao diện Mobile UI cho website bán hàng. Tại đây, yếu tố ảnh, thông tin, giá cả, đặt mua và save đều nằm gọn vào từng không gian khác nhau của tỷ lệ vàng

Studio Moodley thiết kế một bộ nhân diện thương hiệu cho Lễ hội nghệ thuật trình diễn Bregenzer Festspiele bao gồm logo, logotype và collage design áp dụng cho các chương trình, biểu ngữ quảng cáo và các chiến dịch ngoài trời. Biểu ngữ quảng cáo có sự góp mặt của nhiếp ảnh, nghệ thuật cắt dán minh họa và một logo gợn sóng với không gian rỗng bên tro ng ... Tỷ lệ vàng được sử dụng để xác định kích thước và vị trí từng yếu tố để đảm bảo cover được cân đối.

Hệ thống lưới - Những con số

3. CONTENT – LẦN THEO ĐƯỜNG XOẮN ỐC VÀNG Đường xoắn ốc vàng có thể được dùng để hướng dẫn nơi đặt content. Mắt chúng ta luôn hướng về tâm đường xoắn ốc một các tự nhiên, nơi nó tìm những chi tiết, vậy hãy tập trung thiết kế của bạn tại tâm đường xoắn ốc và đặt điểm hấp dẫn thị giác bên trong đường này. Nhìn lại website của National Geographic và bạn sẽ nhận ra một logo nhỏ thứ 2 ở gần tung tâm đường xoắn ốc. Đó là một nơi tuyệt hảo để nhân đôi hình ảnh thương hiệu bởi vì đôi mắt sẽ vô thức lướt về đây. Cao siêu quá đúng không. Đường xoắn ốc vàng làm được điều đó đấy!

Hệ thống lưới - Những con số

Helms Workshop thiết kế thương hiệu này cho Fullsteam Brewery và dùng Tỷ lệ vàng cùng Đường xoắn ốc vàng cho layout và content. Rất nhiều chi tiết trong thiết kế này nằm vừa vặn trong các hình vuông và hướng mắt lướt qua nhân vật chính, tới con tem, chữ ABV và dừng tại tên nơi sản xuất. Ý tưởng của Helms Workshop cho Fullsteam là tạo nên một “nhãn hiệu xung quanh câu chuyện của người chủ nông trại bán công nghiệp với một cái tên xa lạ…”, Đường xoắn ốc vàng giúp tạo định hướng trên nhãn bằng cách tập trung các chi tiết xung quanh ông ta và thương hiệu.

Content rõ ràng trở nên dày đặc dàn theo đường xoắn ốc trong thiết kế này của Saastamoisen säätiö. Kích thước từng con chữ cũng như khoảng cách giữa chúng giảm dần khi mắt lướt càng gần xoắn ốc. Các chữ không cần đọc theo thứ tự nhưng có đủ sự lặp lại để chúng dần trở nên quen thuộc.

Hệ thống lưới - Những con số

4. HÌNH ẢNH – TỶ LỆ VÀNG (HOẶC LUẬT 1/3)

Bố cục rất quan trọng với hình ảnh, dù nó truyền đạt thông tin quan trọng hay tạo tính thấm mĩ cho bức hình. Tỷ lệ vàng giúp bố cục có thể dẫn dụ cái nhìn đến các chi tiết quan trọng của tấm hình. Dùng Tỷ lệ vàng, bạn chia bức hình thành 3 phần không bằng nhau, sau đó dùng các đường thẳng và các điểm giao nhau để chia bố cục. Tỷ lệ là 1:0.618:1 – để chiều ngang của cột dọc thứ nhất và thứ ba là 1, chiều ngang cột ở giữa là 0.618. Tương tự với các hàng ngang: chiều cao của cột ngang thứ nhất và thứ ba là 1 và cột ngang ở giữa là 0.618. Giờ dùng các đường và các điểm giao nhau để dẫn dắt hướng nhìn và sự chú ý của người xem. Điều này còn tạo sức hút và thêm vào sự thú vị cùng năng lượng cho bố cục. Một cách khác đơn giản hơn để cắt hình theo tỷ lệ vàng là dùng Luật 1/3. Nó không chính xác như Tỷ lệ vàng như cũng cho bạn một kết quả tương đối. Với luật này, đặt tất cả đoạn dọc và ngang theo tỷ lệ 1:1:1 để các khoảng bằng nhau. Sắp xếp các chi tiết quan trọng của hình xung quanh hình chữ nhật trung tâm. Nếu bạn tò mò xem Luật 1/3 là gì thì tôi sẽ bật mí, nhưng là ở vài trang sách nữa.

Hệ thống lưới - Những con số

Đây là cover của tạp chí Complex, người mẫu là Solange Knowles, đã sử dụng Tỷ lệ vàng để xác định sự cân đối của không gian âm dương. Trên phần đỉnh của mũi và trán Solange chạm vào đỉnh của vùng giao nhau, trong khi mũi và mắt nằm trên 2 cột dọc của hình chữ nhật trung tâm.

Jason mildren thiết kế cover cho tạp chí Pilot và nó tuân theo Luật 1/3. Những chi tiết đều nằm nằm xung quanh phần cạnh hình chữ nhật, còn phần tung tâm gần như trống rỗng. Con mắt của người mẫu đặt ngay tại 1 góc, vừa vặn nhìn thấu người xem

Hệ thống lưới - Những con số

Cover của tạp chí Feld dùng Tỷ lệ vàng để khoanh vùng phần mắt của người mẫu. Điều đó đạt hiệu quả tốt vì anh ta không nằm ở vị trí trung tâm và một phần khuôn mặt gần như thẳng hàng với đường thẳng định hướng bên trái. Và xét theo tổng thể, layout của trang bìa này tuân theo Tỷ lệ vàng và Đường xoắn ốc vàng. Phần nội dung tập trung bên trong xoắn ốc và càng đến gần tâm xoắn ốc thì thông tin càng chi tiết hơn.

Hệ thống lưới - Những con số

5. HÌNH DÁNG – VÒNG TRÒN VÀNG Sử dụng các Vòng tròn Vàng sẽ tạo nên không chỉ tạo sự hài hòa và tỷ lệ hợp lí mà còn tạo sự nhất quán trong cả hình dáng. Hãy xem logo của Pepsi và Twitter dưới đây: Logo Pepsi dựa trên 2 vòng tròn giao nhau hoàn toàn theo Tỷ lệ vàng. Vòng trong nhỏ hơn không thực sự hiện diện nhưng lại định dạng cho dải đai trắng nằm dọc trung tâm logo. Logo Twitter sử dụng hình học và hoàn toàn dựa trên các đường tròn. Có một chút thiếu chính xác khi gắn với Tỷ lệ vàng nhưng phần lớn của logo có vẻ dùng Tỷ lệ vàng để tạo sự cân bằng, sắp xếp và hòa hợp.

Hệ thống lưới - Những con số

LUáº¬T 1/3

Nếu bạn tìm đến trang sách này bởi trí tò mò không thể kiềm hãm về mối liên quan giữa tỷ lệ vàng và luật 1/3 thì hãy bình tĩnh và nghiền ngẫm hết phần trước đi, vì phải hiểu cái gốc mới rành các ngọn chứ! Còn nếu bạn đã hoàn toàn thấm nhuần những thứ xoay quanh tỷ lệ vàng rồi thì hãy tiếp tục với luật 1/3 nhé. Chắc chắn ai trong số chúng ta ai cũng đã từng cầm trên tay một chiếc máy ảnh (máy ảnh của smart phone cũng tính) và nhận thấy màn hình hiển thị của máy luôn có những đường lưới chia khung ảnh làm 9 ô giống nhau với 3 hàng và 3 cột. Bởi lẽ tất cả máy ảnh đều tuân theo quy luật 1/3. Luật 1/3 (Rule of Thirds) là một quy tắc rất phổ biến trong những tấm ảnh và thước phim. Điều căn bản là khi bạn muốn làm nổi bật hoặc nhấn mạnh một vật thể trong tác phẩm của mình, thì hãy đặt chúng vào vị trí trùng với một đường kẻ ảo hoặc vào vị trí điểm giao các đường phân chia trong lưới 1/3. Việc này sẽ khiến cho vật thể thu hút được ánh nhìn tốt hơn, thú vị hơn thay vì đơn giản là nằm chính giữa.

Hệ thống lưới - Những con số

Luật 1/3 cũng có hiệu quả giải tỏa giữa khoảng đặc (có thông tin) và khoảng rỗng trong tác phẩm, làm cho chúng cân bằng và ưu nhìn hơn, có thể để 1/3 đặc, 2/3 rỗng hoặc ngược lại, hoặc chia theo chiều dọc của tác phẩm, cũng có thể chia những khoảng đặc và rỗng thành những phần không đều nhau. Thực chất, luật 1/3 chính là một quy tắc đơn giản hóa của tỷ lệ vàng để được áp dụng rộng rãi hơn trong thực tiễn. Việc sử dụng tỷ lệ vàng một cách hiệu quả không hề dễ, không phải ai cũng làm được. Vậy nên luật 1/3 xuất hiện như một phương thức ‘’mì ăn liền’’, tuy chưa đem lại cảm giác hài hòa như tỷ lệ vàng nhưng nó rất dễ dùng, dễ hiểu và vẫn có thể cho bạn một kết quả tương đối. Cho đến ngày nay, luật 1/3 được coi như phương pháp rất thích hợp để tổng hợp tất cả những quan sát và kinh nghiệm từ xa xưa, liên quan mật thiết đến sự cân bằng và hài hòa của một bố cục

Đến đây chắc hẳn bạn đã cảm thấy tự tin hơn rất nhiều và vỡ ra nhiều điều mới đúng không? Và tôi tin rằng sau những phần tôi chia sẻ về tỷ lệ vàng và luật 1/3, trong đầu bạn đã mắc phải một ‘’căn bệnh’’ kì lạ - Hội chứng phân tích. Hội chứng này sẽ khiến cho bạn không là chính mình như trước nữa, khiến bạn quan sát và ngắm nhìn sự vật xung quanh với con mắt khác. Bạn sẽ luôn nhìn thấy ở bất cứ đâu, bất cứ tác phẩm nào cũng tồn tại những đường căn gióng chia vật thể theo tỷ lệ vàng hay luật 1/3. Thật khó tin đúng không?

Hệ thống lưới - Những con số

‘’HẸN HÒ’’ VỚI LƯỚI – PHÂN LOẠI.

Sau biết bao nhiêu những sự thật, những câu hỏi, những con số được nêu ở phần trước, giờ chúng ta sẽ đến với một phần dễ thở hơn nhiều mà tôi hay gọi vui là ‘’hẹn hò’’ với lưới – phân loại Việc bạn tìm một loại hệ thống lưới cho tác phẩm của mình khá là giống việc bạn đi hẹn hò vậy. Bạn cần tìm hiểu, chọn lựa thời điểm, đúng lúc đúng chỗ, đôi khi phải thử vài lần và từ bỏ vài lần để rút ra kinh nghiệm, rồi cuối cùng thì gắn bó với ai đó phù hợp. Hệ thống lưới cũng như vậy. Tuy nhiên tôi sẽ giúp bạn đốt cháy giai đoạn, bằng cách cho bạn biết những hệ thống lưới thường gặp, phân loại chúng và mục đích sử dụng của chúng ra sao. Tôi cũng mong rằng phần tổng hợp này sẽ giúp bạn có cái nhìn khách quan trong công cuộc chọn lựa hệ thống lưới của bản thân, mà không mất công tự trải nghiệm và rút kinh nghiệm như việc hẹn hò.

Hệ thống lưới - Phân loại

MANUSCRPIT GRID

Manuscript Grid – lưới bản thảo, đôi khi còn được gọi là Single Column Grid (lưới đơn) hay Block Grid (lưới khối), có cấu đơn giản nhất so với các loại lưới khác. Nó có dạng một hình chữ nhật rất lớn đặt trong một trang giấy, cung cấp một vùng làm việc đơn giản, phù hợp cho việc trình bày lượng văn bản lớn thành dạng các khối chữ Không gian của trang được xác định bởi Margin (lề). Margin là yếu tố cần cân nhắc quan trọng trong việc sử dụng Manuscript Grid 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ữ. 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.

Hệ thống lưới - Phân loại

Một cách sử dụng margin phổ biến là lề bên trong thường là hẹp nhất và lề dưới là rộng nhất. Thông thường, chiều rộng là bên ngoài gấp đôi chiều rộng lề bên trong, mặc dù gần đây lề bên ngoài có xu hướng hẹp hơn. Manuscript Grid rất phù hợp khi dàn trang cho các văn bản dài như sách truyện hay bài luận… và gần như không bị giới hạn bởi lượng nội dung văn bản. Ngoài ra các bức ảnh cũng có thể chèn vào để lấp chỗ trống còn thừa. Sách và tạp chí thường được thiết kế theo trang đôi. Một trang đôi, thay vì là một trang đơn, là một đơn vị của thiết kế. Lề trái và phải trở thành lề trong và lề ngoài. Thông thường thì khi thiết kế bố cục sẽ đồng nhất lề trong sẽ giống nhau cho cả hai trang bên trái và bên phải, tạo ra một sự hài hòa, đối xứng cho trên một mặt giấy. Tuy nhiên bạn hoàn toàn tự do chơi theo luật của bạn và tạo nên một thiết kế trang bất đối xứng.

Hệ thống lưới - Phân loại

MULTIPLE COLUMN GRIDS

Trong khi hệ thống lưới một cột (Manuscrpit Grid) hoạt động tốt với những tài liệu đơn giản, hệ thống lưới nhiều cột (Multiple-Column Grids) chia trang giấy thành nhiều cột, cung cấp một định dạng linh động cho những trang giấy cần sự đan xen giữa chữ và các minh họa. Càng nhiều cột bạn tạo ra, thì hệ thống lưới của bạn càng trở nên linh động.

Sử dụng Flowlines trong lưới cột sẽ giúp bạn xây dựng cấu trúc của trang bằng cách bổ sung căn theo hàng trên toàn lưới, nhất là khi bạn có những đoạn văn bản bị xếp lệch với những tấm ảnh. vBaselines sẽ giúp bạn thiết lập và căn gióng các đối tượng (đặc biệt là chữ) một cách chính xác nhất theo chiều dọc theo cột. Tôi sẽ có phần giải thích kĩ hơn ở phần sau.

Con số 12 là con số bạn nên ghi nhớ, bởi nó có tính linh hoạt rất cao khi là bội số của 2,3,4, dễ dàng đáp ứng nhu cầu phân chia nhiều cột trong trang giấy của bạn. Khi chia cột cho trang giấy, bạn cũng nên chú ý đến Gutters mà chúng ta đã nhắc tới ở phần trước. Thường thì độ rộng của Margins sẽ gấp đôi Gutter là mức khá hợp lý.

Bạn có thể sử dụng hệ thống lưới để tạo nên cấu trúc của trang giấy bằng cách cố định những không gian cho những loại nội dung khác nhau. Một phần chữ hoặc hình ảnh có thể nằm trên 1 cột hoặc có thể mở rộng ra nhiều cột. Và không nhất thiết tất cả không gian đều cần phải lấp đầy. 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.

Hệ thống lưới - Phân loại

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) Tuy nhiên cần chú ý tránh chia quá nhỏ không gian khiến cho người xem cảm thấy phức tạp và không có trật tự rõ ràng Mutiple-Column Grid 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ữ.

Hệ thống lưới - Phân loại

MODULAR GRIDS

Lưới modular là một phần mở rộng của Multiple-Column Grids, nó bổ sung thêm lưới theo hàng ngang và nó chia trang ra làm nhiều mảng, tạo nên một ma trận các khối mô đun. Những mô đun là khu vực sử dụng trên trang để có thể bố trí một cách phù hợp các yếu tố thiết kế.

Lưới modular cho phép thiết kế các thông tin dạng bảng như biểu đồ, biểu mẫu, lịch trình và các bảng dữ liệu rất dễ dàng. Mỗi mô đun trong lưới có thể xác định một đoạn thông tin nhỏ (ảnh hoặc chữ) hoặc gộp các mô đun liền kề có thể được kết hợp để tạo ra các mảng hoặc các vùng lớn để chứa những những loại thông tin cụ thể. Vậy nên người thiết kế phải đặt một số lượng văn bản và hình ảnh để xác định một hình dạng mô-đun thích hợp.

Hệ thống lưới - Phân loại

Kích thước của mô-đun có thể được xác định bởi bề ngang lý tưởng, hoặc độ dài của dòng của phần nội dung, cũng như kích thước tối thiểu của tấm ảnh hoặc hình minh họa sẽ sử dụng. Các mô-đun có thể là ngang hoặc dọc, và tỷ lệ của mô-đun có thể được xác định theo nhiều cách tùy trường hợp. Lưới tất nhiên phải đủ linh hoạt để thích ứng sự thay đổi nội dung trong khi vẫn duy trì sự đơn giản và dễ dàng áp dụng bởi nhiều nhà thiết kế. Giống như lưới cột, lưới mô-đun tăng cường sự linh hoạt của bố cục và đồng thời phù hợp với ngành công nghiệp xuất bản, bao gồm tạp chí, báo. Các hãng xuất bản lớn khi trình bày và cung cấp thông tin thường sử dụng Modular Grids để giữ tỷ lệ đồng nhất khi thiết kế. Điều này truyền tải cảm giác có gì đó rất công nghệ, rất hiện đại và đồng thời giúp họ duy trì tính nhất quán trong thương hiệu.

Hệ thống lưới - Phân loại

HIERARCHICAL GRID 78

Hierarchical Grid – lưới phân cấp, là loại lưới rất đặc biệt không giống bất cứ các loại lưới thông thường khác, giúp việc hiển thị các yếu tố thiết kế trực quan hơn và tự nhiên hơn. Cấu trúc của nó dựa vào việc phân cấp các yếu tố thiết kế mà vẫn phù hợp với nhu cầu của thông tin được sử dụng.

Khi sử dụng Hierarchical Grid chúng ta sẽ không sử dụng một tỷ lệ cố định và lặp lại như thông thường, mà đa phần sẽ sử dụng các tỷ lệ khác nhau cho từng khối/mảng thông tin khác nhau. Chiều rộng của các cột sẽ rất đa dạng, cũng như vị trí đặt các đường Flowlines trong trang giấy.

Lưới phân cấp có thể bị lầm tưởng là loại lưới lỏng lẻo không tắc. Thực chất, việc xây dựng thường bắt đầu bằng việc tự đặt các yếu tố thiết kế không theo quy tắc nào trên trang giấy. Sau đó chúng ta mới xác định một cấu trúc cho yếu tố đó mà vẫn đảm bảo sự hài hòa, hợp lý.

Lưới phân cấp được áp dụng rất tốt với những trường hợp yêu cầu một hệ thống lưới đặc biệt, có tác dụng thống nhất các yếu tố thiết kế khác biệt và tạo ra một cấu trúc phù hợp để sắp xếp chúng. Điển hình là việc sử dụng trên các website, blog, …

Điều cuối cùng, khi bạn nhận ra rằng trong những sản phẩm bạn đã làm, các yếu tố thiết kế đã được sắp xếp cẩn thận và có một bố cục hợp lý, mà hoàn toàn không sử dụng một trong ba loại lưới tôi đã nêu ở phần trước, thì chắc hẳn bạn đã vô tình tiếp cận và ứng dụng hệ thống lưới phân cấp rồi đấy.

Hệ thống lưới - Phân loại

PHÁ BỎ HỆ THỐNG LƯ Cũng như tôi đã chia sẻ về vấn đề hẹn hò, sau khi chọn lựa và trải nghiệm, thì cũng có lúc bạn phải từ bỏ. Lại một lần nữa, hệ thống lưới cũng như vậy. Lưới giúp chúng ta có một bố cục tốt hơn, tuy vậy, sự chỉn chu, ngay ngắn không phải là tất cả những gì mà nhà thiết kế trông đợi ở sản phẩm của mình. Nó phải sáng tạo và đột phá hơn thế. Áp dụng một cách cứng nhắc đôi khi lại mang đến một kết quả tồi.

Vì vậy, nhiều nhà t vỡ hệ thống lưới để đem lại một t hơn, nổi bật hơn. thường xuyên đượ chỉ ra rằng chúng những yếu tố đan nên tìm đến một h hay một hệ thống

ƯỚI

thiết kế thường phá không ít thì nhiều thiết kế chất lượng Hơn nữa nếu lưới ợc phá vỡ, nó có thể không phù hợp với ng sử dụng vì vậy hướng đi khác hơn khác phù hợp hơn.

Hệ thống lưới - Phân loại

Hãy xem trang thiết cho 99U này. Họ đã sử dụng hệ thống lưới ba cột rất đơn giản và chặt chẽ. Tuy nhiên họ đã phá vỡ sự tuyến tính của hệ thống lưới đó với dòng chữ màu vàng rất lớn chạy ngang qua cả trang giấy và còn đè lên phần văn bản. Việc phá vỡ hệ thống lưới này đã tạo ra một thiết kế đáng nhớ và hiệu quả, và thực sự làm sáng tỏ thông điệp ‘’Think Differently’’

TẦM QUAN TRỌNG CỦA HỆ THỐNG LƯỚI. 83

Tôi biết bạn có thể đang thắc mắc tại sao tôi mới chia sẻ về việc phá bỏ hệ thống lưới. Đúng, việc đó là cần thiết bởi xét cho cùng, thiết kế là sáng tạo, và sáng tạo thì không nên bị quá gò bó vào một cái gì đó quá cứng nhắc như hệ thống lưới. Tuy nhiên, tôi phải khẳng định rằng ứ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 loại lưới khác nhau để 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 giữa các đối tượng khi quan sát 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ế. 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 nên hãy sử dụng chúng một cách khôn ngoan!

Tỷ lệ lưới và mối thước trang, cũng Lưới nên phù hợp

Nếu lưới được xác và yếu tố sử dụng dụng. Một hệ thốn tài” hoặc quá dễ d cấp quá nhiều khô với nội dung cần th

Nếu không tập tru giản sẽ hạn chế k những cấu trúc cơ

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

c định tuỳ tiện mà không cân nhắc tới chất liệu g, nó sẽ làm người thiết kế cảm thấy khó sử ng lưới tùy tiện có thể trở thành một “kẻ độc dãi trong việc xác định bố cục, hoặc là cung ông gian, hoặc quá ít không gian để thích ứng hiết.

ung phát triển hệ thống lưới thông minh, đơn khả năng của người thiết kế, thay vì cung cấp ơ bản hiệu quả, những thiết kế ý nghĩa.

Tầm quan trọng của hệ thống lưới

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

12 LÝ DO CỦA HỆ THỐNG LƯỚI Nếu bạn vẫn còn do dự về việc bắt tay vào sử dụng hệ thống lưới, vậy hãy tham khảo 12 lý do mà tôi sắp sửa nêu ra dưới đây để hiểu rằng, hệ thống lưới sẽ cải thiện đáng kể việc thiết kế của bạn như thế nào!

Tầm quan trọng của hệ thống lưới

1. LƯỚI GIỮ NỘI DUNG LUÔN TỔ CHỨC

Một trong những lý do hàng đầu khi sử dụng lưới là chúng luôn giữ cho các yếu tố thiết kế của bạn được sắp xếp, có trật tự và trang giấy thiết kế luôn gọn gàng sạch sẽ. Bạn có thể tham khảo bố cục có sử dụng hệ thống lưới của trang web Contrastly trên đây để thấy rõ điều tôi muốn nói.

Tầm quan trọng của hệ thống lưới

2. LƯỚI GIÚP HOÀN THÀNH CÔNG VIỆC NHANH HƠN Chúng ta đang ở trong một thế giới nơi luôn luôn đòi hỏi mọi thứ phải hoàn thành nhanh và chính xác, và điều ai cũng muốn nghe thấy là ‘’hiệu quả ngày càng cải thiện’’. Lưới có thể giúp bạn tăng tốc và cải thiện thời gian thiết kế của bạn, bởi chúng có thể chỉ cho bạn nơi tốt nhất để đặt các yếu tố thiết kế. Thay vì đặt chúng một cách ngẫu nhiên cho đến lúc bạn nhìn thấy một bố cục có vẻ tạm ổn, lưới sẽ hướng bạn tới một giải pháp tốt hơn, tự nhiên hơn. Hãy luôn nghĩ rằng hệ thống lưới là nền móng căn nhà của bạn, nó là thứ đầu tiên cần được đặt ra, rồi từ đó bạn mới có thể bắt tay vào xây dựng.

“(Grids) speed up the design process by helping designers decide where content should be placed rather than where it could be placed.” – Troy Templeman

Tầm quan trọng của hệ thống lưới

3.LƯỚI HỖ TRỢ CHỮ TRONG THIẾT KẾ Lưới và chữ trong thiết kế là hai thứ luôn đi song hành với nhau. Một hệ thống lưới tốt có thể giúp cho một đoạn văn bản dày đặc được cải thiện hơn khả năng tiếp cận, giúp nó gọn gàng hơn, có tổ chức hơn, tăng cường tính rõ ràng và dễ đọc hơn. Baselines là những đường thẳng nằm ngang nối tất cả phần chân chữ, trông cũng khá giống dòng kẻ trong những quyển vở hay sổ đó. Chúng giúp bạn căn gióng phần thân đoạn văn bản để chúng luôn nằm ở cùng một cấp độ

Mặc dù những người xem tác phẩm của bạn có dễ dãi ra sao, dù họ không hề chú ý đến việc căn gióng và bạn lơ là trong việc đó, thì chắc hẳn khi nhìn vào tác phẩm của bạn, họ sẽ luôn có cảm giác lộn xộn, khó chịu. Tuy đây chỉ là một sự thay đổi nhỏ nhưng chắc chắn sẽ đem lại hiệu quả cực kì to lớn. Hãy xem ví dụ dưới đây và bạn sẽ hiểu ý tôi ngay thôi.

4. LƯỚI CẢI THIỆN VIỆC CỘNG TÁC Bạn có bao giờ phải làm việc cộng tác với các nhà thiết kế khác? Nếu có, lưới sẽ là vị cứu tinh giảm bớt sự căng thẳng và thất vọng của việc hiểu lầm Như tôi đã nhắc đến ở các phần trước, lưới giúp bạn xây dựng một cấu trúc cơ bản cho bản thiết kế. Đồng thời nó cũng có chức năng chỉ dẫn nơi các yếu tố thiết kế nên được đặt. Do đó, khi bản thiết kế của bạn có người đồng nghiệp nào đó nhảy vào làm cùng, việc sử dụng hệ thống lưới sẽ giúp họ hiểu bạn đã và đang làm gì, làm như thế nào trong tác phẩm đó, giúp họ có một hướng đi đúng đắn và không bị chệch hướng. Khi làm việc với những nhà thiết kế khác, bạn cũng cần chú ý thiết lập một hệ thống lưới cho phù hợp, không thừa thãi quá mức khiến họ khó nắm bắt. Hãy giữ cho nó đơn giản và dễ hiểu! Như ví dụ dưới đây, khi bạn chuyển bản thiết kế cho người đồng nghiệp để điền nốt đoạn văn bản vào vị trí còn trống, chắc chắn với một bản thảo đã ứng dụng hệ thống lưới một cách chặt chẽ như vậy sẽ không còn những câu hỏi: ‘’nên đặt text vào vị trí nào? Căn chỉnh với cái gì …’’

Tầm quan trọng của hệ thống lưới

5. LƯỚI TẠO NÊN SỰ CÂN BẰNG Điều tuyệt vời của lưới là tính nhất quán trong mọi thứ, nó dẫn tới việc khi bạn chia bản thiết kế của mình thành một số cột nhất định, bạn sẽ bắt đầu tiếp cận với bố cục đối xứng. Từ đây, bạn có thể rất dễ dàng nhận ra điểm yếu của một bản thiết kế là sự thiếu cân bằng khi sắp xếp các yếu tố thiết kế. Hãy ngắm nhìn trang web được thiết kế bởi Maan Ali và xem nó đã làm thế nào để tránh được bố cục không cân bằng bằng cách sử dụng hệ thống lưới đồng đều và đối xứng. Tương tự, trong thiế kế của Braulio Amado đã sử dụng lưới ba cột ở mỗi trang giấy và có một đối tượng được đặt chính giữa, giữ cho bản thiết kế cân đối và hoàn hảo. Mặc dù lượng thông tin rất dày đặc và hơi quá tải, nhưng hệ thống lưới chặt chẽ đã giữ cho bản thiết kế vẫn thoáng và không bị lộn xộn.

Tầm quan trọng của hệ thống lưới

6. NÂNG CAO TÍNH LIÊN KẾT GIỮA CÁC TRANG

Lại một lần nữa, lưới là vị cứu tinh của bố cục nhiều trang. Bằng việc thiết lập một hệ thống lưới tốt cho bố cục của bạn, hệ thống đó sẽ giúp cho việc chuyển đổi giữa các trang và các bố cục trở nên dễ dàng hơn rất nhiều, mà vẫn duy trì tính liên kết cao xuyên suốt

Hãy nhìn vào ví dụ về trang web Rolling Stone và bạn sẽ thấy rằng không có quá nhiều sự thay đổi về cấu trúc và thành phần nội dung, mặc dù website này có rất nhiều trang nội dung con. Vậy họ đã duy trì tính nhất quán này như thế nào?

Bằng cách sử dụng cấu trúc lưới bốn cột để thiết kế trang web, giữa các trang đều có tính liền mạch, sạch sẽ và quen thuộc, nhưng vẫn đảm bảo tính riêng biệt của mỗi trang con

Tầm quan trọng của hệ thống lưới

Một ví dụ điển hình về việc sử dụng hệ thống lưới chặt chẽ cho bố cục nhiều trang đó là những ấn phẩm hướng dẫn sử dụng (manuals). Vì phục vụ mục đích giáo dục và truyền tải kiến thức, nên chúng được thiết kế một cách tuyến tính, nghĩa là chúng đang sử dụng hệ thống lưới đấy! Hãy ngắm nhìn bản hướng dẫn sử dụng của Mike Collinge và để ý tới tính nhất quán khi sử dụng hệ thống lưới

7. LƯỚI GIÚP CẢI THIỆN KHẢ NĂNG PHÂN CẤP

Việc bạn sử dụng hệ thống lưới cũng đồng nghĩa với việc bạn chia các yếu tố thiết kế của bạn thành các khối nhỏ có kích thước tương đương nhau, và điều này rất quan trọng. Tất cả chúng ta đều hiểu tính phân cấp trong thiết kế quan trọng thế nào, và lưới có thể giúp đẩy nhanh quá trình phân cấp đó cho bạn một cách dễ dàng

Tầm quan trọng của hệ thống lưới

Hãy quan sát cách thiết kế webite của NASA. Họ sử dụng hệ thống lưới 4 cột trong thiết kế website, nhờ đó họ có thể tạo sự phân cấp rất mạnh mẽ bằng cách kéo dài những hình ảnh muốn làm nổi bật/ những hình ảnh quan trọng trên nhiều cột và hàng. Hãy nhìn vào câu chuyện ‘’NASA Completes Review of First SLS, Orion Deep Space Exploration Mission’’ trải dài trên hai cột và hai hàng, khiến cho nó trở thành đối tượng thu hút nhiều sự quan tâm nhất khi xem. Những câu chuyện quan trọng khác cũng được trải dài qua nhiều cột và cũng thu hút không ít sự chú ý tới chúng.

100

Với những thiết kế in ấn cũng rất giống thiết kế web. Bằng cách sử dụng hệ thống lưới và phân cấp, có những yếu tố trong bản thiết kế thu hút được rất nhiều sự chú ý bằng cách phóng to chúng và trải dài qua cột, hàng và ngược lại. Bản thiết kế của David Tang dưới đây cũng ứng dụng điều đó và tôi dám chắc bạn sẽ nhìn vào những con số khổng lồ đầu tiên khi xem lướt qua.

Tầm quan trọng của hệ thống lưới

101

8. LƯỚI CÓ TÍNH LINH HOẠT CAO

Bạn vẫn có chút lo lắng hệ thống lưới sẽ không phù hợp với thiết kế của bạn? Đừng sợ, hệ thống có lưới linh hoạt rất cao và có thể thích nghi với sự thay đổi trong thiết kế của bạn. Việc tạo nên một hệ thống lưới với số cột hay hàng đều phụ thuộc vào bản thiết kế và nhu cầu của người thiết kế. Hãy nhớ rằng càng có nhiều thì thiết kế của bạn sẽ linh hoạt hơn, và càng ít thì sẽ đơn giản hơn nhưng sẽ kém linh hoạt hơn

102

Tầm quan trọng của hệ thống lưới

103

104

Tầm quan trọng của hệ thống lưới

105

106

Tầm quan trọng của hệ thống lưới

107

108

9. LƯỚI ĐAN XEN Nếu bạn đang có ý tưởng độc đáo cho bản thiết kế với một góc độ đặc biệt (theo nghĩa đen) thì hệ thống lưới vẫn có thể đáp ứng nhu cầu của bạn. Lưới theo đường chéo vẫn có thể hoạt động hiệu quả y hệt như lúc chúng đang nằm ngang hay dọc. Tuy nhiên bạn vẫn cần lưu ý một điều là các bản thiết kế sử dụng lưới chéo vẫn cần sử dụng các đường lưới dọc/ngang để giữ mọi thứ có tổ chức và gọn gàng Hãy xem thiết kế của Andrew Ackroyd thu hút rất nhiều sự chú ý bằng cách đặt các đối tượng thiết kế theo đường chéo, tạo ra một hiệu ứng rất phù hợp với phong cách hiện đại và thời trang.

Tầm quan trọng của hệ thống lưới

109

110

10. ỨNG DỤNG TRONG MỌI THỨ Lưới được sử dụng rất nhiều trong thiết kế sách báo và tạp chí, tuy nhiên, đây không phải những thứ duy nhất có thể sử dụng lưới. Thực chất, chúng có thể dùng trong bất cứ phương tiện thiết kế nào và kể cả là nhiếp ảnh.

Lưới cũng có thể sử dụng trong những bức ảnh minh họa (Illustration). Hãy xem bức tranh đô thị của Dean Gorissen và để ý rằng các góc cạnh của vật thể gọn gàng như thế nào bằng cách sử dụng những đường lưới chéo.

Trong nhiếp ảnh, như chúng ta đã bàn, sử dụng lưới chính là việc bạn đang sử dụng tỷ lệ vàng hay luật 1/3 để có những bức ảnh bắt mắt, tạo điểm nhấn về vật thể hay tạo cảm giác tự nhiên quen thuộc

Vì vậy, dù bất cứ trường hợp nào thì hệ thống lưới đều có thể đáp ứng. Mặc dù nó sẽ không phù hợp với tất cả các tác phẩm hoặc phong cách của tất cả các nhà thiết kế, nhưng có điều chắn chắn rằng hệ thống lưới là một lựa chọn không tồi. Và tôi tin rằng nó sẽ rất hiệu quả và đáng để thử trong những ấn phẩm trong tương lai của bạn.

Quay lại với thiết kế, rất nhiều logo nổi tiếng được xây dựng trên hệ thống lưới. Như bạn thấy, bằng cách sử dụng hệ thống lưới để vẽ, mỗi ký tự đều có tính đồng nhất, gọn gàng và rất cứng cáp. Kết quả là chúng ta có được logo Braun đẹp tuyệt vời.

Tầm quan trọng của hệ thống lưới

111

112

11. KHUYẾN KHÍCH KHÔNG GIAN TRẮNG Trước khi đi vào vấn đề tôi sẽ giải thích một chút về không gian trắng (White Space) nếu bạn chưa biết. Không gian trống là khoảng không gian xung quanh các yếu tố thiết kế giúp chúng nổi bật và tách biệt với các yếu tố khác. Khoảng trắng thiết lập sắc độ của bản thiết kế và tác động đến khả năng tiếp cận đến đối tượng được khoảng trắng bao quanh. Một điểm đáng chú ý là khoảng trắng không có nghĩa là khoảng không gian phải có màu trắng. Nếu màu nền (background) của bản thiết kế là màu đen, thì khoảng trắng là màu đen. Nói một cách đơn giản, khoảng trắng là nơi trống, không bị chiếm bởi bất kỳ thành phần thiết kế nào Vậy làm thế nào để trải nghiệm và tạo nên những tác phẩm chuyên sử dụng không gian trắng? Hệ thống lưới cũng có thể giúp bạn thực hiện điều đó. Khi bạn đã chia bản thiết kế thành số cột như mong muốn, đặt các yếu tố thiết kế cần thiết vào đúng vị trí, hãy cố tình giữ một số cột/hàng không có gì cả, đơn giản là để tạo ra thêm không gian trống tại đó.

Tầm quan trọng của hệ thống lưới

113

Với cách bố cục này của tác giả João Oliveira có rất nhiều không gian trắng được sử dụng, đơn giản bằng cách để trống không lấp đầy không gian trong lưới. Điều này khiến cho tác phẩm rất phong cách, thoáng đãng và tinh tế, cũng như áp dụng triệt để được phong cách tối giản trong thiết kế.

114

Tương tự trong poster của Mehmet Gozetlik. Bằng cách sử dụng hệ thống lưới ba cột, với cột chính giữa có chữ và hình ảnh, hai cột hai bên để trống hoàn toàn, nhà thiết kế đã tạo ra một ấn phẩm rất cân đối, có hiệu quả hình ảnh rất cao.

Tầm quan trọng của hệ thống lưới

115

12. NGƯỜI XEM SẼ BIẾT ƠN BẠN! Sau 11 lý do mà tôi đã kể trên mà bạn vẫn cảm thấy chưa đủ, thì việc áp dụng hệ thống lưới sẽ giúp cho phần văn bản trong thiết kế của bạn dễ đọc hơn, nhất là đối với những bố cục nhiều chữ. Mắt con người rất ‘’khó tính’’ về vấn đề độ dài chiều ngang của một đoạn văn bản. Nếu quá dài, văn bản trở nên rất khó theo dõi và mắt có xu hướng bỏ qua không đọc. Nếu quá ngắn, văn bản lại trở nên bị chia vụn, khó nhập tâm để đọc hiểu. Nói chung, con số vàng cho vấn đề này là tối thiểu 6 từ cho mỗi dòng và trung bình là khoảng 50-65 kí tự (bao gồm khoảng cách) trên mỗi dòng.

116

Bằng việc sử dụng hệ thống lưới, việc tạo ra các cột sẽ giúp cho việc phân bổ những bố cục dày đặc chữ dễ dàng và nhanh chóng hơn. Bên cạnh đó, nhờ các cột, bạn có thể kiểm soát được độ dài chiều ngang của văn bản. Đây cũng chính là lý do tại sao các tờ báo hay tạp chí luôn luôn sử dụng hệ thống lưới. Nó giúp họ xác định được cách phân chia hợp lý nhanh và dễ dàng, làm cho nội dung dễ đọc và dễ ‘’tiêu hóa’’ hơn.

Tầm quan trọng của hệ thống lưới

117

Káº¾T.

118

Cho dù bạn có phải là fan của hệ thống lưới hay không, thì chúng ta vẫn không thể phủ nhận tính hữu ích mà hệ thống lưới đã mang đến cho việc thiết kế. Và cũng sẽ không có gì đáng ngạc nhiên khi biết rằng các nhà thiết kế đã sử dụng nó từ thế kỉ 13. Lưới có rất nhiều công dụng, từ việc giúp sắp xếp và cân bằng các yếu tố thiết kế, giúp bạn làm được các hiệu ứng tuyệt vời như những ấn phẩm chữ chéo (diagonal typography). Lưới không chỉ là vài đường kẻ ngang dọc nhỏ bé trên trang giấy, nó là một cấu trúc vững chắc, là những đường chỉ dẫn giúp định hình cho bản thiết kế của bạn theo cách bạn mong muốn. Tóm lại, lưới là một hệ thống quản lý mà bạn phải xác định trước khi quyết định thiết kế, đó là điều kiện tiên quyết giúp đỡ trong việc phân chia, cấu trúc, nội dung, các ưu tiên…Tôi không nói rằng một mạng lưới được thiết kế tốt sẽ giải quyết các vấn đề và những phần của thiết kế, xa hơn, nó có thể tạo ra cấu trúc chặt chẽ trong thiết kế và tạo ra những giá trị thẩm mỹ cuối cùng khi ta hoàn thành. Vậy bạn sẵn sàng sử dụng hệ thống lưới chưa?

Hệ thống lưới - Kết

119

TÀI LIỆU THAM KHẢO.

120

Website: idesign.vn http://idesign.vn/tutorial/luoi-va-tam-quan-trong-cua-luoi-trong-thiet-ke/ http://idesign.vn/kien-thuc/nam-buoc-don-gian-thiet-ke-he-thong-luoi-grid-syste/ Website: rgb.vn http://rgb.vn/ideas/explore/he-thong-luoi-trong-thiet-ke http://rgb.vn/ideas/explore/he-thong-luoi-grid-system-la-gi http://rgb.vn/ideas/explore/grid-luoi http://rgb.vn/ideas/explore/ti-le-vang-nhung-dieu-can-biet-va-cach-su-dungvao-thiet-ke-cua-ban Website: vanseodesign.com http://vanseodesign.com/web-design/grid-anatomy/ http://vanseodesign.com/web-design/grid-types/ Website: designschool.canva.com https://designschool.canva.com/blog/grid-design/ Website: vietchigo.vn http://www.vietchigo.vn/nghe-thuat-bo-cuc-va-khuon-hinh-5-16/ Slide: slideshare.net https://www.slideshare.net/admecinstitute/grid-systems-in-graphic-design-by-admec-multimedia-institute https://www.slideshare.net/Leursism/grid-systems Ebook: issuu.com https://issuu.com/minhtrieutr/docs/ebook https://issuu.com/hainguyen94/docs/ntbc Ebook: Layout Essential: 100 Design Principles for USING GRIDS - Beth Tondreau Grid Systems in Graphic Design - Josef Müller-Brockmann Colorme thiết kế cho người mới bắt đầu

Hệ thống lưới - Tài liệu tham khảo

121