Khi thiết kế web, chúng ta thường xó xu hướng tập trung vào các yếu tố thông thường của công việc thiết kế như font chữ, màu sắc, hình ảnh. Tuy nhiên còn một yếu tố quan trọng thường không dễ nhận biết, đó là khoảng trắng hay khoảng trống (White Space) giữa các phần tử trong bản thiết kế. Thật không may khi hầu hết các nhà thiết kế web và đa số các khách hàng đều nghĩ rằng khoảng trắng là khoảng không gian trống vô nghĩa. Nói một cách khác, họ cho rằng khoảng không gian trống đó nên được lấp đầy để người xem có thể có cái gì đó để đọc, để nhấp chuột hoặc để mua hàng. Thật sự thì khoảng trắng đó phục vụ cho một mục đích khác quan trọng hơn nhiều. Nó thiết lập sắc độ của bản thiết kế và tác động đến khả năng sử dụng của trang web một cách đáng kể.

Khoảng trắng (White Space) là gì?

Về cơ bản, khoảng trắng là những ký tự rỗng, không hiển thị bất cứ thứ gì khi bạn gõ trên bàn phím, thí dụ như phím tab, space và phím trở về. Đây là những ký tự rỗng nhưng khoảng trắng không phải chỉ là như vậy.

Khoảng trắng trong thiết kế là khoảng không gian bao quanh các phần tử thiết kế giúp chúng nổi bật và tách biệt với các phần tử khác. Nó bao gồm khoảng trắng ở biên đối với các trang web có thiết kế bề ngang cố định (fixed width) và khoảng trắng bao quanh lề (margin) và vùng đệm (padding) của hình ảnh hoặc các khối văn bản (text block). Khoảng trắng cũng bao gồm khoảng cách giữa các dòng văn bản (leading) và khoảng cách giữa hai chữ (tracking hay kerning).

Một điểm đáng chú ý nữa, 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.

Khoảng trắng ảnh hưởng đến thiết kế như thế nào?

Có hai cách để sử dụng:

Rõ ràng

Khoảng trắng ở qui mô nhỏ (như khoảng cách dòng – leading, khoảng cách chữ – kerning hay tracking) có thể tăng hoặc làm giảm sự rõ ràng của một trang web. Nếu bạn có qua nhiều nội dung cần đặt trên một khoảng không gian hạn chế, bạn có thể cần tăng khoảng trống giữa các chữ để người xem dễ đọc. Nếu bạn để ý bản in của tờ Wall Street, tờ báo thường trình bày nhiều cột và chừa lề và các vùng đệm rất ít, bù lại họ thường họ thường tăng khoảng cách giữa các dòng chữ và giữa các chữ để giúp việc đọc thoải mái hơn.

Sắc độ

Khoảng trắng ở cấp độ vĩ mô (bao quanh các chủ thể lớn nhất trên trang web) có thể tạo sự sang trọng hoặc gây cảm giác chất lượng rẻ tiền đối với một bản thiết kế. Càng nhiều khoảng trắng càng có thể tạo một bản thiết kế có phong cách sang trọng, chất lượng cao. Nếu bạn thường xem các mẫu quảng cáo trên các tạp chí phụ nữ đắt tiền, bạn sẽ thấy hầu hết các mẫu quảng cáo có không gian thoáng, chữ nhỏ và chừa khoảng trắng rộng rãi cho hình nền. Ngược lại, những mẫu quảng cáo hay được vất vào cửa nhà bạn thường đầy ắp các khối chữ to bao quanh một mớ hình ảnh lấp đầy trang và gần như rất ít khoảng trắng. 

Luôn bắt đầu với ý tưởng sắp xếp các khoảng trắng khi bắt đầu thiết kế.

Trong bản thiết kế sắp đến, thay vì nghĩ vị trí đặt một bức ảnh hoặc chừa bao nhiêu khoảng trắng cho các khối chữ, bạn nên tự nghiệm liệu có đủ khoảng trắng ở hai bên lề và vùng đệm để truyền đạt đúng sắc độ và sự rõ ràng như ý tưởng của mình. Bạn hãy học cách bố trí lề và vùng đệm xung quanh các thành phần trên bản thiết kế. Chú ý đến các khoảng trắng giữa các dòng và các chữ (typography).

Nếu bạn là người cầu toàn, hãy tạo ra hai bản thiết kế: một với nhiều khoảng trắng để mang lại cảm giác sang trọng, lịch sự và một với ít khoảng trắng theo phong cách “thị trường”. Cùng sử dụng các thành phần thiết kế như nhau, chỉ thay đổi các khoảng trắng xung quanh chúng và hãy mang cả hai bản thiết kế cho mọi người xem và bàn luận.

“The Importance of White Space in Web Designs” – about.webdesign.com