Et utstillingsvindu for interaksjonsdesign og bevegelse

I dagens innlegg ønsker jeg å snakke om interaksjonsdesignfeltet ved å se på en nettside som belyser nye og interessante eksempler på nettdesign som vektlegger bevegelse og interaksjon. Slik beskriver Interaction Design Association dette feltet:

Interaction Design (IxD) definerer strukturen og atferden til interaktive systemer. Interaksjonsdesignere streber etter å skape meningsfylte forhold mellom mennesker og produktene og tjenestene de bruker, fra datamaskiner til mobile enheter til apparater og utover.

Hover States er et nettsted dedikert til å vise frem interaksjonsdesign, og er kuratert av Chambers Judd, det London-baserte digitale design- og utviklingsteamet. Chambers Judd erkjenner at Hover States-bloggen er et sted å samle eksempler på flotte nettsteder som inkluderer de beste eksemplene på bevegelse og samhandling, og fanger hver av dem innenfor et HTML5-videoelement, slik at du kan oppleve utseendet og følelsen uten å måtte forlate nettstedet deres. Å se looping-videoen er bra for introduksjonsformål; Imidlertid liker jeg å se den opprinnelige kilden til eksemplene, ettersom den gir en forståelse av de underliggende stiler og koder som gjør dem mulig. Jeg vil kort inneholde tre av de ti nettsteder som viser kreativ bruk av svevetilstander.

Limner Studios

Det siste nettstedet på Hover States-bloggen fremhever Limner Studios som vektlegger en portefølje av de utvalgte verkene deres med et interaktivt lysbildefremvisning, inkludert eksempler på bygging og design av nettsteder, reklamemateriell og visittkort. En skjermfangstdel av det interaktive nettstedet vises i figur B som vist i Google versjon 23.0.1271.64 m:

Når du blar nedover siden, beveger lysbildene seg fra bunn til topp og fra venstre til høyre med beskrivelsestekst som er igjen på venstre side når lysbildene fortsetter sin bevegelse basert på rulle- og svevetilstander. Ved inspeksjon finner vi flere jQuery-skript inkludert jquery.color.js for Color Animations av John Resig. Jquery.slideShow.js, som er en Cycle Plugin, av M. Alsup, er under en dobbel lisens med MIT- og GPL-lisenser, og du kan se dokumentasjon og eksempler på plugin-modulen. Et tilpasset JavaScript-dokument lim.js støtter Limner Studio-funksjoner inkludert animasjoner, begivenhetsretning, vinduhøyde og forskyvninger av bilder. Den endelige skriptfilen er waypoints.min.js, som er en liten jQuery-plugin som gjør det enkelt å utføre en funksjon når du blar til et element. Waypoints-plugin gir en solid base for moderne brukergrensesnittmønstre som avhenger av brukerens rulleposisjon på siden; den er også under en dobbelt lisens med MIT- og GPL-lisenser. HTML- og CSS-nettdokumentene er basert på HTML5-kjelmalmalen.

Haus Der Kunst

Neste eksempel inneholder nettstedets visuelle identitet som et fint eksempel på hvordan man kan jobbe på tvers av trykk og nett. Logoen til "Haus Der Kunst" innebærer bevegelse og fleksibilitet, og nettstedet forsterker dette ved å strekke og justere med bevegelsen av musen. Skjermbildet vises i figur C som vist i Google versjon 23.0.1271.64 m:

Under panseret bruker dette nettstedet en kombinert tretten skriptfiler inkludert JavaScript, jQuery og JSON, inkludert addthis_widget.js, core.js, jquery.jscrollpane.js, jquery.masonry.min.js, jquery.mousewheel.js og user_timeline.json . Nettstedet bruker fem CSS-dokumenter og HTML er xml-basert.

.APP.ICNS

Dette nettstedet er et prosjekt som fremhever applikasjonsikoner med en enkel UX og subtil interaksjon som viser en animasjon på nedlastningsknappen. Dette er et morsomt prosjekt av Andrew & Kara, og bruker programvare kalt CandyBar for å administrere ikonene deres. For å bruke ikonene, åpner du iContainer-filen og klikker på Bruk disse ikonene for enklest å installere; Noen ikoner som iCal krever imidlertid manuell installasjon. Ikoner inkluderer Finder, Dashboard, Mail, iTunes, iPhoto, Preview, Stickies, TextEdit og Chrome for å nevne noen av de 32 tilgjengelige. En skjermdumping av nettstedet vises i figur D som vist i Google versjon 23.0.1271.64 m:

Dette nettstedet bruker tre jQuery-skriptfiler inkludert appicns.jquery.js, jquery.easing.js og jquery.js . Tre CSS-dokumentfiler inkluderer 1280.css, som er et 1280 Responsive Grid fra 960 Grid System, og screen.css begge av Andrew McCarthy; HTML bruker HTML5-dokumenttypen.

© Copyright 2021 | pepebotifarra.com