Lấy lòng người dùng web bằng load trang animation

Thứ sáu - 25/09/2015 20:51

Trang hiệu ứng đẹp, không bị chậm là điều thú vị giúp cuốn hút người dùng truy cập vào trang web của bạn. Bài viết này sẽ hướng dẫn một số hiệu ứng đẹp cho trang web của bạn.

Lấy lòng người dùng web bằng load trang animation

Animation xuất hiện ở mọi nơi trên các thiết kế website chuyên nghiệp, mang lại vẻ đẹp, sự cuốn hút, trải nghiệm người dùng, truyền thông điệp...Trong nhiều tình huống, animation đã cứu nguy khi website chẳng may gặp sự cố, hoặc đơn giản là nó load quá chậm. Chúng ta không xa lạ gì với những animation biểu thị tiến độ load trang, còn hôm nay, hãy mở rộng hơn nữa với muôn kiểu animation trong thời gian chờ load trang khác. 4:20 Dead Obies.

4:20 Dead Obies

Khi mở thiết kế website thú vị này ra, chúng ta thấy phủ kín chữ trên đó, các chữ cái này sẽ lần lượt biến đổi năng động thành một tấm bảng thông tin của sân bay.

4:20 Dead Obies thiet ke website animation

NewsTech

NewsTech sử dụng hình ảnh công nghệ cao mạnh mẽ, các chi tiết lấy cảm hứng từ các dữ liệu 

NewsTech thiet ke website animation

Ferias Beach Park

Ferias Beach Park cố gắng truyền đi cảm xúc tích cực và không khí vui vẻ. Hiệu ứng trong lúc chờ đợi là animation rất đáng yêu.

Ferias Beach Park thiet ke website animation

Mad Max Fury Road

Một trang với thanh tiến trình đầy tính nghệ thuật. Phần tiêu đề rất hợp với chủ đề của phim.

Mad Max Fury Road thiet ke website animation

Panda Raid

Panda Raid sử dụng những illustration cho chuyển động của chiếc xe hơi trên thanh tiến trình. Có 2 tác dụng ở đây: một là giảm sự chán nản khi chờ load trang, 2 là cho người ta biết tiến trình dự án.

Panda Raid thiet ke website animation

Wiser Digital

Wiser Digital lấy cảm hứng từ trò bóng bàn. Mặc dù bạn không thể tham gia chơi những nó cũng góp phần làm vui mắt khi chờ load trang.

Wiser Digital

Tenfold Creative

Tenfold Creative chào đón mọi người với hàng loạt cụm từ bắt mắt. 

Tenfold Creati thiet ke website animationve

Tham Nguyen

Tham Nguyen là một nữa chuyên gia thiết kế đồ họa từ Pháp. Portfolio của cô ấy sử dụng cảnh trí thiên nhiên và các chi tiết mang phong cách hoạt hình rất hoành tráng.

Tham Nguyen thiet ke website animation

50m.space

Khá giống với ví dụ trước, phần load trang animation của website này cũng có illustration giúp củng cố chủ đề trang.

50m.space thiet ke website animation

Madagence

Có sự khác biệt giữa ví dụ này với 2 ví dụ trên. Nó sử dụng phong cách thiết kế tối giản, lấy cảm hứng từ hình khối. 

Madagence thiet ke website animation

Kajikenseiji

Kajikenseiji thay đổi thanh load với một vài chuyển động tinh tế. Có sự phản ánh phong cách Nhật Bản và rất nhiều khoảng trắng tại thiết kế web này.

Kajikenseiji thiet ke website animation

One Kichjoji

One Kichjoji có cách tiếp cận khá giống với ví dụ trước. Màn hình mở với chỉ một illustration chứa chuyểnđộng tin tế.

One Kichjoji thiet ke website animation

Interatction with Artificial Physics

Interaction with Artificial Physics là dự án tuyệt vời. Animation tinh tế đã góp phần làm nên điểm nhấn cho website.

Interaction with Artificial Physics thiet ke website animation

Catch the Dragon

Catch the dragon  cũng có phần chuyển động bắt mắt  trong lúc chờ website load xong.
 

Catch the dragon thiet ke website animation

SLMF

SLMF có typography rất đẹp. Hiệu ứng animation mang lại cảm xúc chung rất mạnh mẽ.

SLMF thiet ke website animation

Zodiac

Zodiac có trang mở rất nghệ thuật và dùng animation trong lúc chờ load trang. Mọi chi tiết giống như được vẽ tay. 

Zodiac thiet ke website animation

MTV Bump

MTV Bump độc đáo với những chi tiết tươi vui,  phần animation lúc chờ đợi chính là thành phần làm nên thú vị của trang.

MTV Bump thiet ke website animation

Y7K

Y7K dùng những đương thẳng đơn giản để tạo hình. Tên của công ty được đặt ở vị trí khá ổn.

Y7K thiet ke website animation

Henge Travel

Henge Travel kết hợp hiệu ứng lúc chờ đợi với màn hình mở để tạo phản ứng gần gũi hơn từ 2 phía. 

Henge Travel thiet ke website animation

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions