Jak strategicznie dodać animację do swojej witryny

Wykorzystanie animacji w projektowaniu stron internetowych nie jest niczym nowym.

Pamiętasz dawno minioną erę obracających się gifów 3D?

A co z życiem i śmiercią Flasha?

Po tym, jak Apple zakazał używania Flasha na wszystkich swoich urządzeniach mobilnych, projektanci szybko wymyślili sposób na przywrócenie animacji do gry. Dzięki kreatywności programistów i projektantów stron internetowych mamy teraz magię przejść CSS3, animacji SVG, wysokiej jakości plików GIF i oczywiście animowanych filmów utworzonych za pomocą programów takich jak After Effects i Blender.

Ostatnio było kilka lat, kiedy trendem było projektowanie płaskich działek. Na szczęście animacja powróciła w wielkim stylu i jest obecnie jednym z największych trendów na rok 2018 i kolejne lata.

Animacje stały się teraz oczekiwaniem.

Pozytywny wpływ animacji na projektowanie UX i UI nie jest zaskakujący, ponieważ ludzie są wizualnymi stworzeniami i zawsze będą przyciągać ruch i ruch. Animacje mogą ożywić każdy proces, zamieniając go w doświadczenie. Ruchy informują użytkowników, że coś się dzieje.

Na przykład animacje wewnątrz komórek formularzy mogą powiadamiać użytkowników o popełnieniu błędu lub braku informacji. Lub po wprowadzeniu błędnego hasła, gwiazdki mogą zmienić kolor na czerwony, zatańczyć i zniknąć.

A może ta zabawna animacja logowania? Możliwości animacji w projektowaniu stron internetowych rosną każdego dnia. Dlaczego nie dodać strategicznych animacji do swojej witryny?

Animowanie Twojej witryny

Opcje dodawania animacji do witryny są dość obszerne, ale to nie znaczy, że powinna być pełna skaczących ikon i obracających się przycisków. Ilość animacji uwzględnionych w projekcie musi być zrównoważona. Myśl raczej o „miękkim ruchu” niż o stronie, która porusza się tak bardzo, że nie wiesz, gdzie patrzeć. Nadużywanie animacji jest tak samo bolesne jak nadmierny minimalizm!

Korzystanie z programu takiego jak Adobe XD może pomóc w procesie wypróbowywania różnych animacji w celu strategicznego umieszczenia ich w witrynie. Jeśli lubisz budować bezpośrednio w WordPressie, świetną opcją jest Divi Builder, który oferuje wiele możliwości animacji w każdym module.

Na końcu artykułu zamieściłem kilka linków do świetnych zasobów, które pomogą dodać animacje do Twojej witryny.

Przyjrzyjmy się różnym rodzajom animacji, które mogą poprawić UX Twojej witryny i ogólną kompozycję wizualną.

Funkcjonalny lub estetyczny

Animacje mają dwa zastosowania w projektowaniu stron internetowych; funkcjonalność i estetyka.

Funkcjonalne animacje

Animacje mogą pomóc odwiedzającym w podróży użytkownika po Twojej witrynie. Zwracają uwagę na wezwania do działania lub ważne sekcje, których nie chcesz przegapić. Ułatwiają procesy i są przyjemne wizualnie.

Ładowanie animacji

Najbardziej powszechną animacją funkcjonalną i jedną z pierwszych, które pojawiły się w projektowaniu stron internetowych, jest animacja ładowania. Kiedyś można je było znaleźć głównie przy pierwszym otwarciu witryny, ale teraz, gdy witryny ładują się natychmiast, są używane do takich rzeczy, jak ładowanie filmów, postęp pobierania i inne procesy, które może mieć Twoja witryna.

Aby animacja ładowania była skuteczna, musi pasować do Twojej marki. Jeśli Twoja witryna jest zabawna i kolorowa, animacją ładowania może być wszystko, od odbijającej się piłki po kolorową pętlę. Z drugiej strony, jeśli Twoja witryna jest poważna i oficjalna, animacja ładowania powinna być zgodna z tym stylem.

Unosi się

Inne popularne animacje funkcjonalne, które należy wziąć pod uwagę, to najechanie kursorem. Jesteśmy już przyzwyczajeni do oglądania animacji zawisu i większość ludzi będzie ich oczekiwać. Zmienianie koloru przycisku po najechaniu na niego kursorem to podstawowa animacja, którą zdecydowanie powinieneś rozważyć, czy to w menu, czy wezwaniu do działania.

Inne sposoby używania najechania kursorem dotyczą przycisków, które nie wyglądają jak przyciski, lub jeśli chcesz wyświetlić informacje o najechaniu kursorem, zanim klikną.

Przewijanie

Strony internetowe z efektami przewijania nie są już wyjątkowym zjawiskiem. Przewijanie paralaksy stało się bardzo popularne (i prawdę mówiąc, staje się trochę męczące). Więc jeśli chcesz użyć animowanego przewijania, pomyśl nieszablonowo. Dołącz elementy, które przechodzą z sekcji do sekcji, elementy, które pojawiają się stopniowo wraz z przewijaniem. Pomyśl o funkcjonalności i estetyce.

animacje estetyczne

Estetyczne lub dekoracyjne animacje to takie, które sprawiają, że witryna jest bardziej atrakcyjna wizualnie, ale niekoniecznie poprawiają funkcjonalność. Istnieje stara metafora z epoki pierwszych kreskówek Walta Disneya, że ​​animacja jest „iluzją życia”. To, co animacja robi ze statycznym obrazem, ożywia go, sprawia, że ​​oddycha.

Dzięki odpowiedniej ilości estetycznych animacji Twoja witryna może być niezapomniana.

Podobnie jak animacja funkcjonalna, animacja dekoracyjna musi mieć równowagę. Zadaj sobie pytanie, czy to animowane tło jest naprawdę potrzebne i czy dobrze pasuje do Twojej marki. Czy każde zdjęcie musi być animowane na ekranie, czy też potrzebujesz tylu wyskakujących okienek? Upewnij się, że dodane animacje są wystarczające, aby witryna była przyjemna dla oka, ale nie przytłaczająca.

Animowane tła

Najmodniejsze obecnie animowane tła to tła cząsteczkowe, od prostych ruchomych kropek po złożone ruchy efektów świetlnych. Można je dodać jako tło dla całej strony lub tylko dla sekcji. Mogą sprawić, że obszary Twojej witryny będą miały więcej osobowości. Pamiętaj, że trendy się zmieniają, więc jeśli używasz tła cząsteczkowego, upewnij się, że naprawdę pasuje do Twojej witryny.

Nieograniczona kreatywność

Wreszcie, to, co animacja może zrobić dla Twojej witryny, to oferować nieograniczoną kreatywność. Ponieważ możesz animować praktycznie wszystko, możliwości twórcze są nieograniczone. Od animowanych teł po rzeczy poruszające się na ekranie, a nawet subtelne animacje, takie jak mruganie postaci.

Witryna może tak bardzo polegać na animacji, że podróż po stronach jest prawdziwym przeżyciem. Weźmy na przykład nową witrynę Porsche, która pokazuje historię producenta samochodów na przestrzeni lat.

Lub połącz ilustrację izometryczną i animowane przewijanie, a otrzymasz niesamowitą witrynę, taką jak RollPark.

Zawsze optymalizuj pod kątem urządzeń mobilnych!

Byłoby niesprawiedliwe, gdybym nie przypomniał Ci, że zawsze powinieneś sprawdzać swoje animacje na urządzeniach mobilnych. Upewnij się, że działają tak, jak powinny, a jeśli nie, wprowadź poprawki. Jeśli używasz animacji SVG, nie powinieneś mieć większego problemu, ponieważ grafika .svg jest nieskończenie skalowalna.

Tak czy inaczej, sprawdzanie zawsze na urządzeniach mobilnych i optymalizacja animacji dla wszystkich formatów sprawi, że Twoja witryna będzie o wiele lepsza!

Narzędzia, które pomogą Ci animować Twoją witrynę

Oto lista linków do praktycznych artykułów na temat różnych rodzajów animacji, których możesz użyć na swojej stronie.

• Zbiór darmowych bibliotek animacji
• Możliwości animacji DIVI Builder
• Twórca tła cząstek
• Dwa sposoby tworzenia prostych środowisk cząstek za pomocą CSS
• Korzystanie z animacji SVG

Podsumowując

Zadbaj o to, aby Twoje animacje były zrównoważone pod względem funkcjonalności i estetyki. To narzędzia, które ożywią Twoją witrynę, a nie sprawią, że będzie przytłaczająca. Pamiętaj, aby być kreatywnym i myśleć nieszablonowo.

Czy budując kolejną stronę internetową (lub aktualizując istniejącą) dodasz do projektu jakąś animację? Pamiętaj: najlepiej poeksperymentować w witrynie przejściowej lub lokalnej, zanim na stałe dodasz nowy kod do aktywnych witryn!

Z jakim typem animacji strony internetowej będziesz eksperymentować w następnej kolejności?