X
5 błędów popełnianych podczas projektowania ikon
Praktyczne porady, jak stworzyć spójny zestaw ikon na potrzeby aplikacji, strony internetowej, ulotki lub innej publikacji. Zobacz przykłady.
Dlaczego makiety UX ułatwiają tworzenie stron internetowych?
Makiety UX to wstępny zarys strony internetowej lub aplikacji mobilnej. Ich zadaniem jest wstępne zwizualizowanie informacji zawartych. w briefie pod kątem układu różnych elementów i architektury informacji.
Jak napisać brief do projektu logo?
Każda firma pragnie mieć dobre logo, ale nie każda wie, jak się do tego zabrać. A wszystko zaczyna się od briefu, który dla designera jest podstawą każdego projektu.

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

Praktyczne porady, jak stworzyć spójny zestaw ikon na potrzeby aplikacji, strony internetowej, ulotki lub innej publikacji. Zobacz przykłady.

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.

Przykładowy zestaw ikon liniowych
Przykładowy zestaw ikon z jednokolorowym wypełnieniem
Przykładowy zestaw kolorowych ikon

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.

Zestaw ikon liniowych, w których grubość linii nie została ujednolicona
Ten sam zestaw ikon z ujednoliconą grubością linii

Newsletter

Otrzymuj informacje o nowych postach na blogu.


Perspektywa 2D czy 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.

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.

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ę.

Tags: artykuł
Jessica Alvaro: Zamienia problemy na rozwiązania. Uwielbia analityczne myślenie, doskonały design i zarażanie innych pasją do projektowania.
Related Post