Cảm hứng từ những sidebar đẹp mắt trên website

Thứ hai - 30/03/2015 01:09

Navigation luôn là thành phần tối quan trọng của một thiết kế web. Bạn có thể chọn nhiều cách thiết kế cho thành phần này, top, sidebar hoặc bottom navigation hoặc thậm chỉ cả 3 cách kết hợp với nhau.

Cảm hứng từ những sidebar đẹp mắt trên website

Ngày nay các chuyên gia thiet ke web đã có sự phá cách hơn nhiều đối với navigation của các website. Chúng ta hãy nói riêng về sidebar navigation. Chỉ riêng sidebar đã chứng kiến vô vàn cách làm đầy sáng tạo. Để thấy được sự đa dạng trong các ý tưởng về sidebar navigation, chúng ta hãy cùng đến với một loạt những ví dụ tiêu biểu sau đây.  

Eat Drink Inc

Thiết kế web này đảm bảo chắc chắn việc bạn sẽ không bỏ lỡ một đường link nào. Họ không những sở hữu một sidebar link độc đáo và còn có một bố cục dạng grid cũng chứa chính đường link đó ở toàn bộ phần còn lại của website. 

Eat Drink Inc

FLIPP

Trang web của hãng này sử dụng sidebar gọn gàng với tông màu tối, nổi bật nhờ logo màu vàng và chữ màu trắng cùng với icon social media màu xám. Phần sidebar này vẫn sẽ cố định khi bạn cuộn trang. 

FLIPP

EVA Air

Tông màu đẹp mắt của sidebar trong thiết kế này làm cho cả tran web trông bắt mắt hơn. Khi bạn click vào một trong những mục của trang, sidebar trở nên trong suốt để bạn nhìn thấy trang mà mình đang xem. 

EVA-Air

Daniel Portuga

Trang portfolio cá nhân này sử dụng màu hồng đầy táo bạo. Phần sidebar navigation nhỏ nhắn ở bên phải trang sẽ cố định khi bạn cuộn chuột. 

Daniel Portuga

Goltz Group

Sidebar của trang này hơi trong suốt và được gắn cố định. Nó sử dụng phần chữ xám và vàng kết hợp. Các mục của nó sẽ chuyển thành màu vàng khi bạn ghé thăm từng trang nhỏ. 

Goltz Group

Sculpt Communications

Trang web này sử dụng rất nhiều hình ảnh, ngoại trừ phần sidebar cố định chỉ sử dụng duy nhất 1 bức ảnh. Nhưng website vẫn gọn gàng bởi cách thiết kế sidebar đã không làm cho thiet ke trở nên rối mắt hơn. 

Sculpt Communications

Elevated Third

Đây là một trang web ấn tượng của Denver Online Marketing, họ sử dụng sidebar ở mỗi cạnh của trang. Sidebar bên trái chính là navigation menu. 

Elevated Third

Adsy.me

Trang web mang đến dịch dụ làm ứng dụng di động miễn phí. Sidebar của nó có hiệu ứng animation nhẹ khi di chuyển chuột qua đó. 

Adsy.me

PUSH Collective

Navigtion sidebar của trang này khá thú vị với sự đổi màu theo chuyển động. 

PUSH Collective

Gareth Emery

Thêm một ví dụ thú vị nữa của cách thiết kế sidebar. Sidebar sẽ xuất hiện cùng với mỗi slide của slideshow trên trang web này. 

Gareth Emery

Draw to Click

Trang website của công ty này sử dụng slide out menu màu blue nhạt ở bên phải trang. Màu sắc của sidebar tương phản bới bức ảnh của slideshow.  

Draw to Click

The Seven Types of Motorcycle Rider

Trang web mà bạn thấy thuộc sở hữu của hãng bán lẻ quần áo và phụ kiện cho mô tô của Anh có tên MCA Leicester. Sidebar của nó có nội dung đại diện cho 7 loại mô tô mà hãng này cung cấp sản phẩm đi kèm. 

The Seven Types of Motorcycle Rider

DraughtMaster

Đây là website của hãng Carlsberg và phần sidebar bên phải của nó là một chuỗi các vòng tròn có chấm ở giữa. Khi bạn di chuột vào bất kỳ vòng tròn nào, một vòng tròn màu vàng lớn hơn sẽ xuất hiện ở đó với phần chữ trắng dẫn bạn đến với từng mục.  

DraughtMaster

PRPL

Sidebar của trang này thuộc dạng tĩnh, đặt ở bên trái trang và chỉ có một menu icon và log công ty. Khi click vào menu icon đó, menu sẽ trải ra cả trang với phần chữ màu xám nhạt và nền màu xám tối. 

PRPL

The Hunger Games Exclusive

Trang web này có nội dung giới thiệu một phần vè bộ phim sắp ra mắt. Bố cục của nó gồm 2 sidebar. Sidebar bên trái sử dụng màu chữ trắng đơn giản nên nền bức ảnh. 

The Hunger Games Exclusive

Inegalites.ca

Bất kể màu xám tối được sử dụng ban đầu ở sidebar, khi bạn tác động vào đó, các mục trên sidebar sẽ chuyển màu xanh blue. 

Inegalites.ca

Petersham Nurseries

Trang web được chia làm 3 cột, phần bên phải chính là navigation menu. Màu chữ trắng trên nền xanh với dòng icon được đặt ở mỗi mục. Mỗi mục đó lại có mục phụ liên quan đến cột tiếp theo trong 3 cột. 

Petersham Nurseries

Colorama by Fiesta

Đây là một thiet ke vui nhộn với sidebar chứa đựng những điều thú vị nhất. Bạn sẽ sử dụng phần sidebar đó để tô màu cho các đồ vật trên bàn và thậm chí có thể thay đổi mọi thứ trên chiếc bàn đó. Nhìn khá giống một mẫu thiết kế website nhà hàng.

Colorama by Fiesta

Oxo Tower Wharf

Trang web mà bạn đang thấy sử dụng sidebar lớn với tông màu đỏ nhạt trông vô cùng nổi bật. 

Oxo Tower Wharf

Gaumont T.S. Spivet

Trang web nói về việc sản xuất bộ phim Pháp T.S. Spivet. Phần sidebar ở bên phải sẽ trượt theo trang khi bạn cuộn xuống cùng với đó là hiệu ứng animation độc đáo. 

Gaumont T.S. Spivet

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