9 stron internetowych z animacjami, które inspirują nas jako twórców stron internetowych

Twórcy stron internetowych prowadzą niekończące się dążenie do aktualizowania swoich witryn internetowych za pomocą najnowocześniejszych, najmodniejszych efektów projektowych, które reprezentują prawdziwą wartość ich produktu lub usługi. Ale między paletami kolorów, typografią, responsywnością, strategią treści i wieloma innymi, myśl o zaawansowanych technikach projektowania może być nieco onieśmielająca. Jednym z najlepszych sposobów na stworzenie strony internetowej, której projekt jest wart swojej soli, jest szukanie inspiracji u rówieśników. Zadawanie sobie pytania, co kochasz w ich projektach, w jaki sposób może to pasować do twojego projektu i jak chcesz go zmodyfikować do swoich potrzeb, może być naprawdę proste.

Sprawdźmy te dziewięć przykładów kreatywnych animacji na stronie i zacznijmy uczyć się od profesjonalistów.

Techniki animacji, które Handwrytten używa w sekcji bohatera swojej strony głównej, są przejmującym przedstawieniem samego produktu: połączenia pióra i atramentu. Jedną z kluczowych wartości w tym projekcie (między innymi) jest to, że odwiedzający stronę natychmiast rozumie korzyści, jakie oferuje produkt i co zyska, korzystając z niego.

Zdjęcie odręcznie napisanej kartki zestawionej z ilustracją kreskówkową naprawdę mówi wszystko. Jeśli chodzi o inne elementy projektu na stronie, czysta biało-czarna kolorystyka z nutami pomarańczowego zachodu słońca zapewnia równowagę między wyrafinowaniem i artystycznym zacięciem. Po przejrzeniu tej strony z pewnością jesteśmy zmotywowani do dalszego rozglądania się i poznawania produktu Handwrytten.

Crisp dodaje drobne efekty animacji do swoich ilustracji wektorowych, które przekazują rezonansowe przesłanie marki pomimo niewielkich rozmiarów ilustracji. Subtelna animacja każdej ilustracji wektorowej rzeczywiście dodaje ludzkiego charakteru wizerunkowi marki Crisp. Szczególnie podoba nam się animowane ognisko w sekcji poświęconej obsłudze klienta. Dodaje życia minimalistycznej, płaskiej konstrukcji, która jest elegancko zastosowana na stronie głównej. Jest to idealny sposób na wykorzystanie tych modnych technik projektowania płaskiego, jednocześnie dodając radość życia niezbędną do ekscytującego doświadczenia użytkownika.

Corebook wita odwiedzających na swojej stronie internetowej w pełnym ciemności, z subtelnymi i eleganckimi animacjami podczas przewijania strony. Na swój unikalny sposób Corebook znajduje sposób na zaprojektowanie animacji bohaterów, które są łatwo i wyraźnie widoczne, pomimo braku kontrastu między ciemnoszarym a czarnym tłem.

Wybór treści animacji jest minimalistyczny, ale pouczający. Jest to możliwe dzięki zaledwie kilku kwadratowym kształtom i kolorom, animacje ilustrują rodzaj gotowego produktu (księgę znaku), który klienci będą mieli pod ręką po dołączeniu do Corebook: ich autorska księga znaku, która spełnia standardy branżowe i wygląda nowocześnie, modne i wyrafinowane.

Best Day Ever wykorzystuje technikę animacji zapętlonej, dzięki czemu ilustracje zwierząt nie opierają się na wyzwalaczach, aby móc się poruszać. Niezależnie od tego, która ilustracja jest widoczna dla odwiedzającego witrynę, porusza się ona tak długo, jak długo jest widoczna na ekranie.

Na całej stronie obowiązuje podejście polegające na skoncentrowaniu się na treści, ponieważ słowa i zdania są krótkie i nie dłuższe niż powinny. To właśnie takie podejście tak dobrze łączy się z przyjaznymi animacjami, łączącymi minimalny tekst z optymistycznym, kolorowym designem. Ruchy zwierząt nie tylko ożywiają tekst, z którym są sparowane, ale zapewniają każdemu użytkownikowi wrażenia konwersacyjne.

Witryna Best Day Ever jest doskonałym przykładem tego, jak możesz wziąć jeden pomysł i zasadę projektową (w tym przypadku temat połączenia energetycznej świeżości z subtelnością) i konsekwentnie ją reprezentować za pomocą schematu kolorów, strategii treści i zaawansowanych efektów projektowych.

Kto nie lubi klasycznego basenu z piłeczkami? Wykorzystując klasyczne kolory marki na białym tle, Google po raz kolejny uderza w złoto.

Dzięki jednemu efektowi śledzenia myszy Google udaje się uzyskać wrażenia użytkownika, które sprawiają, że odwiedzający witrynę czuje się, jakby rzeczywiście był w basenie z kulami! A kiedy przewiniesz stronę, wszystko, co się dzieje, to to, że kulki stają się większe. Pod kulkami nie ma treści, co jest dokładnie takie, jak w rzeczywistości.

Google zapewnia nam natychmiastowe, sensacyjne zrozumienie, do czego służy ten produkt, i robi to za pomocą prostego opisu tytułu w tekście bohatera i przycisku CTA.

Wiemy, że Google pomoże nam zaplanować kolejną przygodę, która nas nie zawiedzie. Czy widziałeś efekty zmiany koloru po najechaniu kursorem na przycisk? Po raz pierwszy widzieliśmy przycisk, którego efekt najechania zmienia się na cztery oddzielne kolory, a nie zmienia się z jednego koloru na drugi.

Nie przypomina niczego, co kiedykolwiek widzieliśmy. Na naszych oczach widzimy animowane abstrakcyjne kształty poruszające się i tworzące ilustrację zwierzęcia. Rozbudza naszą ciekawość, podziwianie pięknych zwierząt i zastanawianie się, jakich innych zwierząt używali?

To jest dokładnie ten proces myślowy, który chcesz, aby odwiedzający Twoją witrynę miał. Opowiadasz mu wizualną historię i chcesz, żeby przeszedł na następną stronę tej historii.

Jeśli się nad tym zastanowić, opowiadanie historii i przyczyna występowania zagrożonych gatunków mają ze sobą wiele wspólnego: obie mają na celu przyciągnięcie uwagi słuchacza i przekonanie go (choć subtelnie), że twój temat ma pierwszorzędne znaczenie, czyli warto go posłuchać.

Branża konopi jest wciąż dość nowatorska i świeża, więc sensowne jest, aby strona internetowa, która sprzedaje ją jako produkt, potrzebowała takiego samego wyglądu i atmosfery.

Zatrzymajmy się, aby docenić, jak wiele technik projektowych występuje na samej stronie głównej: tło pokazu slajdów za kolekcjami animowanych obrazów, efekty 3D, obracające się słowa… a wszystko to wygląda pięknie.

Jak ktoś mógł zobaczyć tę stronę główną i nie chcieć dalej eksplorować witryny? Tylko jeśli to zrobisz, zobaczysz, że oszałamiające animacje stają się jeszcze bardziej fantastyczne, gdy przewijasz w dół.

Uwielbiamy, jak po zejściu w dół strony słoik obraca się, a obiekty na kolorowym tle przesuwają się na marginesy strony, gdy tło staje się białe. Tak kreatywny. Im niżej się schodzisz, tym piękniejsze obiekty 3D zachowują efekt przewijania w pionie w górę.

Wszystkie te techniki połączone tworzą wrażenie, że chcesz po prostu kontynuować i czytać więcej witryny, nawet tylko po to, aby zobaczyć intrygujące wizualizacje i to, co wymyślili projektanci.

Jeśli przejdziesz do innych stron, zobaczysz, że obiekty 3D z treści bohatera strony głównej stały się trwałą częścią tła, a jednocześnie nadal unoszą się i poruszają. Ten wybór ciągłości pozwala na całościowe opowiadanie historii, które przybliża sprawę do domu: Jesteśmy niesamowitym produktem.

Czy jest to kolorystyka, projekt 3D, dyskretny ruch obrazu, czy ilustracja karty kredytowej, która opada w akrobatycznym ruchu, gdy przewijamy stronę główną?

To po trochu wszystkiego.

Kolorystyka tutaj idzie daleko. Odcienie pomarańczy otoczone dużą ilością białej przestrzeni i prostą, zaokrągloną czcionką bezszeryfową współgrają ze sobą tak holistycznie. Ale to, co naprawdę wygrywa, to techniki animacji używane do ilustracji karty kredytowej.

RappiPay dostaje nasz głos na oryginalność i niezwykłe zaangażowanie. Treść witryny prowadzi użytkownika w dół strony, aż osiągnie dno, ponieważ gdy karta kredytowa przesuwa się tak płynnie w dół strony, powoduje pojawienie się innych obrazów i ilustracji. A pomiędzy interakcjami karty kredytowej z innymi elementami, takimi jak odsłanianie banknotów lub rysowanie kropkowanymi liniami wokół kuli, karta pokazuje akrobatyczne przewroty do samego końca.

Tak jak karta kredytowa dobrze opowiada historię, pełną akcji i witalności, tak też kończy się na haju. Okrągłe wycięcie na końcu pokazujące zakupy właściciela karty mówi nam, ile funkcji i możliwości ma ta jedna karta i jak właściciel karty naprawdę zabrał ją wszędzie i gdziekolwiek.

Słowa minimalistyczne i nowatorskie to wszystko, o czym możemy tu pomyśleć. Jeśli obraz mówi tysiąc słów, powiedzielibyśmy, że animowany obraz mówi 5000 lub prawdopodobnie nawet więcej.

OK, teraz twoja kolej. Techniki animacji, które tutaj wymieniliśmy, to tylko niewielka część tego, co twórcy stron internetowych mogą osiągnąć, dodając animowane funkcje do swoich witryn. Coraz więcej inspiracji staje się dostępnych każdego dnia i jest tak wiele do zobaczenia i nauczenia się. Naszą dewizą jako projektantów jest zacząć od podstaw, a ponieważ masz za sobą proste praktyki animacji, Twoja strona internetowa może pokazać światu, co to znaczy być poruszycielem.