Know symbolene Del 2 - Moderne Ikon Design

I det siste avdraget du lærte om historien til ikonet design og hvordan det har utviklet seg fra svart og hvitt representasjoner av kontor elementer i full farget, glassaktig, hyper-rendret, isometriske representasjoner av ... kontor elementer. I denne utgaven vil jeg være hulene videre inn i verden av ikoner og utforske hva ikonene betyr for oss i dag.

dette innlegg er Dag 8 av våre Interface Design Session. Creative Sessions « Session Dag 7
Hva er
et ikon

i ·? Con Anmeldelser - substantiv plakater (Computers) et bilde eller symbol som vises på en monitor og brukes til å representere en kommando, som en fil skuff å representere innlevering - dictionary.com

så vi vet betydningen av " Icon " i tradisjonell databehandling forstand av ordet, men hvordan virker dette forklare alle de illustrerende ikonene vi ser i dag? Hvordan er en vakkert gjengitte bildet av en tekanne, Space Ship eller bøtte med kylling ment å representere noe i brukergrensesnittet? Det er noen svar på dette spørsmålet

programikoner. Programikoner finnes et godt eksempel på un-konvensjonell design. Disse ikonene har ofte en sterk trend mot minneverdige bilder over fremstillinger av selve programmet
Nettstedet Navigation. Nettstedet navigasjon er et annet sted du finner noen uvanlige " ikonet " design. Tolkningen av ikonet er avhengig av i hvilken sammenheng det blir brukt, det er OK å bruke en un-konvensjonell design så lenge publikum vet hva det er funksjonen
Format: Noen design trosser forklaring, slik som ". Form over Function ". Dette betyr at ikonet er konstruert utelukkende for estetikk.

Uansett hvor streng eller uvanlig design er, alle ikoner bør gjøres til spesifikasjonen -. det blir mer om det snart

Nedenfor ser du en oversikt over moderne ikon design. Noen mennesker kan hevde at ikonene på " illustrasjon " side av diagrammet bør ikke anses som ikoner. Dette er delvis sant, de er ikke tradisjonelle ikoner, men de er moderne ikoner i den forstand at de kan representere programmer, spill eller en bestemt kontekst.

Ikonene på venstre side av diagrammet er ikoner som ville bli ansett for å være tradisjonelle ikoner med en moderne vri. Vi umiddelbart knytte disse ikonene med sin funksjon, dette oppnås ved over 30 års visuelt språk, som er en kraftig faktor i design suksess.

Ikonene i midten av diagrammet er ikoner som verken er illustrer eller informative, men en kombinasjon av begge. Konvolutten er tradisjonelle på grunn av sin form, men det kan bli oppfattet annerledes på grunn av sin gjengivelse, et design som dette fungerer best innenfor en viss sammenheng. The Blue Twitter Bird har umiddelbar anerkjennelse fra Internett-brukere, men er redusert til en illustrasjon av en blå fugl for ikke-brukere (som mamma) og stilistisk GTalk Bubble er også ganske avhengige av helt forening.
< p> Lenker til ikonene over (i ingen spesiell rekkefølge)

Pump It Up, ved mgilchuk, My Breafast, med blink, SNOW.E 2 XP, ved RADE8, CS3 Ikons - Win, ved -kol, iChat Bubble, ved Delta909, iskrem ikon sett, ved Miniartx, Batman Mask, med Svengraph, In Spirited We Love, ved Raindropmemory, Twitter Bird, ved freakyframes, Starwars Kjøretøy Archigraphs ved Cyberella74, Systematrix Full ved royalflushxx, New Moshii World, etter anekdamian, Somatiske Rebirth Extras, ved The Iconfactory og David Lanham

konvensjoner og spesifikasjoner

Når designe ikoner for et grensesnitt du kan ikke gå forbi konvensjonen. Sjekk tidligere design for en indikasjon på hvordan å nærme deg. Du vil finne at de fleste programvarepakker og brukergrensesnitt har lignende ikoner, er dette på grunn av User Experience (UX). Hvis en bruker er plutselig konfrontert med et design som de ikke forventer eller komfortabel med, er de sannsynligvis til å bli forvirret.

Hvis du designer for en bestemt plattform, alltid sjekke utviklere notater før du starte, disse vil gi deg en idé om størrelsen, perspektiv, og fargepaletten du bør bruke. Du kan finne linker til både Apple og Microsoft utviklere notater i "Resources og videre Reading" delen på slutten av dette innlegget

Grønn = God -. Blå = Hjelp - Gul = Alert - Rød = Feil

Moderne spesifikasjoner

Ikon spesifikasjoner bli mer komplisert med hver ny teknologi eller operativsystem. Windows og Mac er i et våpenkappløp i løpet ikon størrelse, med den største ikonet for å date måle en massiv 512 piksler. Trenden for store ikoner har mye å gjøre med moderne skjermoppløsninger, men det er også en viss sikle faktor
med en gigantisk, perfekt gjengitt ikon. Se på eksemplene nedenfor hvis du ikke tror meg!

AppZapper, Billings, ting og Coda Søknad Ikoner for Mac (nedskalert til å passe dette innlegget!)

Nå som jeg 've vist deg sikle Verdige
ikoner, la oss gå videre til noen ikoner jeg har laget selv. Eksempelet nedenfor er en de-bygget .ICO fil laget i mitt tidligere liv som et ikon og grensesnitt designer (de som kjenner meg som LoungeKat sannsynligvis ikke visste dette faktum). Hoved 256px ikonet har blitt gjort i Adobe Photoshop med former og lagstiler, det ble deretter re-skalert for hver enkelt størrelse (64, 48, 32, 16) og importert til Microangelo Toolset å kombineres som en .ICO. Den 256px ikonet er ikke en del av ikonet filen selv, men inkludert i programvaren som en gjennomsiktig PNG som vinduer oppfordrer dersom størrelsen er nødvendig. Dette holder filstørrelsen ned.

Som du ser, jeg har brukt noen variasjoner på design avhengig av fargedybden og størrelsen på ikonet. Ikoner omfatte alle disse størrelser og fargeområder for å få plass til alle de forskjellige måtene de kan vises av operativsystemet.

Det er viktig å utforme hver størrelse separat, skalering et stort bilde kan gjøre design ser uskarpt . Når du designer et 16px ikon det er alltid best å komme helt ned til pixel visning. Som du ser, kan noen velplasserte piksler formidle mye mer enn du tror. Du kan lese mer informasjon om ikoner, ulike spesifikasjoner og bransje anbefalingene i Axialis Software ikon guide.

Et eksempel på skalering

For å få en bedre forståelse av ikoner jeg vil foreslå å se på så mange forskjellige operativsystemer, programmer, grensesnitt og portaler som mulig. Tenk på annen måte farge og metafor brukes for hvert program. Hvilke ikoner ut som å være lett å forstå (kanskje mappen eller søppel kan slå deg som den mest gjenkjennelige?), Som ikoner trenger ytterligere forklaring? Stol på meg, du vil bli overrasket over hva du finner ut om psykologi bak det visuelle språket vi bruker hver dag, og ofte tar for gitt

Resources &.; Videre Reading

GMS - Programvare for å organisere og tilpasse Mac OS X ikoner
Icon Builder - Adobe Photoshop og Fireworks " Ikon Creation " for Mac og Windows

Microangelo - Den " Grand-Daddy " av Icon programvare (det egentlig er!)
Axialis IconWorkshop - programvare for å gjøre Mac og PC ikoner
Ember- Bilde nettsted med en stor presentasjon av UI Designs
Microsoft Developer Network - Style guide for Windows Vista /7
Microsoft Developer Network - Style guide for Windows XP
Apple Human Interface guide~~POS=TRUNC - Style guide for Mac OSX
GUIPulp - Desktop Customization Resource
7 Prinsipper for effektiv Icon design - PSDTUTS +
Computer Icon - Wikipedia
dette innlegget er dag 8 av våre Interface design Session. Creative Sessions « Session Dag 7