bgware

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

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.

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ả: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Group
Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Mới đăng

Sức quyến rũ đến từ 35+ website thời trang mới

Sức quyến rũ đến từ 35+ website thời trang mới

Diện mạo bắt mắt là yếu tố cần phải có đối với bất kỳ phương diện nào của lĩnh vực thời trang. Một cửa hàng đẹp mắt, một mẫu quảng cáo đẹp mắt, hình ảnh sản phẩm cũng phải đẹp và chắc chắn không thể thiết một thiết kế website đẹp.

Khơi nguồn ý tưởng cho bạn với 60 minimal logo

Khơi nguồn ý tưởng cho bạn với 60 minimal logo

Logo là một trong những thành phần gây chú ý đầu tiên khi người ta nhìn vào một thiết kế bộ nhận diện thương hiệu hay bất kỳ vị trí nào có hình ảnh của công ty hay tổ chức của bạn.

Hơi thở hiện đại trong 50 Typography business card

Hơi thở hiện đại trong 50 Typography business card

Bạn chắc hẳn đã quen thuộc với việc chọn màu sắc, hình ảnh, đường nét và các yếu tố khác trong thiết kế bộ nhận diện thương hiệu nói chung và thiết kế business card nói riêng.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây