Hemmeligheten bak utforming av kreative nettsteder

(Aline Kesting) (2. september 2020)

Mange ting går ut på å designe nettsteder, men det er en ting vi mener er ekstra viktig når det gjelder kreative nettsteder: tett samarbeid mellom designere og utviklere.

Etter å ha lansert en splitter ny 14islands.com for et par uker tilbake, fikk vi spørsmål om hvordan vi skapte de bølgete svevende animasjonene. Mens kodemagien bak disse interaksjonene forhåpentligvis kommer i et fremtidig blogginnlegg (følg med!), Vil jeg fokusere på hvordan vi faktisk designet disse animasjonene. Du kan bli overrasket.

Snu prosessen opp ned

Når du starter et nytt prosjekt, er det lett å falle inn i en slags fosseprosess. Du går fra brukerundersøkelse til design og ender med klikkbare prototyper. Du har teamkontroller underveis, men design- og utviklingssamarbeidet starter vanligvis ikke før prototyper allerede er laget. Selv om denne prosessen fungerer for visse typer prosjekter, spesielt de med mer strategi, er den langt fra den mest kreative.

Da vi startet vår nye designprosess for nettsteder, bestemte vi oss for å nærme oss den på samme måte ( vi nærmer oss våre kreative fredager), der eksperimenter ofte henter inspirasjon fra spennende nye teknologier. Det betyr at kreative utviklere kan være de med en idé, og designere hopper ombord for å bidra til å bygge et konsept rundt det. På den måten designer og koder vi sammen, fra start, heltid, hele tiden. 🚀

Design bevegelseskonsepter i kode

Fordelen med denne delte designprosessen er ganske grei. Ofte forestiller vi designere et piksel perfekt design og lar utviklere finne ut hvordan de best kan imitere det designet med kode. Men spesielt når det gjelder kreative nettsteder, kan det vi forestiller oss ikke alltid være gjennomførbart, ikke se det samme ut, eller bare bli en prestasjonstung opplevelse. Så når du har brukt en god del tid på å polere dine minimalistiske design, går du tom for tid og går med den løsningen som fungerer best.

Hvis vi bare kunne forstå alle mulighetene til WebGL, Three.js og CSS animasjoner i stedet for å se begrensningene, kan vi skyve grenser og utvikle designkonseptene våre i henhold til teknologi. Når kreative utviklere er en del av designprosessen, skjer det akkurat. De utfordrer våre tenkemåter og bringer unike løsninger til bordet vi aldri ville tenkt på alene. Og å matche den kunnskapen til et sterkt konsept fører til magi. ✨

Når det gjelder nettstedet vårt, brukte vi uker på å utforske, skrote ideer og starte fra bunnen av. Over tid definerte vi sammen hvor vi ønsket å gå, og endte opp med et samspill vi likte. Når vi hadde et bevegelseskonsept, falt alt annet på plass.

Her er noen av de tidlige utforskningene våre:

Bevegelsesutforskning i kode

Hvordan vi gjorde det

Ingen overraskelse, vårt endelige bevegelseskonsept ble inspirert av øyer. Det som definerer en øy er det stadig skiftende landskapet med vann som former landet. Når du tenker på det, er et nettsted ikke formet av vann, men det reagerer kontinuerlig på ruller, klikk, svever og andre mishandlinger.

Vi utforsket ideen om vannforvrengning for hver brukerinteraksjon, men ønsket det å være veldig minimalistisk, uten unødvendige effekter som stjeler oppmerksomheten fra det faktiske innholdet.

Bevegelseskonseptet går slik: Se på nettstedet, og du får stillheten til tropiske øyer med krystallklart vann. Men begynn å bla og samhandle – det er der bølgene sparker inn. 🌊.

Endelig nettsidebehandling på 14islands.com

Som designer hadde jeg ingen anelse om at det var mulig å få slikt flytende form-morphing av miniatyrkanter, så hvordan kunne jeg komme opp med det designkonseptet? Vi startet prosessen sammen, jobbet mot et konsept sammen og samarbeidet hver dag til lanseringen. Og som en del av hele prosessen hadde utviklingsteamet en avgjørende rolle i utformingen av den endelige opplevelsen.

Selvfølgelig betyr ikke design i kode at du ikke skal stoppe noen form for bevegelsesdesign under prosessen. Det er fantastiske prototypeverktøy der ute, som Figma og Flinto, og de er gode å teste strømmer og mikrointeraksjoner. Når det gjelder ren kreativitet fungerer After Effects best for oss fordi det gir mye frihet.Selv om du ikke er en bevegelsesekspert, hjelper det å la designfilen være litt og utforske ideer på høyt nivå i bevegelse. Du får mer håndgripelige resultater å avvise eller gå videre med og gi ditt team et grunnlag å begynne å itere fra.

Alle ting designere kan lære av teknologi

Her går det : Få en kreativ utvikler med på heltid under designprosessen. Utfordre hverandre, utforsk bevegelse parallelt og skyv interaksjoner videre til du kommer til bevegelseskonseptet ditt. Bare når det er på plass, kan du fokusere på de detaljerte nettsteddesignene dine. Konseptet vil ikke bare inspirere mange av dine kommende designbeslutninger, men også bidra til å bygge opplevelsen mer konsekvent ved å gjenta bevegelsen.

På 14islands er vi heldige som har et veldig tett team av designere og utviklere som jobber sammen hver dag og forbedrer kontinuerlig måtene vi samarbeider på. Så langt har det lønnet seg og brakt mye kreativitet med i designprosessen. Å være nysgjerrig på hvordan ting er bygget, og utfordre hverandre i både design og kode, hjelper oss med å skape brukeropplevelser som er funksjonelle og minimalistiske, men som også har den ekstra personligheten.

Håper dette var en nyttig lesning, gi oss beskjed hvis du har spørsmål eller forslag. Til neste gang ✌️