Sześć wskazówek Apple’a jak tworzyć lepsze ikony aplikacji

Krótko po zeszłorocznym wydarzeniu WWDC w San Francisco w czerwcu, mnóstwo aplikacji zostało dostosowanych do systemu iOS 7. Zobaczcie 6 wskazówek Apple’a dotyczących wyglądu ikony aplikacji.

W prezentacji Mike’a Sterna z Apple pt. „Projektowanie iOS – przewodnik po najlepszych praktykach” znajduję się ciekawa część dotycząca projektowania dobrych ikon dla aplikacji na iOS-a 7. Autor przechodzi przez listę sześciu najważniejszych kwestii do rozważenia podczas projektowania swojej ikony aplikacji. W poniższym poście znajdziecie podsumowanie tego wykładu opracowane na podstawie artykułu Martina LeBlanca z The Next Web.

W swojej prezentacji Mike Stern zaczyna od wyjaśnienia, dlaczego ważne jest, aby zwrócić dużą uwagę na ikonę, interfejs użytkownika i aplikację: użytkownicy nie będą oceniać aplikacji w oparciu o to, jak wiele technologii zostało użytych, lub ile API jest włączonych lub jak elegancki jest kod aplikacji. Aplikacja oceniana jest przez pryzmat tego, co dziki niej możemy zrobić i jak się z niej korzysta. Użytkownicy oczekują intuicyjnych, czasem nawet pięknych i magicznych doświadczeń podczas korzystania z aplikacji.

Sześć wskazówek, jak tworzyć lepsze ikony aplikacji

Istnieje kilka typowych pułapek i błędów wciąż popełnionych przez deweloperów. Wiele aplikacji zostaje odrzuconych z App Store’a już w trakcie przeglądu. Zła ikona jest wśród 3 najczęstszych przyczyn odrzucenia aplikacji przed publikacją w sklepie Apple’a.

Ikona aplikacji jest zwykle pierwszym kontaktem większość ludzi z aplikacją. Trzeba się wyróżnić z tłumu. Poniżej możecie zobaczyć zrzut ekranu z wyników wyszukiwania w App Storze na frazę „kamera”. Które aplikacje się wyróżniają?  Już na pierwszy rzut oka wyłania się z tłumu np. aplikacja Path. Ikona musi być estetyczna i rozpoznawalne, to są dwie główne cechy, które należy zapamiętać. Przed publikacją własnej apki warto sprawdzić jak wygląda otoczenie, do którego trafi! chociażby przez kilka wyszukiwań w sklepie z aplikacjami.

Kiedy użytkownicy zobaczą ikonę aplikacji w sklepie App Store zaczną budować założenia dotyczące doświadczeń użytkownika, jak przyjemna i intuicyjna będzie dana aplikacja. Jeżeli ikona wygląda świetnie i jest starannie wykonana, uzasadnione jest założenie, że reszta aplikacji jest równie dobra. Dopiero w kolejnym kroku użytkownicy zaczną zastawiać się na temat technologii, bezpieczeństwa i stabilności, czy wreszcie porównywać z konkurencją. Należy zatem wziąć to pod uwagę i zainwestować czas i skupić się na ikonie aplikacji.

C sprawia, że ​​ikona aplikacji jest dobra? Dwie rzeczy: wygląd i co ważniejsze, natychmiastowa rozpoznawalność. Jak można tego dokonać? Istnieje sześć wskazówek, które pozwolą odróżnić ikonę aplikacji od reszty. Prześledźcie wszystkie, a zauważycie ile w tym racji!

Wskazówka 1: Skup się na unikalnym kształcie

Poniższe cztery ikony są bardzo różne – niektóre mają wiele kolorów lub gradientów, ale wszystkie odróżnia prosty kształt, który pozwala im być rozpoznawalnym już na pierwszy rzut oka. Ikony są widoczne we wszystkich rozmiarach. Duże w App Storze, małe na ekranie głównym, a nawet mniejsze w centrum powiadomień i w grupach (katalogach). Należy upewnić się, że obraz, który wybierzemy dla ikony można zmniejszyć i jest rozpoznawalna w dowolnym rozmiarze.

Wskazówka 2: Należy wybrać kolory

Należy wybierać ograniczoną paletę barw. Jeden lub dwa kolory wystarczą. Istnieje dużo wielokolorowych ikon, które trudno rozpoznać.

Wskazówka 3: Unikaj zdjęć

Należy unikać zdjęć w ikonach aplikacji. Aplikacja Sipp jest doskonałym przykładem tego, jak ikona aplikacji może zawierać elementy ze zdjęcia, aby zilustrować literę S.

Porada 4: Unikaj dużo tekstu

Należy używać tylko symbolu lub logo na ikonie aplikacji. Świetne przykłady to m.in.:  Ness, Pocket, Vine , Snapguide i Pinterest .

Porada 5: Dokładne odzwierciedlenie materiałów

Być może jest to trochę zaskakujące, biorąc pod uwagę zmiany w systemie iOS 7 na zupełnie płaski design. Paper jest jednym z przykładów (poprzedni zwycięzca ADA w 2012), czy Square Wallet z jego hologramem i wyraźnym kształtem. Ikona aplikacji 1Password doskonale odzwierciedla bezpieczeństwo danych i pozwala łatwo domyślić się czego dotyczy. LifeKraze ma bardzo dobrą skeumorficzną ikonę aplikacji, że trudno uwierzyć, że udało im się tego dokonać dla ikony na tak dużym poziomie artyzmu. Naprawdę wielkie uznanie dla firmy SoftFacade.

Wskazówka 6: Bądź kreatywny

Ikona musi się wyróżnić z tłumu. Aplikacje:  Routesy, Hipstamatic, Evernote Food i Brewski Me – wszystkie posiadają dobre cechy w tej kategorii. Często sztuką jest rozwiniętych prostych pojęć – czasem najbardziej skomplikowane renderingi są ​​oparte na prostych kompozycjach jakiegoś kształtu.

Wskazówka Bonus: Sprawdź swoją ikonę aplikacji na tle różnych tapet

Podczas gdy nowa ikona może wyglądać świetnie na prostym, niedynamicznym  jednolitym, nie ma gwarancji, że będzie świetnie wyglądać na tle wszystkich tapet. Upewnij się testując ikonę aplikacji na różnych rodzajach tapet i spróbuj zgrupować ją w folderze, aby ocenić jej wygląd.

Case study: Turnplay

Turnplay to fajna mała aplikacja, która pozwala odtwarzać pliki muzyczne, jakbyśmy słuchali ich z płyty winylowej.

Kiedy nadszedł czas na zaprojektowanie ikony aplikacji dla Turnplay, zaczęto od papierowych szkiców. To niesamowite zobaczyć tak szczegółowe projekty zrobione ołówkiem na wczesnym etapie projektowania z mnóstwem różnych pomysłów na ikonę. Na poniższych szkicach widać, że zespół nigdy nie stracił z oczu projektowania nawet najbardziej złożonych szczegółów.

Szkice ikony aplikacji Turnplay

Wśród wielu prób, próbowali używać litery T od nazwy aplikacji w samej ikonie, przesuwania dłonią płyty winylowej i różnych kombinacji, które kojarzą się płytą winylową. W końcu dotarli do finalnego projektu (poniżej): gramofon z symbolem odtwarzania w środku – prosta ikona opartą na podstawowych kształtach.

Jeśli macie możliwość oglądania sesji w całości na pewno warto poświęcić godzinę. Całą prezentacje możecie zobaczyć tutaj – wymagane jest jednak konto dewelopera Apple’a.

źródło: shutterstock, thenextweb.com, Six tips from Apple on how to create better app icons, Martin LeBlanc