Skip to content Skip to sidebar Skip to footer
5 błędów popełnianych podczas projektowania ikon

5 błędów popełnianych podczas projektowania ikon

Jak tworzyć spójne zestawy ikon na potrzeby aplikacji, stron internetowych i publikacji.

Ikony są wszędzie. Znajdziemy je w aplikacjach, na stronach internetowych, czy w materiałach reklamowych. Z jednej strony pełnią funkcję informacyjną, ułatwiając zrozumienie określonych treści lub funkcjonalności. Z drugiej strony – ikony niosą ze sobą także wartość estetyczną. W tym artykule skupimy się właśnie na tym aspekcie i sprawdzimy, jak podnieść jakość projektowanych materiałów przez odpowiedni dobór ikon.

Styl ikony

Jednym z najczęściej popełnianych błędów podczas wybierania ikon jest brak konsekwencji pod kątem wyboru stylu. Na styl składa się to, w jaki sposób została zbudowana ikona (np. za pomocą linii lub pełnych kształtów), czy jej krawędzie są zaokrąglone czy kanciaste, czy zawiera charakterystyczne akcenty (np. kolorystyczne), czy w swoim kształcie jest geometryczna czy raczej rysowana odręcznie. To oczywiście tylko przykłady, ponieważ elementów składających się na spójny styl ikon jest znacznie więcej.

Popularnym błędem jest łączenie różnych styli ikon w ramach jednego projektu. Taki brak konsekwencji prowadzi do tego, że cała realizacja traci na spójności, a często także na estetyce.

PORADA: Jeśli w swoim projekcie wykorzystujesz więcej niż jedną ikonę, zadbaj o to, aby były one ze sobą spójne pod kątem stylu. Przykładowo – jeśli decydujesz się na styl liniowy, trzymaj się go konsekwentnie na łamach całego projektu. Jeśli pobierasz ikony z Internetu, zamiast wybierać każdą z nich oddzielnie, możesz też poszukać gotowego zestawu ikon lub skorzystać z obszernych bibliotek ikon takich jak np. Google Material Icons, Bootstrap Icons czy Ionicons.

Różne grubości linii

Decydując się na liniowy styl ikon, na jedną rzecz musisz zwrócić szczególną uwagę. Chodzi o grubość linii. Częstym błędem jest rysowanie ikon, które wykorzystują różne grubości linii, co w konsekwencji prowadzi do braku spójności oraz do problemów z czytelnością.

PORADA: Projektując ikony lub tworząc zestaw ikon liniowych, zadbaj o to, aby grubość linii we wszystkich ikonach była taka sama.

Newsletter

Otrzymuj informacje o nowych postach na blogu.


Perspektywa 2D czy 3D

Przykładowy zestaw ikon 3D
Przykładowy zestaw ikon 3D

Na spójność ikonograficzną może wpływać także perspektywa. Łatwo o tym zapomnieć, gdy zaczynamy brać pod uwagę często bardzo atrakcyjne wizualnie ikony 3D. Mieszanie ich z prostymi dwuwymiarowymi ikonami będzie miało duży wpływ na estetykę całego projektu. Takie działanie ma uzasadnienie tylko w wyjątkowych okolicznościach, np. gdy ikona 3D jest stosowana jako wyróżnienie określonej treści i jest wykorzystywana nieco w oderwaniu od pozostałych ikon 2D.

PORADA: Staraj się nie mieszać ikon w stylu 2D i 3D w ramach jednego projektu lub rób to z rozmysłem i tylko w wyjątkowych przypadkach.

Kolorystyka

Jedno- czy wielokolorowe? Które ikony są lepsze? Na to pytanie nie ma dobrej odpowiedzi, ponieważ wszystko zależy od realizowanego projektu. Z własnego doświadczenia mogę powiedzieć, że dobra ikona to zazwyczaj tak, która nie posiada zbyt wielu różnych kolorów. Dzięki takiemu podejściu skupiamy uwagę odbiorcy na rzeczy najważniejszej, czyli na kształcie ikony, a nie na jej budowanej z rozmachem kolorystyce.

PORADA: Decydując się na kolorowe ikony, pamiętaj o tym, aby zachować spójność kolorystyczną. Stwórz paletę barw, którą będziesz na stałe wykorzystywać podczas tworzenia kolejnych ikon w zestawie.

Przykładowy zestaw wielokolorowych ikon, w których zachowano spójność, dzięki wykorzystaniu stałej palety barw.
Przykładowy zestaw wielokolorowych ikon, w których zachowano spójność, dzięki wykorzystaniu stałej palety barw.

Zbyt duża ilość szczegółów

Na koniec mała wisienka na torcie, a więc temat, który z perspektywy wszystkich poprzednich jest najbardziej subiektywny i trudny do zmierzenia. Bo jak ocenić, kiedy ikona jest zbyt szczegółowa? Osobiście uważam, że zbyt szczegółówa ikona to taka, która podczas wykorzystywania jej w docelowych rozmiarach (np. w drukowanej ulotce lub na łamach interfejsu aplikacji mobilnej) traci na czytelności. Stosowanie takiej ikony nie ma wówczas sensu, ponieważ, tak jak wspomniałam na początku główną funkcją ikony jest niesienie informacji i ułatwienie przyswajania określonych treści.

Im bardziej szczegółowa ikona, tym mniejsza jest jej czytelność w mniejszych rozmiarach.
Zbyt szczegółowe ikony tracą na czytelności w małych rozmiarach.

PORADA: Jeśli Twoja ikona jest zbyt szczegółowa, zacznij okrajać ją ze zbędnych elementów. Decydując się na usunięcie każdego kolejnego, zadaj sobie pytanie: czy ikona w takiej formie niesie ze sobą określoną wartość informacyjną, czy jednak zaczyna ją tracić? Gdy dotrzesz do momentu, w którym nie będziesz w stanie usunąć już żadnego elementu, to znak, że masz przed sobą finalną ikonę.

Najciekawsze artykuły dotyczące UX/UI i komunikacji wizualnej. Praktyczne źródło wiedzy dla projektantów, specjalistów z branży IT oraz właścicieli firm i startupów. Masz pytania? Skontaktuj się z nami, by omówić indywidualne rozwiązania, które pomogą rozwinąć Twój biznes.
ALVARO House of Design © 2009-2022. All Rights Reserved.

Zapisz się na Newsletter a

Poinformujemy Cię o nowościach!