Share
Har du problemer med å velge riktig ikon for et bestemt problem? Arbeider med din utvikler for å få best mulig resultat for din klient? Denne artikkelen vil gi deg et innblikk i prinsipper, problemløsing og samarbeid som kreves for å komme opp med noe som passer!
Ikoner er blant de viktigste visuelle aspektene av webdesign. Nivået på detaljer, stil og applikasjon er avhengig av en rekke forskjellige ting. Jeg har nylig jobbet på en rekke nettsteder som krever svært spesifikke ikoner for å kommunisere subtile metaforer.
Dette innlegget vil gå gjennom et nylig eksempel, hvor jeg var pålagt å opprette et advarselsikon for en dokumentfeilstat. Det vil være en lineær veiledning av tankegangen og samarbeidet med utvikleren, men også på følgende veiledningsfaser: -
Dette innlegget er ikke ment å være omfattende, men vil være til nytte for deg ved å gå gjennom en ekte verdenseksempel.
Noen ganger vil du bygge nettstedet ditt fra bunnen av, og du må generere en rekke ikoner for å kommunisere visse ting visuelt. Ofte vil du få en forespørsel fra en utvikler eller klient for et unikt ikon. Forespørselen i dette eksemplet kom fra en utvikler. Han trengte et feilstatusikon for et dokument. Først foreslo han et mørkt sideikon med en X bak den som skal brukes i tilfeller der en dokumenttype ikke støttes, eller et dokument ikke lastes av en eller annen grunn. Han hadde noe som dette i tankene:
Ikke dårlig riktig? Jeg fjernet det litt tilbake og sendte dette til ham ...
Men vi ble enige om at det måtte refereres til dokumentikonet på en eller annen måte siden det var spesifikt for en dokumentfeilfeil.
Vi trengte å vurdere ikonet sett som en helhet, så vi sparket noen andre ideer rundt.
"Hva med ikonet" varsler "?"
Vi tenkte. Men det var allerede i bruk for kliniske varsler.
Når du arbeider med et komplett ikonsett, er det viktig å ha en forståelse av settet med ikoner. Ellers kan du ved et uhell bruke en metafor som allerede er brukt et annet sted.
Så vurderte vi dokumentikonet med en trekant rundt det:
Dette var bare et forslag fra dev, men erfaring fortalte meg at det var for komplekst. Det gjorde for en plagsom metafor som ikke kommuniserte direkte nok.
Jeg gjorde det neste forslaget om at vi skulle bruke en stor 'X' i en sirkel.
Dette var heller ikke optimalt, da meldingen kommunisert var en av fare! Det var trolig altfor over toppen.
Leksjonen her er å vurdere konteksten til ikonet ditt. Farge og visuell vekt er en viktig måte å kommunisere dette på. For eksempel er rød tradisjonelt brukt til å advare folk, mens lettere farger som grå er mer nøytrale og under - kommunisere at alt er ok!
Subkommunikasjon er et semiotisk språk; noe som også er eminent i typografi.
For eksempel kommuniserer en dekorativ skrifttype en feminin karakter, mens en håndskilt skrifttype kan kommunisere noe mer lekende og barnlignende.
Hva prøver du å sub - kommunisere med ikonet ditt?
For eksempel, med dokumentfeilikonet, prøvde jeg å huske feilmeldinger som delkommunikerte på en måte som ikke skapte for mye panikk.
Jeg husket feilmeldingene jeg ville få når Internett-tilkoblingen min gikk ned; de var perfekte. Ikke for over toppen, men subtilt å la brukeren vite noe er galt.
Absolutt riktig retning.
Dette siste eksempelet fra Chrome-nettleseren var perfekt for det jeg trengte! Subtile, men la brukeren vite at noe er galt. Alt fra størrelsen på ikonet til den grå fargen som brukes, hjelper brukeren å forstå alvorlighetsgraden av problemet, men er ikke så over toppen som å forårsake panikk.
Det siste ikonet som ble opprettet i dette tilfellet var enkelt, men også kommunisert riktig melding.
Kunsten å bruke ikoner er noe som trenger litt erfaring og et øye med design, men det kan løses ved å følge visse prinsipper som de vi har diskutert. Hvis ikonet ditt er for tvetydig, men metaforen passer, bør du vurdere å bruke en etikett som et visuelt signal for å hjelpe brukerne til å identifisere informasjonen. Takk for at du leser, vær så snill å dele dine egne ikondesignopplevelser i kommentarene!
Accentsconagua