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?

Hướng dẫn sao lưu backup Google Photos, khi Google đã không còn miễn phí lưu lượng.

Hướng dẫn sao lưu backup Google Photos, khi Google đã không còn miễn phí lưu lượng.

Gần đây người dùng được nhận một email với nội dung không còn miễn phí cho Google Photos nữa. Bạn cần làm gì ?

10 xu hướng thiết kế web sẽ thịnh hành năm 2021

10 xu hướng thiết kế web sẽ thịnh hành năm 2021

Ai mà không muốn có một thiết kế trang web tuyệt vời, nổi bật nhất trong thế giới online? Tất nhiên, đi đầu trong xu hướng là điều cần thiết để nắm bắt những điều nên thay đổi trên trang web của bạn

So sánh Relational Database của Alibaba, Amazon, Google, IBM và Microsoft

So sánh Relational Database của Alibaba, Amazon, Google, IBM và Microsoft

Bạn đang xử lý dữ liệu của khách hàng hay ghi lại hàng loạt các thông tin giao dịch lớn? Bạn đang tìm hiểu về Relational Database và phân vân chưa biết chọn tên tuổi nào? Hoặc bạn đang cần lưu trữ dữ liệu từ máy tính, điện thoại hoặc các thiết bị IoT?

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