35 bố cục web sử dụng thanh Header cố định

Thứ sáu - 13/03/2015 10:31

Header là một trong những thành phần gây ấn tượng đầu tiên khi người dùng web truy cập vào website của bạn. Tại vị trí quan trọng này, bạn có thể gửi gắm rất nhiều nội dung quan trọng mà mình muốn.

35 bố cục web sử dụng thanh Header cố định

Header là một trong những thành phần gây ấn tượng đầu tiên khi người dùng web truy cập vào website của bạn. Tại vị trí quan trọng này, bạn có thể gửi gắm rất nhiều nội dung quan trọng mà mình muốn. Đó có thể là một ảnh nền cỡ lớn tuyệt đẹp quảng bá cho sản phẩm hay thông báo quan trọng nào đó, hoặc một slide ảnh mà trong đó có ẩn link dẫn đến landing page hay bất kỳ vị trí nào. Đây cũng là nơi đặt các nút bấm, các nút call to action thu hút người xem hàng đầu trên thiết kế website chuyên nghiệp của bạn.

Bạn thích một thiết kế với thanh header trượt theo bạn đến cuối website hay một header cố định? Mỗi người sẽ có một lựa chọn khác nhau. Các chuyên gia thiết kế cũng luôn có sẵn các phương án thiết kế đa dạng của mình. Chỉ riêng với thanh header, người ta có thể đê nó bất di bất dịch ở trên cùng của trang hay để nó trượt đến hết trang hoặc chỉ để nó đi một đoạn ngắn theo chuyển động duyệt trang của người dùng web, rồi sau đó đứng im.

Tùy vào ý đồ của mỗi thiết kế mà mỗi website lại chọn một cách làm riêng cho header của mình, sao cho phù hợp nhất. Thiết kế web đơn trang sử dụng thao tác cuộn chuột đang chiếm lĩnh dần thị trường và thay thế các web đa trang với các cú click chuột truyền thống để duyệt web. Với mỗi thao tác cuộn chuột, bạn sẽ khám phá ra một phần nội dung của website. Một số chi tiết có thể được tạo ra để di chuyển theo từng bước kéo chuột của bạn, nhưng điểm bất lợi là bạn đảm bảo nó không che mất các chi tiết khác khi di chuyển trên trang. Với header bar cũng vậy, nếu bạn để cho thành phần này trượt theo các bước cuộn chuột của bạn thì khả năng nó sẽ che mất một phần nội dung web. Thay vào đó, phương án để header bar có định sẽ tạo thêm nhiều không gian thông thoáng hơn để khách đọc nội dung web.

Hãy cùng khám phá 35 thiết kế trang web dưới đây với thành phần header được ghim cố định tại chỗ để xem hiệu quả mà nó mang lại cho thiết kế như thế nào. Bạn sẽ hiểu tại sao các chuyên gia thiết kế lại chọn cách làm này thay vì những phương án thiết kế khác cho header. 

Mint Design Company

mint design company handdrawn graphics

 

Stereo Creative

stereo creative fullscreen website

Underbelly

underbelly creative agency website layout

Pushh

pushh app website landing page

Raise the Roof

raise the roof website layout design

Graz Secrets

graz secrets iphone app landing page design

Editd

editd scrolling navigation bar header ui

Grovemade

grovemade website wooden products fixed nav

Drew Wilson

drew wilson personal portfolio website layout

Kitchen Sink Studios

kitchen sink studios website inc layout

Krista Ganelon

krista ganelon visual designer portfolio

Userbrain

userbrain website creative agency inspiration

Marlon Messam

marlon messam web designer ui layout

Rule of Three

rule of three copywriters design agency homepage

Jaquet Droz

jaquet droz dark scrolling header navigation

Ditto

ditto designer glasses website layout navigation

Rodolphe Celestin

rodolphe celestin graphic design homepage

Inspiration Dormant

dark webstie layout inspiration dormant design

Campbell Creek Mini Storage

campbell creek mini storage website layout

Electro Chuck

electro chuck iphone app game landing page

Bigeye

bigeye advertising creative agency website

Under Armour

under armour website english layout

Ibsens Fabrikker

ibsens fabrikker clean fixed scrolling navigation

Touchtech

touchtech green simple layout design

Dazed Magazine

dazed and confused magazine website layout

Make Better Apps

make better apps homepage layout design

Hatbox

dark hatbox website creative agency layout

Handiemail

handiemail homepage navigation scrolling bar

Stinkdigital

stink digital website dark inspiration layout

Re/code

recode red technology news layout inspiration

Solid Soup

solid soup creative studio agency

Overlapps

overlapps red homepage layout design inspiration

Polygon

polygon fixed header navigation design

Framer.js

Yummygum

yummygum website layout inspiration design homepage

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