Analizy, Artykuły, Opinie i Wywiady
comment 1

Projektowanie ikon

Ikony, a raczej piktogramy towarzyszą nam od (jak określają badacze) drugiej połowy IV tysiąclecia p. n. e. i stanowiły pierwszy znany system piśmienniczy,
za pomocą którego porozumiewali się ludzie.

Obecnie ikony są nieodłącznym elementem systemów identyfikacji wizualnej, systemów informacji przestrzennej, interfejsów oprogramowania, stron internetowych, czy aplikacji mobilnych. Są one swoistym skrótem myślowym, a ich celem jest usprawnienie i szybka identyfikacja danej rzeczy / funkcji.

Projektowanie zestawu spójnych ikon to proces, który powinien trzymać się określonych wcześniej zasad. Przedstawiamy Wam listę kroków, o których nie możecie zapomnieć projektując.

Nadawca/Odbiorca/Kontekst

Przed rozpoczęciem projektowania powinieneś zastanowić się kim jest nadawca, kto jest typowym odbiorcą oraz czy projektujesz na ekran, czy do druku.
Jeśli nadawcą jest duża firma, taka jak Google czy Youtube, możesz być pewien,
że ma ona stworzone wytyczne, których musisz się trzymać. Kontekst to kluczowa sprawa. Bez podstawowej wiedzy na temat późniejszego wykorzystania tych ikon będziesz jak dziecko we mgle. Jeśli ikony będą miały uniwersalne zastosowanie warto zastanowić się nad oddzielną wersją do sieci i do druku. Ważnym aspektem jest też odbiorca i jego kultura. Jeśli projektujesz dla zagranicznego klienta pamiętaj, że gesty, symbolika i tradycje mogą się znacznie różnić od tego, co jest akceptowalne i rozpoznawalne w Twoim kraju.

Zrób mapę myśli i określ słowa klucze

Określenie słów kluczowych dla każdej ikony to podstawa w procesie projektowania. Możesz wspomóc się słownikami języków bliskoznacznych. Spróbuj znaleźć idealne wizualne reprezentacje lub metafory tych słów.
Pamiętaj, że ikona powinna być prosta i rozpoznawalna na pierwszy rzut oka.

Styl

Ikony są zazwyczaj dopełnieniem identyfikacji, dlatego ich styl będzie wynikiem wcześniej przyjętych założeń. Obecnie obserwujemy kilka wiodących trendów
w projektowaniu ikon – flat, outline, skeuomorphism, 3d, long shadow, minimal
oraz ikony ilustracje. Trend maksymalnego upraszczania ikon i powrót do korzeni projektowania, czyli piktogramów, rozwija się najintensywniej od czasu odejścia
od skeuomorficznych (naśladujących rzeczywistość) form.

Poziom szczegółowości

Kolejnym krokiem do dobrze zaprojektowanego setu ikon to wybranie odpowiedniego poziomu szczegółowości. Less is more, jednak niewystarczające detale mogą  negatywnie odbić się na rozpoznawalności. Z drugiej strony używanie zbyt wielu detali odwróci uwagę i – jak w przypadku niedostatecznych detali – zmniejszy rozpoznawalność. Zwykle w przypadku ikon przedstawiających koncept abstrakcyjny (np. kierunek) użycie symbolu jest koniecznością, jednak gdy mamy do czynienia z przedmiotem (telefon, słuchawki) możemy się pokusić
o większy realizm.

Skala

Jest wiele szkół odnośnie skalowania ikon. Jedno jest pewne – projektowanie
na dowolnym rozmiarze jest złym pomysłem, chyba że projektujesz responsywne ikony. Co wygląda dobrze w 32px niekoniecznie dobrze wygląda w 512px i na odwrót. Pamiętaj, że projektując na większym rozmiarze niż docelowym ryzykujesz utratę detali, a przez to czytelności. Najlepiej projektować ikony w docelowym rozmiarze, jeśli jednak przewidujesz, że będzie ich wiele, zacznij zawsze od najmniejszego rozmiaru i skaluj w górę.

Harmonia

Ikony bezsprzecznie muszą współpracować i tworzyć jedną, spójną całość. Systematyczna praca nad projektem zapewnia spójny efekt końcowy
i logikę, jaką kieruje się cały set. Aby ujednolicić tworzone ikony wybierz parę elementów, które pozostaną niezmienne: kolorystykę, perspektywę, wielkość, technikę rysunku czy grubość linii. Najlepiej wybrać kombinację tych właściwości. Pamiętaj o używaniu tego samego stylu na przestrzeni całego setu.

icons_harmony

Światło i cienie

Jeśli używasz źródła światła w swoim projekcie pamiętaj, aby używać jednego kierunku i trzymać się go przez cały set. Tym sposobem zachowasz harmonię między ikonami. Ta sama zasada tyczy się cieni, które nie powinny być też zbyt duże przy małych ikonach.

Perspektywa

Perspektywa w wizualizowaniu obiektów niekoniecznie musi być taka sama (chociaż zalecana). Jeśli robisz rzuty z góry – trzymaj się tego. Jeśli zdecydujesz się jednak na więcej perspektyw – wybierz dwie lub trzy i zaprojektuj określoną liczbę ikon do każdej perspektywy. Pomaga to zachować spójność w całym secie.

icons_perspective

Zróżnicowanie 

Unikaj drastycznych podobieństw między ikonami. Jeśli są zbyt podobne,
to równie dobrze mogłoby ich nie być. Upewnij się, że każda ikona wystarczająco różni się od pozostałych, ale jednocześnie współpracuje z resztą. Na załączonym screenie pojawia się problem przy małym rozmiarze – bardzo ciężko zobaczyć różnice pomiędzy ikonami.

 

icons_indifferent

 

źródło: http://turbomilk.com/blog

 

Jakość

Aby ikony były zawsze dobrej jakości pracuj wyłącznie na wektorach, które możesz dowolnie skalować i wyeksportować do dowolnego formatu.

Przed rozpoczęciem pracy na własnym zestawem ikon zachęcamy Was
do przejrzenia prac świetnych ikoniarzy:

Justas Galaburda

icons_justas galaburda

 

Matt Yow

icons_blue

 

Adam Whitcroft

icons_adam whitcroft

 

Ryan Putnam

icons_ryan putnam

 

Polecamy też zerknąć na blog prowadzony przez projektanta z Litwy, Icon Utopia Blog. Dużo pięknych przykładów i merytorycznych treści.

Stay tuned! W najbliższym czasie podzielimy się z Wami miejscami, z których możecie ściągnąć darmowe ikony i zainspirować się gotowymi setami.

Miłego ikonowania!