Jak dodać animowane ikony na stronę www?

Wykorzystanie animacji na stronie www w znacznym stopniu ożywi jej przekaz, co może przełożyć się na wyższą konwersję i zyski dla Twojej firmy. Najczęściej stosowanymi animacjami na stronie www są karuzele zdjęć oraz slidery. Jednak coraz częściej prym wiodą animowane ikony. Nie dość, że wyglądają bardzo dobrze, to w dodatku przykuwają wzrok czytelnika. 

Dlaczego warto stosować animowane ikony?

Animowane ikony przyciągają uwagę, pomagają w znacznym stopniu uatrakcyjnić treści oraz pozytywnie wpływają na czytelność. Dodatkowo pomagają zwiększyć konwersję na stronie www. 

Z doświadczenia wiem, że animowane ikony często stosuje się w różnego rodzaju infografikach. Odpowiednio zaprojektowana ikona może w ciekawy sposób przedstawić dane, na których najbardziej nam zależy. 

Poniżej przykłady miejsc na stronie www, w których warto zastosować animowane ikony:

• nawigacja 
• przyciski CTA
• infografiki
• obszary szczególnie ważne na stronie, np. sekcja promocji w sklepie online
• strona z błędem 404

Lordicon — biblioteka animowanych ikon

Lordicon to biblioteka animowanych ikon, które w łatwy sposób możesz dodać na własną stronę www. W wersji darmowej masz dostęp do kilkuset animowanych ikon. Wykupując wersję PRO, zyskasz sporo dodatkowych ikon. Łącznie możesz skorzystać z biblioteki kilku tysięcy ikon – to naprawdę imponujący wynik!

Dodawanie ikon na stronę www

Twórcy aplikacji Lordicon.com udostępniają kilka możliwości integracji swoich ikon z innymi aplikacjami i programami. Poniżej w kilku krokach opiszę jak w łatwy sposób dodać animowane ikony na stronę www.

Krok 1: Wejdź na stronę lordicon.com

Przejdź do witryny www.lordicon.com. W centralnym punkcie strony kliknij zielony przycisk Browse icon. Po załadowaniu biblioteki możesz skorzystać z wyszukiwarki lub spisu kategorii, które znajdują się po lewej stronie witryny.

Krok 2: Dostosuj ikonę

Wybraną ikonę możesz dodatkowo modyfikować, korzystając z panelu po prawej stronie, zmieniając jej kolor oraz grubość linii:

Tak przygotowaną ikonę możesz już dodać na swoją stronę www. Wystarczy, że klikniesz przycisk Reveal full editor. W okienku które się pojawi, będziesz mógł dodać wcześniej zaprojektowaną ikonę na kilka sposobów. Dodatkowo możesz w tym miejscu ustawić dodatkowe typy animacji.

Typ animacji (trigger):

• Hover – animacja uruchamia się po  najechaniu kursorem myszki na ikonę.
• Loop – zapętlona animacja, uruchamia się automatycznie.
• Loop on hover – zapętlona animacja, uruchamia się po najechaniu myszki na kursor.
• Morph – po najechaniu kursorem lub kliknięciu ikony animacja jest odtwarzana od pierwszej do ostatniej klatki. Po przesunięciu lub kliknięciu animacja odtwarza się od końca.

Krok 3: Dodaj ikonę na stronę www

Sposób 1: Embed HTML

Wystarczy, że klikniesz przycisk Embed HTML. W tym miejscu możesz dodatkowo ustawić takie parametry jak wielkość ikony (Size) oraz opóźnienie animacji (Delay). Po wprowadzeniu wszystkich ustawień możesz skopiować kod za pomocą przycisku Copy HTML code. Skopiowany kod HTML wystarczy wkleić na własną stronę www. 

Sposób 2: More options

W tym okienku możesz pobrać zaprojektowaną wcześniej ikonę jako jeden z wielu formatów plików: .gif, .mp4, .webp, .apng, .svg czy .png. Warto pamiętać, że dwa ostatnie formaty są statyczne. Po wyborze odpowiedniego formatu pojawi się okienko z możliwością pobrania pliku. W tym miejscu możesz również wybrać kolor tła ikony. Nie zabrakło także wszystkich parametrów dostępnych w sposobie 1: Embed HTML.

Integracja z WordPressem

Jeżeli zbudowałeś swoją stronę na silniku WordPress, możesz skorzystać z darmowej wtyczki, która umożliwia integrację Lordicon z WordPressem i wtyczką Gutenberg. Dodatkowo możesz skorzystać z tak zwanych shortcodów, aby umieścić animowane ikony w edytorach takich jak Divi czy Elementor. 

Zalety i wady Lordicon

Szukając narzędzia, które oferuje animowane ikony w bardzo dobrej jakości, Lordicon jest strzałem w dziesiątkę. Aplikacja ma sporo zalet i niewiele wad. 

Zalety Lordicon:

• wszystkie ikony zostały wykreślone za pomocą siatki, dla mnie to bardzo duży plus
• dostęp do plików źródłowych (np. Adobe After Effect)
• integracja z WordPressem
• prosta i intuicyjna obsługa
• biblioteka 349 darmowych, animowanych ikon (w dniu publikacji artykułu)
• biblioteka 2017 darmowych, statycznych ikon (w dniu publikacji artykułu)
• działalność charytatywna (Lordicon przekazuje 10% swoich dochodów na akcje charytatywne)
• kategoria ostatnio dodanych ikon

Wady Lordicon:

• brak pełnych ikon (wszystkie zostały wykonane za pomocą obrysów)

Podsumowanie

Bez dwóch zdań aplikacja Lordicon to jedna z lepszych, z którymi miałem do tej pory styczność. Bardzo spodobało mi się podejście autorów do projektowania ikon zgodnie ze sztuką oraz to, że 10% z każdej transakcji przekazywane jest na cele charytatywne. Dodatkowo na pochwałę zasługuje fakt, że zespół Lordicon pracuje nad pełną integracją z Adobe XD.

Cena 8 dolarów przy subskrypcji rocznej (płatne z góry 96$ za rok) jest niewielkim wydatkiem, biorąc pod uwagę to, ile możemy zyskać.