Visuell Fordypning

Westerdals Oslo ACT

Høst 2016

Et prosjekt av
Line Rosvoll Holmen

På Gefylen, eller "å ha det på følelsen" er et resultat av en eksperimentell fordypning i digital design hvor jeg har følt meg fram og tatt prosessen på akkurat den måten, på gefylen.

Jeg ville finne ut av hvilke muligheter det digitale mediumet har, hva som skal til for å skape gode digitale løsninger og hvordan man kan utfolde seg kreativt i et medium som er i stadig raskere utvikling. All research jeg har gjort har jeg samlet her og brukt som fundament for min egen eksperimentering.

I utformingen av nettsiden har jeg satt fokus på å være eksperimentell framfor å være funksjonell, dette for å kunne være leken mens jeg utforsker hva slags muligheter man har på web. Det endelige resultatet har kommet ut av denne utforskingen, og til slutt en elimineringsfase hvor jeg har strippet vekk mye av eksperimenteringen for å ende opp med et brukervennlig, men fortsatt spennende uttrykk.

<.>

Skrevet av Jason Santa Maria
August 05, 2014

Translated with the permission of A List Apart and the author[s].

Les original artikkel her

Jeg vil at du skal tenke på hva du gjør akkurat nå. Jeg mener, virkelig tenk på det. Mens øynene dine beveger seg over linjene og fyller hjernen din med informasjon, så tar du del i en samtale jeg har startet med deg. Din oppfattelse av den samtalen er skriften du leser nå, men du filtrerer det også gjennom dine opplevelser og tidligere samtaler. Du setter disse ordene i en kontekst. Om du leser denne teksten på papir, på mobilen, eller ved pulten din så blir din opplevelse også formet av dine omgivelser. Noen andre som leser disse ordene kan gå gjennom det samme mønsteret du gjør, men deres oppfattelse kan være ganske annerledes enn din.

Skift og typografi ville ikke ha eksistert om vi ikke hadde hatt et behov for å uttrykke og samle informasjon. Vi har andre ting som kan gjøre disse tingene, som språk og bilder, men skrift er effektivt, fleksibelt, bærbart og mulig å oversette.

Kunsten å lese er kompleks, med en gang vi vet hvordan er det som en muskel i hukommelsen. Det er ikke ofte vi tenker på det. Men siden det å lese er så naturlig i forhold til alt annet som har med typografi å gjøre, er det det beste stedet å begynne. Vi har alle laget noe som vi vil at andre skal lese, men har du noen gang tenkt på den personens leseropplevelse?

Akkurat som at du er mitt publikum, vil jeg at du også skal se på ditt publikum. Dine lesere. En av funksjonene med design er å pirre og engasjere. Vi må ønske lesere velkommen og overtale dem til å sitte med oss. Men hvilke omstendigheter påvirker lesing?

begrepet lesbarhet spør ikke bare om Kan du lese det? men vil du lese det?

Lesbarhet

Det at noe er leselig betyr ikke at det er leservennlig. At noe er leselig betyr at tekst kan bli tolket, men det er som å si at bark på et tre er leselig. Vi sikter høyere. Leservennlighet kombinerer det emosjonelle med design (Eller mangelen på det ) med hvor mye anstrengelse det antageligvis tar å lese. Lange tekster er ikke det eneste som mister lesere; dårlig typografi gjør også det. For å sitere Stephen Coles, begrepet lesbarhet spør ikke bare om «Kan du lese det?» men «vil du lese det?»

Alle valg du tar kan potensielt hemme en lesers forståelse, som gjør at de stikker og heller velger å oppdatere facebook-statusen sin. Ikke la designet ditt avskrekke leserne eller stå i veien for det de har lyst til å gjøre, lese.

Når vi har fått lesernes oppmerksomhet, hva kan vi gjøre for å holde de der og hjelpe de med å forstå det vi har skrevet?

Leseropplevelsen blir formet av våre omgivelser (Er jeg i en bråkete café eller et annet distraherende sted?), vår tilgjengelighet (Er jeg opptatt med noe annet?), Våre behov (Leter jeg etter noe spesielt?). Lesing blir ikke bare påvirket av hva som skjer med oss akkurat i det øyeblikket, men blir også styrt av hvordan øynene og hjernen vår jobber for å forstå informasjon. Hva du ser og hva du opplever når du leser disse ordene er ganske forskjellig.

Når øynene beveger seg over teksten, tar hjernen inn over seg skriftens tekstur – summen av positive og negative rom på innsiden og rundt bokstaver og ord. Vi dveler ikke over disse rommene og detaljene; istedenfor jobber hjernen med å analysere teksten og samler det til et mentalt bilde av hva vi leser.

Stacking the deck

Typografi på skjerm er forskjellig fra print på noen få viktig områder. Lesere må forholde seg til to forskjellige omgivelser: Det fysiske rommet (og lyset) og skjermen. En leser kan tilbringe en solrik dag i parken mens han leser på mobilen. Eller kanskje han er i et mørkt rom og leser undertekst på TVen som er tre meter unna. Som designere har vi ikke kontroll over noe av dette, og det kan være frustrerende. Selv om jeg skulle ønske jeg kunne gå over alle mine leseres dataskjermer og fikset kontrasten og lysstyrken, så er det dette vi må forholde oss til.

Den beste løsningen til dette er å få typografien til å fungere så godt den kan i alle situasjoner. Og det er opp til oss å legge opp til en sømløs leseropplevelse. I kjernen av typografi er publikumet, våre lesere. Når vi ser på typografiens byggeklosser, må man alltid ha leserne i bakhodet. Å lese er noe vi gjør hver dag, men vi tar det raskt som en selvfølge. Å slenge noen ord på en side kommer ikke til å sikre god kommunikasjon, akkurat som å dra hånden over tangentene på et piano ikke vil lage en god komposisjon. Opplevelsen av å lese og hvor effektiv kommunikasjonen er avhenger både av hva vi sier og hvordan vi sier det.

Designing

interface

animation:

Intervju

med

Val

Head

Animasjon er ikke nytt, men dens reise på web har ikke alltid vært like lett. I flere år har teknologiske begrensninger tvunget oss til å velge sider: Skal vi designe uttrykksfulle, fengende sider med Flash? Eller skal vi bygget statiske standard-sider med HTML og CSS (Og kanskje litt JavaScript)?

Skrevet av
Mica McPheeters
Caren Litherland
September 13, 2016

Utdrag fra Intervju.
Les hele artikkelen her.

Translated with the permission of
A List Apart and the author[s].

Caren Litherland

Val Head

Blir designere skremt av å bruke animasjon?

Det finnes definitivt web designere som er redde for å bruke animasjon i arbeidet deres. For noen er det en så ny ting – og veldig få av oss har en formell bakgrunn i motion design eller animasjon – og det kan være vanskelig å vite hvor man skal starte eller vite hvordan man skal bruke det.

Akkurat nå er vi i en æra hvor web animasjoner står i sentrum. Bare det at vi kan lage animasjoner med den samme teknologien vi alltid har brukt – som CSS og JavaScript – endrer landskapet helt. Vi kan lage vakre, meningsfylte animasjoner som samtidig er tilgjengelige og hele tiden blir bedre. Ingen andre medium kan gjøre det, og det er veldig spennende!

Mica McPheeters

VH

Ser du ofte at animasjon ofte blir lagt til, til slutt i et prosjekt? Hvorfor er det? Og burde det ikke bli inkorporert fra begynnelsen?

Ja ofte blir animasjonene lagt til på slutten og blir behandlet som toppen av kaka. Og det er noe av det som gjør at animasjon kan virke for vanskelig og ineffektivt. Om du legger på animasjon til slutt, er prosjektet så og si dømt til å mislykkes eller det blir til en meningsløs dekorasjon. Og web animasjon kan være så mye mer enn bare dekorasjon, men bare om vi gjør det til en del av design-prosessen. Det kan bli et meningsfylt tillegg til brukeropplevelsen.

Når du bruker animasjon, sier det alltid noe, det kommer du ikke unna.

CL

Du sier i boken din at animasjon ikke trenger å bety store bevegelser eller inneholde motion i det hele tatt. Kan du snakke litt med om det? Er det et forhold mellom animasjon og det vi kaller «calm technology»?

VH

Det er sant, animasjon trenger ikke alltid å bety bevegelse. Motion og animasjon er egentlig to forskjellige ting, selv om vi ofte bruker de to ordene om hverandre. Animasjon er en endring i en verdi over tid, og det trenger ikke å være endring i posisjon. Det kan være endring i opasitet, farge eller blur. Sånne typer ikke-bevegelige animasjoner formidler en annen type følelse og budskap enn animasjon med mye bevegelse.

Om du bare holder deg til å bruke animasjoner med ikke-bevegelige verdier som opasitet, farge og blur, vil nettsiden din sannsynligvis føles roligere og stabil enn om den inneholdt mye bevegelse. Så om målet er å designe noe som føles rolig, kan animasjon definitivt være en del av hvordan du formidler det.

Når du bruker animasjon, sier det alltid noe, det kommer du ikke unna. Når du er bevisst på hva du vil si og hvordan det passer inn med designet ditt, kan du lage animasjoner som man egentlig ikke legger merke til. Det blir naturlig, og er en del av designet. Det er magisk når det skjer.

Samtale

om

digital

design

med

Jonatan

Austigard

–

Grafisk

Designer

hos

BEKK

jonaaust.com

Hva er din rolle hos Bekk?

Primært Grafisk Designer og utvikling av digitale tjenester. Fokusområdet i det siste har vært mye innsalg, hvor vi tidlig i prosessen engasjerer kunder for å være med på prosjekter. Jeg har også gjort en del prototyping, som gjøres tidlig i et prosjekt for å demonstrere hvordan løsningene kan fungere.

Hva handler digital design om?

Om du setter det opp mot print design kan man jo se på forskjellene, men i bunn og grunn så er alt design grafisk design. Og det handler om å kommunisere og å gi noe en personlighet. Det er det det alltid koker ned til uansett hva man jobber med. Men det det i større grad handler om i digitale tjenester er at det skal treffe en målgruppe, og det skal ha et rasjonelt aspekt som gjør at mennesker faktisk både får gode assosiasjoner når de ser designet, men også skjønner det og kan bruke det.

Hva må man tenke på når man designer digitalt? Hva er forskjellen fra print?

Det er jo at brukerne faktisk skal bruke en løsning med utgangspunkt i at det er rasjonelle handlinger du tar. Du bruker den logiske delen av hjernen din når du surfer på nettet, når du bruker applikasjoner, osv. Så ting kan ikke være så abstrakt som det er på print, hvor du ofte kan være ganske løs og far out i formatet. Men da snakker jeg selvfølgelig om kommersielle løsninger.

i utforming av denne nettsiden tar jeg utgangspunkt i å være eksperimentell framfor å være funksjonell. Hva kan jeg tenke på da?

i utforming av denne nettsiden tar jeg utgangspunkt i å være eksperimentell framfor å være funksjonell. Hva kan jeg ?i utforming av denne nettsiden tar jeg utgangspunkt i å være eksperimentell framfor å være funksjonell. Hva kan jeg ?

Om man skal være mer eksperimentell er det masse man kan finne på. Om vi går tilbake til hvordan interaksjonsdesign er, som er en stor del av det å designe digitalt. Som rett og slett handler om hvordan nettsiden skal fungere. Og da kan man tenke på hvordan flyten skal være i det grensesnittet man lager, for eksempel når jeg går fra en side til en annen, hvordan vil jeg at den overgangen skal være? Hvordan vil jeg at brukeren skal oppleve grensesnittet? skal det være ganske kjapt, snappy, eller skal det være treigere og mer elegant. Rett og slett hvordan hele brukergrensesnittet animeres.

i utforming av denne nettsiden tar jeg utgangspunkt i å være eksperimentell framfor å være funksjonell. Hva kan jeg ?i utforming av denne nettsiden tar jeg utgangspunkt i å være eksperimentell framfor å være funksjonell. Hva kan jeg ?

Vi har en teknologi som har vært veldig populær de siste par årene som heter single page applications. Det er en måte å tenke på nettsider som en applikasjon istedenfor en tradisjonell nettsiden. Det denne filosofien går ut på er at når du interagerer med nettsiden blir ting animert inn, istedenfor at siden må lastet inn. Sånne små detaljer kan være med på å løfte et digital design og gjøre at designet oppleves smoothere.

Detaljene er veldig viktig i digital design. Du kan designe noe som ser skikkelig nice ut, men som er helt statisk. Det kan fort oppleves som å ikke være helt ferdig, det er fordi man er så vant til at det er animasjoner, fine overganger når man bruker nettsider, fordi hele den verdenen av animasjoner og transisjoner har blomstret så mye de siste årene, at man ikke tenker over det en gang.

Jonatan

Austigard

–

Hvordan

grafisk

design

og

alternativ

teknologi

kan

være

med

på

å

skape

innovative

brukeropplevelser

Det man ofte er redd for som en grafisk designer som ikke har gjort noe digitalt før, er at de ikke vet hva som faktisk går an med teknologi i dag, hva er det som er mulig å lage? Man tenker ofte at man blir begrenset av teknologi.

Alternativ teknologi,
og hva det egentlig betyr.

Alternativ teknologi, og hva det egentlig betyr.

Det er alle typer løsninger som benytter seg av nye teknologier for å skape noe unikt. Man kan bruke ny teknologi som kommer med internett, det nyeste er html5. Hvor man kan spille automatiske videoer i bakgrunnen på nettsider uten at det går treigt. Men den aller største web-design trenden som har kommet ut ifra alternativ teknologi er paralax scrolling. Denne trenden tok helt av i 2011. Og er enkelt forklart elementer som beveger seg i relativ hastighet til hverandre når man scroller opp og ned på en nettside. Det skaper en opplevelse av dybde. Dette åpnet opp for designere å kunne fortelle historier på en helt ny måte. Det gjør det også mulig for oss designere å differansiere nettsiden fra ganske mange andre.

Alternativ teknologi, og hva det egentlig betyr.

Men som mange andre design-trender blir også dette brukt for mye. Men de sidene som bruker denne teknologien i dag har en mye mer moden tilnærming til effekten, og bruker den på en mer subtil måte. Det som er interessant å se på er hvordan disse trendene oppstår, og alt det over har kommet på grunn av html5. Som kom sammen med CSS3. Disse er standarder, og det kommer nye hele tiden, som gjør at man kan pushe mediumet lengre og lengre. Den digitale design-verden kan pushes mer og mer. Jo sterkere datamaskiner blir og jo raskere internett blir, så har man mulighet til å lage mer og mer innovative løsninger.

Kreativ programmering og single page application

Kreativ programmering på nettet er en form for programmering hvor man ikke går inn for å skape noe funksjonelt, men for å skape noe visuelt eller ekspressivt. En abstrakt visualisering. Det er mulig å gjøre stort sett hva du vil på nett om dagen, du har ikke noen begrensninger. Om du har en crazy idé, så er det alltids en eller annen fyr som kan å programmere det.

<.>

Jonatans inspirasjon på kreativ programmering

Som en grafisk designer i dag er det ikke forventet at du skal kunne å programmere, men det er forventet at du skal klare å tenke på denne måten. Som en digital designer.

Om du har lyst til å ha suksess som en digital designer må man klare å tenke konseptuelt på hvordan ting skal animeres og oppleves for brukeren. Dette er noe man må jobbe med og det må være en del av hele prosessen.

Ole

Marius

Rygh

om

digital

design

–

Designer

hos

Creuna

olemarius.no

Hva er din rolle hos Creuna?

I Creuna jobber jeg som designer i UX teamet, med hovedfokuset på digitalt design.

Hva handler digital design om?

Slik jeg ser på design handler det om å løse et problem, enten om det er digitalt eller analogt. En fordel med å jobbe digitalt er muligheten til å jobbe videre med løsningen etter at den er vist til publikum. På den måten kan du optimalisere løsningen basert på hvordan den faktisk brukes. En annen fordel er at du potensielt kan nå et mye større publikum og det kommer nye muligheter hele tiden.

Hvor stor forståelse burde en digital designer ha for programmering?

Om en designer skal kode er et spørsmål mange designere stiller seg, og det er mange ulike meninger på dette tema. Jeg tror ikke det finnes noe fasit svar på hvor mye kode en designer burde kunne, men jeg tror at det alltid vil være en fordel for en designer å kunne noe kode. Dette ikke minst for å lette kommunikasjonen med utviklere og for å ha en bedre forståelse for hva som er mulig.

Hvor går grensen for hvor eksperimentell man kan være på web?

I utgangspunktet finnes det veldig få begrensinger, og det kommer daglig nye muligheter for hva som er mulig å få til. Likevel har du i Norge regler på at nettsider skal være universelt utformet, noe som kan sette noen begrensinger.

Hvorfor fordypet du deg i digital design da du gikk på Westerdals?

Så lenge jeg har jobbet med design har jeg vært interessert i å utforske muligheten for samspillet mellom teknologi og design. Det er en ekstrem rask utvikling mot digitalisering i samfunnet generelt og jeg anser derfor det å jobbe med digitalt design som naturlig del av denne utviklingen vi alle er med i.

K

r

e

a

t

i

v

p

r

o

g

r

a

m

e

r

i

n

g

Kreativ programmering

Tekst oversatt fra:
Richardson, Andrew (2016) Data-driven graphic design. Creative coding for visual communication. New York: Fairchild Books. S. 12-13.

I det fysiske miljøet bruker vi hendene til å manipulere materialer, som pen på papir eller maling på et lerret. Med datamaskiner blir data direkte manipulert og forvandlet til digitale objekter ved å skrive linjer av programmeringskoder.

Alle objekter som finnes inne i den digitale verden har blitt laget og er kontrollert av koder. Alle digitale verktøyer du bruker (bilderedigeringsprogrammer, nettleseren din, osv) har blitt laget ved bruk av koder. Når du skriver en bok, sender en epost, eller redigerer et fotografi, bak de flotte drag-and-drop menyene og grensesnittet, jobber maskinen hardt med å utføre de nødvendige oppgavene.

<.>

Alle designere, uansett hvilket medium de jobber med, må verdsette og ha en forståelse for materialet. Erfaring med prosessen, karakteristikker, begrensinger og ferdigheter mediumet har spiller en stor rolle i om man klarer å lage en suksessfull og praktisk løsning, som gjør det beste ut av materialet. Kunstnere og designere som er nysgjerrige på å utforske kvalitetene og de kreative mulighetene i det digitale miljøet gjør det ved å bruke kode. Og når man da jobber med et skjermbasert prosjekt, kan man bruke denne kunnskapen til å lage informerte, kreative design-løsninger.

Koding er et kreativt verktøy kunstnere og designere bruker for å utforske de kreative mulighetene i den digitale verdenen. Man kan skape originale objekter, design og kunstverk. Ved å skrive kode kan designere lage interaktive spill, generere visuelle elementer som responderer på det fysiske miljøet eller noe brukeren gjør, tegne generativ grafikk, eller manipulere typografi. Koding åpner opp muligheter for å lage unike, individuelle digitale objekter og miljøer, i tillegg til applikasjons og system programvarer.

Utvalgte nettsider som tar i bruk kreative og eksperimentelle måter å legge fram innhold på.

Samtale

med

Mathias

Lie-Nielsen

–

Interaksjonsdesigner

hos

Making

Waves

Portefolio

Hva gjør en interaksjonsdesigner?

Som interaksjonsdesigner har du ansvar for brukerflaten og hvordan brukeren kommer til å oppleve grensesnittet du lager.

Når du lager et nytt grensesnitt for en kunde.
Hva er det viktigste du tenker på?

Det er jo om løsningen kommer til å løse behovene brukeren har. Vi tar med brukeren helt fra begynnelsen av et prosjekt for å kunne bygge løsninger rundt disse behovene. Ofte kan man finne ut at de har helt andre behov enn hva de tror de har, da må vi ta en runde med kunden for å finne ut av hva som er viktig å fokusere på. Ut ifra dette kan vi bygge prototyper som vi brukertester helt til vi har en løsning kunden er fornøyd med.

Men noe av det viktigste med et grensesnitt er at det har god flyt fra A til Å. Og designet rundt det er visuelle hjelpemidler som gjør den flyten enklere og bedre.

Har du noen tanker om framtiden
innen digital design?

Det som er så spennende, iallefall i det digitale feltet, er at utviklingen har gått så fort. Bare tenk på hva teknologien var for 10 eller 20 år siden. Hva var egentlig internett for 10 år siden? Det var så enkelt i forhold til nå. Jeg tror at prosessen rundt å lage digitale tjenester nå kontra hva det var har forandret seg veldig mye, vi har fått så mye mer å forholde oss til. Vi har fått så mange tjenester som veves inn i hverandre. Og nå går løsninger på tvers av enheter, og kanskje inn i livene våres. Bare se på Virtual Reality, hvor det digitale og virkeligheten blandes. Jeg kan se for meg at vi om 10 år kan bruke linser til å surfe på internett. Men nå i nærmeste framtid blir wearables en stor ting. Det har allerede begynt med smart-watches og smart-houses. Men jeg tror man skal kunne gå rundt med smarte klær hvor for eksempel nøkkelen til huset eller bilen din er innebygd.

Hvorfor ser man ikke flere
eksperimentelle nettsider?

Det mange gjør er å følge trender, eller «standarder», og faren med det er jo at sidene blir veldig like. Det blir vanskelig å skape noe nytt. De sidene jeg ofte jobber med er veldig «boxy» og arver mønstre fra tidligere nettsider, fordi vi vet at de funker. Så istedenfor å finne på noe nytt, gjenbruker vi det, og da blir det gjerne litt standardisert. Men man kan lage noe nytt og kult, men samtidig bruke noen av de konvensjonene som allerede finnes. For det må alltid være brukbart selv om man vil være eksperimentell. Og det er det skjæringspunktet som en nøkkelen til suksess.

En oversikt over ressurser jeg har funnet og
tatt i bruk i research og utforming av denne nettsiden.

Denne nettsiden er laget med Webflow. Et program som lar deg lage prototyper, og dynamiske og responsive nettsider uten måtte kunne koding.

Får å få mest mulig ut av webflow kan du oppgradere fra den gratise planen og få muligheten til å kode.

Webflow ressurser

Forum

Tutorials

Interaksjoner

Byråer verdt å sjekke ut

xxix – Twenty Nine NYC

Apt