Share
Pictogrammen vormen een cruciaal onderdeel van elke iOS-applicatie. Ze geven de eerste indruk van uw app aan toekomstige gebruikers en blijven een centraal aandachtspunt voor degenen die de applicatie downloaden. We weten allemaal hoe belangrijk het is om een goede eerste indruk te maken en een sterk merk te bouwen met uw ontwerp, en deze zelfstudie laat 8 geweldige manieren zien om precies dat te doen!
Dit is een goed idee in het pictogramontwerp, maar als je door de App Store gaat, zijn er verrassend weinig pictogrammen die dit goed doen. Zoek bijvoorbeeld naar "tongue twisters" en u ziet een assortiment van pictogrammen zoals dit:
Als u alle woorden van deze pictogrammen hebt verwijderd, hoeveel zouden u dan tegen "tongtwister" zeggen? Dit is de reden waarom je vaak hoort "gebruik geen woorden op pictogrammen" - te veel mensen gebruiken het als een kruk om te beschrijven waar de app over gaat!
Ik heb het enige pictogram vergroot dat echt de term "tongue twister" recht doet. Een paar verbeteringen die ik zou voorstellen zijn om het silhouet van het hoofd te schetsen en mogelijk groter te maken. Hierdoor wordt de verdraaide tong duidelijk zichtbaar en kan de omtrek helpen de achtergrond weg te schieten. Tenzij alle twisters specifiek zijn voor Groot-Brittannië, zou ik de vlag verliezen en in plaats daarvan een achtergrond kiezen die meer contrast toevoegt rond de illustratie.
De primaire app van Starbucks heeft een geweldig pictogram en app-ontwerp, maar de app die geld op je Starbucks-cadeaubon volgt verbleekt in vergelijking. Het pictogram is nauwelijks leesbaar in het grid van de App Store en het logo is vrijwel onzichtbaar.
Wat hadden ze anders nog kunnen doen? Hoe zit het met het maken van het pictogram op een echte cadeaubon? Trek het handelsmerk groen aan, maak het logo groot en zichtbaar en voeg de magnetische kaart "cadeaukaart" er overheen toe? Of misschien een illustratie van een portefeuille met het Starbucks-logo?
Een andere manier om diepte aan uw pictogram en app-ontwerp toe te voegen, is door het wat conceptuele diepte te geven. In de overvolle ruimte van "to-do" -apps is het "vinkje" een mooie visuele metafoor voor "klaar" maar wordt te veel gebruikt tot het punt van zinloosheid.
De enige apps die opvallen in de menigte hebben een extra conceptuele laag gelaagd over het communicatieve vinkje.
2Do - Dit pictogram lijkt op een stapel documenten die moeten worden beoordeeld. Het gestikte leer vormt een mooi contrast met de schone post-it-notenkleur en de zachte textuur.
Dingen loslaten - Dingen loslaten is een geweldig voorbeeld van conceptueel denken en ontwerpen. Waarom zou je een nieuwe taak maken als de meesten van ons echt willen weten wat we tot morgen kunnen uitstellen? Als u naar een probleem kijkt dat precies het tegenovergestelde van uw concurrentie is, kunt u een aantal behoorlijk creatieve en leuke resultaten behalen. Het kunstwerk zegt precies waar de app over gaat - een inbox met een "voorwaartse" pijl, en als je kijkt naar het raster van iconen boven de kleurselectie, onderscheidt het zich echt van de massa.
Taska - Het pictogram van Taska lijkt op een stapel papieren die netjes op een bureau zijn gestapeld. Hoewel het geen diep concept is, is dit pictogram prachtig geïllustreerd. Let op de details op de schaduw van de houten achtergrond die diepte geeft aan de stapel en de knapperigheid van de randen van het papier en vinkje. De papieren lijken recht van het scherm te komen waardoor het van het raster van oude vinkjes komt.
Uw app-pictogram is de eerste belofte die u aan de gebruiker doet. Het zegt:
Als mensen een pictogram van hoge kwaliteit zien en de app is rot, krijgen mensen PO'd. Als mensen denken dat het pictogram "x" betekent en de app "y" daadwerkelijk uitvoert, krijgen mensen PO'd. Vervul de belofte van uw app aan de gebruiker!
Een manier om ervoor te zorgen dat u aan uw beloften kunt voldoen, is ervoor te zorgen dat de afbeeldingen in de app overeenkomen met het pictogram. Uitgaven is een goed voorbeeld van een pictogram dat de functie van de app heel nauwkeurig beschrijft (uitgaven voor het bijhouden van uitgaven) en hoe een ontwerpconcept van pictogram naar app kan worden gehaald.
Dit is een verrassing voor veel ontwerpers die nieuw zijn in het ontwerpen van iPhone- en iPad-pictogrammen. De manier waarop uw ontwerp in Photoshop of zelfs in de iPhone-simulator wordt bespot, verschilt aanzienlijk van de manier waarop het op een echt apparaat zal lijken. Waarom? Een paar redenen:
All-in Yoga is een uitstekend voorbeeld van een provocerend, maar toch smaakvol geïllustreerd silhouet dat grondig beschrijft waar de app over gaat.
All-in Yoga
Als je een app ontwerpt voor een bekend merk, gebruik het dan! Hieronder staan voorbeelden van apps die er goed aan doen om op te vallen in de App Store door een herkenbaar logo, naam of gezicht te presenteren met betrekking tot de app. Deze apps vertellen je misschien niet precies wat de app doet, maar het geeft een idee van de inhoud die je krijgt op basis van de afbeelding.
Nike - waarschijnlijk iets gerelateerd aan fitness
NBC Nightly News - nieuwsuitzendingen van het programma
Madonna - muziek of video's
Jamie Oliver - recepten
Mad Libs - waarschijnlijk een app-versie van MadLibs?
Wat je ook doet, verspil niet het geschenk van een herkenbaar merk! Deze kunnen herkenbaar zijn wanneer ze worden opgeblazen:
Maar kijk eens wat er gebeurt als hun zwakke silhouetten concurreren met andere pictogrammen in het drukke App Store-raster. Waar is Rachel? iCarly?
Bekijk nu de verbetering met slechts een paar kleine tweaks:
Ze zijn ook herkenbaarder in het App Store-raster:
Het doordenden en uitvoeren van deze aanpassingen duurde minder dan een uur in Photoshop:
Rachel Ray - Zelfs als Rachel's gezicht niet herkenbaar was, heeft ze een grote glimlach en ogen die als een brandpunt fungeren om mensen naar binnen te halen. Het goede nieuws wanneer je een icoon ontwerpt voor een beroemdheid is dat je veel moet werken om dat te gebruiken het gezicht van een persoon. Over het algemeen worden de ogen van mensen eerst aangetrokken door menselijke gezichten tussen een groep generieke pictogrammen. Test dit zelf: kijk even weg van bovenstaande afbeelding en kijk dan terug. Op welk pictogram landde je eerste oog? Laat het me weten in de comments!
iCarly - Toegegeven, ik bekijk iCarly niet, maar het gezond verstand zegt me dat het hoofdpersonage van de show waarschijnlijk het beste gezicht is dat op dit pictogram te zien is, samen met het tweeny-showlogo. Als kinderen of ouders niet zeker zijn van de afgebeelde mok, ondersteunt het logo dat ze een interessante app hebben gevonden.
Eckart Tolle - Deze app is eigenlijk voor zijn videoserie Stillness Within. De titel kan zeker op een elegante manier over de bodem worden geschreven. Echter, voor mensen die Eckart herkennen, zullen ze waarschijnlijk niet om de titel geven. Hij trekt een ZEER gepassioneerd publiek, een die geïnteresseerd zou zijn in alles wat hij publiceert. Alleen al zijn foto hebben is genoeg.
Hello Kitty Stamp Calendar - Wederom een zeer herkenbaar merk dat te veel in een kleine ruimte is gepropt. In de originele versie kun je het Hello Kitty-gezicht amper onderscheiden. Dit is een schande omdat het het internationaal erkende handelsmerk van het merk is. Natuurlijk is het zinvol om een stempelvormige kalender toe te voegen, maar waar het bij grote merken om gaat, is hoe je met iconografie omgaat met de hele reeks app-producten voor dat merk. Is dit de enige app die Hello Kitty zal produceren? Hoe zullen zij omgaan met pictogrammen voor het merk als geheel?
Perez Hilton - Dit pictogram kan in verschillende richtingen gaan. Zien zijn lezers hem echt of alleen zijn naam? Ik heb zijn blog een paar keer gelezen en kan je niets vertellen over zijn uiterlijk. Hij heeft echter wel wat illustraties op zijn blog-header staan, het probleem dat werd gebruikt is praktisch onherkenbaar. Ik gebruikte een van de andere illustraties op zijn blog, blies het op voor een sterk silhouet en stemde overeen met de luide kleuren van zijn website. Bam.
Nu ik heb gezegd dat het goed is om een foto te gebruiken, wil ik dat ik het duidelijk maak. Dit is ALLEEN OK als je te maken hebt met een herkenbare figuur van een beroemdheid! Ik zou het gebruik van foto's om een andere reden niet aanraden. Hieronder volgen enkele voorbeelden van slecht gebruik van fotopictogrammen:
U hebt misschien gemerkt dat ik steeds naar het App Store-raster verwijs. Dit maakt pictogramontwerp voor de iPhone en iPad uniek van het ontwerp van bureaublad- of webapplicatiepictogrammen. De winkelervaring in de App Store is als het zoeken naar een 'vondst' in een kringloopwinkel. Er zijn een paar nuttige en prachtig ontworpen producten omringd door veel commotie en rommel.
Het 'raster' is van toepassing op de iTunes Store, iPhone en iPad-winkels, dus zorg ervoor dat u test hoe uw pictogram eruitziet in al deze omgevingen wanneer u contrasteert met apps die waarschijnlijk in dezelfde vermelding als die van u zullen worden geplaatst. Je moet uitzoeken hoe je het oog van de gebruiker weg kunt trekken van de concurrentie en naar jou toe!
Laat hieronder een opmerking achter met voorbeelden van pictogrammen waarvan u denkt dat ze het goed doen!
Accentsconagua