Il segreto dietro la progettazione di siti web creativi

(Aline Kesting) (2 settembre 2020)

Nella progettazione di siti web vengono utilizzati molti aspetti, ma cè una cosa che riteniamo particolarmente importante quando si tratta di siti creativi: una stretta collaborazione tra designer e sviluppatori.

Dopo aver lanciato un nuovissimo 14islands.com un paio di settimane fa, ci è stato chiesto come abbiamo creato le animazioni ondulate al passaggio del mouse. Mentre la magia del codice dietro queste interazioni si spera arriverà in un futuro post sul blog (rimanete sintonizzati!), Voglio concentrarmi su come abbiamo effettivamente progettato queste animazioni. Potresti essere sorpreso.

Capovolgi il tuo processo

Quando inizi un nuovo progetto è facile cadere in qualche tipo di processo a cascata. Si passa dalla ricerca degli utenti alla progettazione e si finisce con i prototipi cliccabili. Hai punti di controllo del team lungo il percorso, ma la collaborazione di progettazione e sviluppo di solito non inizia finché i prototipi non sono già stati realizzati. Sebbene questo processo funzioni per alcuni tipi di progetti, in particolare quelli con più strategia, è lungi dallessere il più creativo.

Quando abbiamo iniziato il nostro nuovo processo di progettazione del sito web, abbiamo deciso di affrontarlo allo stesso modo ( ci avviciniamo ai nostri venerdì creativi), in cui gli esperimenti prendono spesso ispirazione da nuove entusiasmanti tecnologie. Ciò significa che gli sviluppatori creativi potrebbero essere quelli con unidea e i designer salgono a bordo per aiutare a costruire un concetto attorno ad essa. In questo modo, progettiamo e codifichiamo insieme, dallinizio, a tempo pieno, sempre. 🚀

Progettare concetti di movimento nel codice

Il vantaggio di questo processo di progettazione condiviso è piuttosto semplice. Spesso noi designer immaginiamo un design perfetto per i pixel e lasciamo che gli sviluppatori scoprano come imitare al meglio quel design con il codice. Ma soprattutto quando si tratta di siti Web creativi, ciò che immaginiamo potrebbe non essere sempre fattibile, potrebbe non avere lo stesso aspetto o potrebbe semplicemente trasformarsi in unesperienza ricca di prestazioni. Quindi, dopo aver speso una discreta quantità di tempo per rifinire i tuoi design minimalisti, finisci il tempo e scegli la soluzione che funziona meglio.

Se solo potessimo capire tutte le opportunità di WebGL, Three.js e CSS animazioni invece di vedere i loro limiti, potremmo spingere i confini ed evolvere i nostri concetti di design secondo la tecnologia. Quando gli sviluppatori creativi fanno parte del processo di progettazione, è esattamente ciò che accade. Sfidano il nostro modo di pensare e portano sul tavolo soluzioni uniche a cui non avremmo mai pensato da soli. E abbinare quella conoscenza a un concetto forte porta alla magia. ✨

Quando si tratta del nostro sito web, abbiamo trascorso settimane esplorando, scartando idee e partendo da zero. Nel tempo, abbiamo definito insieme dove volevamo andare e siamo finiti con uninterazione che ci piaceva. Una volta elaborato il concetto di movimento, tutto il resto è andato a posto.

Ecco alcune delle nostre prime esplorazioni:

Esplorazioni del movimento nel codice

Come labbiamo fatto

Nessuna sorpresa, il nostro concetto di movimento finale è stato ispirato dalle isole. Ciò che definisce unisola è il paesaggio in continua evoluzione dellacqua che plasma la terra. Quando ci pensi, un sito web non è modellato dallacqua, ma reagisce costantemente a scroll, clic, passaggi con il mouse e altri maltrattamenti.

Abbiamo esplorato lidea della distorsione dellacqua per ogni interazione dellutente, ma lo volevamo per rimanere molto minimalisti, senza effetti inutili che rubano lattenzione al contenuto reale.

Il concetto di movimento è questo: guarda il sito e ottieni la quiete delle isole tropicali con acqua cristallina. Ma inizia a scorrere e interagire: è qui che si scatenano le onde. 🌊.

Movimento del sito web finale su 14islands.com

Come designer non avevo idea che fosse possibile ottenere questo morphing fluido della forma dei bordi delle miniature, quindi come potrei inventare quel concetto di design? Abbiamo avviato il processo insieme, lavorato insieme a un concetto e collaborato ogni giorno fino al lancio. Essendo parte dellintero processo, il nostro team di sviluppo ha avuto un ruolo cruciale nella progettazione dellesperienza finale.

Ovviamente, progettare in codice non significa che dovresti interrompere qualsiasi tipo di motion design durante il processo. Ci sono fantastici strumenti di prototipazione là fuori come Figma e Flinto e sono ottimi per testare flussi e micro-interazioni. Quando si tratta di pura creatività, After Effects funziona meglio per noi perché offre molta libertà.Anche se non sei un esperto di movimento, è utile lasciare per un po il file di progettazione ed esplorare idee di alto livello in movimento. Otterrai risultati più tangibili da ignorare o con cui andare avanti e darai al tuo team di sviluppo una base da cui iniziare literazione.

Tutte le cose che i designer possono imparare dalla tecnologia

Ecco qui : Coinvolgi uno sviluppatore creativo a tempo pieno durante il processo di progettazione. Sfidatevi a vicenda, esplorate il movimento in parallelo e spingete oltre le interazioni fino ad arrivare al vostro concetto di movimento. Solo una volta che è a posto, concentrati sui progetti dettagliati del tuo sito web. Il concetto non solo ispirerà molte delle tue imminenti decisioni di progettazione, ma aiuterà anche a costruire lesperienza in modo più coerente ripetendo il movimento.

In 14islands siamo fortunati ad avere un team molto compatto di designer e sviluppatori che lavorano insieme ogni giorno e miglioriamo costantemente il modo in cui collaboriamo. Finora ha dato i suoi frutti e ha portato molta creatività nel nostro processo di progettazione. Rimanere curiosi di sapere come sono costruite le cose e sfidarci a vicenda sia nel design che nel codice ci aiuta a creare esperienze utente funzionali e minimaliste ma anche con quel tocco in più di personalità.

Spero che questa sia stata una lettura utile, facci sapere se hai domande o suggerimenti. Alla prossima ✌️