8 landing page "chuẩn chỉnh" cho bạn tham khảo (P.1)

Thứ bảy - 26/05/2018 09:00

Hãy cùng chúng tôi khám phá cách làm landing page của 8 website tiêu biểu dưới đây và tìm cho riêng mình ý tưởng làm nên thành công cho các thiet ke web của bạn.

8 landing page "chuẩn chỉnh" cho bạn tham khảo (P.1)

Chất lượng thiết kế của trang đích đến có thể quyết định đến sự khác biệt về mức độ thành công của các thiết kế web. Có rất nhiều nguyên tắc và quy định để tạo ra một thiết kế thành công, đối với landing page cũng vậy. Đây chính là thành phần đóng góp quan trọng vào quyết định của người dùng web đối với việc dành thời gian và hứng thú cho website của bạn. 

Bạn cũng có thể mang những nội dung quan trọng nhất cần nhấn mạnh để đặt vào vị trí này của thiet ke web. Ở landing page có thể đặt những nút kêu gọi hành động, những thông tin về chương trình ưu đãi mới nhất, những thông tin hoặc hình ảnh về sản phẩm dịch vụ nổi bật...Bất kể bạn định gửi gắm thông điệp gì ở landing page thì đó cũng là một khu vực màu mỡ để tận dụng và truyền tải thông điệp một cách hiệu quả.

Có rất nhiều cách để gây ấn tượng với người dùng web đối với landing page. Người ta có thể đặt những bức ảnh nền khổ lớn đẹp đẽ và bắt mắt ở đó hay có thể kể đến các hiệu ứng animation sinh động hoặc typography đẳng cấp. 

Hãy cùng chúng tôi khám phá cách làm landing page của 8 website tiêu biểu dưới đây và tìm cho riêng mình ý tưởng làm nên thành công cho các thiet ke web của bạn.

01. Bear CSS

8 landing page 'chuẩn chỉnh' cho bạn tham khảo (P.1)

 

Bạn không thể không chú ý đến nút call to action của landing page này. Bear CSS là một công cụ giúp các lập trình viên tạo ra CSS nhanh và dễ dành hơn. Bố cục của landing page này khá đơn giản và tuân thủ những quy tắc then chốt cho việc thiết kế thành phần này, đó là: sự gọn gàng trong bố cục, sự đơn giản trong cách sử dụng và thông tin rõ ràng.

Nút call to action 'upload HTML' nổi bật trong ô màu cam trên nền xám. Phía trên là 3 mục giải thích quá trình. Bạn sẽ không thể bỏ lỡ cả nút bấm và 3 dòng thông tin quan trọng này. 

02. Squarespace

8 landing page 'chuẩn chỉnh' cho bạn tham khảo (P.1)

 

Squarespace cho bạn thấy một số landing page với hiệu ứng cuộn bên cạnh. Đây là cách làm khá sáng tạo của website này. Squarespace mang tới thiết kế chất lượng cao và cách bố trí bố cục khá mới mẻ với các landing page có chức năng khác nhau: Create your own space, Create your own brand, Create your own store, Create your own canvas và Create your own story.

Nút bấm Get started đặt ở ngay bên dưới title lớn. Mỗi landing page chứa một testimonial video của khách hàng. Cả 5 landing page đều có cùng một thông điệp là muốn khách hàng dùng thử sản phẩm. 

03. GiftRocket

8 landing page 'chuẩn chỉnh' cho bạn tham khảo (P.1)

 

Màu vàng bắt mắt của nút call to action trên website GiftRocket. Thiết kế web này là một ví dụ điển hình của việc dùng header đơn giản kết hợp với các đánh dấu dòng và call to action. Thiết kế landing page đẹp mắt của GiftRocke có một phần lớn nhờ đồ họa thú vị của nó. Bức hình đó được bao quanh bởi các icon, tạo thành một điểm nhấn với người xem.

Nút bấm Send a GiftRocket sử dụng màu sắc nổi bật trên nền khiến người xem chú ý và thôi thúc họ bấm vào nút đó theo ý đồ mong muốn của chủ website. Bạn sẽ tìm thấy nhiều thông tin hữu ích về sản phẩm mà website cung cấp, cũng như đến với testimonial và hàng loạt bất ngờ thú vị khác khi cuộn trang xuống. 

04. Hipstamatic

8 landing page 'chuẩn chỉnh' cho bạn tham khảo (P.1)

 

Landing page của Hipstamatic mang tới thông tin ban đầu rất ấn tượng về ứng dụng mà website này cung cấp. Bức ảnh khổ lớn ở phía trên mang hơi hướng retro với font chữ duyên dáng. Cách giới thiệu về các tính năng hữu ích của ứng dụng cũng được thể hiện một cách khéo léo. 

Bạn có thể để ý phía trên của thiết kế này là gallery cuộn với những ứng dụng thực tế mà ứng dụng mang lại. Đây là cách thể hiện rất thuyết phục với người xem. 

Tác giả bài viết: Phùng Thanh Hằng