Hemmeligheden bag design af kreative websteder

(Aline Kesting) (2. september 2020)

Mange ting går i design af hjemmesider, men der er én ting, som vi mener er ekstra vigtig, når det kommer til kreative websteder: tæt samarbejde mellem designere og udviklere.

Efter lanceringen af ​​et helt nyt 14islands.com for et par uger tilbage blev vi spurgt, hvordan vi oprettede de bølgede svævende animationer. Mens kodemagien bag disse interaktioner forhåbentlig kommer i et fremtidigt blogindlæg (hold dig opdateret!), Vil jeg fokusere på, hvordan vi faktisk designet disse animationer. Du bliver måske overrasket.

Vend din proces på hovedet

Når du starter et nyt projekt, er det let at falde ind i en slags vandfaldsproces. Du går fra brugerforskning til design og ender med klikbare prototyper. Du har holdkontrolpunkter undervejs, men design- og udviklingssamarbejdet starter normalt ikke, før prototyper allerede er lavet. Selvom denne proces fungerer for visse typer projekter, især dem med mere strategi, er den langt fra den mest kreative.

Da vi startede vores nye webstedsdesignproces, besluttede vi at gå på samme måde ( vi nærmer os vores kreative fredage), hvor eksperimenter ofte henter inspiration fra spændende nye teknologier. Det betyder, at kreative udviklere måske er dem med en idé, og designere hopper om bord for at hjælpe med at opbygge et koncept omkring det. På den måde designer og kode vi sammen, fra start, fuld tid, hele tiden. 🚀

Design bevægelseskoncepter i kode

Fordelen ved denne delte designproces er ret ligetil. Ofte forestiller vi designere sig et pixel-perfekt design og lader udviklere finde ud af, hvordan de bedst kan imitere dette design med kode. Men især når det kommer til kreative websteder, kan det, som vi forestiller os, ikke altid være mulig, måske ikke se det samme ud eller måske bare blive en præstations-tung oplevelse. Så når du har brugt en god del tid på at polere dine minimalistiske design, løber du tør for tid og går med den løsning, der fungerer bedst.

Hvis vi kun kunne forstå alle mulighederne for WebGL, Three.js og CSS animationer i stedet for at se deres begrænsninger, kunne vi skubbe grænser og udvikle vores designkoncepter i henhold til teknologi. Når kreative udviklere er en del af designprocessen, er det præcis, hvad der sker. De udfordrer vores tankegang og bringer unikke løsninger til bordet, som vi aldrig selv ville tænke på. Og at matche denne viden til et stærkt koncept fører til magi. ✨

Når det kommer til vores hjemmeside, brugte vi uger på at udforske, skrotte ideer og starte fra bunden. Over tid definerede vi sammen, hvor vi ville hen og endte med en interaktion, vi kunne lide. Når vi havde et bevægelseskoncept, faldt alt andet på plads.

Her er nogle af vores tidlige udforskninger:

Bevægelsesundersøgelser i kode

Hvordan vi gjorde det

Ingen overraskelse, vores sidste bevægelseskoncept var inspireret af øer. Hvad der definerer en ø er det stadigt skiftende landskab af vand, der former landet. Når du tænker på det, er et websted ikke formet af vand, men det reagerer konstant på ruller, klik, svævninger og andre mishandlinger.

Vi undersøgte ideen om vandforvrængning for enhver brugerinteraktion, men ønskede det for at forblive meget minimalistisk uden unødvendige effekter, der stjæler opmærksomheden fra det faktiske indhold.

Bevægelseskonceptet lyder således: Se på stedet, og du får stilheden i tropiske øer med krystalklart vand. Men start med at rulle og interagere – det er her, bølger sparker ind. .

Endelig webstedsbevægelse på 14islands.com

Som designer havde jeg ingen idé om, at det var muligt at få sådan flydende form-morphing af miniaturekanter, så hvordan kunne jeg komme med det designkoncept? Vi startede processen sammen, arbejdede mod et koncept sammen og samarbejdede hver dag indtil lanceringen. Og som en del af hele processen havde vores udviklingsteam en afgørende rolle i designet af den endelige oplevelse.

Selvfølgelig betyder design i kode ikke, at du skal stoppe enhver form for bevægelsesdesign under din proces. Der er fantastiske prototypeværktøjer derude som Figma og Flinto, og de er gode til at teste strømme og mikrointeraktioner. Når det kommer til ren kreativitet fungerer After Effects bedst for os, fordi det giver meget frihed.Selvom du ikke er en bevægelsesekspert, hjælper det med at lade din designfil være lidt og udforske ideer på højt niveau i bevægelse. Du får mere håndgribelige resultater at afskedige eller komme videre med og give dit dev-team et fundament at starte iterering fra.

Alle de ting, designere kan lære af tech

Her går det : Få en kreativ udvikler involveret på fuld tid under designprocessen. Udfordre hinanden, udforsk bevægelse parallelt og skub interaktioner yderligere, indtil du kommer til dit bevægelseskoncept. Kun når det er på plads, skal du fokusere på dine detaljerede webstedsdesign. Konceptet inspirerer ikke kun mange af dine kommende designbeslutninger, men hjælper også med at opbygge oplevelsen mere konsekvent ved at gentage bevægelsen.

På 14islands er vi heldige at have et meget tæt team af designere og udviklere, der arbejder sammen hver dag og forbedrer konstant måder, vi samarbejder på. Indtil videre har det betalt sig og bragt en masse kreativitet ind i vores designproces. At være nysgerrig efter, hvordan ting er bygget og udfordre hinanden i både design og kode, hjælper os med at skabe brugeroplevelser, der er funktionelle og minimalistiske, men som også har den ekstra smule personlighed.

Håber dette var en nyttig læsning, fortæl os, hvis du har spørgsmål eller forslag. Indtil næste gang ✌️