Hemligheten bakom utformningen av kreativa webbplatser

(Aline Kesting) (2 september 2020)

Många saker går till att designa webbplatser, men det finns en sak som vi anser är extra viktig när det gäller kreativa webbplatser: tätt samarbete mellan designers och utvecklare.

Efter lanseringen av en helt ny 14islands.com för några veckor tillbaka fick vi frågan hur vi skapade de vågiga svävande animationerna. Medan kodmagiken bakom dessa interaktioner förhoppningsvis kommer att komma i ett framtida blogginlägg (håll dig uppdaterad!), Vill jag fokusera på hur vi faktiskt utformade dessa animationer. Du kan bli förvånad.

Vänd din process upp och ner

När du startar ett nytt projekt är det lätt att falla in i någon typ av vattenfallsprocess. Du går från användarundersökning till design och slutar med klickbara prototyper. Du har teamkontroller på vägen, men design- och utvecklingssamarbetet startar vanligtvis inte förrän prototyper redan har gjorts. Även om denna process fungerar för vissa typer av projekt, särskilt de med mer strategi, är den långt ifrån den mest kreativa.

När vi startade vår nya webbdesignprocess bestämde vi oss för att närma oss den på samma sätt ( vi närmar oss våra kreativa fredagar, där experiment ofta hämtar inspiration från spännande ny teknik. Det betyder att kreativa utvecklare kan vara de med en idé, och designers hoppar ombord för att hjälpa till att bygga ett koncept runt den. På det sättet designar och kodar vi tillsammans, från början, heltid, hela tiden. 🚀

Design rörelsekoncept i kod

Fördelen med denna delade designprocess är ganska enkel. Ofta föreställer vi designers oss en pixel-perfekt design och låter utvecklare ta reda på hur man bäst imiterar den designen med kod. Men speciellt när det gäller kreativa webbplatser kanske det som vi föreställer oss inte alltid är möjligt, kanske inte ser likadant ut eller bara blir en prestandatung upplevelse. Så när du har spenderat en hel del tid på att polera dina minimalistiska mönster, tar du slut på tiden och går med vilken lösning som helst som fungerar bäst.

Om vi ​​bara kunde förstå alla möjligheter WebGL, Three.js och CSS animationer istället för att se deras begränsningar, kunde vi driva gränser och utveckla våra designkoncept enligt teknik. När kreativa utvecklare är en del av designprocessen är det precis vad som händer. De utmanar våra tankesätt och ger unika lösningar till bordet som vi aldrig skulle tänka på på egen hand. Och att matcha den kunskapen till ett starkt koncept leder till magi. ✨

När det gäller vår webbplats tillbringade vi veckor med att utforska, skrota idéer och börja från grunden. Med tiden definierade vi tillsammans vart vi ville och slutade med en interaktion som vi gillade. När vi väl hade ett rörelsekoncept föll allt annat på plats.

Här är några av våra tidiga utforskningar:

Rörelseutforskningar i kod

Hur vi gjorde det

Ingen överraskning, vårt slutliga rörelsekoncept inspirerades av öar. Vad som definierar en ö är det ständigt föränderliga landskapet med vatten som formar landet. När du tänker på det är en webbplats inte formad av vatten, men den reagerar ständigt på rullar, klick, svävar och andra missbehandlingar.

Vi undersökte idén om vattenförvrängning för varje användarinteraktion men ville ha det för att vara mycket minimalistisk, utan onödiga effekter som stjäl uppmärksamhet från det faktiska innehållet.

Rörelsekonceptet går så här: Titta på sajten och du får stillheten hos tropiska öar med kristallklart vatten. Men börja rulla och interagera – det är där vågorna sparkar in. 🌊.

Slutlig webbplatsrörelse på 14islands.com

Som designer hade jag ingen aning om att det var möjligt att få sådan flytande form-morphing av miniatyrkanter, så hur kunde jag komma på det designkonceptet? Vi startade processen tillsammans, arbetade mot ett koncept tillsammans och samarbetade varje dag fram till lanseringen. Och som en del av hela processen hade vårt utvecklingsteam en avgörande roll i utformningen av den slutliga upplevelsen.

Att utforma i kod betyder naturligtvis inte att du ska stoppa någon form av rörelseutformning under din process. Det finns fantastiska prototypverktyg där ute som Figma och Flinto och de är fantastiska att testa flöden och mikrointeraktioner. När det gäller ren kreativitet fungerar After Effects bäst för oss eftersom det ger mycket frihet.Även om du inte är en rörelseexpert hjälper det att lämna din designfil lite och utforska idéer på hög nivå i rörelse. Du får mer påtagliga resultat att avfärda eller gå vidare med och ge ditt dev-team en grund att börja itera från.

Allt som designers kan lära av teknik

Här går det : Få en kreativ utvecklare med heltid under designprocessen. Utmana varandra, utforska rörelse parallellt och tryck interaktioner vidare tills du kommer till ditt rörelsekoncept. Bara när det är på plats, fokusera på dina detaljerade webbdesigner. Konceptet inspirerar inte bara många av dina kommande designbeslut utan hjälper också till att bygga upplevelsen mer konsekvent genom att upprepa rörelsen.

På 14islands har vi turen att ha ett mycket tätt team av designers och utvecklare som arbetar tillsammans varje dag och ständigt förbättrar sätten vi samarbetar på. Hittills har det gett resultat och tillfört mycket kreativitet i vår designprocess. Att vara nyfiken på hur saker byggs och utmana varandra i både design och kod hjälper oss att skapa användarupplevelser som är funktionella och minimalistiska men som också har den extra personligheten.

Hoppas det här var en bra läsning, låt oss veta om du har några frågor eller förslag. Fram till nästa gång ✌️