Fra ikondesign til ikonisk mesterverk (+ gratis PSD)

I denne artikkelen skal jeg se på hva som kreves for å flytte fra ikondesigner til ikon pro. Jeg ser på hvordan ikondesign begynte, hvor det er i dag, og hvor det skal være i fremtiden, samt å dele noen nyttige tips og tips.


Introduksjon

For litt over seks måneder siden begynte jeg min nye jobb der jeg ble bedt om å utvide et eksisterende sett med ikoner. Flott jeg trodde, jeg kan gjøre ikoner, tross alt jeg har skapt dem 100s ganger før. Da jeg så det eksisterende settet med ikoner, kom det som et ganske sjokk for meg. De var de enkleste av designene, og jeg fant faktisk det ganske utfordrende å gjøre noe så enkelt. Jeg var vant til å tilbringe mange timer på ikonene som jeg vanligvis opprettet at det virket rart at jeg bare hadde brukt ti minutter på disse ikonene for å få dem ferdig.

Dette fører meg til å tenke på en hel rekke spørsmål knyttet til ikoner som "hva gjør et godt ikon" og "hvor mye tid skal brukes på et ikon?". Jeg vil dele noen av svarene med deg nedenfor. Jeg har snakket med noen andre toppikondesignere for å få tak i prosessen. Vi vil også se på hvordan ikondesign begynte, hvor det er i dag, og (enda viktigere) hvor det kommer til å være i fremtiden. Så hold deg til meg, lage deg en kopp te og lykke med å designe peeps!


De første ikonene

Så hvor kom disse lille grafiske mesterverkene fra? Alt startet tilbake i 1973 da datamaskiner var lite mer enn DOS-baserte systemer der brukerne navigerte seg rundt ved hjelp av kommandoer. Dette var en tid da grafisk design i datamaskiner ikke eksisterte. Det var absolutt ingen fingeravtrykk eller sveipe bevegelser for å betjene den.

Som du kan forestille deg, var dette ikke den enkleste måten å komme rundt maskinen din, og et relativt kjent selskap i USA som heter Xerox, var opptatt av å jobbe hardt for å prøve å overvinne dette problemet. Samme år lanserte de 'The Xerox Alto' som ble den første datamaskinen i historien for å operere ved hjelp av et grafisk brukergrensesnitt (GUI for kort). Det var ikke før et par år senere da en bestemt Mr Steve Jobs og hans partner i kriminalitet Steve Wozniak tok ideene utviklet av Xerox og jobbet dem inn i verdens første kommersielt tilgjengelige operativsystem for å bruke et GUI. Det ble kalt Macintosh. Damer og herrer ikonet ble født!

De første ikonene som skulle vises var høflighet av Apple på Macintosh.

Det var absolutt en revolusjon for databehandling. Kataloger hadde nå en grafisk representasjon som dukket opp som mapper, filer så ut som notisblokker, klokker og kalkulatorer viste også utseende.

Et datamaskinikon er et piktogram som vises på en dataskjerm og brukes til å navigere i et datasystem eller en mobil enhet.


Ikon design retningslinjer

Her er noen av de viktigste designprinsippene når du lager ikoner

Hold dem enkle og konsise

Dette er uten tvil en av de viktigste aspektene i ikondesign. Fremfor alt må ikoner være enkle, klare og konsise. I de fleste tilfeller må du opprette et ikon innen begrenset plass. Du må kunne skildre ditt produkt, din tjeneste eller handling tydelig og til poenget.

Ikoner fungerer ofte best når de fungerer godt i bare svart og hvitt. Når du har dette spikret, kan du flytte på å legge til farge og gjengi ikonene dine.

I noen scenarier kan det være lurt å bruke et enkelt objekt, eller et enkelt tegn for eksempel. Denne metoden fungerer vanligvis, selv om noen ganger et annet objekt kan være nødvendig. Eventuelle mer enn to objekter, og jeg vil nærme meg med forsiktighet, da dette noen ganger kan virke uklart og kan avskrekke fokus fra ikonet. Hvis du finner deg selv i denne situasjonen, så prøv å strippe objekter bort til meldingen din fremdeles er tydelig.

Et ikon representerer en handling en bruker vil ta

Konsistens

Hvis du får oppgaven med å lage et sett med ikoner, må de ha en form for konsistens gjennom. Dette kan komme i form av bestemte fargepaletter, former og objekter. Konsistens bør også være til stede gjennom hele søknaden. Hva skjer når brukeren klikker på ikonet? Er skjermen de blir tatt til stylet på samme måte som ikonet ditt? Hvis svaret på det er "nei", må du kanskje lese noen av dine avgjørelser - brukerne gjør ofte en sammenheng mellom de to hendelsene ved å klikke på et ikon og neste skjerm de lander på. Hvis du bryter denne konvensjonen, er det en mye høyere risiko for å bryte brukerens tillit.

Forstå ditt mål demografiske

Hvilken type person vil mest sannsynlig klikke på ikonet? Er ikonet rettet mot fem åringer eller sekstifest år? Er det for brukere i Kina eller brukere i England? Hvis du lager et matrelatert ikon, vil det ikke være noe å bruke spisepinner som bestikk hvis det er målrettet mot det engelske markedet. Du må tenke på dette og sørge for at måldemografikken din vil kunne relateres godt til designet.

Gjør dem pop, få dem til å rope

Nå mer enn noensinne trenger ikonene dine å skille seg ut fra mengden. Med app-butikker dukker opp hele tiden på en rekke enheter fra smarte telefoner til smart TV.

Disse ikonene av Ramotion og George Gliddon viser egenskapene til gode ikoner som pop.

Hvis ikonet ditt er for en app, vil det ofte være det første kontaktpunktet for det. Det er ditt butikkfront til verden. Folk er i siste instans påvirket av design. Du kan ha den beste appen i verden, men folk vil bli slått av hvis de ikke først blir engasjert av ikonet ditt. Tenk på det, ville du virkelig gå inn i en butikk som så så sliten som helvete fra utsiden? Det er samme prinsipp; Ikke mange vil ta det neste trinnet for å finne ut mer om appen din eller ta den neste handlingen.

Sketching er din venn - Conceptualize!

Ok, jeg innrømmer det. Digital kunst var min første kontakt med kunstverdenen. Photoshop var min sketchpad og musen var blyanten min. Jeg hadde aldri vurdert å skissere ting før; Tross alt hadde jeg alltid vært søppel på frihånds tegning under skolen. Det var ikke før mine uni år da jeg forklarte dette til en av mine forelesere at hun vendte seg til meg og sa "Aaron skisserer er din venn". Hun fortsatte deretter med å forklare meg hvordan du ikke trenger å være verdens beste illustratør å skisse.

Sketching your icons først kan ofte tjene som et anstendig utgangspunkt for ditt endelige design.

Skisse handler ikke om å skape en realistisk representasjon av hva du faktisk kan se, men er mer en metode for å skape grunnlag for en idé, inspirasjon, konsept eller syn. Fra den dagen bærer jeg alltid en skyggepute rundt meg og oftere at jeg ikke skal skisse ut designene mine for ikoner. Dette kan virkelig være uvurderlig og kan spare en masse tid. Det hjelper deg med å få grunnlaget for ditt ikon og kan ofte fungere som et anstendig utgangspunkt for ditt endelige design.


Case Study

Jeg klarte å ta noen minutter med den talentfulle ikondesigneren Alex Volkov og spurte ham et par spørsmål angående ikondesign.

Ikoner opprettet av Alex Volkov. Disse viser fremgangen som har blitt gjort gjennom årene når det gjelder ikondesign.

QWhat er den viktigste faktoren for å skape et godt ikon?

Den viktigste faktoren er å finne den mest uttrykksfulle stilen for å skildre ikonet, som vil tilsvare oppgaven mest åpenbart og hvor effektivt den vil utføre sin funksjon. Fremfor alt bør ikonet være vakkert.


QHvor mye tid skal brukes på et ikon?

Det avhenger av oppgaven med ikonet, ideen og den valgte stilen til den. Det kan ta fra to til seksten timer. Det er på tide at jeg skal opprette ikonet, mens tiden til søkeideer og godkjenning med klienten varierer og noen ganger kan ta mye lengre tid enn gjennomføringen.


Ikon Tips og tips

Her er noen tips og tips som skal hjelpe ikondesignene dine, flytte fra nivå 1 til nivåekspert. Selvfølgelig, som med all design, jo mer du prøver, desto flere feil vil du gjøre. Men jo flere feil du gjør, desto bedre blir du.

Få lyset til høyre

Hvis du vil legge til realisme for ikonene dine, er det veldig viktig å forstå hvilken retning lyset skinner på det. Du må kunne visualisere (i hodet ditt) et skinnende lys skinner på ikonet. Bildet nedenfor viser dette.

Dette overdrevne bildet demonstrerer vår lyskilde og hvordan det ville falle på ikonet. Herfra kan vi bestemme hvor høydepunktene og skyggene skal være.

Ved å visualisere dette kan vi legge til høydepunkter og skygger til ikonet som de ville falle i den virkelige verden.

Skjønnheten er i detalj

Når du lager ikoner, er oppmerksomheten på detaljer svært viktig: glares, skygger, reflekser, refleksjoner, egenskaper av materialer. Se på verden rundt deg og tenk hvordan det ville se ut i virkeligheten. Samspillet og oppførselen med lys og omgivende materialer er viktig. Lyset kan ofte falle annerledes i ulike værforhold. For eksempel vil lys ikke reise det samme gjennom et tomt rom som det ville i et røykfylt rom. Når vi tar hensyn til disse faktorene, kan vi ikke bare lage en ikon, men også ikoner med bestemte stemninger og følelser.


Kontrollpanel for dårlig ikon

  • Bruk lite til ingen tekst
  • Er ikonet universelt gjenkjennbart? For eksempel vil en politibil i USA ikke være den samme som en politibil i Australia.
  • Har du for mange objekter innenfor en begrenset mengde plass?
  • Har du designet ikonet i størrelsen som det til slutt kommer til å bli? Hvis ikke så kanskje du burde ha.

Appikoner

Med introduksjonene av smarttelefoner (spesielt iPhone), tabletter og apps på scenen, har ikonene gått gjennom litt av en revolusjon. Aldri har ikoner så polert, så ekte, så full av dybde, farge og intensitet.

Dette bildet viser de ulike størrelsene på forskjellige appikoner

IPhone angir begrensninger og retningslinjer for hvordan appikoner kan vises på berøringsskjermen. Tydeligvis må de passe i en 57 x 57 px boks (114 x 114 px høy res). Disse begrensningene stiller innstillingene for designsamfunnene ut, og som et resultat av dette har vi nå alle slags rare og fantastiske ikoner som har vært basert rundt begrensningen av iPhone-torgets ikonplassholder.

Noen ikonbegrensninger har skapt en helt ny stil med ikondesign som disse av Livie Leontidis, Ramotion og Jackie Tran Anh.

Fremtiden for ikondesign

Ved å se på veien som ikoner tidligere har tatt, kan vi prøve og forutsi hvordan ikoner vil være i fremtiden og hvilken form de kan ta. Selvfølgelig er fremtiden for ikoner avhengig av, ikke bare de grunnleggende prinsippene for god ikondesign, men også på verktøyene som brukes til å lage disse ikonene. For eksempel, for hver ny funksjon som legges til programvare som Photoshop, kan dette potensielt bidra til å forme fremtiden for ikoner. Imidlertid forblir de grunnleggende prinsippene for god ikondesign det samme. En person som kanskje vet mer enn andre om god ikonisk design er Rob Janoff. Rob designet apple-logoen tilbake på 70-tallet. Jeg klarte å få tak i en rask Skype-prat med Rob som fortalte meg hva han trodde gjort et godt ikon.

Det jeg vanligvis ser etter er enkelhet og eleganse. Med fremkomsten av teknologi er det flere og mer kompliserte gjengivelser av ikoner. Som er fint å se på, men noen ganger er teknikken erstattet av konsept. Når ting er veldig enkle, er de lettere å huske. - Rob Janoff

For å forstå fremtidens ikoner bør vi se på plattformene de benyttes på. I et nylig intervju ble Bill Gates spurt hva han mest glede av, med hensyn til fremtiden for internett. Han svarte:

Super raske internettforbindelser og forbedringer i maskinvare vil gjøre det mulig for en verdensomspennende web som gir oss informasjon i 3D Bill Gates

Dette kan gi litt innsikt i fremtiden for ikoner. Kanskje de kunne flytte fra flat 2d gjenstander og bli en del av verden rundt oss. Ikoner kan potensielt bli håndtak som vi trekker, ringer som vi snu og objekter som vi trykker på.

Fremtidens ikoner vil bli bedre, mer profesjonelle og interessante. Designere prøver allerede å lage flotte, iøynefallende design, og det er håpet at denne trenden vil fortsette.


Linseikonet.PSD

Vedlagt denne artikkelen er en .PSD for deg å laste ned og bruke i prosjektene dine, tweak eller bare for å se gjennom. Grunnen til å inkludere dette designet er å introdusere deg til noen teknikker som brukes i den tredje delen av ikondesignet; gjengivelse.

Det første trinnet bør være å samle alle dine ideer, ta en titt rundt på internett og på objekter som du ser rundt deg, prøv å få litt inspirasjon (dette hjelper alltid). Den andre er å skissere noen ideer og sørge for at oppfordringen til handling eller melding du forsøker å skildre er klar, konsis og tydelig. Den tredje delen er gjengivelsen. Dette er den delen hvor du begynner å legge til farge, skygge og belysning. Etter min mening er det den mest spennende delen da dette er når ikonene våre virkelig begynner å komme til liv.

Ta en titt gjennom PSD, og ​​du bør kunne se hvordan ikonet er konstruert.


Konklusjon

Det er ingen tvil om at ikonene har blitt fullstendig regenerert de siste årene, og hvem hadde trodd at designere ville sette så mye tid og krefter på noe som kan være så lite som 16x16px!

Det er disse ikonene, selv om det hjelper oss å navigere rundt enhetene våre lettere og til slutt berike våre liv dag i dag ut. Kan du forestille deg hvor frustrerende livet ville være hvis vi var tilbake på 70-tallet og måtte navigere rundt ved hjelp av kommandoprompter? Det ville være et mareritt. Heldigvis har ting kommet frem siden da, og det er vår jobb som designere å presse grensene når det gjelder ikoner; vi bør omfavne teknologiene vi har rundt oss i dag, slik at vi kan produsere ikoner som de aldri har blitt produsert før. Hvis du bare har begynt med ikondesign eller du fortsatt er et ikon for jomfru, så er det en god tid å hoppe inn for å vite at du nå er bevæpnet med den grunnleggende kunnskapen, fra denne artikkelen, som vil sette deg på de riktige sporene å lage ditt eget ikon mesterverk.

Inntil neste gang pepper glad design!