25 Thiết kế web Responsive ấn tượng năm ( P.1)

Sự gia tăng nhanh chóng của số lượng người sử dụng các thiết bị di động khiến sự cần thiết của việc tối ưu hóa thiết bị di động (responsive) cho các website cũng tăng lên nhanh chóng.

Dù bạn đang sở hữu một website doanh nghiệp hay một thiết kế website bán hàng, một thiết kế website bất động sản, khách sạn, thì hầu hết mọi người đều hiểu rằng nếu web không responsive thì lượng người truy cập theo đó cũng sẽ giảm xuống. Hiểu được điều đó, hôm nay chúng tôi mang đến 25 mẫu website tối ưu hóa di động, không chỉ đẹp mà còn điều hướng tốt. Hi vọng những mẫu chúng tôi đưa ra sẽ làm hài lòng các bạn và truyền cảm hứng cho các bạn xây dựng một website responsive hoàn hảo cho bạn hoặc doanh nghiệp của bạn.

1) Moon

25 Thiết kế web Responsive ấn tượng năm 2014 ( P.1)


Là sự hợp tác giữa ING Direct và Unicef, "MOON" là một trang web độc đáo cả về bố cục lẫn thiết kế, đặc biệt web đẹp cả trên desktop và các thiết bị di động. “Moon” có phiên bản riêng cho desktop và di động. Web có chương trình trình chiếu video khá thông minh. Khi bạn vô web bằng di động, bạn chỉ cần lắc nhẹ điện thoại, video sẽ tự chuyển hướng. Đây thực sự là một thiết kế website đáng để trải nghiệm. 

2) ELEKS Google Glass Experiment

25 Thiết kế web Responsive ấn tượng năm 2014


Experiment Eleks Google Glass là website thắng giải "trang web của ngày" do TheFWA và Awwwards bình chọn. Dù phiên bản desktop hay di động thì Google Glass cũng tương tác rất tốt với người dùng, nhờ tận đụng được cả hai yếu tố hình ảnh và kết nối giọng nói.

Điều ấn tượng nhất của trang web là hình ảnh lớn, nổi bật, trong đó tiêu đề chuyển động vừa đủ để cho người sử dụng không bị ảnh hưởng xấu trong thời gian tải. Hơn nữa, các văn bản được trình bày một cách sạch sẽ và hiệu quả để thông tin được truyền tải một cách hiệu quả mà không cần video hay hình ảnh.

3) Mercedes-Benz

25 Thiết kế web Responsive ấn tượng năm 2014


Năm 2014 Mercedes-Benz là trang web tối ưu hóa tạo ra cảm hứng cho xe V-Class mới. Chức năng của phiên bản desktop  có video nền chạy, tạo ấn tượng và nổi bật những trải nghiệm của V-Class mới. Trên thiết bị di động, video không hiển thị nhưng được thay thế bằng hình ảnh không kém phần hấp dẫn và lôi cuốn của những chiếc xe.

Trong khi phiên bản desktop dùng video để xây dựng thương hiệu và tính năng của xe, giúp người dùng có thể xem trực quan, thì ngược lại, phiên bản điện thoại di động lại mang tính chất định hướng người dùng nhiều hơn với điều hướng nhanh chóng và dễ dàng. Một trang web đáp ứng cả hai mục đích khác nhau được thiết kế riêng cho hai khán giả mục tiêu khác nhau như thế này là một sản phẩm tuyệt vời.

4) Jet Edge

25 Thiết kế web Responsive ấn tượng năm 2014


Ấn tượng đầu tiên khi bạn vào Jet Edge, có lẽ là cảm giác như bạn đang được bay. Dù bạn vào bằng thiết bị nào, desktop hay di động thì cảm giác này cũng không thay đổi. Điều này là nhờ vào yếu tố đồ họa được Jet Edge tận dụng khi xây dựng website. Hình ảnh mây bồng bềnh được bố trí fullpage khiến tầm nhìn người xem như được mở rộng.

Trên di động, do màn hình nhỏ hơn destop nên hiệu ứng chưa đạt được hiệu quả tạo cảm xúc như trên desktop, nhưng chung quy lại thì vẫn rất hiệu quả. Đây có thể là một gợi ý tốt cho bạn khi thiết kế website responsive: sử dụng hình ảnh lớn làm background.

5) Blue Fountain Media

25 Thiết kế web Responsive ấn tượng năm 2014


Blue Fountain Media ra mắt phiên bản mới vào năm 2014 với thiết kế và bố cục rõ ràng, điều hướng khách tham quan web tốt trên cả desktop lẫn thiết bị di động. Với các hiệu ứng chuyển động đẹp trên desktop, Blue Fountain Media vẫn linh động cho hiển thị đẹp trên di động, và đây chính là một thành công của họ.

Tác giả bài viết: Liên Nguyễn
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