Secretul din spatele proiectării de site-uri web creative

(Aline Kesting) (2 sept. 2020)

Multe lucruri intră în proiectarea site-urilor web, dar există un lucru pe care îl considerăm extrem de important atunci când vine vorba de site-urile creative: o colaborare strânsă între designeri și dezvoltatori.

După lansarea unui nou 14islands.com Cu câteva săptămâni în urmă, am fost întrebați cum am creat animațiile ondulate. Deși magia codului din spatele acestor interacțiuni va veni, sperăm, într-o viitoare postare pe blog (rămâneți la curent!), Vreau să mă concentrez asupra modului în care am conceput aceste animații. S-ar putea să fiți surprins.

Întoarceți procesul cu capul în jos

Când începeți un proiect nou, este ușor să intrați într-un tip de proces de cascadă. Treci de la cercetarea utilizatorilor la proiectare și ajungi la prototipuri care pot fi făcute clic. Aveți puncte de control ale echipei pe parcurs, dar colaborarea de proiectare și dezvoltare nu începe de obicei până când nu sunt deja realizate prototipuri. Deși acest proces funcționează pentru anumite tipuri de proiecte, în special pentru cele cu mai multă strategie, este departe de a fi cel mai creativ.

Când am început noul nostru proces de proiectare a site-ului web, am decis să îl abordăm în același mod ( ne apropiem de vinerea noastră creativă), în care experimentele se inspiră adesea din noile tehnologii interesante. Asta înseamnă că dezvoltatorii creativi ar putea fi cei care au o idee, iar designerii sări la bord pentru a ajuta la construirea unui concept în jurul său. În acest fel, proiectăm și codificăm împreună, de la început, cu normă întreagă, tot timpul. 🚀

Proiectați concepte de mișcare în cod

Avantajul acestui proces de proiectare partajat este destul de simplu. Adesea, noi, proiectanții, ne imaginăm un design perfect pentru pixeli și lăsăm dezvoltatorii să afle cum să imite cel mai bine acel design cu cod. Dar mai ales atunci când vine vorba de site-uri web creative, ceea ce ne imaginăm s-ar putea să nu fie întotdeauna fezabil, s-ar putea să nu arate la fel sau s-ar putea transforma într-o experiență foarte performantă. Așadar, după ce petreceți o cantitate destul de mare de timp pentru a vă lustrui design-urile minimaliste, nu mai aveți timp și alegeți orice soluție funcționează cel mai bine.

Dacă am putea înțelege toate oportunitățile WebGL, Three.js și CSS animațiile în loc să le vedem limitările, am putea depăși limitele și ne putem dezvolta conceptele de design în funcție de tehnologie. Când dezvoltatorii de creație fac parte din procesul de proiectare, exact asta se întâmplă. Acestea ne provoacă modurile de gândire și aduc soluții unice la masă la care nu ne-am gândi niciodată singuri. Iar potrivirea acestor cunoștințe cu un concept puternic duce la magie. ✨

Când vine vorba de site-ul nostru, am petrecut săptămâni explorând, eliminând idei și pornind de la zero. De-a lungul timpului, am definit împreună unde vrem să mergem și am ajuns la o interacțiune care ne-a plăcut. Odată ce am avut un concept de mișcare, orice altceva a căzut la locul său.

Iată câteva dintre explorările noastre timpurii:

Explorări de mișcare în cod

Cum am făcut-o

Nicio surpriză, conceptul nostru final de mișcare a fost inspirat de insule. Ceea ce definește o insulă este peisajul în continuă schimbare al apei care modelează pământul. Când vă gândiți la asta, un site web nu este modelat de apă, dar reacționează constant la derulare, clicuri, hover și alte maltratări.

Am explorat ideea distorsiunii apei pentru fiecare interacțiune cu utilizatorul, dar am dorit-o să rămâi foarte minimalist, fără efecte inutile care fură atenția din conținutul propriu-zis.

Conceptul de mișcare este următorul: Uită-te la site și vei obține liniștea insulelor tropicale cu apă cristalină. Dar începeți să derulați și să interacționați – acolo intervin valurile. 🌊.

Miscarea finală a site-ului pe 14islands.com

Ca designer nu aveam idee că era posibil să obțin astfel transformarea fluidă a marginilor miniaturilor, așa cum aș putea veni cu acel concept de design? Am început procesul împreună, am lucrat la un concept împreună și am colaborat în fiecare zi până la lansare. Și fiind parte a întregului proces, echipa noastră de dezvoltare a avut un rol crucial în proiectarea experienței finale.

Desigur, proiectarea în cod nu înseamnă că ar trebui să opriți orice tip de proiectare a mișcării în timpul procesului. Există instrumente fantastice de prototipare acolo, cum ar fi Figma și Flinto și sunt minunate pentru a testa fluxurile și micro-interacțiunile. Când vine vorba de creativitatea pură, After Effects funcționează cel mai bine pentru noi, deoarece oferă multă libertate.Chiar dacă nu sunteți un expert în mișcare, vă ajută să lăsați puțin fișierul de proiectare și să explorați idei la nivel înalt în mișcare. Veți obține rezultate mai tangibile cu care să renunțați sau să mergeți mai departe și să oferiți echipei dvs. de dezvoltatori o bază pe care să începeți să o iterați.

Toate lucrurile pe care designerii le pot învăța din tehnologie

Iată : Implicați un dezvoltator creativ cu normă întreagă în timpul procesului de proiectare. Provocați-vă reciproc, explorați mișcarea în paralel și împingeți interacțiunile mai departe până ajungeți la conceptul dvs. de mișcare. Doar odată ce acest lucru este pus la punct, concentrați-vă asupra proiectelor detaliate ale site-ului dvs. web. Conceptul nu numai că va inspira o mulțime de viitoare decizii de proiectare, ci va contribui la construirea experienței mai consecvent prin repetarea mișcării.

La 14islands avem norocul că avem o echipă foarte strânsă de designeri și dezvoltatori care lucrează Împreună în fiecare zi și îmbunătățim constant modurile în care colaborăm. Până acum a dat roade și a adus multă creativitate în procesul nostru de proiectare. A rămâne curios cu privire la modul în care sunt construite lucrurile și a ne provoca reciproc, atât în ​​design, cât și în cod, ne ajută să creăm experiențe ale utilizatorilor, care sunt funcționale și minimaliste, dar care au și acel plus de personalitate.

Sper că a fost o lectură utilă, anunțați-ne dacă aveți întrebări sau sugestii. Până data viitoare ✌️