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

Ikony aplikacji to pierwsza rzecz, na którą zwracają uwagę 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. Są rzeczywiście pierwszym punktem 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 pomogą Ci stworzyć fajne ikony aplikacji, które mogą wyróżniać się w sklepie z aplikacjami i być może wyróżnić Twoją aplikację wśród innych konkurujących o instalacje.

Zanim opowiem ci o tym, musisz zrozumieć, że podstawowym celem ikony aplikacji jest nawiązanie natychmiastowego połączenia i stworzenie wskazówek poznawczych. Wszystko, co zasugerowano w tym poście, zasadniczo sięga wstecz, aby to osiągnąć.

Oto kilka sztuczek projektowych, które pozwolą Ci stworzyć świetne ikony aplikacji

Zasada 70%.

Wśród projektantów panuje zgoda co do wykorzystania 70% miejsca na ikonę do podświetlenia głównego obiektu połączonego z aplikacją. Obiektem może być wszystko, co jest związane 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%) powierzchni ikony. Chodzi o to, aby rozwinąć natychmiastowe poznanie z użytkownikami i sprawić, by przeszli do strony aplikacji w celu uzyskania opisu. Gdy wylądują na stronie aplikacji, która ma opis, pozyskanie użytkownika staje się o wiele łatwiejsze.

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

Pozbądź się bałaganu, aż podstawy zaczną się rozpadać

Kontynuuj usuwanie bałaganu, aż podstawowa idea obiektu w ikonie zacznie się pojawiać. Innymi słowy, rozbierz swoją ikonę do punktu, w którym obiekt na ikonie przechodzi od bycia sensownym do bezsensownego. Ścinaj, 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órej głównym obiektem jest „klawisze i zamek". Teraz możesz usunąć cienie lub liczniki i przejść do całkowicie płaskiej ikony. jeśli to zrobisz, możesz przejść do projektowania minimalistycznego, całkowicie bawiąc się kolorami, aby stworzyć efekty 3D dla kształtu „zamka i klucza” użytego w ikonie.

Matowe na błyszczące i błyszczące na matowe

Następną rzeczą, która wyróżnia ikonę aplikacji, jest odpowiednie użycie kontrastu. Projektanci często wykorzystują 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 pracuj przez nią. Pamiętaj tylko, że chodzi o stworzenie ożywienia i kontrastu między kolorem tła a elementami obiektu. Jeśli jesteś w tym początkujący, możesz zapoznać się z kilkoma projektami na Dribbble i pobrać wybrane palety kolorów.

Po zakończeniu ostatecznego cięcia możesz stworzyć 2-3 wersje z większą ilością bieli lub czerni w kolorach. Teraz możesz wybrać ten, który wydaje się odpowiedni dla twoich oczu. Po iOS 7 duży nacisk kładzie się na świeże kolory z mocniejszymi tonami bieli.

Nie daj się zwieść swojemu dużemu Macowi

Po zainstalowaniu na urządzeniu ikona aplikacji jest wyświetlana w różnych rozdzielczościach. Aby wyglądała znacząca nawet w najmniejszym awatarze, trzeba ją zaprojektować z zachowaniem proporcji. Często projektanci pracują na dużych ekranach komputerów Mac, na których można domyślić się nawet najdrobniejszych szczegółów. Jednak gdy ta sama ikona jest testowana na smartfonie z różnymi rozmiarami ikon, szczegóły się gubią.

Jeśli pracujesz na komputerze Mac i najpierw tworzysz sklep z aplikacjami z ikonami, możesz z łatwością 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.

To, co możesz najlepiej zrobić, to pamiętać o rozmiarze i zastosować podstawowe kształty i wzory, aby wykonać zadanie. Postaw na prostotę i skup się na jednym obiekcie. Najlepiej unikalny kształt lub element, który zachowuje swoje kontury i szczegóły pomimo skalowania. W ten sposób Twoja ikona będzie wyglądać odpowiednio we wszystkich rozdzielczościach sugerowanych zgodnie z wytycznymi Apple i Android.

Wypróbuj swoją ikonę na niezliczonej liczbie tapet

Użytkownicy mają różne gusta i preferencje, które znajdują odzwierciedlenie w wyborze tapet i motywów w ich smartfonach. Oznacza to, że ikona Twojej aplikacji będzie musiała wyróżniać się na tle mnóstwa kolorów. Dlatego zawsze dobrze jest przetestować widoczność ikony na tapetach w siedmiu podstawowych kolorach. Możesz zwiększyć lub zmniejszyć nasycenie bieli/czerni w tapetach, których używasz, aby zakończyć test zadowalająco.

Może zaistnieć kilka sytuacji, w których tapeta będzie zakłócać 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 cierpią z powodu ciągłego dylematu między abstrakcją a prawdziwym przedstawieniem głównego obiektu w ikonie. Wraz z pojawieniem się płaskich ikon i interfejsów użytkownika epoka wagi znacznie przesunęła się w kierunku abstrakcji, ale nie można po prostu zrezygnować z prawdziwego przedstawienia obiektu. Prawdziwe obiekty lub skeuomorficzne ikony wciąż zyskują na popularności w sklepie z aplikacjami i istnieją ku temu ważne powody.

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

Innym świetnym sposobem na uzyskanie dobrego projektu ikony jest wykonanie kilku iteracji ze skeuomorficznymi i płaskimi. Podczas wykonywania tej czynności możesz pamiętać o drugim punkcie. Wykonaj kilka iteracji usuwając kilka szczegółów na raz. Ustaw je wszystkie obok siebie i zdecyduj, który najbardziej Ci się podoba i dlaczego.

W przypadku gier zidentyfikuj postać

Tworzenie ikon do gier może być świetną zabawą, ponieważ można osiągnąć wiele kreatywnych rzeczy. W międzyczasie musiałeś zauważyć, że gry często mają historie i postacie. Jeśli będziemy trzymać się zasady budowania poznania z użytkownikami, to twarze postaci z samej gry mogą spisać się świetnie. 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 dla wszystkich poziomów. Ze względu na silną znajomość postaci z graczami, postać może zostać wykorzystana do stworzenia silnego wspomnienia z gry. Z tego samego powodu może również stać się ikoną aplikacji w Twojej grze.

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

Spójne palety kolorów i konwencje dotyczące ikon i interfejsu użytkownika

Interfejs aplikacji będzie miał określony motyw i użycie określonych kolorów. Te same kolory najlepiej zastosować również 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 będzie 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 mogła wymyślić tylko znacznik wyboru jako ikonę aplikacji — popularną ikonę rzeczy do zrobienia. Jednak pośród tego hałasu ikona Evernote wyróżnia się wygodnie.

Wyniki wyszukiwania dla 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. Towarzyszy temu genialne wykonanie złożonego ucha słonia, które oznacza notatnik. Od razu odróżnia Evernote od innych aplikacji do zrobienia w sklepie i zapewnia silne poznanie.

Kolejny przykład świetnego projektu ikon można przypisać Pocket. Zacznijmy od tego, że pomysł na aplikację jest wyjątkowy. Chociaż zakładki istniały od dawna, nie mogły skłonić użytkowników do ponownego przeczytania zapisanych treści.

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

Nie używaj zdjęć ani obrazów

Oprócz wyżej wymienionych wskaźników, możesz także uniknąć bezpośredniej implementacji zdjęć i obrazów w ikonie aplikacji. Nawet jeśli odsyłasz fotografię, musisz utworzyć własne wektory w programie Illustrator lub Photoshop. Tylko wtedy będzie wyglądać autentycznie i będzie działać magnetycznie.

Może to zabrzmieć jak frazes, ale musisz zachować czystość swojego projektu. Wspomniałem już o mieszaniu większej ilości bieli lub czerni z kolorami, aby uzyskać idealny odcień koloru, jaki chcesz. Jest to bardzo przydatne do uporządkowania ikony. Jeśli niektóre kolory są jaśniejsze lub odwrotnie, ogólny poziom szumów spada w różnych przypadkach.

Ikony aplikacji muszą przypominać popularne piosenki, które każdy może rozpoznać, a poniższe sztuczki projektowe pomogą Ci stworzyć świetną ikonę aplikacji. Mam nadzieję, że uznałeś punkty za cenne. Jeśli masz coś do dodania lub zasugerowania, wpisz swoje komentarze poniżej.