10 chwytów projektowych, aby stworzyć świetne ikony aplikacji

Ikony aplikacji to pierwsza rzecz, którą zauważają użytkownicy, gdy natkną się na Twoją aplikację. Ponieważ miliardy aplikacji walczą o uwagę w sklepie z aplikacjami, ikona aplikacji stała się ważnym wyróżnikiem, który przełamuje bałagan i przyciąga użytkowników do Twojej aplikacji. To rzeczywiście pierwszy punkt kontaktu, z którym spotykają się Twoi użytkownicy. Dlatego niezwykle ważne jest, aby od razu wykorzystać to doświadczenie.

W tym poście zasugeruję kilka hacków projektowych, które mogą pomóc w tworzeniu fajnych ikon aplikacji, które mogą wyróżniać się w sklepie z aplikacjami i być może wyróżnić Twoją aplikację wśród innych rywalizujących o instalacje.

Zanim powiem ci o tym, musisz zrozumieć, że podstawowym celem ikony aplikacji jest nawiązanie natychmiastowego połączenia i tworzenie wskazówek poznawczych. Wszystko, co zasugerowano w tym poście, zasadniczo wraca do tego, aby to osiągnąć.

Oto kilka sztuczek projektowych, aby stworzyć świetne ikony aplikacji

Zasada 70%

Wśród projektantów panuje zgoda co do wykorzystania 70% przestrzeni ikon do wyróżnienia głównego obiektu połączonego z aplikacją. Obiektem może być wszystko, co ma związek z aplikacją. Jeśli projektujesz aplikację fotograficzną, obiektem może być aparat lub obiektyw. W grze może to być twarz postaci i tak dalej.

Innymi słowy, obiekt powinien zajmować większość (70%) obszaru ikony. Chodzi o to, aby rozwijać natychmiastowe poznanie z użytkownikami i skłonić ich do przejścia na stronę aplikacji w celu uzyskania opisu. Gdy trafią na stronę aplikacji, która ma opis, znacznie łatwiej jest pozyskać użytkownika.

Jednak samo pozostawienie większej przestrzeni obiektowi nie wystarczy. Musi być również wolny od bałaganu. Dopiero wtedy może łączyć się i tworzyć szybsze poznanie, co prowadzi nas do następnego punktu.

Tnij bałagan, aż podstawy zaczną się rozpadać

Kontynuuj cięcie bałaganu, aż pojawi się podstawowa idea obiektu w ikonie. Innymi słowy, zmniejsz swoją ikonę do punktu, w którym obiekt na ikonie zmieni się z sensownego na bezsensowny. Skróć, aż obiekt zachowa swój uniwersalny kształt i będzie rozpoznawalny przez większość ludzi.

Na przykład, jeśli tworzysz aplikację do ukrywania zdjęć, możesz wymyślić ikonę aplikacji, która ma „klucze i blokady” jako główny obiekt. Teraz możesz usunąć cienie lub liczniki i wybrać całkowicie płaską ikonę. Po wykonaniu tej czynności możesz przejść do minimalistycznego projektu, bawiąc się wyłącznie kolorami, aby stworzyć efekty 3D dla kształtu „zamka i klucza” użytego w ikonie.

Matowy za błyszczącym i błyszczącym za matowym

Następną rzeczą, która wyróżnia ikonę aplikacji, jest odpowiednie użycie kontrastu. Projektanci często stosują kontrast między obiektem a tłem ikony aplikacji. Jeśli możesz wykonać dwa powyższe kroki, możesz automatycznie wylądować tutaj.

Tworzenie kontrastu ma również wiele wspólnego z kolorami. Zacznij od z góry określonej palety kolorów w swoim umyśle i przejdź przez nią. Pamiętaj tylko, że chodzi o to, aby stworzyć wyrazistość i kontrast między kolorem tła a elementami w obiekcie. Jeśli jesteś początkujący, możesz zapoznać się z kilkoma projektami na Dribbble i pobrać wybrane przez siebie palety kolorów.

Po zakończeniu ostatecznego cięcia możesz stworzyć 2-3 wersje z większą ilością bieli lub czerni do kolorów. Teraz możesz wybrać ten, który pasuje do twoich oczu. Po iOS 7 duży nacisk położono na świeże kolory z mocniejszymi tonami bieli.

Nie daj się zwieść dużemu komputerowi Mac

Po zainstalowaniu na urządzeniu ikona aplikacji jest wyświetlana w różnych rozdzielczościach. Aby wyglądało to znaczące nawet w swoim najmniejszym awatarze, należy zaprojektować go z zachowaniem proporcji. Często projektanci pracują na dużych ekranach Maców, na których nawet najdrobniejsze szczegóły mogą być odgadnięte. Jednak gdy ta sama ikona jest testowana na smartfonie z różnymi rozmiarami ikon, szczegóły giną.

Jeśli pracujesz na komputerze Mac i najpierw tworzysz sklep z aplikacjami ikon, możesz łatwo pozwolić sobie na wprowadzenie drobnych szczegółów. Pamiętaj jednak, że najmniejsza ikona przeznaczona do menu ustawień to obraz o wymiarach 29 x 29 pikseli. Drobniejsze szczegóły, takie jak małe teksty lub inne symbole, nie będą na nim widoczne.

Najlepsze, co możesz zrobić, to pamiętać o rozmiarze i zastosować podstawowe kształty i wzory, aby wykonać zadanie. Postaw na prostotę i skup się na jednym przedmiocie. Najlepiej unikalny kształt lub element, który zachowuje swoje kontury i detale pomimo skalowania. W ten sposób Twoja ikona będzie wyglądać odpowiednio we wszystkich rozdzielczościach sugerowanych w wytycznych podanych przez Apple i Androida.

Wypróbuj swoją ikonę na niezliczonej liczbie tapet

Użytkownicy mają zróżnicowane gusta i preferencje, które odzwierciedlają wybór tapet i motywów w ich smartfonach. Oznacza to, że ikona Twojej aplikacji będzie musiała wyróżniać się na tle niezliczonych kolorów. Dlatego zawsze warto przetestować widoczność swojej ikony na tapetach w siedmiu podstawowych kolorach. Możesz zwiększyć lub zmniejszyć nasycenie bieli/czerni w używanych tapetach, aby zakończyć test satysfakcjonujący.

Może zaistnieć kilka sytuacji, w których tapeta może zakłócić widoczność. Tapety takie jak selfie mogą nie mieć jednolitych kolorów i mogą zakłócać widoczność ikony. Nie możesz tutaj wiele zrobić, ale jak powiedziałem, możesz przetestować je w siedmiu podstawowych kolorach, aby zacząć.

Zdecyduj się na abstrakcję i wykonaj iteracje

Projektanci borykają się z ciągłym dylematem między abstrakcją a rzeczywistym przedstawieniem głównego obiektu w ikonie. Wraz z pojawieniem się płaskich ikon i UI, epoka wagi przesunęła się w stronę abstrakcji, ale nie można tak po prostu zrezygnować z rzeczywistego przedstawienia obiektu. Rzeczywiste obiekty lub skeuomorficzne ikony nadal mają mocną pozycję w sklepie z aplikacjami i istnieją ku temu uzasadnione powody.

Na przykład, jeśli tworzysz aplikację poprawiającą dźwięk, możesz narysować w ikonie wzmacniacz skeuomorficzny zamiast spłaszczać go lub tworzyć ikonę linii. Ale biorąc pod uwagę fakt, że wzmacniacz nie jest znanym towarem, jego poznanie zmniejszy się, jeśli zostanie spłaszczony. W przypadku rzeczy, które są stosunkowo powszechne i cieszą się powszechną znajomością wśród mas (aparat do aplikacji fotograficznej), na pewno możesz wyjść z płaską ikoną. Jeśli jednak aplikacja jest połączona z czymś niejasnym, lepsze będzie utrzymywanie jej rzeczywistej lub skeuomorficznej.

Innym świetnym sposobem na uzyskanie dobrego projektu ikony jest wykonanie kilku iteracji ze skeuomorficznym i płaskim. Podczas robienia tego możesz pamiętać o drugim punkcie. Wykonaj kilka iteracji, usuwając jednocześnie kilka szczegółów. Ułóż je wszystkie obok siebie i zdecyduj, który z nich najbardziej Ci się podoba i dlaczego.

W przypadku gier zidentyfikuj postać

Tworzenie ikon do gier może być świetną zabawą, ponieważ tworząc je można osiągnąć wiele kreatywnych rzeczy. Pośrodku tego musiałeś zauważyć, że gry często mają historie i postacie. Jeśli trzymamy się zasady budowania poznania z użytkownikami, to Twarze postaci z samej gry mogą wykonać świetną robotę. W rzeczywistości jest to powód, dla którego twarze postaci są tak powszechne w ikonach aplikacji do gier.

Jeśli tworzysz grę, musisz znaleźć głównego bohatera lub postać, która jest wspólna na wszystkich poziomach. Dzięki silnej znajomości postaci z graczami, postać może zostać wykorzystana do stworzenia silnego powrotu do gry. Z tego samego powodu może również stać się ikoną aplikacji dla Twojej gry.

Możesz wybrać paletę kolorów i zbudować wokół nich ikonę aplikacji. Szczerze mówiąc, staje się to o wiele łatwiejsze, jeśli zdecydujesz się na twarz. Ale w tym samym czasie może być konieczne wprowadzenie dodatkowych efektów, aby się wyróżniać.

Spójne palety kolorów i konwencje dla ikon i interfejsu użytkownika

Interfejs aplikacji będzie miał określony motyw i użycie określonych kolorów. Najlepiej jest użyć tych samych kolorów do zaprojektowania ikony. Możesz również zrobić to samo z niektórymi elementami, które zaimplementowałeś w interfejsie użytkownika i użyć ich w ikonie. Dzięki temu Twój projekt jest bardziej jednolity i prowadzi do lepszego zapamiętania i znajomości Twojej aplikacji wśród użytkowników.

Kreatywność ratuje dzień

Uruchom wyszukiwanie „aplikacji do zrobienia” w Google Play, a natkniesz się na siatkę pełną znaczników wyboru. Tak, większość projektantów aplikacji do zrobienia może wymyślić tylko znacznik wyboru jako ikonę aplikacji - powszechną ikonę do zrobienia. Jednak pośród tego hałasu ikona Evernote wyróżnia się wygodnie.

Wyniki wyszukiwania terminu „aplikacje do zrobienia”. Zauważ, że ikona Evernote wyróżnia się spośród innych.

Idea ikony wywodzi się z faktu, że Słoń nigdy nie zapomina. W połączeniu z genialnym wykonaniem złożonego ucha słonia, które oznacza notatnik. Odróżnia Evernote od innych aplikacji do zrobienia w sklepie i zapewnia silne poznanie.

Kolejny przykład świetnego projektu ikon można przypisać Pocketowi. Po pierwsze, idea aplikacji jest wyjątkowa. Chociaż zakładki istniały od dawna, nie mogły sprawić, że użytkownicy wrócili do przeczytania zapisanych treści.

Z drugiej strony Pocket wykorzystał miniatury, aby stworzyć wyraźną pamięć wzrokową. Aplikacja wyzwala emocję „zapisz tę treść”, co jest wyraźnie i sprytnie przedstawione przez samą ikonę. Czerwony kształt odnosi się do „kieszeni”, a strzałka w dół bez wątpienia oznacza „pobieranie”.

Nie używaj zdjęć ani obrazów

Oprócz wyżej wymienionych wskazówek możesz również uniknąć bezpośredniego umieszczania zdjęć i obrazów w ikonie aplikacji. Nawet jeśli odsyłasz do zdjęcia, musisz stworzyć własne wektory w programie Illustrator lub Photoshop. Tylko wtedy będzie wyglądać autentycznie i mieć efekt magnetyczny.

Może to zabrzmieć jak banał, ale musisz zachować porządek w swoim projekcie. Wspomniałem już o mieszaniu większej ilości bieli lub czerni z kolorami, aby uzyskać idealną tonację koloru. Jest to bardzo przydatne do odczyszczenia ikony. Jeśli niektóre kolory są jaśniejsze lub odwrotnie, ogólny poziom hałasu spada w różnych przypadkach.

Ikony aplikacji muszą stać się jak popularne piosenki, które każdy może rozpoznać, a poniższe hacki projektowe pomogą Ci stworzyć świetną ikonę aplikacji. Mam nadzieję, że te punkty okazały się cenne. Jeśli masz coś do dodania lub zasugerowania, dodaj swoje komentarze poniżej.