Share
I denne ukaens inspirerende roundup skal vi sette smiler på ansiktene våre ved å se på vennlige bilder fra hele nettet.
Følelse er en svært viktig del av UX; hjelpe brukerne føle noe når de besøker et nettsted, og de vil sannsynligvis være mer engasjert, fokusert og forholde seg bedre til hva du prøver å kommunisere. Hvis du har lest Design for Emotion, vil du huske ideen om at følelser innen design tilbyr
"En opplevelse for brukere som får dem til å føle at det er en person, ikke en maskin, i den andre enden av forbindelsen". - Aarron Walter
Lykke er et slikt eksempel; en følelse av velvære, glede, glede. Hvis webdesignet ditt kan provosere disse følelsene, blir brukerne dine raskt satt i ro, og baner vei for et godt forhold.
Hvordan kan du fremme lykke blant brukerne? Et godt gammeldags grinning tegneserieansikte er en måte, så la oss se noen eksempler!
Hvor glad er denne fyren ?! Han er en del av Google Translate-fellesskapet; ung, teknisk-kunnskapsrik og medvirkende. Bruken av enkle geometriske former er noe du ofte vil se igjen i denne runden. De er morsomme, enkle å tolke og sette brukerne på ro.
Også verdt å merke seg: disse illustrasjonene er implementert som PNG-filer - den grove tekstur ville gjøre SVG for tung til å være praktisk her.
http://worldseasiestdecision.org/en-us/"Verdens enkleste avgjørelse" er et nettsted som ble lansert i løpet av FNs klimakonferanse i 2015. Den bruker en lignende teksturert effekt til Google Translate-illustrasjonene, som gir en innbydende atmosfære som drypper i personlighet og positivitet.
Nærmere inspeksjon avslører en enorm samling bilder som har gått på å bygge denne siden, inkludert sprites for noen nydelige animasjoner lenger nede:
Flere geometriske former og en annen PNG her. Denne enkle illustrasjonen finnes på 404-siden av castle.io, som hjelper til med å lindre frustrasjon fra brukere som har fulgt ødelagte lenker. Ingen smiler, men det ville ikke være hensiktsmessig i denne situasjonen.
Hvis jeg skulle være brutalt ærlig, ville jeg si at denne blekkspruten kunne se litt mer imponert over muligheten til å registrere seg, men Carbonmade-logoen utgjør en mangel på glede her. Dette er det første av eksemplene våre for å bruke SVG.
Disse gutta er imidlertid egentlig glad i sitt arbeid. Mascots for Neat, selskapet som kommer inn for å rydde opp når du flytter hus, de er verktøyet opp og klar for handling. Denne illustrasjonen er også implementert med SVG, sammen med forgrunns- og bakgrunnslandskap, som beveger, endrer størrelsen og omarrangerer avhengig av visningsporten.
Google har fått stor anerkjennelse, år etter år, for sin Santa Tracker. Flere geometriske former og sekker masse følelsesgodt.
stuffandnonsense.co.ukSjimpansene på stuffandnonsense.co.uk, inspirert av en klassisk TV-annonsekampanje fra 1970-tallet, vil ikke mislykkes i å heve et smil. Illustrert av Josh Cleland og implementert av Sara Soueidan, er dette det siste innen en rekke lydhør illustrasjoner som er omtalt på nettstedet Stuff and Nonsense. Squish nettleseren din og du vil legge merke til (takket være SVG-filtre) fargemetningen ringe ned og legge til den nostalgiske følelsen.
Les mer om illustrasjonen på Stuff and Nonsense
Mer bevegelige landskap nå, ta en titt på denne cheery sprite fra bysusanlin.com! Rull ned på skjermen, og du vil se den viktigste 8bit-lignende karakteren gå glatt over og gjennom landskapet. De sprites og naturen er alle PNG-bilder, plassert med CSS. Enkelte egendefinerte jQuery endrer posisjoneringen ved visse rullepunkter - hold deg innstilt for en opplæring om denne teknikken kommer snart ...
Uttrykkene på www.passweird.com kan ikke foreslå en følelse av velvære, men denne groteske tegneserieevnesenheten fremkaller absolutt følelser av noe slag! Humor og design øker et smil, om enn en ubehagelig en.
Det er mer som det: high-fives og glade fellesskapsmedlemmer på Dropbox-fora. Faktisk har Dropbox alltid vært talsmenn for denne typen ting-illustrasjoner spiller en viktig rolle i deres branding, visuelt språk og tonefølge.
www.dropbox.com/plans
Australske bokhandel Lesingene er prikket med energiske skisser av folk som leser, arbeidet i Oslo Davis. Hovedbanneret øverst er bygd fra en serie blokker, hver med samme PNG-sprite som bakgrunn. Når visningsporten krymper, blir blokkene fjernet, og tilpasser bakgrunnen til ledig plass.
Hvis du noen gang har brukt Basecamp (hvorfor ville du ikke ?!) Du vil også vite kjærligheten til skisserte illustrasjoner. Her er noen lagmedlemmer, som viser sine pearly-hvite:
Trenger du litt mer inspirasjon? Sjekk ut disse filene som er tilgjengelige på Envato Market:
Bestill Taxi Tema
Turtle - Responsive 404 Error Template
Flat Pixel - Illustrert PSD-mal
Accentsconagua