Trong thiết kế đồ họa, có rất nhiều yếu tố cần phải xem xét phối hợp cùng với nhau để tạo nên một ấn phẩm không chỉ truyền tải được thông điệp của bạn đến khách hàng, mà còn chuộng mắt cho người nhìn. Ví như màu sắc, hình ảnh, chữ viết, bố cục tổng thể… Không khó để bắt gặp những tài liệu hay những bản thiết kế bắt mắt, nhưng bạn có bao giờ tự hỏi rằng, điều gì đã làm cho ấn phẩm đó trở nên cân bằng, gọn gàng, bóng bẩy và hiện đại?
Đó chính là Khoảng trắng - yếu tố thường bị bỏ qua nhiều nhất trong thiết kế đồ họa.
Vậy, khoảng trắng là gì? Vì sao nó có thể nâng tầm hoặc phá vỡ một bản thiết kế? Và nó đã làm điều đó như thế nào? Hãy cùng Yen Design & Brand Style định nghĩa lại yếu tố này và vai trò thiết yếu của nó trong bài viết sau đây nhé!
Khoảng trắng là gì?
Khoảng trắng là những khoảng trống trong bản thiết kế, không có bất kỳ yếu tố nào khác. Nó có thể là những khoảng trống giữa các hình ảnh, giữa các đoạn văn bản, hoặc thậm chí là những khoảng trống xung quanh các yếu tố đồ họa khác.
Nhiều người nghĩ rằng khoảng trắng chỉ là những khoảng trống vô nghĩa, không có tác dụng gì. Nhưng thực ra, khoảng trắng lại đóng một vai trò vô cùng quan trọng trong thiết kế đồ họa.
Mặc dù chúng ta hay gọi chúng là white space, nhưng không nhất thiết khoảng trống đó phải mang màu trắng, nó có thể mang bất kỳ màu sắc nào khác, miễn là trơn tru và trống rỗng.
Chúng ta lướt qua nó nhiều lần, thậm chí không để ý tới sự hiện diện của nó. Ví dụ như bản thiết kế trang chủ chính thức trên website của Apple như hình dưới đây:
Đây là một trang hoạt động hiệu quả bởi dễ nhìn, có điểm nhấn và gọn gàng. Nó rõ ràng và làm bật lên tính hiện đại của thương hiệu Apple.
Tại sao ư? Bí quyết ở đây chính là những khoảng trắng.
Không phải lúc nào chúng ta cũng cần nhồi nhét quá nhiều thông tin hay elements vào một bản thiết kế. Bạn thấy đó, Apple đã chừa rất nhiều khoảng trống trên trang chủ của họ chỉ để tăng trải nghiệm đọc của người dùng. Điều này mang lại hiệu quả rất lớn cho thương hiệu của họ.
Vậy thì, câu hỏi đặt ra ở đây là, khoảng trống đã hoạt động như thế nào để đạt được mục tiêu đó?
Vai trò của những khoảng trắng
Vai trò cốt yếu nhất của khoảng trắng là để định hướng sự chú ý của khách hàng, giúp họ tập trung vào những yếu tố chính trên màn hình. Khi bạn không có cái gì khác để nhìn vào, bạn sẽ ít bị phân tán hơn và chăm chú vào những thông điệp chính đang hiện hữu trước mặt.
Hay nói cách khác, khoảng trắng giúp cho việc nhấn mạnh thông điệp chính của thương hiệu được hiệu quả hơn. Trong trường hợp này, Apple muốn bạn tập trung vào sản phẩm Macbook Pro mới nhất của họ.
Khoảng trắng không chỉ tập trung vào thông điệp chính, nó còn cải thiện tính dễ đọc, rõ ràng, làm tăng trải nghiệm của người xem khi tiếp cận với bản thiết kế đó. Như ví dụ trên của Apple, chúng ta cảm thấy có nhiều không gian hay sự thông thoáng hơn khi đọc và hấp thụ nội dung trên trang chủ này.
Đây là điều rất quan trọng bởi vì nó quyết định việc một người sẽ ở lại trang của bạn và đọc nó xuyên suốt hay chỉ bấm vào và rồi thoát ra ngay sau đó vì quá choáng ngợp.
Và, điều gì khiến người ta choáng ngợp nhất khi đọc trực tuyến?
Những mảng tường đầy chữ.
Tại sao người ta thích đọc những bài viết ngắn hơn, khoảng 400 từ trên website so với 50.000 từ trong 1 cuốn sách trong khi sách cung cấp nhiều thông tin hơn?
Bởi vì con người không phải là những bộ máy.
Chúng ta sẽ bị choáng ngợp với những mảng tường lớn chi chít chữ nghĩa, chưa kể đó toàn là những ngôn từ chuyên ngành khó hiểu. Đọc một đoạn văn dài, từ đầu đến cuối dường như là một cuộc chiến không hồi kết. Đó là lý do vì sao nhiều người không thích những bản báo cáo khoa học dài thượt mà chỉ muốn tham khảo 1 hay 2 nội dung cốt yếu trong đó mà thôi.
Có lẽ bạn đã nghe về những báo cáo khoa học chứng minh lợi ích của thực phẩm hay việc tập thể dục. Nhưng bạn đã bao giờ thật sự đọc chúng? Mình chắc chắn là chưa. Nhưng bạn sẽ vui vẻ thoải mái khi chia sẻ những sự kiện hay nội dung trọng tâm đã được tóm tắt từ bản báo cáo đó cho người khác.
Thêm khoảng trắng vào giữa các mảng tường của văn bản giúp ta chia chúng thành nhiều phần để người đọc dễ hiểu hơn.
Ngay cả bài viết này cũng là một ví dụ về điều đó. Nếu mình viết bài này theo dạng bài luận điển hình ở trường đại học, hay dạng long-form không phân cấp rõ ràng, liệu sẽ thu hút bạn đọc đến với mình và nội dung mình chia sẻ?
Hãy nhìn vào hai đoạn văn bản sau, cả hai đều có số lượng từ giống nhau. Bạn có nhiều khả năng đọc qua từ đầu đến cuối cái nào hơn?
Mặc dù bài viết bên phải có vẻ dài hơn nhưng các khối văn bản dài của bài bên trái sẽ khiến bạn khó tập trung hơn nhiều, phải không?
Phần bên phải dễ đọc hơn vì sau mỗi đoạn bạn đọc, mắt bạn sẽ được nghỉ ngơi. Chưa kể đọc 8 đoạn văn ngắn luôn dễ hơn đọc hai đoạn văn dài.
Giống như bạn đang xem một bộ phim truyền hình dài tập trên Netflix vậy. Việc nghỉ giữa các tập giúp cho mắt và não của bạn được tái tạo năng lượng, khiến bạn thích thú chờ đón tập tiếp theo hơn.
Cuối cùng, có một lợi ích lớn khác của khoảng trắng, đó là tạo ra sự cân bằng và phân cấp trực quan trong bản thiết kế.
Việc sắp xếp các yếu tố thiết kế của bạn theo hệ thống phân cấp trực quan là đỉnh cao của một ấn phẩm thành công. Hệ thống phân cấp giúp hướng dẫn mọi người tìm kiếm thông tin nào, ở đâu theo thứ tự đầu tiên, sau đó là thứ hai, rồi thứ ba,...
Lấy ví dụ về hệ thống phân cấp quản lý trong một công ty như sau:
Khi nhìn vào hệ thống phân cấp của công ty, bạn sẽ biết rõ ai là CEO, ai là giám đốc, cấp dưới và cấp dưới nữa,... Điều này giúp bạn dễ dàng tìm ra ai làm gì và vị trí của mỗi nhân viên là ở đâu. Nhân viên cũng dễ dàng xác định được họ phải báo cáo với ai và không phải báo cáo với ai.
Thêm một ví dụ khác về poster món tráng miệng cocktail của nhà thiết kế Tugba Ozcan:
Rõ ràng Tugba đang định hướng người xem nhìn vào điều gì đầu tiên? Đó là hình ảnh lớn của ly cocktail, sau đó là tên “Moscow Mule” và cuối cùng là dòng chữ ở phía dưới. Nhiều người lại đọc từ trái sang phải nên có thể bạn sẽ đọc thành phần ly nước ở bên trái trước, sau đó là hướng dẫn chuẩn bị – đây là một thứ tự hợp lý để đọc, phải không?
Nhìn vào đoạn văn bản trên, bạn dễ dàng phân biệt tiêu đề với phần còn lại của nội dung. Đó là sức mạnh của khoảng trắng.
Mặc dù cả tiêu đề và nội dung đều có cùng phông chữ, độ dày và kích thước, bạn vẫn có thể phân biệt giữa hai loại này. Đây là cách khoảng trắng được sử dụng để thiết lập hệ thống phân cấp trực quan, tách biệt rõ ràng các yếu tố với nhau và làm cho chúng nổi bật.
Tiếp theo, chúng ta cùng phân tích các loại khoảng trống trong thiết kế:
KHOẢNG TRẮNG CHỦ ĐỘNG & THỤ ĐỘNG
Có hai cách để tiếp cận việc thêm khoảng trắng khi thiết kế, chủ động và thụ động.
Những khoảng trắng chủ động là việc bạn cố ý để trống một số vùng trên bản vẽ. Đây là cách tiếp cận mà các nhà thiết kế chủ yếu quan tâm đến.
Cách tiếp cận này được sử dụng để nâng cao trải nghiệm người dùng và giúp mọi người điều hướng thiết kế một cách dễ dàng. Nó cũng được sử dụng để nhấn mạnh thông điệp chính của bản thiết kế.
Ngược lại, những khoảng trống thụ động là những khoảng trống vô tình được thêm vào để làm cho thiết kế dễ nhìn hơn.
Loại này bao gồm khoảng cách giữa các chữ cái (kerning), từ (theo dõi) hoặc dòng (leading). Nó cũng có thể bao gồm khoảng cách giữa các ký tự nhất định, chẳng hạn như khoảng trắng ở giữa chữ “O”.
Nhìn vào ví dụ trên, tôi đã thiết kế 3 hình ảnh để cho bạn thấy khoảng trắng chủ động và thụ động hoạt động như thế nào.
Ở bên trái, không có khoảng trắng. Đây là lý do tại sao văn bản trông có vẻ bị nén và mọi thành phần khác, như tiêu đề và hình ảnh, lại lộn xộn với nhau.
Trong hình ảnh ở giữa, chúng tôi đã thêm một số khoảng trắng thụ động. Có nhiều khoảng trống hơn giữa các đoạn văn và tiêu đề, đồng thời có nhiều phần mở đầu hơn trong phần nội dung, điều này làm cho nội dung dễ đọc hơn nhiều.
Cuối cùng, trong ảnh bên phải, bạn sẽ thấy cách tiếp cận tích cực đối với khoảng trắng. Chúng tôi đã thêm nhiều khoảng trống hơn ở bên phải và bên trái của nội dung và hình ảnh. Ngoài ra còn có một khoảng trống lớn hơn nhiều giữa tiêu đề và nội dung, điều này làm cho tiêu đề nổi bật hơn.
KHOẢNG TRẮNG MACRO & MICRO
Một khái niệm khác có mối quan hệ chặt chẽ với khoảng trắng thụ động và chủ động, đó là khoảng trắng vĩ mô (macro) và vi mô (micro).
Khoảng trắng macro thường được tạo nên khi bạn cố tình để trống nhiều mảng trong bản thiết kế.
Mặt khác, khoảng trắng vi mô là kết quả của cách tiếp cận thụ động như đã đề cập ở trên, bao gồm khoảng cách giữa các ký tự và dòng văn bản.
Điều này sẽ được minh họa tốt hơn bằng ví dụ sau:
Đây là trang chủ của The New Yorker. Họ có một bố cục gọn gàng và đẹp mắt, nhấn mạnh vào các câu chuyện, tin tức. Họ cũng tận dụng tốt khoảng trắng, nhưng hãy xem xét cách họ kết hợp cả khoảng trắng vĩ mô và vi mô để đạt được cái nhìn cân bằng về mặt thị giác.
Trong hình ảnh trên, mình đã đánh dấu khoảng trắng vĩ mô bằng màu đỏ và khoảng trắng vi mô bằng màu xanh lam. Hy vọng rằng bây giờ bạn có thể hiểu rõ ràng ý nghĩa của chúng tôi về khoảng trắng “vĩ mô” và “vi mô”.
Ở đây, khoảng trắng vi mô là khoảng cách giữa các mục menu trong tiêu đề cũng như giữa các danh mục. Lề giữa các bài viết cũng là khoảng trắng vì nó giúp bài viết có hơi thở.
Khoảng trắng vĩ mô được thể hiện trọng yếu vì nó bao phủ phần lớn hơn của trang web. Rõ ràng là nhà thiết kế đã cố tình thêm không gian rộng rãi bằng cách điều chỉnh lề và khoảng đệm giữa văn bản. Những người sáng tạo nội dung hay viết quảng cáo đã làm rất tốt việc giữ tiêu đề ở mức tối thiểu để phù hợp với bố cục của thiết kế.
Một khía cạnh khác là logo và danh mục. Các danh mục có thể được đặt trong tiêu đề, gần logo, những nhà thiết kế đã tách chúng ra và đặt cho chúng một vị trí khác, tạo khoảng trống trên trang một cách tài tình.
Thiết kế khoảng trắng như thế nào cho hiệu quả?
Chúng ta đã tìm hiểu về khái niệm khoảng trắng và cách nó hoạt động. Vậy, làm sao để thêm khoảng trắng vào thiết kế cho hợp lý?
Căn lề (MARGINS)
Lề là một trong những điều đầu tiên bạn cần quan tâm khi muốn thiết lập khoảng trắng. Trước tiên, hãy xác định sự ngắn gọn, súc tích mà bạn muốn thể hiện trên bản thiết kế đang làm.
Sau đó hãy chọn cách thêm khoảng trắng vĩ mô hay vi mô sẽ tốt hơn trong ấn phẩm đó.
Hãy nhớ lại trang chủ Apple mà chúng tôi đã phân tích. Rõ ràng là khoảng trắng vĩ mô truyền tải cảm giác tối giản và hiện đại hơn. Thêm vào đó, bạn cũng nên ghi nhớ tông màu bạn sẽ sử dụng khi sử dụng lề cho thiết kế của mình.
Khoảng đệm (PADDING)
Đệm là khoảng trống bên trong một thành tố thiết kế. Phần đệm và lề thường bị nhầm lẫn nên đây là hình minh họa có thể giúp bạn hiểu rõ hơn:
Lề nằm ngoài phần tử và mở rộng từ ranh giới của trang, trong khi khoảng đệm lại tính từ thành tố bạn đang thiết kế vào trung tâm ấn phẩm.
Bạn có thể sử dụng phần đệm để thêm khoảng trắng bên trong các phần tử và làm cho bản thiết kế trông “dễ thở” hơn.
Leading
Leading là khoảng cách dọc giữa các dòng chữ.
Việc có phần leading tối ưu giúp bản thiết kế của bạn trông rõ ràng hơn, dễ đọc hơn và cải thiện trải nghiệm đọc của khách hàng.
Bạn có thể dễ dàng điều chỉnh phần đầu của bất kỳ ấn phẩm nào trong hầu hết các công cụ thiết kế. Hầu hết các công cụ thiết kế đều có cài đặt tự động khoảng cách các dòng theo mặc định. Tuy nhiên, bạn hoàn toàn có thể tùy chỉnh theo ý muốn của mình để thêm khoảng trắng vào ấn phẩm.
GHI NHỚ
Khoảng trắng đóng một vai trò quan trọng trong thiết kế đồ họa. Nó cho phép các thiết kế của bạn có hơi thở, phát triển hệ thống phân cấp trực quan, cải thiện mức độ dễ đọc và vẫn đảm bảo tính thẩm mỹ.
Khi thiết kế với khoảng trắng, bạn có thể tiếp cận nó theo hai cách chính, chủ động hoặc thụ động, vĩ mô hoặc vi mô. Bất kể sắc thái nào, việc bắt đầu với khoảng trắng rất dễ dàng.
Với một chút điều chỉnh về lề, phần đệm và phần đầu, bạn có thể dễ dàng cải thiện hình ảnh của dự án. Tuy nhiên, như với bất cứ điều gì khác, việc làm chủ khoảng trắng rất khó và một khi bạn thiết kế nhiều hơn, bạn sẽ dần dần hiểu được điều gì hiệu quả và điều gì không.
Theo Mediacaterer
Commenti