Tạo cảm giác rộng mở trên website nhờ khai thác khoảng trắng

Thứ năm - 17/09/2015 23:26

Trong một thiết kế website chuyên nghiệp, có rất nhiều chi tiết cần dựa vào sự hỗ trợ của khoảng trắng để trở nên nổi bật: nút bấm call to action, chữ, icon, logo…

Tạo cảm giác rộng mở trên website nhờ khai thác khoảng trắng

Khoảng trắng hoàn toàn không phải là một thành phần nhàm chán và vô dụng.Sau khi xem xong 20 thiết kế website đẹp mắt này, bạn sẽ hoàn toàn đồng ý với nhận định trên.

Creybot

Creybot mang đến diện mạo rộng thoáng với sự dễ chịu ở ngay trang trước. Sự hài hòa trong thiết kế đạt được nhờ kết hợp giữa phong cách thiết kế website tối giản và thiết kế phẳng.
 
Creybot thiet ke website negative space

Hayden Bleasel

Hayden Bleasel tận dụng hình ảnh nền để mang đến cảm giác tự nhiên.Tagline hẹp và rất tinh xảo đặt ở giữa trang và được bao quanh bởi khoảng trắng, góp phần mang đến sự mở rộng cho trang chủ.

Hayden Bleasel thiet ke website negative space

Alpha Design Agency

Alpha Design Agency dễ dàng phản ánh tinh thần của công ty.Khá giống với ví dụ trước, người thiết kế sử dụng tông màu đơn sắc với typography tinh tế và thanh naivagtion để nhấn mạnh thêm cho trang chủ.

Alpha Design Agency thiet ke website negative space

Bolds Talent

Ít dùng màu sắc, màu nền đơn giản, rất nhiều khoảng trắng trên landing page giúp mọi người chú ý đến nút call to action nhiều hơn.

Bolds Talent thiet ke website negative space

Frank Collective

Frank Collective có 2 navigation chính.Cái đầu tiên ẩn dưới nút hamburger, cái thứ 2 chiếm nhiều diện tích ở phía bên trái.Nhờ sử dụng nhiều khoảng trắng mà menu đã trở thành điểm nhấn của trang.

Frank Collective thiet ke website negative space

Artistide Benoist

Artistide Benoist sử dụng tối đa khoảng trắng ở mọi vị trí. Mọi người có thể nhanh chóng bao quát hết bố cục theo chiều ngang của website này. 

Artistide Benois thiet ke website negative spacet

Berengere Audo

Website portfolio của Berengere Audo không có thiết kế điển hình như bình thường. Cả trang web có vẻ rộng thoáng với điểm nhấn là một số animation.

Berengere Audo thiet ke website negative space

Engzell

Engzell chào đón mọi người với khu vực 'Welcome' tinh xảo và tagline hoành tráng. Thiết kế làm tạo sự gọn gàng, loại bỏ những thứ bừa bộn không cần thiết.
 

Engzell thiet ke website negative space

Motocharts

Nhờ vào sự rộng rãi của khoảng trắng cùng với sự tương phản giữa tiền tố và nền, website đã tạo được sự chú ý ngay vào hộp tìm kiếm ở bên phải của trang, đây chính là navigation chính.

Motocharts thiet ke website negative space

Neil O'Reilly

Neil O’Reilly thành công với phong cách tối giản và nổi bật giữa đám đông.Màu sắc cổ điển đã phát huy tác dụng rất tốt với trường hợp này.

Neil O'Reilly

Myluck

Myluck sử dụng giải pháp khá thú vị: mọi khu vực đều dùng 2 bảng màu và nhiều khoảng trắng. Theo cách đó, các nội dung chính của trang được nhấn mạnh.

Myluck thiet ke website negative space

Echo Brickell

Echo Brickell thành công trong việc làm cân bằng nhiều hình ảnh đại diện cho navigation trên khu vực portfolio. Nhờ sử dụng tiêu đề gồm 1 từ, kết hợp nhiều khoảng trắng,….bạn sẽ thấy sự nhẹ nhàng trong thiết kế. Hoàn toàn có thể áp dụng trong một mẫu thiết kế website khách sạn đẹp mắt.

Echo Brickell thiet ke website negative space

Mikii

Tiêu đề chính ngay lập tức thu hút mắt nhìn nhờ vẻ đậm đà. Khoảng trắng xuất hiện và làm chất xúc tác cho mọi hiệu ứng tổng thể.

Mikii thiet ke website negative space

Redbadge

Khá giống với ví dụ trước, website này tạo được vẻ tự nhiên cho tagline chính và dành ưu tiên cho rất nhiều khoảng trắng.Navicon và logo bằng chữ nhỏ nhắn cũng là điểm nhấn ở tiền tố của website.

Redbadge thiet ke website negative space

We Are Marketing

Bố cục dạng mô-đun và sẽ là một mớ hỗn độn nếu người ta không biết cách dùng khoảng trắng hợp lý đến vậy cho thiết kế này.

We Are Marketing thiet ke website negative space

L'Avenir

L’Avenir cuốn hút với diện mạo sáng sủa. Tagline đủ sức thu hút và cách dùng khoảng trắng thông minh đã đưa thiết kế này trở nên nổi bật.

L'Avenir thiet ke website negative space

Charlie Deets

Charlie Deets tạo không khi thân thiện và vui tươi cho người dùng, cổ vũ họ tiếp tục khám phá.Khoảng trắng tràn ngập website luôn tạo cảm giác rộng mở.

Charlie Deets thiet ke website negative space

Masi Tupungato

Masi Tupungato là một ví dụ tuyệt vời khác trong bộ sưu tập này. 4 hình ảnh ở đó không chỉ truyền tải được thông điệp mà còn tạo cân bằng cho bố cục trang.

Masi Tupungato thiet ke website negative space

Truth Labs

Truth Labs mang đến cảm giác thoải mái và bình yên ngay khi bạn bước vào.Mắc dù màu sắc của nó khác đậm và cũng chỉ có một dòng tagline làm điểm nhấn nhưng nó không hề tẻ nhạt, ngoài ra animation của nó cũng đủ thú vị.

Truth Labs thiet ke website negative space

Andrew McWatters

Landing page của portfolio này có diện mạo thu hút và đi đúng theo phương châm “Its hơn là nhiều hơn”. Bằng việc tạo cân bằng giữa nội dung và backdrop, người thiết kế đã đặt phần giới thiệu vào trung tâm của sự chú ý. 

Andrew McWatters thiet ke website negative space

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions