Ứng dụng không-gian-âm trong thiết kế

Nếu không có không gian âm, các yếu tố trong thiết kế của bạn không những không nổi bật mà còn trở thành một đống lộn xộn rối mắt.

“Các nốt trong bài hát cần được giãn cách hợp lý để âm thanh được thanh thoát, đó là tất cả những gì làm nên một tuyệt tác âm nhạc.” - Frank Zappa.

Bài viết bởi Steven Bradley, nhà văn cho nhiều chuyên trang như Smashing Magazine, Adobe, TutsPlus, Peachpit Press, .Net Magazine và PayPal’s Online Merchant Network.


Sẽ không có âm nhạc nếu giữa các nốt không có khoảng cách. Bạn hãy tưởng tượng nếu các nốt đều được phát ra cùng một lúc, hoặc phát ra quá nhanh đến nỗi chúng ta không thể nào phân biệt được đâu là nốt kế tiếp, “bản hòa ca” này hẳn sẽ rất đinh tai nhức óc. Zappa đã từng nói: “Phải có khoảng cách giữa các nốt với nhau.” để từng âm đều rõ ràng và nổi bật theo cách riêng của mình.

*Frank Vincent Zappa là nhạc sĩ, nhà soạn nhạc, nhà hoạt động và nhà làm phim người Mỹ.

Để có giai điệu, chúng ta cần các khoảng cách hợp lý. Âm nhạc không chỉ đơn thuần là giai điệu, đó còn là sự cân bằng giữa khoảng cách và âm thanh. Nếu thiếu cả hai thì âm nhạc sẽ không tồn tại.

Điều này hoàn toàn đúng khi áp dụng trong lĩnh vực hình ảnh. Nếu không có không gian âm, các yếu tố trong thiết kế của bạn không những không nổi bật mà còn trở thành một đống lộn xộn rối mắt.


Vai trò của khoảng cách trong thiết kế là gì?

Khoảng cách được ứng dụng để phân chia hoặc kết nối các yếu tố trong thiết kế. Khoảng cách rộng giúp phân chia các yếu tố, trong khi khoảng cách hẹp có vai trò kết nối, tạo nên mối quan hệ giữa các thành phần. Những yếu tố trùng lặp sẽ tạo ra mối liên kết mạnh mẽ.

Thông qua việc điều chỉnh và định hình cho khoảng cách giữa các yếu tố, chúng ta có thể tạo nên nhịp điệu, định hướng và chuyển động. Hay nói cách khác, chúng ta có thể tạo ra mạch thiết kế khi áp dụng không gian âm.

Không gian âm có 3 vai trò chính trong thiết kế.

  1. Phân loại các nhóm yếu tố;
  2. Nhấn mạnh và phân bổ tầng lớp;
  3. Giúp thiết kế được rõ ràng, dễ đọc.

Việc ứng dụng không gian âm đúng đắn sẽ kết nối các trang lại với nhau. Khoảng cách chính là cơ sở cho bố cục. Khi khoảng cách giữa các yếu tố mẫu giống nhau, người xem sẽ không bị lạc hướng. Việc định hướng nội dung sẽ ở cùng một chỗ. Logo của bạn sẽ ở cùng một vị trí khi chuyển qua trang khác. Đồng thời, bạn cũng có thể tạo ra sự khác biệt. Những phần khác nhau trong trang web sẽ có được khoảng cách hợp lý và tạo ra sự phân biệt rõ ràng. Trang web sẽ giống nhau nếu như phần khung mẫu được nhất quán.

Ứng dụng không gian âm khéo léo sẽ tạo ra một thiết kế chuyên nghiệp. Hãy lấy một vài logo khiến bạn có cảm giác ngỡ ngàng làm ví dụ. Bạn sẽ phải suy ngẫm và chiêm nghiệm khá nhiều về không gian trong thiết kế như vậy đấy. Nếu sắp xếp không gian âm khôn ngoan, thiết kế sẽ được đặt đúng trọng tâm và trông chuyên nghiệp hơn. Tuy nhiên, nếu bạn chỉ chú ý đến những chi tiết chính thì phần không gian âm sẽ không phát huy được thế mạnh của mình.

Không gian âm giúp mắt người đọc có thời gian nghỉ ngơi và chiêm nghiệm về thông điệp mà bạn muốn truyền tải. Nó đưa ra gợi ý để người xem suy nghĩ nhiều hơn về tác phẩm. Không gian âm cũng giúp người dùng dễ định hướng nội dung hơn.

Chúng ta có thể ứng dụng không gian để truyền tải nhiều ý nghĩa, chẳng hạn như:

  • Tính chất - giàu có, sang trọng
  • Đơn độc - tự do
  • Sạch sẽ - tẩy trắng, giặt giũ
  • Tinh khiết - sạch sẽ, thuần khiết
  • Tâm linh - thần thánh, kết nối với đấng tối cao
  • Rộng mở - khoảng cách, sự vô tận
  • Bình yên - trầm lặng, tĩnh mịch

Không gian âm có thể mang tính chủ động hoặc bị động. Khi không gian trong thiết kế được cân bằng theo kiểu đối xứng, đó là không gian bị động. Khi không gian âm không có tính đối xứng, đó là không gian chủ động, nghe có vẻ hiện đại và thú vị hơn nhiều.


Cách ứng dụng không gian trong thiết kế

Không gian trong lĩnh vực thiết kế web được chia thành 2 loại:

  1. Không gian âm tiểu - là khoảng cách giữa các yếu tố nhỏ, ví dụ như phần đường biên xung quanh chữ cái và khoảng cách giữa các dòng.
  2. Không gian âm đại - là khoảng cách giữa các yếu tố chủ chốt trong thiết kế. Loại không gian âm này thường lớn và hiện rõ ràng hơn.

Không gian âm tiểu

Không gian âm tiểu liên quan đến khoảng cách giữa các yếu tố nhỏ. Đó là khoảng không giữa các mục trong danh sách cũng như giữa hình ảnh và phần chú thích. Ngoài ra, nó còn là khoảng cách giữa các yếu tố nhỏ trong tổng thể một chi tiết lớn. Ví dụ, bạn có 2 hình ảnh kế nhau, hoặc cạnh bên một thanh công cụ tìm kiếm.

Image result for typography spacing

Không gian tiểu thường hiện diện khá nhiều trong typography. Tôi có viết một bài về tính rõ ràng và dễ đọc trong thiết kế typography cũng như các góc nhìn khi xây dựng phong cách typography, chi tiết sẽ được thể hiện rất rõ ở hai bài viết này.

Hoàn toàn có cơ sở để nói rằng ứng dụng không gian trong typography có vai trò rất lớn trong việc khiến cho con chữ của bạn trở nên mạch lạc và dễ đọc hơn. Điều cần phải lưu ý là đặt giãn cách giữa các dòng, từ đó quyết định màu sắc và sắp xếp bố cục theo chiều dọc trong con chữ.

Không gian âm đại

Như đã trao đổi, không gian có vai trò phân chia hoặc kết nối các yếu tố với nhau. Các hộp (gồm phần khung và nền) thường được sử dụng để kết nối các yếu tố với nhau, hoặc có thể là phân chia chúng. Nhưng hãy cẩn thận, việc sử dụng các chi tiết hình hộp có thể bị lạm dụng và trở nên hơi ngộp. Chúng có thể phát huy vai trò chính của mình là phân chia mọi thứ, tuy nhiên nếu sử dụng quá nhiều thì sẽ ảnh hưởng tiêu cực đến tổng thể trang web.

Khoảng cách có thể được sử dụng thay thế các hộp để phân chia và kết nối mọi thứ. Khoảng cách rộng sẽ giúp phân chia và khoảng cách hẹp giúp kết nối. Khoảng cách là công cụ hiệu quả để phân chia các yếu tố mà vẫn giữ được tổng thể nhất quán cho thiết kế.

Không gian âm có thể được sử dụng để nhấn mạnh một vài chi tiết. Nếu một yếu tố được bao quanh hoặc đặt gần sẽ thu hút sự chú ý vì được phân biệt với các yếu tố còn lại. Nó tự động nổi bật giữa một khoảng không gian xung quanh. Bằng cách nhấn mạnh các yếu tố, chúng ta có thể phân cấp thị giác trong thiết kế.

Image result for visual hierarchy
Phân cấp thị giác trong thiết kế.

Không gian âm có vai trò quan trọng xuyên suốt trong các nguyên lý thiết kế khác. Nó được ứng dụng để cân bằng, theo cả chiều ngang và chiều dọc. Khoảng cách là để ám chỉ nhịp điệu và chuyển động, đồng thời là cơ sở cho học thuyết gestalt.

Còn nhiều bài viết khác tương tự nếu bạn muốn nghiên cứu thêm về ứng dụng của không gian âm trong thiết kế logo.


Kết luận

Trong quyển sách nổi tiếng, The Elements of Style, William Strunk có đề cập đến cụm từ “những từ ngữ không cần thiết.” Chúng ta có thể sửa thành “những yếu tố không cần thiết” khi chuyển qua lĩnh vực thiết kế hình ảnh.

Khi thiết kế một trang web, hãy cân nhắc những chi tiết thật sự cần thiết. Hãy bỏ những thứ dư thừa đi! Tư duy sử dụng khoảng cách sẽ giúp bạn nhận ra chi tiết nào là thật sự cần thiết. 

Có một hệ thống điểm khá thú vị mà tôi thường hay đề cập đến một vài lần, đó là nơi mà tất cả các điểm được phân bố khắp nơi trong một trang web. Bạn sẽ tập trung nhiều điểm hơn đối với các chi tiết quan trọng và các yếu tố ít quan trọng hơn sẽ nhận được ít điểm hơn, từ đó chúng ta sẽ có sự phân tầng trong thiết kế.

Trong quá trình xây dựng tầng lớp, bạn sẽ nhận ra rằng một vài yếu tố sẽ không có điểm, đó là lúc bạn biết được rằng mình không cần chi tiết này trong thiết kế. Bạn cần phải bớt chi tiết đi, thêm nhiều khoảng cách để nhấn mạnh những phần quan trọng nhất. Khoảng cách có lẽ là công cụ quan trọng nhất đối với bất kì nhà thiết kế hình ảnh nào. Vai trò của nó được tìm thấy trong hệ thống lưới, typography và là một thành tố trong rất nhiều nguyên lý thiết kế khác. Khi học hỏi để biết cách nhìn nhận và kiểm soát khoảng cách trong thiết kế, chúng ta đã nâng tầm kĩ năng thiết kế lên một bậc mới.

Nếu tìm được một thiết kế ưa thích, hãy dành thời gian nghiên cứu chúng, đặc biệt là tìm ra ứng dụng của không gian âm trong đó. Hãy học cách ứng dụng triệt để và hiệu quả không gian âm để có thể tạo ra một thế kế đúng chuẩn cũng như cách kiểm soát khoảng cách trong thiết kế để giao tiếp thú vị và hiệu quả hơn.


Tác giả: Steven Bradley
Người dịch: Đáo
Ảnh bìa: Canva
Nguồn: Vanseodesign