10 porad dotyczących projektowania ikon, które nie są do kitu
Prawie każdy projektant myśli obecnie o projektowaniu aplikacji. Jedną z najmniejszych funkcji każdej aplikacji jest ikona używana do reprezentowania jej na ekranie każdego urządzenia mobilnego oraz w sklepach z aplikacjami. Zaprojektowanie świetnej ikony to coś więcej niż umieszczenie logo w pudełku. Potrzebujesz czegoś, co wyróżnia się spośród wszystkich innych ikon aplikacji.
Dobrej ikony można używać na wiele sposobów - do aplikacji, mediów społecznościowych, a nawet do mniejszych drukowanych projektów lub wizytówek. Wystarczy trochę projektowania i planowania.
1. Uczyń go łatwym do odczytania
Ikona musi być łatwa do odczytania. (I nie mówimy o tekście.) Kluczem jest czytelność wizualna.
Ikona powinna zawierać grafikę, która jest bardzo rozpoznawalna ze względu na branding lub ponieważ jest łatwa do zrozumienia. Pomyśl na przykład o ikonach na pulpicie komputera. Wiesz, gdzie znajdują się rzeczy, ze względu na prostą naturę ikon - dokumenty są przechowywane w folderach, muzyka jest odtwarzana z przycisku w postaci nuty, a obrazy są przechowywane w miejscu, które wygląda jak zdjęcie Polaroid.
Jeśli chodzi o czytelność wizualną, branding jest istotną częścią rozważań. Duże, domowe marki często mają ikony, które są częścią ich logo lub kultowego wizerunku. Ludzie zwykle rozpoznają te elementy od razu, nawet w małych rozmiarach. Może to być nieco trudniejsze w przypadku nowych lub mniejszych marek lub koncepcji ikon, a projektanci mogą zdecydować się na inne techniki w celu uzyskania optymalnego efektu.
2. Myśl ikona, a nie obraz
Ikona nie jest zdjęciem w pudełku. Ikona może zawierać obraz, ale może być także reprezentacją tekstową, znakiem towarowym lub kombinacją tych elementów.
Po prostu musi być bardzo wizualny i rozpoznawalny. Większość logo nie zawiera rzeczywistych zdjęć, ale stanowi bardziej graficzną reprezentację pomysłu. (Ta koncepcja jest podkreślona przez potrzebę stworzenia ikony wektorowej).
Obraz może być również trudny do odczytania przy małych rozmiarach i zagubić się w morzu innych ikon w telefonie użytkownika lub innym urządzeniu. Bardziej reprezentacja graficzna może często mieć większą wagę wizualną.
Ikona aplikacji mobilnej dla domu towarowego Macy powyżej jest tego dobrym przykładem. Duża biała gwiazda pośrodku czerwonego pudełka jest łatwa do zidentyfikowania. Ikona różni się od standardowego traktowania ikony firmowej, ponieważ kolor jest odwracany, aby podkreślić ikonę. Czerwone tło prawdopodobnie wyróżnia się bardziej niż białe na tle różnych tapet użytkownika.
3. Unikaj słów
Jedną rzeczą, której nie zobaczysz w ikonach, jest użycie słów. Po prostu nie ma wystarczająco dużo miejsca na ikonę, która jest wypełniona rzeczami do czytania i zrozumienia.
Zasadniczo unikaj tekstu, chyba że jest on częścią Twojego logo. Nawet tekst będący częścią logo należy dokładnie rozważyć przed użyciem w pierwotnym projekcie logo.
Ikona powinna być zaprojektowana w taki sposób, aby tworzyć tożsamość bez słów. Ponadto pamiętaj, ile ikon jest faktycznie używanych w kontekście urządzeń, na których się pojawiają. Większość zawiera wiersz tekstu deskryptora pod rzeczywistym blokiem ikon.
Na przykład ikona Design Shack to jedna litera „d” z kolorami i czcionkami zgodnymi z witryną. Ta jednolita marka i czytelny list tworzą wizualną więź i połączenie bez słów.
4. Użyj Żywego koloru
Chcesz, aby Twoja ikona się wyróżniała? Odważ się kolorem. Wybór żywych kolorów pomoże Twojej aplikacji wyróżnić się na różnych środowiskach i przyciągnie uwagę użytkowników.
Ostatnią rzeczą, jakiej pragniesz od projektu ikony, jest wtopienie jej w inne dostępne opcje. To sprawia, że kolor niebieski - zwłaszcza niebo i granat - jest kolorem, którego prawdopodobnie będziesz chciał uniknąć, ponieważ używa go wiele innych ikon.
Jeśli niebieski jest twoim głównym logo lub kolorem marki, spróbuj sparować go z czymś jaśniejszym dla uzyskania efektu. Zastanów się nad „nowym neutralnym”, takim jak limonkowy, lub zdecyduj się na sezonowy odcień, taki jak jasny pomarańczowy jesienią lub jasny różowy wiosną.
5. Opracuj symbol lub proste logo
Prawdopodobnie masz logo swojej marki, ale w przypadku ikon ważny jest również symbol. Symbolem może być prosta reprezentacja graficzna lub fragment logo lub obrazu.
Po prostu musi być ostry i niezapomniany. Więcej marek wprowadza kultowe symbole do swoich standardowych marek i logo, aby stworzyć pełne połączenie między mniejszymi ikonami i większymi projektami.
Pomyśl o aplikacji Snapchat do przesyłania wiadomości i udostępniania zdjęć. Symbol ducha stał się tak rozpoznawalny, że może pojawiać się jako ikona, którą znają użytkownicy, w innych schematach kolorów i kształtach, a nawet jako samodzielny obraz na billboardzie. To doskonały przykład działającego symbolu.
6. Pamiętaj o skali
Podczas gdy większość z nas myśli o ikonach jako o tych drobiazgach na naszych telefonach lub komputerach stacjonarnych, ikona nie zawsze jest mała. Powinien być zaprojektowany w taki sposób, aby był użyteczny niezależnie od wielkości.
Jest to szczególnie ważne ze względu na ciągle zmieniający się krajobraz cyfrowy, pojawienie się większej liczby wyświetlaczy siatkówki oraz różne platformy i urządzenia mogą wyświetlać ikony w różnych rozmiarach.
Zbudował go duży, a następnie zmniejsz.
7. Utwórz w formacie wektorowym
Ważną kwestią jest także format i skala. Ikona musi zostać utworzona przy użyciu projektu wektorowego.
Posiadanie obrazu wektorowego daje swobodę wprowadzania zmian i zapisywania ikony dla różnych urządzeń, rozmiarów i rzutni bez tworzenia wielu pojedynczych obrazów. Ponieważ w rzeczywistości potrzebujesz wielu wersji ikony o różnych rozmiarach dla różnych projektów.
Zaletą wektora jest elastyczność. Ale jest w tym haczyk. W przypadku wielu aplikacji lub platform prawdopodobnie konieczne będzie zapisanie kopii w formacie innym niż wektorowy do przesłania.
8. Think Outside the Design Box
W ostatnich miesiącach pojawiło się wiele ikon, które używają jednego koloru tła z białą ikoną, technik płaskiego projektowania i długich cieni. Chociaż te trendy mogą być świetną zabawą, nie utknij w pudełku projektowym. Zrób coś innego z ikoną.
Jeśli wszyscy inni pracują z kwadratowymi krawędziami, rozważ coś bardziej zaokrąglonego. Dodaj odrobinę tekstury do tła, aby wyróżnić się z całego płaskiego koloru. Nie czuj, że musisz wzorować swoją ikonę na tym, co robią wszyscy inni.
9. Ustaw jako monochromatyczny
Jest zabawna sztuczka, którą projektanci używali od lat do testowania skuteczności projektów na małą skalę - uczyń ją monochromatyczną. Jeśli Twój projekt komunikuje ten sam komunikat z kolorem lub bez, prawdopodobnie działa. Jeśli ikona wymaga odczytania koloru, kontynuuj pracę nad wersjami.
Osobiście zaczynam prawie każdy projekt w czerni i bieli, a potem zaczynam dodawać kolory. To szkic koncepcji komputerowej. Jeśli naszkicujesz go na papierze i zadziała, zanim naprawdę zaczniesz dodawać kolor, pomysł prawdopodobnie ma solidne ramy.
10. Think Square
Twoja ikona i wszystkie elementy w kwadratowej ramce również muszą pasować do siebie. Nie oznacza to, że projekt lub obraz musi mieć dokładnie kwadratowy kształt, ale podstawowy współczynnik kształtu dla każdej ikony ma jednakową wysokość i szerokość.
Tak więc, jeśli masz symbol, który jest bardzo pionowy lub poziomy, będziesz potrzebował sposobu, aby wypełnić przestrzeń wokół niego, aby nie zgubił się w tle. Wybierz koncepcję, która wypełnia znaczną część przestrzeni, która będzie w większości kwadratowa. (Nawet zaokrąglona, okrągła ikona ma jednakową wysokość i szerokość).
Wniosek
Może to zabrzmieć stereotypowo, ale kluczem do dobrego zaprojektowania ikon musi być ... no cóż ... kultowy. To takie proste.
Projektuj z myślą o prostocie, kolorze i rozpoznawaniu wizualnym. Pomyśl o interfejsach i aktualnych trendach, aby projektować zgodnie ze standardami. (W dzisiejszych czasach nie zaprojektowałbyś ikony skeuomorficznej dla aplikacji mobilnej na iOS, dobrze?) I baw się dobrze; ikona jest bramą użytkownika do interfejsu cyfrowego.
Źródła zdjęć: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta i Microsiervos Geek Crew.
