Nie od dziś wiadomo, że komunikacja wizualna w wielu sytuacjach jest skuteczniejsza niż tekstowa. Nic więc dziwnego, że ikony otaczają nas w przestrzeni publicznej, na drogach, na tradycyjnych materiałach reklamowych, czy też właśnie w sieci.
Obojętnie czy projektujemy firmową stronę, aplikację mobilną, system lub animację promocyjną, ikony są częstym elementem projektów, bo cechują się szybkim przekazem i znacząco poprawiają UX.
Warto wiedzieć jak zrobić ikony, ponieważ pełnią one wiele ważnych funkcji:
- lepiej porządkują ofertę na stronie,
- są istotnym elementem interfejsu graficznego,
- pomagają łatwiej zobrazować skomplikowane treści (np. proces produkcyjny),
- ułatwiają skanowanie treści (w sieci użytkownicy raczej nie czytają od dechy do dechy, tylko bardziej skanują informacje),
- pozwalają oszczędzać miejsce,
- poprawiają estetykę i ożywiają projekt (np. oddzielając bloki tekstu),
- są elementem identyfikacji wizualnej marki.
W sieci nie brakuje serwisów oferujących płatne lub darmowe paczki z ikonami, ale zawsze lepiej mieć własny projekt. Twoja strona będzie wtedy odbiegała od szablonowych rozwiązań i lepiej przyciągnie uwagę użytkowników.
Warto więc ustalić to już na wstępie współpracy z agencją odpowiadającą za stronę czy identyfikację wizualną firmy. Dzięki temu zyskasz niepowtarzalny zestaw ikon, które będą trzymały się kilku najważniejszych zasad...
1. Spójny styl i forma
Ikony nie działają w oderwaniu od siebie, tworzą system znaków, dlatego konsekwencja projektowa jest kluczowa. Jest wiele pytań, które należy sobie zadać zarówno w kwestii przyjętej stylistyki, jak i formy. Oto kilka przykładów.
Styl:
- odręczny czy może bardziej techniczny,
- wykorzystanie sylwetki człowieka czy określonych detali,
- ikony płaskie czy złożone,
- ikony wielobarwne czy monochromatyczne,
- ikony linearne czy wypełnione (a może częściowo wypełnione),
- gradienty czy może cieniowania,
- niski poziom detali czy nieco wyższa szczegółowość,
- perspektywa: obiekt pokazany w całości czy może z boku, z przodu itd.
Forma:
- czy rozmiar ikon jest dopasowany do stopnia ich złożoności,
- czy ilość prezentowanych detali jest podobna,
- czy ikony mają takie same proporcje,
- czy zachowano jednakową grubość linii,
- czy promień zaokrąglenia jest wszędzie taki sam,
- czy ikony powstały na tej samej siatce i zastosowano podobne marginesy.
Zestaw ikon zaprojektowanych dla marki G3 (fot. agencja Bloomnet)
2. Kolorystyczna konsekwencja
Wybór kolorystyki zależy oczywiście w dużej mierze od palety wykorzystanej w systemie identyfikacji wizualnej. Ikony mogą odgrywać bowiem ważną rolę w tożsamości graficznej marki. Obojętnie, którą drogę wybierzesz - jeden wiodący kolor, różne odcienie tego samego koloru, połączenie dwóch kontrastujących kolorów czy wielobarwność - ważna jest jednak konsekwencja.
Warto też podkreślić, że kolorystyczna spójność wcale nie musi oznaczać wszystkich ikon w tym samym kolorze/kolorach. Zdarza się, że na stronach w jednym miejscu prezentowanych jest kilka czy nawet kilkanaście ikon i każda ma inny kolor. Często nie jest to jednak niekonsekwencja, tylko przemyślany ruch. Określone kolory mogą bowiem ściśle wiązać się z prezentowanymi usługami czy produktami. Na przykład w e-sklepie z żywnością ikona warzyw może być zielona, napojów niebieska, przypraw czerwona itd.
3. Jednoznaczny komunikat
Jeśli komunikat ikony nie jest jednoznaczny, nie spełnia ona swojej roli. Ikona pełni przede wszystkim funkcję informacyjną, dlatego użytkownik musi mieć jasną informację, co się stanie, kiedy kliknie w określony znak.
Oczywiście jest pewna grupa ikon, które nie wymagają żadnych dodatkowych elementów, bo są po prostu uniwersalne. Można do nich zaliczyć np. znak koszyka, dyskietki czy koperty. Wiadomo, że oznaczają one koszyk zakupowy, funkcję zapisu informacji i e-mail. Jeżeli jednak nasze ikony mają zobrazować chociażby elementy oferty, dla pewności lepiej opatrzyć je hasłami lub krótkimi opisami.
4. Design odpowiadający funkcji
Chociaż ikony pełnią przede wszystkim funkcję informacyjną, to jednak mogą mieć różne zadania nawet w obrębie jednej strony. O co chodzi?
Generalnie ikony na stronach możemy podzielić na dwie kategorie: nawigacyjne i prezentacyjne. Pierwsze mają za zadanie odpowiednio prowadzić użytkownika po stronie. Do tej grupy możemy zaliczyć rozmaite strzałki, słuchawkę do numeru telefonu, domek symbolizujący powrót do strony głównej itd. Takie ikony muszą mieć jak najprostszą formę, chociaż nawet przy dużej oszczędności środków powinny wpisywać się w styl layoutu.
Ikony prezentacyjne, które ilustrują określoną usługę czy funkcjonalność, dają już projektantowi zdecydowanie większe pole do działania. Jest tu więcej miejsca na kreację.
Zestaw ikon zaprojektowanych dla marki Findia (fot. agencja Bloomnet)
5. Przemyślane rozmieszczenie
Ikony mają sprawić, że korzystanie ze strony będzie bardziej intuicyjne, a ważne informacje zostaną podane jak na tacy. Dlatego oprócz ciekawego projektu, bardzo ważne jest też odpowiednie rozmieszczenie znaków na witrynie.
Po pierwsze, nie powinno się umieszczać ich w bliskim sąsiedztwie bloków tekstu oraz innych grafik. Ikony, które są niewielkimi formami, powinny zostać odpowiednio wyeksponowane, bo inaczej zginą w tłumie. Zresztą po to projektujemy ikony, żeby tekstu i innych elementów było jak najmniej (chociaż też bez przesady, nie można nimi zastępować wszystkich treści).
Po drugie, ludzkie oko przyzwyczaja się do schematów. Dlatego dobrze, kiedy ikony znajdują się w podobnym miejscu. Przykład: jeśli oferta firmy jest rozłożona na kilka podstron, a każda usługa prezentowana jest też w formie ikon, wszędzie powinny one znaleźć się mniej więcej w tym samym miejscu.
Źródła:własne