Illustrerer en serie applikasjonsikoner

Infinite Skills er et programvareselskap som utvikler læringsmateriell for folk å øke sin kunnskap om en rekke applikasjoner, fra industriprogramvare til vanlige tekstbehandlingsprogrammer. Uendelige ferdigheter nærmet meg til å lage en serie applikasjonsikoner som vil følge deres programvare. Unødvendig å si, med min umettelige appetitt for ikondesign og branding var spillet på!

Nærme seg

Prosjektet måtte vurderes for å bestemme riktig tilnærming. Siden lanseringen av disse appene til iTunes-butikken var et nytt venture for dem, hadde de ingen eksisterende ikondesignparametere som jeg trengte å holde seg innenfor. Jeg benyttet anledningen til å virkelig dissekere problemet og komme frem til best mulig løsning.

Først og viktigst måtte jeg bestemme hva de samlende elementene i hele ikonkampanjen ville være. Jeg visste at de ville trenge å jobbe som en familie, men likevel være forskjellige nok, slik at betrakteren kunne gjenkjenne dem raskt som forskjellige programvaretitler.

Gjennom åpne kommunikasjonslinjer ble det etablert at det skulle være en klesvaskliste over programvaretitler (det du ser nedenfor er bare en delvis liste.) Jeg hadde klienten sende meg de forventede titlene, slik at jeg bedre kunne måle tilbøyelighet til ikoner som deler likheter i løpet av etableringen av alle ikonene.

Etter mye omtanke, skisse og overveielse bestemte jeg meg for at det ville være fire kjerneelementer som ville skille hver av ikonene: brev, farge, forbedring av grafikk og bakgrunn.

Brev

Hver av ikonene vil først og fremst bli anerkjent av et stort brev. Jeg brukte en sans serif og fet skrift slik at ikonet ikke ville føle seg spinkel eller for luftig. Brevet er slått på en vinkel for å vise et mer dynamisk utseende.

Farge

Siden flere elementer begynner med bokstaven "F", for eksempel, hjelper fargen ytterligere å skille mellom et duplikatbrev fra et annet program. Adobe Flash og Apple Final Cut Pro er førsteklasses eksempler.

Forbedre grafisk

Hver av ikonene vil også motta en forbedrende grafikk som angir hva programvaren tittelen skal lære deg. Hvor programvaretitler var mer generiske, brukte jeg også en generisk forbedrende grafikk.

Bakgrunn

Bakgrunnsstruktur er en subtil forskjell som ikke er ment å bli lagt merke til ved første øyekast. Når det er mulig, tar hver bakgrunnstekstur retning fra programvaren. I Final Cut Pro består bakgrunnen av stjerner som sammenfaller med film, kamera, film, osv.

Etter at jeg bestemte meg for hva differensieringspunktene ville være, flyttet jeg videre til å bygge opp wireframes for hver av ikonene. Jeg ønsket å gi meg den beste muligheten til å harmonisere ikonene, med dette i tankene jobbet jeg på flere wireframes samtidig.

Dette gjorde det veldig klart med hensyn til elementer som måtte være finesset for å kunne arbeide tettere som en enhet. Typisk jobbet på to eller tre ikoner på en gang ga et godt grunnlag for å bestemme likhet. I tillegg, som ikoner var ferdig, henviste jeg alltid til dem slik at jeg ville være sikker på å holde selv de minste detaljene konsekvente.

Siden bokstavene per ikon varierte, måtte jeg være kreativ og fleksibel med hensyn til den medfølgende grafikken. Noen ganger var et brev veldig bredt og andre ganger var bokstaver veldig høye. For å kompensere for den forskjellen, implementerte jeg to typer grafikk. Lange og tynne gjenstander ville løpe i en vinkel fra øvre venstre til nedre høyre. Hvis en tilsvarende gjenstand ikke var tynn og flat, trakk jeg den i mer kvadratisk form og plasserte den foran brevet. Det var viktig å merke seg bruken av hver av disse hendelsene, slik at man ikke ble brukt overdrevet over den andre.

Illustrerende objekter hvis størrelser er dramatisk forskjellige

Når du lager en ikonserie, er det viktig å sikre at ikonene ser ut som de tilhører sammen. Det er mange faktorer som påvirker vellykket utførelse av dette, inkludert: emne, orientering og overflate for å nevne noen.

Mange ganger er det parametere som må jobbe rundt. En parameter som jeg opplevde under dette prosjektet var at klienten ønsket å bruke en bygning i AutoCad-ikonet og et kamera i Photoshop for Photographers-ikonet. Som du er veldig klar over, varierer en bygning i detalj fra noe så lite som et kamera.

For Photoshop for fotografer trakk jeg mye av detaljene du ville se i et kamera. Selvfølgelig litt destillert ned i forhold til det faktum at det resulterende stykket er et ikon. Kontrast det med en bygning. For å innlemme bygningen måtte jeg illustrere det på en slik måte at den hadde nok detalj å lese som en bygning, selv om skalaen er mye mindre. Når det er sagt, fjernet jeg bygningen ned til kjerneelementene som måtte inkluderes for at den skulle bli anerkjent som sådan - vinduer, takterrasser og trim var de viktigste som ville forbli.

Opprette undergrupper eller spesialiserte versjoner av visse ikoner

Uendelige ferdigheter visste at de ville produsere innhold for bestemte segmenter i en brukergruppe. For eksempel har de en programvare tittel som er mer generell og er rettet mot Photoshop-brukere. De har også laget en annen versjon som er spesielt for fotografer. Typisk er versjonering betegnet med en snipe (ord skrevet i en vinkel over kanten av noe), men i dette tilfellet valgte klienten en helt ny tilsvarende grafikk-et kamera.

Oppnå likhet mens du opprettholder interessen

Det sier seg selv at ikonene må komme over som en enhet. Det er imidlertid også viktig at betrakteren ikke mister interessen i å se på elementene fordi de blir lei av utførelsen. Med dette i tankene gjorde jeg et poeng for å skape illusjonen av forskjellige overflater på hver av de medfølgende elementene sammenlignet med brevet det var ved siden av.

Det er ingen hard og rask regel at ikoner må næres på denne måten, heller, det var mer en kunstnerisk lisens som jeg trente. I noen tilfeller er det bare ulogisk å skape illusjonen av en annen overflate, som i Microsoft Excel-ikonet, der man forventer at et bardiagram skal reflektere, men på Adobe Illustrator-ikonet vil du se at pennen har et kjedelig plastisk utseende mens "jeg" har et veldig reflekterende utseende. Dette fyller litt mer interesse og bidrar til å vise objektet i et mer realistisk lys.

Serie gjennomgang av ikoner til dato

Tidsavbrudd

Mens hvert ikon tar flere timer fra start til slutt, har jeg gitt et enda større innblikk i opprettelsen av en del av et av ikonene. Jeg håper du har hatt glede av å lese om prosessen min, og vil ta litt av informasjonen du har funnet nyttig og bruke den til dine egne prosjekter.

Time Lapse App Icon Creation fra Jonathan Patterson på Vimeo.