Som webdesignere må vi sørge for at vi beholder våre ferdigheter frisk og oppdatert. Vi trenger ikke å følge hver trend som følger med (som lange skygger), men vi trenger å fortsette å lære og forbedre våre ferdigheter etter hvert som nettet vokser og modnes.

En spennende ny utvikling som begynner å samle damp i webdesignindustrien, er animasjon. Flere og flere selskaper ser etter animasjon for sine applikasjoner eller nettsteder som en måte å glede sine brukere på, stå ut fra konkurrenter og forbedre brukbarheten av deres produkter.

En annen grunn animasjon er i høy etterspørsel er på grunn av nettets nylig fokus på flat design. Flat design, men generelt en veldig positiv ting, har noen problemer som kjører folk til å lete etter måter å forbedre seg på.

Flat design har noen problemer

I dag vedtar flere og flere bedrifter den minimale "flat design" -estetikken. Nettsteder begynner å se veldig likt ut med ikke mye å skille mellom merkevarer. Dette gir mulighet for designere til å utforske andre måter å gjøre deres nettside engasjerende og spennende for sine brukere.

Dette er hvor animasjon kommer inn. Animasjon er som salt på frites; uten det, de er litt tørt og mangler smak. Ved å animere forskjellige elementer i designet, kan du legge til litt spenning og glede brukerne dine med kreative og hjelpsomme animasjoner.

Et annet problem med flat design er at brukerne kan miste sammenheng med hva som vil skje når de samhandler med et nettsted / app. Når knappene slutter å se ut som knapper eller andre ting som merker begynner å ligne, er folk forvirret om hva som vil skje når de klikker på dem.

Vi kan løse dette problemet ved å designe forskjellige animasjoner som oppstår når elementer svever eller klikkes på, Colin Garven send inn knappen for eksempel:

animert-submit-knapp

Til slutt, et siste problem jeg vil berøre er å informere brukeren når en endring finner sted. I dag bruker mange moderne webapplikasjoner kraftige verktøy som AngularJs og Node.js til å bygge "pageless, live-updating" apps. Tenk på Gmail: For å få en ny e-post trenger du aldri å oppdatere siden; det kommer rett og slett inn når noen sender deg en ny e-post.

Dette kan være litt av et problem hvis brukerne ikke får noe varsel eller slette tegn på at siden har endret eller lastet nytt innhold. Hvis siden er lagret, må vi se noe som vil fortelle oss at appen fungerer og har lagret arbeidet vårt i bakgrunnen.

Animasjon er en fin måte å informere brukere om når ulike hendelser oppstår.

La oss si at du har en liste over registrerte personer for din neste møte eller konferanse. Når nye personer registrerer, legger du dem til listen i sanntid med node.js, slik at de aldri trenger å oppdatere siden. Flott, det vil være veldig nyttig for våre brukere. Men nå, hvordan skal folk vite når en ny person registrerer?

Det vi trenger er en liten animasjon for å la folk vise at en person har registrert seg. Hva med å slippe - med litt advarsel til toppen av siden med en melding som forteller deg at de nettopp har registrert? Eller hva med å falme inn i den nye personen på listen og gi dem et lite blått høydepunkt, så vi kan fortelle at de er nye?

Alle disse tingene er subtile effekter som virkelig kan gjøre forskjellen mellom et bra produkt og noe som virkelig gleder brukerne.

kokker

Weben er moden

Husk dagene til IE6 og Netscape? Dagene da vi måtte bekymre oss hvis alle hadde JavaScript aktivert, og vi bygget våre nettsteder med HTML-tabeller?

Vi har kommet langt siden da med god HTML5-støtte, CSS3 og lydhør design, og de har alle kombinert for å gi oss fantastiske muligheter når det gjelder å animere på nettet.

CSS3 animasjon

I dag støtter alle de største nettleserne de fleste eller alle standard CSS3-funksjoner som anbefales av W3C. Dette gir oss, som designere, stort potensial til å lage enkle, men overbevisende animasjoner som puster liv i ellers statiske nettsteder.

css skapninger

Overganger: CSS Transitions gir deg muligheten til å utføre en enkel overgang mellom to forskjellige tilstander. Si at du har en enkel knapp som du vil bytte farger og skyve litt på svinger, en overgang ville være perfekt for dette brukskoffertet.

Keyframe Animasjoner: keyframes er en kraftig CSS3-funksjon som lar deg lage tilpassede animasjons-sekvenser. De gir deg mulighet til å kontrollere timing og lettelse, varighet, eventuell forsinkelse, hvor mange ganger varigheten gjentar, hvilken retning den animerer og mer. Du kan til og med erklære flere animasjoner på et HTML-element.

css-3d-skyer

SVG-grafikk

En av de fantastiske nye funksjonene i "moden web" er SVG-støtte. Vi kan endelig begynne å bruke bilder som skaleres godt for forskjellige størrelses- og oppløsningsskjermbilder. Ikke bare det, men SVG er langt kraftigere enn png-bilder fordi du kan samhandle med dem i CSS og JS. Dette gir oss muligheten til å lage imponerende animasjoner som tidligere kun var i stand med animerte gifs eller Flash.

Se på dette animerte gif som har blitt gjenopprettet i CSS og SVG:

hopping-delfin SVG-animasjon

En ting SVG-animasjon kan virkelig være nyttig for å skape animerte grafer og diagrammer som kan skaleres til hvilken som helst størrelse. Sjekk ut dette enkle eksempelet på JSFiddle:

svg-graf

Mulighetene for SVG er nesten uendelige!

HTML5 lerret

En annen spennende teknologi som har hatt full nettleserstøtte for en stund, er HTML5 Canvas. Lerretelementet brukes til å tegne grafikk på nettet.

Det ligner på SVG, men adskiller seg på flere måter. Først er det et rasterformat i stedet for vektor. Dette betyr at det fungerer bedre for mer komplekse tegninger og animasjoner, men skaler ikke godt for høyoppløselige skjermer.

En stor nedsiden av lerret er at den ikke har manipulerbare DOM-elementer. Dette betyr at hver gang du vil endre tegningen eller animere den, må du redraw bildet.

Til tross for disse ulemper er lerret fortsatt et flott verktøy som kan brukes til mer komplekse animasjoner og tegninger.

animerte-overganger

Javascript animasjon biblioteker

Selv om CSS3-animasjoner blir stadig sterkere, er det fortsatt noen tilfeller for bruk av Javascript-animasjoner.

Flere og flere biblioteker vises hele tiden som gir oss fantastisk animasjon til en brøkdel av ressurskostnaden vi pleide å betale for Javascript-animasjon.

Snap.svg: snap.svg er designet for å gjøre jobben med SVG-eiendelene like enkelt som jQuery gjør jobben med DOM. Den har et superrikt animasjonsbibliotek med enkel hendelsehåndtering som hjelper deg med å få din SVG til liv.

Greensock GSAP: gsap.js er en serie profesjonelle verktøy for skriptede, høykvalitets HTML5-animasjoner som fungerer i alle de store nettleserne. Det er i noen tilfeller 20x raskere enn jQuery og enda raskere enn CSS3-animasjoner. Super-buttery 60fps her kommer vi!

Gjennomreise: transit.js er et jQuery-bibliotek som erstatter jQuery-animasjonsmodulen med superjevne CSS-overganger og transformasjoner. Den store delen er at bruker samme syntax som jQuery's $ ('...'). Animate.

Hastighet: velocity.js ligner på Transit fordi den bruker samme syntaks som jQuery, så alt du trenger å gjøre er å inkludere biblioteket og erstatte jQuery's animasjon med .velocity ().

scrollReveal: scrollReveal er et open-source js-bibliotek som hjelper deg med å opprette og vedlikeholde hvordan sideelementer fades inn, utløst av når de går inn i visningsporten.

Bounce.js: bounce.js er et nytt verktøy for å generere spennende CSS3 drevne keyframe animasjoner.

Forbedret maskinvare i mobile enheter

En siste årsak animasjon er virkelig å ta av er at dagens enheter blir mer og mer kraftige med hver ny utgivelse.

De Iphone 5s, for eksempel har en superdrevet a7-chip i den.

Ifølge Extreme Tech: "CPU er ikke bare en gradvis utvikling av sin Swift-forgjenger - det er et helt annet dyr som faktisk er mer likt" Intel-AMD CPU "enn en vanlig" liten kjerne "CPU.

Også med iOS8, vil Apple slippe Metal, som er en veldig kraftig 3d-rendemotor som gir deg muligheten til å lage desktop-lignende spill som kjører på mobile enheter.

Noen Android-telefon selskaper som LG har til og med bygget enheter med så mye som 3Gb av ram, LG G3 å være bare en. Jeg har en bærbar datamaskin fra noen år tilbake som knapt har så mye.

Alt dette for å si at vi ikke bare kan lage animasjoner som går bra på stasjonære datamaskiner, men de samme animasjonene vil fungere bra på telefoner, tabletter og andre mobile enheter.

svg-animation_xbox-one

Animasjoner er nyttige for brukerne

Animasjoner kan virkelig bidra til å gjøre produktet, appen eller nettstedet ditt mer brukbart og akseptert av brukerne. Dette er fordi:

  • de gir sammenheng til hva som skjer;
  • de holder folk engasjert;
  • de hjelper din bedrift utholdenhet;
  • folk nyter dem.

Tenk på Kickstarter - en flott video som forklarer kampanjen din, kan være forskjellen mellom å være vellykket og nesten ikke bli lagt merke til. De beste kampanjene bruker kraftige videoer med en godt utformet historie for å generere spenning og bygge fart for deres produkt eller kampanje. Animasjon kan gjøre det samme for ditt nettsted eller app. Det kan bety forskjellen mellom at folk er engasjert og raser om appen din, og et annet produkt som lander i app-kirkegården.

css-pagefold