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ło używania Flasha na wszystkich swoich urządzeniach mobilnych, projektanci szybko znaleźli sposób na przywrócenie animacji do gry. Dzięki kreatywności twórców stron internetowych i projektantów mamy teraz magię przejść CSS3, animacji SVG, wysokiej jakości GIF-ów i oczywiście animowanych filmów tworzonych za pomocą programów takich jak After Effects i Blender.

Ostatnio przez kilka lat panowała moda na projektowanie płaskich witryn. Na szczęście animacja powróciła w wielkim stylu i jest obecnie jednym z największych trendów w 2018 roku i później.

Animacje stały się teraz oczekiwaniem.

Pozytywny wpływ animacji na UX i UI Design nie jest zaskakujący, ponieważ ludzie są stworzeniami wizualnymi i zawsze będą przyciągać ruch i ruch. Animacje mogą ożywić dowolny 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, że popełnili błąd lub brakuje informacji. Lub gdy wprowadzasz błędne hasło, gwiazdki mogą zmienić kolor na czerwony, zatańczyć i zniknąć.

Animacja z interfejsu użytkownika Kinetic

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

Animacja Darina na temat Dribbble

Animowanie witryny

Opcje dodawania animacji do witryny są dość obszerne, ale nie oznacza to, że powinna być usiana skaczącymi ikonami i obracającymi się przyciskami. Musi być zachowana równowaga w ilości animacji, którą zawierasz w swoim projekcie. Myśl raczej o „miękkim ruchu”, a nie 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 wypróbowaniu różnych animacji, które można strategicznie umieścić w witrynie. Jeśli lubisz budować bezpośrednio w WordPressie, świetną opcją jest Divi Builder, który zawiera 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ą.

Funkcjonalne lub Estetyczne

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

Funkcjonalne animacje

Animacje mogą pomóc odwiedzającym w podróży użytkownika w 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

Najpopularniejszą animacją funkcjonalną i jedną z pierwszych, które są powszechne w projektowaniu stron internetowych, jest animacja ładowania. Kiedyś znajdowały się one głównie podczas pierwszego otwarcia 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 formalna, animacja ładowania powinna być zgodna z tym stylem.

Animacja Sharon Yar i Dilys Lim on Behance

Animacja z UXPin ze strony Tom Cole Architecture

Unosi się

Inne popularne animacje funkcjonalne, które należy wziąć pod uwagę, to najechanie kursorem. Przyzwyczailiśmy się już do oglądania animacji najechania kursorem i większość ludzi będzie ich oczekiwać. Zmiana koloru przycisku po najechaniu na niego to podstawowa animacja, której zdecydowanie powinieneś rozważyć, zarówno w menu, jak i wezwaniu do działania.

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

Animacja z Design Shack

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ę nieco męczące). Więc jeśli chcesz używać animowanego przewijania, myśl nieszablonowo. Uwzględnij elementy, które przechodzą z sekcji do sekcji, elementy, które pojawiają się stopniowo wraz z przewijaniem. Pomyśl o funkcjonalności i estetyce.

Animacja autorstwa Youandigraphics

Estetyczne animacje

Animacje estetyczne lub dekoracyjne to takie, które sprawiają, że witryna jest bardziej atrakcyjna wizualnie, ale niekoniecznie poprawiają funkcjonalność. Istnieje stara metafora z czasów 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 estetycznej animacji Twoja strona 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, czy też odpowiednio pasuje do Twojej marki. Czy każde zdjęcie musi być animowane na ekranie, czy potrzebujesz aż tylu wyskakujących okienek? Upewnij się, że dodawane animacje wystarczą, aby Twoja witryna była ładna 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.

Animacja Femme Fatale

Nieograniczona kreatywność

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

Witryna może tak bardzo polegać na animacji, że podróż przez strony 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.

Animacja z Rollpark

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

Byłoby niesprawiedliwe, gdybym nie przypominał Ci, że zawsze powinieneś sprawdzać swoje animacje na telefonie komórkowym. Upewnij się, że działają tak, jak powinny, a jeśli nie, dokonaj korekt. Jeśli używasz animacji SVG, nie powinieneś mieć większego problemu, ponieważ grafiki .svg są nieskończenie skalowalne.

Tak czy inaczej, zawsze sprawdzanie na urządzeniach mobilnych i optymalizowanie animacji pod kątem wszystkich formatów sprawi, że Twoja witryna będzie znacznie lepsza!

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

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

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

Podsumowując

Utrzymuj animacje w równowadze pod względem funkcjonalności i estetyki. To narzędzia, które ożywiają Twoją witrynę, a nie sprawiają, że jest 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 jest poeksperymentować w witrynie testowej lub witrynie lokalnej, zanim na stałe dodasz nowy kod do aktywnych witryn!

Z jakim rodzajem animacji na stronie będziesz dalej eksperymentować?

Twórz własne animacje dzięki tym samouczkom!

• Jak tworzyć animacje SVG za pomocą CSS
• Jak używać przejść i przekształceń CSS3 do tworzenia animacji