Cách sử dụng White Space hiệu quả trong thiết kế web

Chưa được phân loại

Nếu bạn không phải là một nhà thiết kế, việc đảm bảo trang web của bạn trông gần như hoàn hảo có thể là một thách thức. Sử dụng một chủ đề chất lượng có thể giúp ích rất nhiều, nhưng bạn cũng sẽ muốn tìm hiểu một số nguyên tắc cơ bản nếu bạn muốn có kết quả tốt nhất. Điều này bao gồm việc hiểu khái niệm thiết kế ‘không gian trắng’.

Không gian màu trắng chính xác như âm thanh của nó, và mặc dù đơn giản rõ ràng của nó, nó là một phần quan trọng của bất kỳ thiết kế hình ảnh nào. Ví dụ: quá nhiều có thể khiến một trang trông trống rỗng, trong khi quá ít có thể khiến nội dung của bạn trông lộn xộn. Mặt khác, đạt được sự cân bằng phù hợp có thể làm được rất nhiều điều cho sự xuất hiện và dễ sử dụng của trang web của bạn.

Trong bài đăng này, chúng tôi sẽ giới thiệu chủ đề thiết kế không gian trắng. Chúng tôi sẽ khám phá khái niệm này một cách chi tiết và chỉ cho bạn cách áp dụng nó trên trang web của riêng bạn. Hãy bắt đầu làm việc!

Giới thiệu về không gian trắng

Khoảng trắng là một thuật ngữ thiết kế chung được sử dụng trong rất nhiều bối cảnh. Chúng bao gồm in ấn, nghệ thuật và (tất nhiên) thiết kế web. Ngay cả khi bạn chưa bao giờ nghe cụm từ này trước đây, bạn có thể có một số ý tưởng về ý nghĩa của nó chỉ từ cái tên.

Hãy xem trang sau:

Trang web của Nhà máy chưng cất Rượu Bear Creek.

Trang chủ này hiển thị hình ảnh, tiêu đề và một số văn bản, tất cả đều là nội dung của trang. ‘Sự trống rỗng’ xung quanh nội dung được gọi là khoảng trắng.

Tất nhiên, điều quan trọng là không sử dụng thuật ngữ này quá Nghĩa. Khoảng trắng không thực sự phải là màu trắng – nó có thể là bất kỳ màu nền khác (hoặc thậm chí là một hình nền hoặc thiết kế). Nó chỉ đơn giản là một phần của một trang bị bỏ trống. Với điều này, đôi khi nó còn được gọi là ‘không gian âm’.

Thật dễ dàng để loại bỏ các phần trống của một trang là không quan trọng. Tuy nhiên, theo một cách nào đó, khoảng trắng của mỗi trang cũng quan trọng như nội dung mà nó phân tách. Hãy nói về lý do tại sao điều này là.

Tại sao không gian trắng là một khái niệm thiết kế quan trọng

Khi bạn tập hợp một trang web lại với nhau hoặc xây dựng blog, có thể hấp dẫn để phù hợp với càng nhiều nội dung càng tốt trên mỗi trang. Rốt cuộc, có rất nhiều điều bạn muốn chia sẻ với độc giả hoặc khách hàng của mình. Vì lý do này, việc trượt vào tâm lý ‘nhiều hơn là tốt hơn’ là điều dễ dàng.

Tuy nhiên, hãy xem điều gì sẽ xảy ra khi chúng ta đưa triết lý này đến cực đoan tự nhiên của nó:

Trang web Gates N Fences.

Trang này gần như hoàn toàn không có khoảng trắng và kết quả là phải chịu đựng. Nó có vẻ vô cùng lộn xộn và rất khó để tìm thấy những gì bạn đang tìm kiếm. Khi đến một trang web như thế này, hầu hết khách truy cập có khả năng rời đi ngay lập tức.

Mặc dù đây có lẽ là một ví dụ quá mức, nhưng các trang không sử dụng đủ khoảng trắng là khá phổ biến. Trang web này cũng minh họa điểm độc đáo:

Trang web Nhà sử học của tương lai.

Có ít diễn biến hơn ở đây, nhưng các yếu tố vẫn bị đè bẹp quá chặt chẽ với nhau. Điều này làm cho trang choáng ngợp để xem xét (và tất nhiên, việc lựa chọn màu sắc và hình ảnh cũng không giúp ích gì).

Vấn đề ở đây là sử dụng đủ khoảng trắng trên các trang web của bạn là chìa khóa để làm cho chúng vừa hấp dẫn về mặt hình ảnh vừa dễ điều hướng. Có đủ khoảng trắng giữa các yếu tố cũng đã được lặp đi lặp lại cho thấy tăng khả năng đọc hiểuvà để có tác động tích cực trên Trải nghiệm người dùng tổng thể (UX).

Tất nhiên, bạn cũng có thể đưa khái niệm này đi quá xa theo hướng ngược lại. Quá nhiều khoảng trắng có thể khiến thiết kế của bạn trông trống rỗng, rời rạc và không chuyên nghiệp:

Trang web của Suzanne Collins.

Đồng thời, trang chủ của Google hầu như không có gì ngoài khoảng trắng và có hiệu quả cao:

Trang chủ của Google.

Điều này chỉ cho thấy rằng bao nhiêu khoảng trắng là ‘phù hợp’ cho bất kỳ trang web nhất định nào phụ thuộc vào mục tiêu của nó và loại nội dung mà nó bao gồm. Tìm kiếm sự cân bằng hoàn hảo giữa không gian tiêu cực và chiếm dụng nên được đặt lên hàng đầu trong tâm trí của bạn khi xây dựng hoặc thiết kế lại trang web của riêng bạn.

Cách sử dụng thiết kế khoảng trắng hiệu quả trên các trang web của bạn

Như chúng tôi đã chỉ ra, cả quá nhiều hoặc quá ít khoảng trắng có thể trở thành một vấn đề. Tuy nhiên, trên thực tế, vấn đề gần như luôn là quên sử dụng đủ không gian âm giữa các yếu tố khác trên các trang web của bạn. Đây là lý do tại sao thiết kế không gian trắng chủ yếu xoay quanhxung quanh việc cân bằng các yếu tố nội dung bằng cách sử dụng khoảng trắng.

Để cụ thể hơn nữa, thực sự có hai loại khoảng trắng.

Khoảng trắng siêu nhỏ

‘Khoảng trắng vi mô’ đề cập đến những khoảng trống nhỏ hơn được tìm thấy giữa các dòng văn bản, hình ảnh trong một lưới hoặc bộ sưu tập, liên kết menuvà các yếu tố khác như vậy:

Khoảng cách giữa các liên kết menu.

Không gian này rất quan trọng để đảm bảo rằng khách truy cập có thể đọc văn bản trên trang của bạn và để tách các phần tử để cho thấy rằng chúng khác biệt. Trong hầu hết các trường hợp, mọi thứ trên trang của bạn nên có ít nhất một chút khoảng trắng siêu nhỏ xung quanh nó.

Điều này cũng có thể được coi là một đường viền hoặc lề và thường hiệu quả nhất khi nó được sử dụng nhất quán. Điều này có nghĩa là sử dụng cùng một khoảng cách giữa mỗi dòng văn bản, ví dụ: và bao gồm các đường viền có cùng chiều rộng xung quanh tất cả các hình ảnh của bạn:

Một bộ sưu tập hình ảnh với các đường viền màu trắng.

Khoảng trắng macro

Như bạn có thể mong đợi, khía cạnh khác cần xem xét là ‘khoảng trắng macro’. Đây là những khu vực trống lớn hơn được tìm thấy giữa các phần của trang, xung quanh các khối nội dung hoặc tách biệt Sidebars, tiêu đề và chân trang từ nội dung chính:

Một trang web với các phần được xác định rõ ràng.

Khoảng trắng macro giúp khách truy cập hiểu cấu trúc trang web của bạn. Nó nhanh chóng cho thấy nơi một phần kết thúc và một phần khác bắt đầu. Thêm vào đó, nó đảm bảo rằng các yếu tố chính như điều hướng có thể dễ dàng phân biệt với mọi thứ khác.

Theo nguyên tắc chung, một yếu tố càng khác biệt với một yếu tố khác, thì càng nên bao gồm nhiều khoảng trắng giữa chúng. Các phần có ít khoảng trống âm hơn giữa chúng sẽ được coi là có liên quan chặt chẽ hơn. Mặt khác, các khoảng trống lớn hơn cho thấy việc chuyển sang một loại nội dung hoặc tính năng mới:

Trang web của Apple.

Cuối cùng, khoảng trắng cũng có thể được sử dụng để giúp các yếu tố quan trọng nhất trên một trang nổi bật. Ví dụ: hầu hết các trang web đều có ít nhất một Kêu gọi hành động (CTA). Đây là những bước quan trọng mà bạn muốn khách truy cập của mình thực hiện. Điều này có thể có nghĩa là nhấp vào nút mua hàng, ví dụ: hoặc điền vào biểu mẫu đăng ký.

Bao quanh yếu tố CTA của bạn với nhiều không gian màu trắng là một trong những cách tốt nhất để thu hút ánh mắt của khách truy cập ngay vào nó. Điều này đặc biệt hiệu quả khi bản thân CTA cũng được tạo ra sự khác biệt thông qua màu sắc và thiết kế độc đáo:

Một CTA trên Spotify.

Đạt được sự cân bằng phù hợp của khoảng trắng trên các trang của bạn có thể mất một chút công việc. Tuy nhiên, nó rất xứng đáng với nỗ lực liên quan. Điều quan trọng nữa là phải tin tưởng vào con mắt của chính bạn và yêu cầu người thử nghiệm xem các trang của bạn từ một góc độ mới mẻ.

Ngoài ra, nếu bạn gặp một số khó khăn trong việc quyết định xem bạn đã bao gồm đủ khoảng trắng trên một trang web trực tiếp hay chưa, bạn có thể sử dụng công cụ bản đồ nhiệt để phân tích hành vi của khách truy cập. Nếu bạn không thấy nhiều tương tác với các yếu tố quan trọng như điều hướng và CTA, bạn có thể được hưởng lợi từ việc cho họ thêm một chút không gian để thở. Khi nói đến thiết kế không gian trắng, ít hơn chắc chắn là nhiều hơn.

Kết thúc

Người ta nói rằng trong âm nhạc, sự im lặng giữa các nốt cũng quan trọng như chính các âm thanh, bởi vì đây là những gì định hình và phân biệt những âm thanh đó. Nguyên tắc tương tự cũng áp dụng cho trang web của bạn – không gian giữa nội dung quan trọng hơn bạn có thể mong đợi lúc đầu.

Khi nói đến việc sử dụng các nguyên tắc thiết kế khoảng trắng trên trang web của bạn, sự cân bằng là chìa khóa. Quá ít khoảng trắng khiến các trang của bạn cảm thấy lộn xộn và khó hiểu, trong khi quá nhiều cung cấp không có cấu trúc rõ ràng. Để tránh những vấn đề đó, bạn có thể sử dụng không gian âm một cách chiến lược để hiển thị cả hai yếu tố được kết nối chặt chẽ và những yếu tố được coi là riêng biệt và khác biệt.

Bạn có bất kỳ câu hỏi nào về cách sử dụng thiết kế khoảng trắng một cách hiệu quả?

Hãy hỏi đi trong phần bình luận bên dưới!

Hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc độ
Trang web WordPress của bạn

Giảm thời gian tải của bạn thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.