X
Czym różni się rola UX/UI Designera od Design System Designera?
Czy UX/UI Designer i Design System Designer to tak naprawdę ta sama rola w innym opakowaniu? Niekoniecznie, ale ich ścieżki często się przecinają. Z jednej strony mamy projektowanie doświadczeń użytkownika i projektowanie interfejsu. Z drugiej – tworzenie systemów, które te doświadczenia i elementy interfejsu porządkują, skalują i ułatwiają ich wdrażanie. Choć obie role bywają mylone, UX/UI…
Design system – Fundament nowoczesnego UX, UI i skutecznej współpracy
Czy kiedykolwiek zdarzyło Ci się pracować nad produktem, w którym każdy ekran wyglądał trochę inaczej – bo tworzyły go różne osoby w różnym czasie? Albo wdrażać nową osobę do projektu i tracić godziny na tłumaczenie, dlaczego ten sam przycisk wygląda inaczej w trzech miejscach? Design system to odpowiedź na ten chaos. To nie tylko narzędzie,…
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.

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: Product Designer z wieloletnim doświadczeniem w projektowaniu UX/UI i Design Systemów. Zamienia problemy na rozwiązania. Uwielbia analityczne myślenie, doskonały design i zarażanie innych pasją do projektowania.
Related Post