10 gyldne regler for digitale ikoner

Ikonografi tilføjer uvurderlige aktiver til en stigende portefølje af interaktioner. Mens ikondesign overholder principperne om godt design, spiller det efter sine egne regler. Her er 10 for at komme i gang.

01. Design med vilje

Ikoner skal ligesom alle elementer med godt design have et klart formål. Før du overhovedet tænker på, hvilken slags ikoner du vil have, skal du spørge dig selv: hvorfor? Hvis dit svar er 'fordi de er smukke', skal du tænke to gange, før du damper fremad. I en visuelt overfyldt digital verden mister selv de smukkeste ikoner snart deres glans uden mening eller formål.

Vi begynder med at se på navigation. Facebook og Twitter er gode eksempler på meget enkel og praktisk brug af ikoner til navigation. At have tekst ved siden af ​​ikonerne er afgørende for brugerne. Der er alt for mange tilfælde, hvor abstrakte ikoner bruges inkonsekvent med eller uden tekst, eller hvor konventioner ignoreres, hvilket resulterer i, at brugerne ikke kan finde det, de leder efter. For eksempel er der i Skype iPhone-appen tre forskellige ikoner, der bruges til at finde folk. Ikonet i den nederste navigationslinje er en ændret version af ikonet for iOS-kontaktpersoner. Ikonet til at finde dine kontakter, når du bruger tastaturet, er en notesbog med et # i midten. Ikonet til at finde Skype-brugere, der ikke er i dine kontakter, er et hoved, skuldre og et +. Eh?



Uanset om du opretter en grænseflade fra bunden eller ændrer en eksisterende, kan ikoner bringe sammenhæng og betydning for dit design, når det kommer til UI-design. Hvis du designer et e-handelswebsted, er det givet, at du har et kasseikon et fremtrædende sted et eller andet sted øverst til højre på skærmen, ikke kun et link. Du kan kalde det Kasse, indkøbskurv, dine varer eller indkøbskurv, men i overensstemmelse med princippet om konsistens skal det anvendte ikon afspejle dets navn.

Skype sender brugere på en vild gås jagt ved at give tre forskellige ikoner til at finde folk

Skype sender brugere på en vild gås jagt ved at give tre forskellige ikoner til at finde folk

Amazon kalder det en kurv og bruger et hybrid kurv og trolley-ikon. Majestætiske vine indkøbsvogn har sin købspolitik på mindst seks flasker. Med hver flaske tilføjet skifter en af ​​de seks nedtonede vinflasker farve for at fortælle dig, hvornår du har opfyldt minimumskravet. Sød. ASOS trodser konvention og bruger ikke et ikon, så brugerne er nødt til at se lidt sværere ud for at købe deres ting.

Det større billede af den samlede UX drager fordel af denne fine opmærksomhed på detaljer så meget som det gør af at finde den rette balance i samspillet mellem ikoner og andre grafiske elementer. Gå for subtil, og ikoner kan gå tabt. For eksempel er navigationsikoner på The Witcher-webstedet gemt i bunden af ​​siden og er helt overvældet af designet. Men gør ikoner for fremtrædende, og de overfylder dit design, som det er tilfældet med Bryggeri Ommegang internet side; så meget tid og opmærksomhed er gået i ikoninteraktion, men det har ikke brug for så meget. Det er her filosofien om 'mindre er mere' er fremherskende.

Selvom tanken om tabeller måske får dig til at løbe for bakkerne, kan brugen af ​​ikoner og en klar forklaring inden for en tabelstruktur bringe orden på uhåndterlige oplysninger. Den sammenfattende fem-dages BBC-vejrudsigt er den mest umiddelbare og fremtrædende funktion på BBC Weather-webstedet. Ved hjælp af konventioner, der forstås over hele verden, omgår det endda behovet for en legende.

Med begrænset fast ejendom og endnu mere begrænset opmærksomhed kan ikonografi i det digitale domæne let blive et sprog i sig selv, men dette ville være et farligt spil. For at give tekst liv, bruges der nu enkle ikoner i stedet for billeder eller andre grafiske elementer. Det Symbolikoner Hjemmesiden viser en sjov måde at fortælle en historie med en blanding af tekst og ikoner. Veggie-ikonerne er varme og imødekommende.

Uanset om de er i digitalt eller papirformat, er det kun tekst, der giver anstrengende læsning. En sådan tekst er lettere at forstå med inkluderingen af ​​pacede ikoner. Den rigtige mængde hvidt rum er en del af ligningen, men strategisk placerede ikoner tjener til at opsummere såvel som forbedre. Vurder My Shizzle's instruktionsikoner flyder med kopien, hvilket giver supplerende tekst og grafiske ruter til Shizzle-succes.

Humørikoner kommer til at tænke på, når humør og følelser nævnes. Men at påvirke følelser er meget mere subtilt end at bruge humørikoner, hvilket gør det vanskeligt at få ret. Forudsat at du har din farveteori i skak, handler det kun om metaforer. Når den forkerte betydning formidles, kan tingene gå frygteligt galt. eHarmonys ikoner er beregnet til at fremkalde ønsket om at date, men de er for kliniske og lader brugerne føle sig kolde.

02. Kend dit publikum

At forstå, hvordan dine brugere fortolker dine ikoner, er afhængig af et par underregler.

  • Antag ikke : Vi ved alle, hvad der sker, når vi ASS U ME.
  • Fem Ws og en H : Du skal vide, hvem dine brugere er, og hvorfor, hvad, hvordan, hvor og hvornår de bruger din tjeneste.
  • Gør metaforer meningsfulde: Du kan ikke behage alle mennesker hele tiden, men hvis dine metaforer ikke formidler den samme betydning til et stort flertal af dine brugere, så find nye.
  • Overvej kulturelle normer: I de fleste lande rundt om i verden forstås tommelfinger op som et tegn på accept. Men i Thailand svarer det til at stikke tungen ud på nogen.
  • Brug det relevante sprog : Hvis du kun tjener et land, eller hvis du kan lokalisere din tjeneste, skal du overveje sprogvariationer. Hvis din tjeneste er global, er passende ikoner gode til at overvinde sprogbarrierer.

Ommegang-bryggeriets websted har flere ikoner, end det virkelig har brug for

Ommegang-bryggeriets websted har flere ikoner, end det virkelig har brug for

03. Planlægning er afgørende

Oprettelse og integration af ikoner i dit overordnede design kræver nøje planlægning og opmærksomhed på detaljer.

Du bliver nødt til at overveje:

  • Hvor ikoner er nødvendige . Kortlæg, hvor i dit design, du vil bruge ikoner. Overvej, hvor integreret de er i dit design. Vil du kun bruge dem i globale sektioner, f.eks. Sidefoden, eller vil du bruge dem intermitterende med specifikke indholdstyper, f.eks. På produktsider på et e-handelswebsted?
  • Hvor ofte ikoner vil blive brugt . Overvej, hvor mange ikoner der vil blive brugt mere end én gang, eller hvor mange variationer af et enkelt ikon, der kræves. Tænk på de forskellige applikationer af ikonerne. Lad os sige, at du bruger en responsiv designramme til dit websted, og du designer også en iPhone-app. Du kan muligvis bruge de samme ikoner på webstedet og i appen, eller det kan være bedst at betjene disse platforme separat.
  • Hvordan ikoner sidder i det overordnede design . Med hensyn til udseende og fornemmelse skal ikonerne arbejde inden for hele grænsefladen. Lige så vigtigt er beslutninger om placering, størrelse og hvor mange de skal bruge. Dette inkluderer, hvordan dine ikoner fungerer sammen med andre grafiske elementer.
  • Er tekst tilstrækkelig? Når du har overvejet detaljerne, skal du stå tilbage og spørge dig selv, om teksten er tilstrækkelig. Hvis tekst vil gøre jobbet, så lad det være. Internettet er rodet nok, som det er.

Før du går videre, skal du tage fat på de vigtigste aspekter af planlægning og arbejdsgang.

Trin 1: Plan

Få de niggly bits ud af vejen, og fortsæt med at være kreativ. Stil dig selv følgende spørgsmål for at hjælpe dig med planlægning.

  • Hvad er budskabet at formidle? Hvis du er kommet så langt, har hvert ikon, du vil oprette, et formål, og det er nu vigtigt, at du er helt klar over, hvordan du vil kommunikere dette formål. Dit ikon kan være bogstaveligt eller metaforisk, men du skal sørge for, at du får meningen korrekt.
  • Er der en konvention? Uanset om det er bogstaveligt eller metaforisk, hvis der allerede findes en konvention, skal du følge den. Hvis der ikke er nogen konvention, skal du fortsætte til næste trin.
  • Hvad er sammenhængen? Kontekst er som lim. Hvis dine ikoner har ret, holder de sig til det. Hvis ikke, stikker de ud som en øm tommelfinger. Du er sandsynligvis bekendt med det sikkerhedsskilt, der bruges på byggepladser for at indikere, at der skal bæres hårde hatte. Hvis du tager dette ud af sammenhængen og placerer det ved siden af ​​garderoben i en restaurant, kunne besøgende blive tilgivet for at tro, at de var beregnet til at aflevere deres hatte. Selvom der findes en konvention, er den afhængig af kontekst.
  • Giver det mening? Dette er ren logik, men når du kommer ind i detaljerne, kan du miste perspektiv. Det er nyttigt at stille spørgsmålstegn ved, om formålet, budskabet, designet og konteksten af ​​et websted er sammenhængende.
  • Findes den allerede? Efter alt dette kan du muligvis opdage, at det samme eller lignende ikon allerede er i brug et andet sted i dit design. Kontroller og dobbelttjek.
  • Kan du hente inspiration fra andre steder? Surf på internettet, se på bøger og se, hvad der er aktuelt, hvad der er forældet, og hvad andre mennesker laver. Jeg foreslår ikke, at du kopierer andres arbejde; Jeg foreslår, at du henter inspiration fra, hvor du kan finde den.

Trin 2: Design

Uanset om du designer et 16-pixel-ikon eller et hus med 16 værelser, er det en vigtig del af den kreative proces at få en skitsepude ud. Når du klikker på den mus, begrænser du din kreativitet til den tilgængelige hardware og software. Uden hardware og software ville det naturligvis være umuligt at designe til mobil- og webplatforme, men start ikke digitalt.

Skrifttyper, ikoner, farver og stilarter skal være ensartede inden for deres egne familier og harmoniske inden for deres udvidede familier. Hvis alle elementerne fungerer på tværs af en platform, er det nødvendigt at replikere den samme balance, så alle designene til de enkelte platforme danner også en harmonisk familie. Forløb, skygger og perspektiver skal også være ensartede.

Her går ikoner tabt midt i designet nederst på siden

Her går ikoner tabt midt i designet nederst på siden

Tænk hierarkisk og overvej alle elementerne i rækkefølge efter betydning. Brug dette på samme måde, som du header indlejring i HTML og anvender de rigtige størrelser, nuancer og opacitet til vigtighedsniveauer.

04. Størrelse betyder virkelig noget

Løftet om spirende teknologier, såsom SVG og ikonfonter, er endnu ikke realiseret, så for nu er vi nødt til at tænke på størrelse og skalerbarhed. De fleste ikoner udføres som .png-filer, som muliggør pixelperfektion og er en betydelig forbedring i forhold til deres forgænger, .gif.

Imidlertid skaleres .png ikke, så du kan ikke bare designe et enkelt ikon og ændre størrelsen på det. Ikke kun resulterer dette i pixelation, når du skalerer op og slørhed, når du skalerer ned, det hæmmer kreativitet og mindsker kvaliteten af ​​hele designet. Mindre ikoner kræver mindre detaljer, med større ikoner, der kræver et dybere og rigere design. Uanset størrelsen skal ikoner være født af et enkelt design og subtilt tilpasset til hver størrelse iteration.

Du skal designe til bestemte destinationer og sammenhænge. De forskellige mobil-, tablet- og desktopplatforme angiver størrelser for konsistens inden for hver platform, men der er ingen konsistens mellem platforme. Imidlertid er favicons generelt 16 pixels, og sund fornuft er fremherskende ved design af ikoner, der skal bruges in situ.

Der er forskellige tankeskoler om, hvordan man nærmer ikondesign. Top-down tilgang er at designe den største skærmstørrelse (sandsynligvis desktop) i de fleste detaljer og at forfine for hver iteration ned på skalaen for at opnå det skarpeste ikon i den mindste størrelse.

Der er også den mobil-første tilgang, der designer det mindste ikon først og derefter tilføjer detaljer, når du skalerer op. Begge har deres fordele, men hvis du ikke er en erfaren ikondesigner, vil du sandsynligvis finde det bedst at arbejde ovenfra og ned, da det er lettere at forfine og fjerne detaljer end at tilføje det.

05. Brug en enkelt ikonfamilie

Det er vigtigt at få den rette balance mellem konsistens inden for ikonfamilier for at forhindre, at det overordnede design bliver ensartet, fladt og kedeligt. Harmoni hersker, når det kommer til at gifte sig med ikoner med brugergrænseflade og andre grafiske elementer. For eksempel, Luhse te navigationsikoner er sammenhængende; de ser, føler og fortæller den samme historie. I modsætning hertil er forholdet mellem JIB'er ikoner er et mysterium, selvom de har den samme designstil.

Med apps er mange beslutninger om stil og størrelse allerede taget, men det er vigtigt at anvende den samme slags ræsonnement, der ligger bag de forskellige SDK-retningslinjer. Juster formålet med størrelse og stil. Når du f.eks. Bruger ikoner til navigation, skal du sørge for, at størrelsen, stilen og farverne giver brugeren besked om, at dette er navigationsikoner. Brug ikke de samme ikoner i andre tilfælde: det vil være forvirrende. Gør det let for brugerne at identificere fokus på dit websted. Hvis navigation er mindre vigtig end søgning i dit design, skal du sikre dig, at navigationsikoner er mindre fremtrædende i stil, størrelse og vægt for at give brugerne en tyngdekraft mod søgning. For eksempel på GOV.UK websted skaber brugen og placeringen af ​​elementerne et tydeligt fokus på søgning. På den anden side er brugen af ​​en pil som både et dekorativt og interaktivt element på Innovationsradar websted forstyrrer strømmen.

06. Genopfind ikke hjulet igen

Svarende til at overholde konventioner, hvis der er en open source- eller hyldeformet ikonfamilie, der opfylder dine behov (eller endda der næsten opfylder dine behov og kun ville kræve en smule tweaking), så er det sandsynligvis det bedste valg. Kun hvis du arbejder for en internetgigant, er det skræddersyet bedst. Lige øjne er en Android-app til at gøre smartphones mere tilgængelige for blinde, synshandicappede og ældre. Det bruger open source Skrifttype Awesome familie, som er ideel til sin målgruppe og platform og et godt eksempel på, hvornår hylden passer.

Rate My Shizzle gør følgende instruktioner til et doddle med dets ikoner, der flyder inden i kopien for at give supplerende tekst og grafiske ruter

Rate My Shizzle gør følgende instruktioner til et doddle med dets ikoner, der flyder inden i kopien for at give supplerende tekst og grafiske ruter

Selvom det er vigtigt at holde fast ved konventioner, kan du og bør sætte dit eget præg på tingene: bare ikke til abstraktionens punkt. Alexander Bickovs kampagne for at redde juletræer fra udryddelse kan være godt beregnet, men savner punktet ved at bruge pile i stedet for træer. Og husk at uanset hvad du opretter, skal du stå op under kontrol af brandretningslinjer.

07. Vær fortrolig med formater

Selvom .png er det mest almindelige billedformat, især til design af flere platforme, er det bedste praksis at forstå forskellige formater og være i stand til at vurdere deres fordele i lyset af dit projekts behov. Her er et hurtigt overblik:

  • GIF: Grafikudvekslingsformat . Bedstefar af billedformater. Med kun 256 farver er kvalitet et problem. GIF'er skaleres ikke, kun understøtter en enkelt gennemsigtighed og bør tage førtidspensionering.
  • PNG: Bærbar netværksgrafik . Efterfølgeren til GIF er af højere kvalitet med millioner af farver og understøtter alfa-transparenter. Ligesom GIF er PNG'er dog ikke skalerbare. I mangel af fuldt understøttede alternativer er PNG'er det bedste format.
  • SVG: Skalerbar vektorgrafik . Universel og skalerbar vektorgrafik er det ideelle. Imidlertid understøttes dette format ikke fuldt ud af ældre browsere, lider af anti-aliasing, og på trods af dets skalerbarhed passer en størrelse stadig ikke til alle.

Ikon skrifttyper

Med kompatibilitet på tværs af browsere og total skalerbarhed kan ikonskrifttyper virke som en levedygtig løsning. Manglen på pixelpræcision, besværlige gengivelsesprocesser og den deraf følgende semantisk ukorrekte markering gør disse imidlertid til et no-go.

winsor & newton serie 7 børster

Pixel er en enkelt måleenhed og er stadig den mindste enhed på enhver skærm. Men ikke alle pixels behandles ens. Det utal af forskellige skærmstørrelser kombineret med højere kvalitetsteknologier såsom nethindedisplayet har medført en ændring i pixelens levetid. Skærmopløsninger handler ikke længere om en enheds størrelse, da PPI (pixels per inch) -indstillingen nu er lige så vigtig som antallet af pixels.

For at komplicere tingene yderligere har Android introduceret DP eller DIP (densitetsuafhængig pixel) for at afvige fra den gode gammeldags pixel, men tiden vil vise, om den fortsætter.

08. Lad andre mærker være i fred

Det er standard praksis i det interaktive univers for designere at tage andre brands ikoner og logoer og manipulere dem, så de passer til deres eget design. Gør det ikke.

Der er for mange tilfælde af, at grafik på sociale medier strækkes til uklarhed for at overbevise denne marketingmedarbejder ellers. Twitter og Facebook logo mashup på Mistet telefoneksperiment er bevis positiv.

Webstedet Innovationsradar bruger et ikon til to formål. Pilikonet som både et dekorativt og interaktivt element forstyrrer strømmen af ​​brugeroplevelsen

Webstedet Innovationsradar bruger et ikon til to formål. Pilikonet som både et dekorativt og interaktivt element forstyrrer strømmen af ​​brugeroplevelsen

09. Hold ikoner på deres plads

Bare fordi der er ikon-sæt, der dukker op over internettet, betyder det ikke, at du er forpligtet til at bruge dem. Ikoner vil bringe trist indhold til liv, men de bør ikke få et eget liv. I stedet skal de spille en støttende rolle. Som regel bør de aldrig tage centrum; det er forbeholdt et brands identitet.

Den nye bedste praksis for ikondesign på digitale platforme er baseret på generelt accepterede designprincipper, og der lægges særlig vægt på placeringen af ​​ikoner.

  • Baggrunde . Udviklingen fra GIF til PNG har medført øget fleksibilitet med transparenter. Med GIF'er er det som en tænd / sluk-kontakt, da du kun kan vælge en farve for at være gennemsigtig. Med PNG-formatet kom alfakanalen, hvilket giver mulighed for gradienter, opacitet og anti-aliasing, så baggrunde kan manipuleres for at få større effekt inden for selve ikonet og i lyset af integration med hele dit design.
  • Positionering . Hvor ikoner sidder er en ting, men konceptet med positionering handler lige så meget om perspektiv, dybdeskarphed, skygger og dimensioner.
  • Kontrast . Det er vigtigt at sætte nogle regler til kontrast tidligt. I betragtning af hvor meget opmærksomhed hvert ikon eller en gruppe af ikoner vil have i starten, vil dit overordnede design give en følelse af afbalanceret plads. Hvis du ikke gør det, resulterer det altid i flaskehalse og får dit design til at føle sig dårligere.

10. Balance form og funktion

Form og funktion i design er et område, der ofte diskuteres, med en vis opbakningsform over funktion og omvendt. Virkeligheden er, at ingen er vigtigere end den anden. At designe store ikoner er en konstant afbalanceringshandling, hvor form og funktion mødes i en tilsyneladende ubesværet forening.

Når alt er sagt og gjort, vil dine ikoner være en succes, hvis de er enkle, symbolske og ikoniske.

Ord: Sandi Wassmer

Sandi Wassmer er en digital teknolog, inkluderende designradikal, marketingmedarbejder, forfatter, taler, regeringsrådgiver og lejlighedsvis sovekabine. Hendes iver for UX er inspireret af godt design, især industrielt design og arkitektur.

Denne artikel opstod oprindeligt i netmagasin Opgave 247.

Kan du lide dette? Læs disse!