Cách dùng khu vực Hero trên website qua những ví dụ tiêu biểu (P.2)

10 ví dụ tiếp theo sẽ mở thêm những gợi ý nữa cho ý tưởng thiết kế của bạn.

Với 10 thiết kế website sáng tạo ở phần trước, chúng ta đã có thể phần nào hình dung ra ý nghĩa và tác dụng của việc tận dụng khu vực hero trong thiết kế. 10 ví dụ tiếp theo sẽ mở thêm những gợi ý nữa cho ý tưởng thiết kế của bạn. 

Burger King

Phiên bản Thổ Nhĩ Kỳ của website Burger King sử dụng slideshow với 6 hình ảnh cho khu vực hero, tất cả hình ảnh đều có phần nền khác nhau và thể hiện sản phẩm cũng như những chương trình bán hàng hiện tại.  

11 burgerking thiet ke web dep

Integrated IT Solutions

Website này sử dụng ảnh động cho khu vực hero nhưng hơn cả việc sử dụng menu bay ra vốn đã khá quen thuộc ngày nay, họ đã sử dụng một khu vực menu tĩnh ở bên phải của màn hình. 

12 integrateditsolutions thiet ke web dep

The Base

Là một trang web quảng bá dành cho trung tâm mua sắm ở New Zealand, khu vực hero của website này đặt đằng sau thân chính của thiết kế và chứa logo, thanh top navigation của trang. Nếu bạn F5 trang đó sẽ thấy những ảnh khác nhau ở khu vực hero hiện ra.

13 thebase thiet ke web dep

Saffola Fit Foodie

Trang web giới thiệu những thực đơn ăn uống lành mạnh. Khu vực hero của nó cấu tạo bằng slideshow với 4 bức ảnh. Phần còn lại của trang nếu bạn cuộn xuống sẽ là bố cục dạng lưới với hiệu ứng animation nếu đưa con chuột qua. 

14 saffolafitfoodie thiet ke web dep

Consolidated Container Company

Thiết kế web công ty bao bì nhựa chọn thể hiện những chiếc chai để quảng cá dịch vụ của họ ở khu vực hero.

15 consolidated thiet ke web dep

KODA

Hãng thiết kế thương hiệu này sử dụng khu vực hero rộng với rất ít chi tiết trên đó. Phần chữ headline có thể quay vòng cùng với tagline phía dưới, thêm vào đó là logo công ty và nút bấm hamburger menu. Khi bạn cuộn xuống mỗi khu vực được phân chia rõ ràng nhờ ảnh nền và màu sắc khác nhau. 

16 koda thiet ke web dep

Birmingham Community Healthcare

Đây là một website của cơ quan dịch vụ chăm sóc sức khỏe Anh với một khu vực hero là bức ảnh của những đứa trẻ và y tá. Phần chữ headline trắng to cùng ô tìm kiếm thông tin được đặt trên nền ảnh đó.  

17 birmingham thiet ke web dep

Amtrak Train Days

Trang web thuộc về công ty đường sắt Amtrak và họ đã chọn một bức ảnh rất đẹp cho khu vực hero của mình. Chữ headline trắng và nút call to action xanh được đặt trên nền bức ảnh đó. 

18 amtraktraindays thiet ke web dep

Big Omaha 2015

19 bigomaha thiet ke web dep

Erican College

thiết kế website trường học của Malaysia này, họ sử dụng slideshow cho phần hero của mình với hình ảnh khuôn mặt hạnh phúc của những sinh viên. Khi bạn cuộn trang sẽ thấy nút chia sẻ xã hội và link ‘Apply Now’.

20 ericancollege thiet ke web dep

 

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: www.youthedesigner.com
Có: 0/0 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

Ở Việt Nam chúng ta đa phần phán theo cảm tính. Nhưng hãy tập tin vào số liệu, vì nó như xác xuất thống kê giúp bạn đong đếm chính xác các vấn đề của bạn. Những dữ liệu quý giá này không phải ai cũng có thể làm và biết. Cùng khám phá với Ngôi Sao Số nhé.

5 mẹo để thiết kế trang web một trang hiệu quả

5 mẹo để thiết kế trang web một trang hiệu quả

Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu quả? Cùng xem bài viết nhé

[Web vỡ lòng] Số 01: Những kiến thức cơ bản về với thẻ html meta cho làm web

[Web vỡ lòng] Số 01: Những kiến thức cơ bản về với thẻ html meta cho làm web

Để có thể làm những điều to lớn đều bắt đầu từ những thứ nhỏ nhất. Ngôi Sao Số muốn giới thiệu đến bạn chuỗi bài "điều phi thường nhỏ bé" từ những mã html rất cơ bản dễ nắm bắt.

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