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

Trong các trường dạy về thiết kế, đặc biệt là thiết kế đồ họa. Có hai điều có lẽ là thiếu sót lớn nhất trong việc bổ xung kiến thức cho học sinh/sinh viên đó là kiến thức về Hệ thống lưới và Typography.

 

Trong bài này iDesign có gắng biên soạn một bài viết ngắn gọn nói lên tầm quan trọng của Hệ thống lưới trong thiết kế đồ họa nhằm giúp các bạn yêu thiết kế nằm lòng kiến thức về Hệ thống lưới, qua đó nâng cao kỹ năng nghề nghiệp.

 

 

Giới thiệu

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.

 

Lưới là một cấu trúc 2 chiều được tạo thành từ các đường giao cắt của trục dọc và ngang được sử dụng để cấu trúc nội dung. Lưới giúp các nhà thiết kế tổ chức hình ảnh và văn bản một cách hợp lý, dễ nhìn.

 

Trong mỹ thuật lưới dùng để chỉ ra các tỉ lệ, số đo của người, hay các đối tượng. Các họa sĩ dùng để hỗ trợ vẽ, điêu khắc, tranh tường .v.v

 

 

Leonardo DaVinci, “The Vitruvian Man” 1492.

 

Tỉ lệ vàng

Nhắc đến hệ thống lưới, người ta thường nói tới tỉ lệ vàng. Tỉ lệ vàng là một chuỗi số sấp xỉ khoảng 1,6180339887.

 

 

 

 

Hình minh họa chỉ ra rằng:    

 

và   

 

Ta cũng có thể gặp Tỉ lệ vàng trong dãy số vô hạn của Leonardo da Pisa mà người ta gọi là dãy số Fibonacci: (Số sau bằng tổng hai số liền trước nó)

 

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233…..

 

Tại sao lại có tỉ lệ vàng trong dãy số Fibonacci? Thật vậy, nếu dãy số đủ dài ta có thể lấy số liền sau chia cho số đứng trước nó, ta sẽ được tỉ lệ vàng 1,618033988..

 

 

Tỉ lệ vàng xuất hiện trên hình lục giác và ngôi sao.

 

 

 

 

Vòng xoắn này xuất hiện tỉ lệ vàng (trong Illustrator có cung cấp vòng xoắn này)

 

Phát triển

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í layout 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ỹ.

 

Bằng những chỉ dẫn giữa 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 các sử dụng có phần giáo điều (cứng nhắc) của nó, dẫn tới một số nhà thiết kế từ chối sử dụng.

 

Sự xuất hiện của Apple Macintosh và sự chuyển đổi từ các nhà thiết kế chữ – typographer thành các nhà thiết kế đã dẫn tới một làn sóng thử nghiệm sử dụng lưới nhưng phần lớn là không tuân theo luật của Müller và Tschihold.

 

Lưới Typographic hiện nay đang được giảng dạy tại các trường thiết kế, nó là một công cụ hữu ích cho nhiều dự án, nhưng không phải là một yêu cầu hoặc khởi điểm cho các thiết kế.

 

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.

 

Với lưới thì như đã nói ở trên. Trước khi thiết kế (bìa sách, poster, tạp trí .v.v.) 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í.

 

 

 

 

 

Lưới dùng để xác định khu vực nội dung của trang

 

… một vài ví dụ của việc sử dụng lưới trong thiết kế in ấn.

 

 

 

 

 

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ế web hiện đại

Lưới trong thiết kế web đã trở nên quá quen thuộc hiện nay. 

 

Người được nêu tên đầu tiên trong việc áp dụng hệ thống lưới từ thiết kế in ấn vào thiết kế web chính là Khoi Vinh – ông sinh tại Việt Nam năm 1971 nhưng sống tại Anh từ năm 1973.

 

Các hệ thống lưới tiêu chuẩn hiện nay đều được cung cấp những mẫu có sẵn (960, 978, 1140px). Bạn chỉ cần download và sắp xếp các yếu tố theo cách bạn muốn, nhưng tuân theo các đường lưới có sẵn này.

 

Một số trang web giúp phổ biến việc phát triển hệ thống lưới cho web phải kể tới 960.gs, subtraction.com, designbygrid.com, …

 

Thậm trí nếu máy bạn có cài đặt Adobe Cs5, bạn có thể cài đặt Modular Grid pattern để tự tạo lưới theo ý muốn.

 

1. Chắc chắn bạn đã cài Adobe Extension Manager CS5.

2. Download Modular grid Pattern

2. Chạy từ menu bar: Window > Extensions > Modular Grid Pattern.

3. Điều chỉnh lưới và nhận kết quả.

 

Ví dụ về lưới cho thiết kế web, iDesign đã giới thiệu rất nhiều, bạn có thể vào thư mục Website để tham khảo. Tuy nhiên bạn cũng có thể xem các hình dưới đây để hiểu hơn cách làm việc với lưới đối với website (cũng có thể dùng cho in ấn)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Comments

31 Bình luận

  • the moon 13/07/2012

    thank idesign , bài viết này thật sự cuốn hút mình … mình thích một cái gì đó như nó và dễ dàng tạo ra các bố cục tốt .thank again

  • Vũ Quyền 30/05/2012

    Sao id post bài mà không đăng nguồn?

    • iDesign 30/05/2012

      Mình tổng hợp để viết, vậy ghi nguồn thế nào bạn?

      • minwon 22/07/2012

        sưu tầm , tổng hợp ? Ghi thế đó…

        • iDesign 23/07/2012

          Bất cứ tác giả của 1 bài viết nào đều là kiến thức người ta sưu tầm, tổng hợp và khả năng của người viết. Một bài viết sẽ ghi là sưu tầm và tổng hợp khi copy hoặc dịch lại hoàn toàn. Bài này không thuộc dạng trên.

  • Heliano 27/10/2011

    Bài viết hay quá :x

    @ viiiprock: Bạn học thiết kế thế nào mình ko biết chứ từ những năm đầu mình học mĩ thuật, giáo viên sẽ dạy những thứ căn bản nhất. Lưới là 1 trong số đó!

    Tạo lưới là bước căn bản, cần làm đầu tiên để thể hiện ý tưởng một cách chính xác. Một ví dụ nho nhỏ là bạn sẽ thể hiện một module hay một mẫu thiết kế trên một tờ giấy trắng bóc như thế nào nếu không vẽ lưới ra để định hình? Sau này học đến các môn đồ họa hỗ trợ thì dần dần có nhiều bạn “bỏ quên” các yếu tố cơ bản đó.

    Lưới là một công cụ bổ ích, nó không làm giảm khả năng sáng tạo mà chỉ giúp bạn thể hiện sự sáng tạo của bạn một cách chính xác nhất.

  • Leon7 18/09/2011

    Cho tới khi thấy được ví dụ về thiết kế layout web bên trên thì mình đã tin sái cổ vào việc PHẢI tạo lưới trước nhất. :D
    Cám ơn rất nhiều!

  • quocbao.art 11/08/2011

    Xin cảm ơn về bài sưu tập của idesign. Tôi cũng là nhà thiết kế không chuyên, trước đây tôi cũng bảo thủ về các nguyên tắc lưới và cho rằng các nguyên tắc sẽ cản trở tính sáng tạo. Nhưng sau này khi áp dụng các quy tắc cơ bản này thì bố cục thiết kế có bố cục rõ ràng, trật tự, và tôi thấy nó giúp cho tôi sáng tạo hơn rất nhiều chứ không có gì là hạn chế cả.

  • Ngan Ho Trung (Id Creative) 01/06/2011

    Tôi nghỉ basana nói đúng? tôi đã sd và học hỏi rất nhìu từ hệ thống chuẩn lưới tạo ra mà bạn nói.Những nhà sáng tạo chuyên nghiệp họ đã sd nhuần nhuyển và họ đã tạo ra chuẩn mực riêng từ tỉ lệ đó. Nó không bóp chết sáng tạo mà nó hổ trợ rất nhìu nếu tư duy bạn dã sư dụng qua (nếu bạn hiểu)…từ kinh nghiệm đó.

    Tài liệu này trước đây là toàn về tiếng Anh.Tôi đã biết nó xuất phát kinh nghiệm mà các nhà thiết kế sáng tạo chuyên nghiệp đã đúc kết và đúc tỉa ứng dụng…nếu là hơn 60 -70 % tại sao không ứng dụng và bạn sẽ thấy hiệu quả.

    Trong hệ thống chuẩn mực các tài liệu thiết kế print nó đã chuẩn hóa bằng các tỉ lệ chuần quốc tế. Mọi góc độ mắt nhìn tương đối cho mọi đối tượng cảm tính căn bằng.

    Trong thiết kế tài liệu “Brand Identtity Guidelines”bạn phải hiểu nó thì mới quy chuẩn được. Và mỗi Design cần bỏ qua cái tôi để hoàn thiện và không bị bỏ lại phía sau chính cái tôi của mình.

    Bạn càng ý tưởng và sáng tạo chuyên nghiệp…thì tài liệu trên là một điều quý nhất tôi gặp.(trước đây rất khó khăn vì dịch ra tiếng Anh).

    Xin cám ơn …và nếu chỉ dẫn lại tôi vẫn chỉ cho các bạn sau nầy tôi vẫn hướng như vậy!

    • the moon 13/07/2012

      bạn nói rất hay và tớ nghĩ sẽ cám ơn lời nhắ nhở của bạn … vâng tôi thích một nhà thiết kế chuyên nghiệp và tôi biết họ phải nắm bắt chắc chắn các qui tắc cơ bản , và bạn đã nhắc nhở mọi người điều đó ..

  • iluvdes 23/02/2011

    @viiiprock ko bàn đến quan điểm của bạn thế nào nhưng tôi thấy cách bạn cm cũng đủ thấy bạn trẻ con và bảo thủ thế nào, chứ chưa nói thiếu sót về kiến thức căn bản.. Bạn banasa cũng ko thèm đôi co với kiểu như bạn nữa..
    học nữa đi bạn..

  • d2n 22/02/2011

    Cái này có áp dụng cho việc thiết kế logo được ko nhỉ?

    Mình thấy trong những thiết kế logo có biểu diễn trên lưới nữa, mà ko bít cách thực hiện.

    Mong iDesign có 1 bài hướng dẫn. Tks for share!

  • lư lan 21/02/2011

    (principles)
    bản thân mình là 1 người thiết kế ko chuyên, nhưng những sản phẩm của mình cũng dc khách hàng đón nhận nhiều. mình luon tự hỏi, tại sao mình vẫn chưa thật hài lòng với nó. Qua những bài viết hữu ích của idesign đã giúp mình nhận diện nhiều hơn những thiếu sót và học hỏi nhiều hơn. cảm ơn idesign nhiều lắm!
    và mình nghĩ, mỗi người có tư duy khác nhau và ở 1 khía cạnh nào đó mình nên học hỏi để hoàn thiện bản thân hơn.

  • viiiprock 19/02/2011

    Oh nếu bạn chắc chắn về mình như thế thì vậy là bạn không chỉ giỏi về thiết kế, mà còn thạo những môn thần thông, chỉ cần xem comment của tôi là bạn biết tôi thiếu kiến thức căn bản và chưa bao giờ sử dụng lưới để thiết kế. Quá giỏi, quá giỏi, bạn rất chi là tuyệt đấy ;)

    • Thanh Sơn 02/12/2011

      đồng chí này nói nghe sợ thật, theo tôi thì bạn vừa thiếu kiến thức căn bản vừa trẻ con vừa bảo thủ ấy chứ

      trên mạng đúng là ko thiếu j` template nhưng designer ko dùng template đó là bởi vì người ta có thể tự sáng tạo được cho riêng mình chứ ko phải vì người ta ko tuân theo quy tắc, chỉ có các bác việt nam lười mới đi lấy về rồi biến thành của mình thôi, nhưng mà từ ăn trộm (lấy về và sử dụng luôn) thành ăn cắp (lấy về, thêm thắt sửa sang cho nó thành của mình) cũng là cả một nghệ thuật đấy :))

      việc chia ô và ném nội dung vào ô chẳng nói lên cái j` cả, quan trọng là sự sắp xếp nội dung có hướng người dùng tới cái mà mình muốn hay ko, và việc này còn phụ thuộc vào rất nhiều yếu tố như màu sắc, ko gian mà nội dung chiếm… một sản phẩm thiết kế xuất sắc ngồi phân tích thì ra cả đống các quy tắc cứng nhắc chứ đừng nói là mỗi lưới

      bạn hô được câu chia ô và đặt theo vị trí thì ko có j` khó cả thì một bạn là cao thủ, hai là chưa biết căn bản là cái j`, ở đây tôi thấy bạn ở trường hợp thứ 2 là hơn :))

      cố gắng ngồi làm mấy bài bố cục hình tròn vuông tam giác căn bản đi đã rồi hẵng phán nó dễ hay ko ;]

  • viiiprock 19/02/2011

    bạn idesign nên đọc kĩ lại comment của mình nhé, còn bạn basana thì mình không ý kiến gì với bạn nữa, chắc hẳn bạn rất uyên thâm nhờ ô lưới rồi =))

    • basana 19/02/2011

      Mình không uyên thâm nhờ ô lưới – nhưng mình thiết kế tốt hơn nhờ lưới, và lưới là một phương pháp sử dụng cơ bản. Nhiều nhà thiết kế sau này muốn thử nghiệm nhiều hệ thống lưới (không theo quy tắc mà Müller và Tschihold đặt ra) chứ không phải là không công nhận lợi ích của nó.

      Tôi dám chắc bạn thiếu rất nhiều kiến thức cơ bản thông qua cách bạn comment.

  • viiiprock 19/02/2011

    =)) haha

  • iDesign 18/02/2011

    Bạn viiprock nói 1 câu sai 100% là lưới chỉ dùng cho web… trong khi lưới của web xuất phát từ thiết kế in ấn mà ra…

    • Ngan Ho Trung (Id Creative) 01/06/2011

      web làm việc tính toán dseign bằng pixel? chuẩn layout website và 800 x600 1024 x 768… tại sao có thông số đó?. Design trên đó…sao đây? lấy chuẩn thiêt kế A4 = 21.29.7cm củng tính theo chuẩn 800 x600 pixel a ? hic…

      • iDesign 01/06/2011

        hỏi gì tùm lum thế bạn ơi.
        Thông số 800×600 và 1024×768 là độ phân giải màn hình. Thường thì các giao diện được thiết kế nhỏ hơn với độ phân giải màn hình (loại phổ thông nhất). Trước khi khi màn hình 800×600 còn phổ biến thì tỉ lệ thiết kế khoảng 775×600. Sau này màn hình 1024 phổ biến hơn thì thiết kế tỉ lệ 960x…
        Chuẩn hệ thống lưới cho web là dựa trên chuẩn lưới dành cho in ấn.

  • viiiprock 18/02/2011

    Ở khía cạnh nào đó thì cũng hay đấy, nhưng nói thật mình rất ghét cái gì máy móc lắm.

    • basana 18/02/2011

      Bạn gét “máy móc” cũng được thôi. Nhưng đầu tiên hãy thực hiện thật nhuần nhuyễn nó, sau đó bạn có thể làm gì bạn thích :D

      • viiiprock 18/02/2011

        Cái đó là do quan niệm, việc chia các ô và đặt theo vị trí thì chẳng có gì là khó cả, template đầy rẫy, nhiều nhà thiết kế từ chối sử dụng cũng chẳng có gì lạ. Theo mình thì việc khung lưới áp dụng cho chủ yếu cho web thôi, thiết kế in ấn thì cũng nên hạn chế dùng, hoặc dùng trong dàn trang báo, catalogue gì thôi, vì khung lưới sẽ làm hạn chế khả năng tư duy và cảm nhận sáng tạo, bố cục.
        Have fun!

        • basana 18/02/2011

          Không có gì là khó? bạn đã thử làm chưa mà nói không khó. đâu phải có các ô bạn đặt vào là đẹp???.. nghĩ đơn giản quá, như bài viết nói, lưới là một công cụ hỗ trợ .. giống như bạn thích dùng Illuss hay Indesign hoặc PTS để thiết kế.
          Không hiểu tại sao bạn nói lưới làm giảm tư duy sáng tạo và bố cục –> chứng tỏ bạn chưa bao giờ dùng nó.
          Trong bài nói template, nhưng template ở đây ko phải là một mẫu để vứt mọi thứ vào. Template là những nghiên cứu khoa học về thói quen sử dụng nhằm giúp nhà thiết kế có sản phẩm gần gũi với người xem. Ví dụ: chữ kích thước 12pt thì sẽ có bao nhiêu chữ trên 1 dòng, và 1 khối văn bản sẽ có bao nhiêu dòng thì thích hợp.

          … học nữa đi bạn

  • cvO_O 18/02/2011

    những bài viết như thế này thật sự rất bổ ích cho công việc thiết kế! Xin cảm ơn rất nhiều !

  • BiGds 17/02/2011

    Cám ơn Idesign, bài viết rất hữu ích :D

Gửi bình luận

  / kéo logo vào vị trí để gửi bình luận