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