Share
Infinite Skills is een softwarebedrijf dat leermaterialen ontwikkelt voor mensen om hun kennis van een verscheidenheid aan applicaties te vergroten, van industriesoftware tot alledaagse tekstverwerkingsprogramma's. Infinite Skills heeft me benaderd om een reeks toepassingspictogrammen te maken die hun software zullen vergezellen. Onnodig te zeggen dat het met mijn onverzadigbare honger naar pictogramontwerp en branding ging!
Het project moest worden beoordeeld om de juiste aanpak te bepalen. Aangezien het lanceren van deze apps in de iTunes Store een nieuwe onderneming voor hen was, hadden ze geen bestaande ontwerpparameters voor het pictogram die ik nodig had om binnen te blijven. Ik maakte van de gelegenheid gebruik om het probleem echt te ontleden en tot de best mogelijke oplossing te komen.
Eerst en vooral moest ik beslissen wat de verenigende items in de gehele pictogramcampagne zouden zijn. Ik wist dat ze als een familie zouden moeten werken, maar nog steeds anders genoeg zijn, zodat de kijker ze snel zou herkennen als verschillende softwaretitels.
Via open communicatielijnen werd vastgesteld dat er een waslijst met softwaretitels zou zijn (wat je hieronder ziet is slechts een gedeeltelijke lijst.) Ik liet de klant me de verwachte titels sturen zodat ik de neiging tot het delen van pictogrammen beter kon meten overeenkomsten in de loop van de oprichting van alle pictogrammen.
Na veel nadenken, schetsen en beraad besloot ik dat er vier kernitems zouden zijn die elk van de pictogrammen zouden onderscheiden: letter, kleur, grafische weergave en achtergrond.
Elk van de pictogrammen wordt voornamelijk herkend door een grote letter. Ik heb een schreefloos en vetgedrukt lettertype gebruikt, zodat het pictogram niet slap of te luchtig aanvoelt. De letter is schuin gedraaid om een dynamischer uiterlijk te krijgen.
Omdat verschillende items beginnen met de letter "F", helpt de kleur bovendien om een dubbele letter van een andere toepassing te onderscheiden. Adobe Flash en Apple Final Cut Pro zijn uitstekende voorbeelden.
Elk van de pictogrammen zou ook een grafische verbetering ontvangen die aangeeft wat de softwaretitel u zal leren. Waar softwaretitels algemener waren, heb ik ook een generieke grafische verbetering gebruikt.
De achtergrondstructuur is een subtiel verschil dat niet bedoeld is om op het eerste gezicht te worden opgemerkt. Indien mogelijk krijgt elke achtergrondstructuur richting vanuit de software. In Final Cut Pro bestaat de achtergrond uit sterren die samenvallen met film, camera, films, enz.
Nadat ik had besloten wat de verschillende items zouden zijn, ging ik verder met het opbouwen van wireframes voor elk van de pictogrammen. Ik wilde mezelf de beste mogelijkheid bieden om de pictogrammen te harmoniseren, met dit in mijn achterhoofd werkte ik aan meerdere wireframes tegelijk.
Dit maakte het heel duidelijk met betrekking tot items die moesten worden gefabriceerd om als eenheid nauwer samen te werken. Gewoonlijk leverde het werken op twee of drie iconen tegelijk een goede basis om de overeenkomst te bepalen. Omdat iconen af waren, heb ik daar altijd naar verwezen, zodat ik zeker weet dat zelfs de kleinste details consistent zijn.
Omdat de letters per pictogram varieerden, moest ik creatief en flexibel zijn met betrekking tot de bijbehorende afbeeldingen. Soms was een letter erg breed en soms waren brieven echt groot. Om dat verschil te compenseren, heb ik twee soorten grafische afbeeldingen geïmplementeerd. Lange en magere items zouden onder een hoek van linksboven naar rechtsonder lopen. Als een overeenkomstig item niet dun en plat was, trok ik het in meer vierkante vorm en plaatste het voor de letter. Het was belangrijk om het gebruik van elk van deze gebeurtenissen te noteren, zodat de ene niet overmatig werd gebruikt ten opzichte van de andere.
Bij het maken van een pictogramserie is het belangrijk ervoor te zorgen dat de pictogrammen eruitzien alsof ze bij elkaar horen. Er zijn veel factoren die van invloed zijn op de succesvolle uitvoering hiervan, waaronder: onderwerp, oriëntatie en oppervlak, om er maar een paar te noemen.
Vaak zijn er parameters die moeten worden opgelost. Een parameter die ik tijdens dit project tegenkwam, was dat de klant een gebouw wilde gebruiken in het AutoCad-pictogram en een camera in het pictogram Photoshop voor fotografen. Zoals je heel goed weet, verschilt een gebouw in detail van iets kleins als een camera.
Voor Photoshop voor fotografen heb ik veel van het detail getekend dat je in een camera zou zien. Natuurlijk wat gedistilleerd, gezien het feit dat het resulterende stuk een icoon is. Vergelijk dat met een gebouw. Om het gebouw op te nemen moest ik het zo illustreren dat het genoeg detail bezat om als gebouw te kunnen lezen, ook al is de schaal veel kleiner. Dat gezegd hebbende, heb ik het gebouw ontmanteld tot de kernelementen die moesten worden opgenomen om als zodanig te worden herkend - ramen, rooftopitems en trim waren de essenties die zouden blijven bestaan.
Infinite Skills wist dat ze content zouden produceren voor specifieke segmenten binnen een gebruikersgroep. Ze hebben bijvoorbeeld een softwaretitel die algemener is en is gericht op gebruikers van Photoshop. Ze hebben ook een andere versie gemaakt die specifiek bedoeld is voor fotografen. Versies worden meestal aangeduid met een snip (woorden geschreven op een hoek over de rand van iets) maar in dit geval gaf de klant de voorkeur aan een geheel nieuwe bijbehorende afbeelding: een camera.
Vanzelfsprekend moeten de pictogrammen als een eenheid overkomen. Het is echter ook belangrijk dat de kijker geen interesse in het bekijken van de items verliest omdat ze zich verveeld voelen met de uitvoering ervan. Met dit in gedachten heb ik een punt gemaakt om de illusie te creëren van verschillende oppervlakken op elk van de begeleidende items in vergelijking met de letter die het naast stond..
Er is geen vaste regel dat pictogrammen op deze manier moeten worden benaderd, in plaats daarvan, dat was meer een artistieke licentie die ik heb uitgeoefend. In sommige gevallen is het gewoon onlogisch om de illusie van een ander oppervlak te creëren, zoals in het Microsoft Excel-pictogram waar men zou verwachten dat een staafdiagram reflecterend is, maar op het pictogram van Adobe Illustrator merkt u dat de pen een saai plastic uiterlijk heeft terwijl de "ik" een heel reflecterende blik heeft. Dit geeft een beetje meer interesse en helpt het object in een realistischer licht weer te geven.
Hoewel elk pictogram van start tot finish meerdere uren in beslag neemt, heb ik een nog grotere blik op de creatie van een deel van een van de pictogrammen gegeven. Ik hoop dat je het leuk vond om over mijn proces te lezen en enkele van de informatie die je hebt gevonden nuttig vindt en toepast op je eigen projecten.
Time Lapse App Icon Creation van Jonathan Patterson op Vimeo.
Accentsconagua