20 ví dụ tuyệt vời về thiết kế footer website thu hút

Khi bắt đầu một dự án thiết kế web bất kỳ, hầu hết mọi người đều tập trung mọi nỗ lực vào việc thiết kế trang chủ và header. Kết quả là thiết kế giao diện web footer thường bị lờ đi, và trở thành một thiết kế yếu kém liên quan đến các thông tin, từ bỏ pháp lý và link spam [SEO]. 

Nhưng không phải như vậy. Footer của một [website] cũng quan trọng như header. Tại sao? Bởi vì footer chính là nơi cuối cùng mà mỗi người xem đều dừng lại. Tại đây họ sẽ đăng ký dịch vụ, đọc các bài viết khác hoặc chỉ đơn giản là yêu cầu chi tiết liên lạc của bạn. Hãy tự hỏi chính bản thân mình – bạn muốn người dùng sẽ làm gì khi họ đã đến cuối cùng của trang? Câu trả lời mà bạn đưa ra sẽ là một khởi đầu tuyệt vời để thiết kế footer cho website của bạn.

Dĩ nhiên câu trả lời sẽ được thay đổi theo dự án, tùy vào tính chất của website và kết quả mong muốn. Ví dụ, nếu bạn đang thiết kế một blog, việc giữ người dùng ở trên trang là hết sức quan trọng, do vậy việc đặt các bài viết gần đây nhất hoặc bài viết phổ biến ở footer là cần thiết. Tuy nhiên, nếu các website được thiết kế để quảng bá một sản phẩm thì một call-to-action hoặc một mục đăng ký nhỏ sẽ là lựa chọn tốt hơn.

Hãy cẩn thận xem xét các nội dung cần đặt ở footer. Nếu bạn nghĩ đây là một không gian để kết thúc thì sẽ làm suy yếu đi tiềm năng của nó. Thiết kế một web footer tuyệt vời không phải chỉ là tìm ra cách tốt nhất để bố trí các nội dung không liên quan mà còn phải ưu tiên lựa chọn các thông tin cần thiết và loại bỏ thông tin không cần thiết.

Điều quan trọng là phải luôn nhớ các thói quen luôn tồn tại trong tâm trí người dùng khi đưa vào thiết kế web. Người xem hay kéo chuột xuống phía dưới cùng để tìm thông tin liên lạc của doanh nghiệp. Tuy nhiên, bạn cũng có thể ưu tiên các thông tin khác quan trọng hơn nếu sử dụng các yếu tố thiết kế phân cấp rõ ràng đánh vào sự chú ý của người dùng trong việc thiết kế web footer. 

Showcase dưới đây sẽ là cách phân tích và việc sử dụng footer khác nhau – hy vọng, bạn sẽ thấy hữu ích.

Tapbots là một robots hữu ích được thiết kế và dành cho iPhone, iPod touch. Được tạo ra bởi Paul Hadda và Mark Jarrdine, những robots này sẽ cung cấp tất cả sự trợ giúp cho bạn nằm ở phần footer.

4 minh họa đứng với nhau, mỗi cái liên quan đến một thông tin mà chúng cung cấp. Đặc biệt, chúng được thiết kế theo các nhân vật mang phong cách manga cung cấp sự trợ giúp và các thông tin chi tiết về công ty. 

Tất cả mọi thứ về người sành ăn bỏng ngô, kẹo và nước ngọt sẽ có trên website Mon & Popcorn. Website theo phong cách retro cung cấp cho người mua hàng một sự tiện lợi, nhanh chóng và dễ dàng để tìm món ngọt yêu thích của họ trên mạng

Thiết kế web footer tươi sáng và sống động, chi phối bởi nhiều hình ảnh bắt mắt lấy cảm hứng từ thập niên 50 và 60. Những người sử dụng có thể tìm thấy tất cả thông tin về công ty mà họ cần bao gồm địa điểm, sản phẩm, tin tức, thông tin liên lạc và nhiều hơn nữa. 

Soho fixed là một nhóm các kỹ thuật viên xe đạp – người tạo nên những bánh xe cố định thiết kế tùy chỉnh độc đáo và bỏ lên website để bán. 

Thiết kế web theo phong cách retro bao gồm một footer có tính năng như một thành menu thứ hai, giúp người dùng điều hướng dễ dàng theo cách họ muốn. Ngoài ra các nút mạng xã hội thông dụng, cũng như một nút nhập email nhận thông báo khi có một chiếc xe đạp mới được update lên trang web, cũng được đặt vào footer.

Urban Pie được dành riêng để tạo ra những chiếc bánh tốt nhất cho người sành ăn. Sản phẩm là một trong những yếu tố được đặt lên cao, do vậy website công ty luôn giữ những điều đơn giản và vui vẻ, có thông tin cần thiết để biết và các lựa chọn bằng minh họa hoạt hình.

Footer website không có thông tin hoặc call-to-action, nhưng chỉ đơn giản là một đường chân trời phác thảo và một số nhân vật bánh minh họa hấp dẫn chào đón mọi người đến với website. Một cách tiếp cận đáng yêu.

Trong khi việc bao gồm các thông tin liên lạc ở footer trở thành một điều lệ, thì có nhiều trường hợp thông tin này không cần thiết, nhưng cần được ưu tiên. Điều này đặc biệt đúng đối với những nhà cung cấp dịch vụ như thiết kế web tự do và các doanh nghiệp có địa chỉ thực tế.

Nhà thiết kế tự do Jared Johnson đã dành ưu tiên thông tin liên lạc trên folio của mình. Cách thức mà ông sử dụng màu sắc và quy mô để phân biệt địa chỉ email, số điện thoại từ phần cuối còn lại của footer đảm bảo rằng người xem sẽ dễ dàng nhìn thấy, đây là điều cần thiết cho một nhà thiết kế tự do.

Trang web của nhà hàng Anh này cho phép người dùng cuộc xuống để xem bốn trang khác nhau, mỗi trang có ảnh nền riêng độc đáo, thay đổi khi người dùng di chuyển con trỏ xuống cuối trang.

Website Cantilever Fish & Chips sử dụng footer để hiển thị vị trí, chi tiết liên lạc và giờ mở cửa của họ. Bằng cách này, website được thể hiện một cách sáng tạo và hấp dẫn trong cách trình bày footer.

Đặt một đoạn ngắn của thông tin dựa trên văn bản như một hồ sơ, tiểu sử hay lời chứng thực ở footer là cách hiệu quả để cung cấp một cái nhìn sắc vào các thực thể mà website đại diện. Đối với nhiều website, việc đặt hồ sơ cá nhân của tác giả ở chân là một cách tuyệt vời, không chỉ quảng bá tên tuổi mà còn tăng thêm sự tín nhiệm cho nội dung của website.

Số liệu thống kê được trình bày ở footer website Jason Mayo ngắn gọn và súc tích, đã cung cấp một cái nhìn sâu sắc về các tính cách và kỹ năng của bản thân, trong khi đó cũng thêm vào một số liên lạc cá nhân

Footer trên website The Ministry Of Type bao gồm một đoạn profile ngắn về người sáng lập và tác giả: Aegir Hallmundur. Sự hiện diện của profile đã làm tăng thêm uy tín cho nội dung của website cũng như quảng bá các hoạt động portfolio và freelance tới người đọc.

 

Đặt các điều hướng phụ đến khu vực ít quan trọng của một website cũng là một cách tuyệt vời để sử dụng footer, vì nó có thể giúp sắp xếp chuyển hướng chính, từ đó hỗ trợ khả năng sử dụng. Đây là một cách tiếp cận đặc biệt tốt cho các website lớn.

Nơi website Monocle liên kết đến các phần ít quan trọng hơn nằm ở footer giúp làm giảm sự phức tạp trong điều hướng chính của họ. Một thanh tìm kiếm cũng được đặt vào để người dùng có thể tìm kiếm thêm thông tin mà không cần phải di chuột về lại phía trên trang.

10. Ditto

Cửa hàng bán lẻ mắt kính Ditto tạo thanh điều hướng cố định, có thể di chuyển theo từ đầu trang đến cuối trang. Bằng cách đó, họ đã giới hạn được các lựa chọn có sẵn của người dùng, có nghĩa là họ dễ dàng dẫn dắt khách hàng thông qua quá trình lựa chọn sản phẩm. Người sử dụng có các mục tiêu cụ thể, tuy nhiên, họ cũng sẽ di chuyển đến dưới cùng của trang để tìm các thông tin mà họ mong muốn.

11. Site Inspire

Đối với blog và các website tin tức, giữ người dùng trên website việc quan trọng hàng đầu, chẳng hạn như nhiều trang web dựa trên tối đa hóa pageview để tạo danh thu. Cung cấp các liên kết đến nội dung phổ biến hoặc bài đăng gần đây là một trong những footer tốt nhất để đạt được điều này.

Footer trên website Site Inspire đẹp đơn giản, chỉ chứa một profile ngắn và các liên kết đến các bài đăng gần đây nhất. Cách tiếp cận này cung cấp độc giả tùy chọn truy cập nội dung nhiều hơn khi đặt ở dưới cùng của trang, nghĩa là họ sẽ có nhiều khả năng tiếp tục duyệt trang web.

12. Web Designer Wall
 

Web Desinger Wall cung cấp liên kết đến bài viết gần đây và ý kiến của người dùng trong thiết kế web footer, cùng với một profile ngắn. Liên kết đến các bình luận gần đây là một chiến lược đặc biệt tốt nếu blog có một cộng đồng mạnh mẽ và đằng sau đó là những ý kiến hay ho, đa dạng, và có khả năng thu hút sự quan tâm của độc giả khác.

13. Rdio

Đối với nhiều cá nhân và các doanh nghiệp, việc phát triển hệ thống truyền thông xã hội là một nền tảng của chiến lược truyền thông số thì việc ưu tiên liên kết phương tiện truyền thông xã hội trong footer là một cách hiệu quả để chuyển người dùng từ trình duyệt web sang các công cụ mạng xã hội.

Footer trên trang chủ Rdio ưu tiên các dịch vụ truyền thông xã hội khác nhau bằng cách để lại nhiều không gian trống xung quanh những yếu tố khác để thu hút sự chú ý của người sử dụng.

14. Spark Box

Phòng thu Spark Box ở Ohio đã phát triển ý tưởng bằng cách đặt thêm các phương tiện như Twitter, Dribble và Flicrk vào trong thiết kế web footer vui tươi của mình. Điều này tiếp tục quảng bá sự hiện diện của họ trên các mạng xã hội.

15. Karma

Các website về sản phẩm và dịch vụ có xu hướng chứa các call-to-action rõ ràng trong tiêu đề của website, nhưng thêm một call-to-action thứ hai ở footer sẽ là một cách hiệu quả lôi kéo người sử dụng kỹ tính – người mong muốn tìm kiếm nhiều thông tin trước khi đăng ký.

Nút call-to-action lớn, thân thiện và dễ thu hút người sử dụng, khiến họ không thể bỏ qua.

16. Scriptogr.am

Ứng dụng xuất bản web Scriptogr.am đã có một cách tiếp cận tương tự. cũng giống như các nút call-to-action trên website Karma, nút call-to-action trong footer website được thiết kế để đảm bảo thu hút sự chú ý của người sử dụng.

17. The Noun Project

Trong khi việc đặt các nút call-to-action ở footer là một chiến lược hiệu quả thì nhiều website đã bước xa hơn bằng cách chứa các hình thức khác, cho phép người dùng thực hiện một loạt các nhiệm vụ, chẳng hạn như đăng ký các bản tin hoặc bắt đầu liên lạc, trên mỗi trang.

Footer của The Noun Project đã ưu tiên việc đăng ký nhận bản tin bằng cách sử dụng một khung rộng lớn. Nhập chi tiết người dùng theo cách này cho phép họ tìm kiếm được các khách hàng tiềm năng sau khi truy cập website.

18. The National LGBT Museum

Footer trên website The LGBT Museum chứa một form liên lạc lớn thân thiện, mời gọi người dùng liên hệ với họ. Một cách tiếp cận giảm thiểu bất kỳ người sử dụng do dự có thể về việc liên lạc với tổ chức.

19. Babylon

Đối với các website quảng bá sự kiện thì việc hiển thị các nhà tài trợ và đối tác trong footer có thể giúp cho sự kiện xuất hiện một cách đáng tin cậy, đặc biệt là có những nhà tài trợ nổi tiếng và uy tín.

Website nghệ thuật lễ hội New Babylon sử dụng footer để hiển thị thông tin tài trợ, tách rõ ràng ra khỏi phần body của nội dung bằng cách thay đổi màu nền.

20. Kikk Festival

Giao diện footer trên website Kikk Festival được thiết kế tốt và là một ví dụ tuyệt vời về footer được sử dụng hiệu quả để hiển thị các nhà tài trợ sự kiện và đối tác. 

Hy vọng với 20 ví dụ về cách sử dụng footer ở trên sẽ truyền cảm hứng cho bạn trong dự án thiết kế tiếp theo. Nếu bạn có một footer website đẹp mắt. Hãy chia sẻ với chúng tôi.