Luovien verkkosivustojen suunnittelun salaisuus

(Aline Kesting) (2.9.2020)

Verkkosivujen suunnitteluun liittyy monia asioita, mutta yksi asia on mielestämme erityisen tärkeä luoville sivustoille: tiukka yhteistyö suunnittelijoiden ja kehittäjien välillä.

Käynnistettyään upouuden 14islands.com muutama viikko sitten kysyttiin, kuinka loimme aaltoilevat leijuva-animaatiot. Vaikka näiden vuorovaikutusten taustalla oleva koodimaagia tulee toivottavasti tulevaan blogikirjoitukseen (pysy kuulolla!), Haluan keskittyä siihen, miten todella animoimme nämä animaatiot. Saatat olla yllättynyt.

Käännä prosessi ylösalaisin

Kun aloitat uuden projektin, on helppo pudota jonkin tyyppiseen vesiputousprosessiin. Siirryt käyttäjätutkimuksesta suunnitteluun ja päädyt napsautettavien prototyyppien kanssa. Sinulla on tiimin tarkistuspisteitä matkan varrella, mutta suunnittelu- ja kehitysyhteistyö ei yleensä käynnisty ennen kuin prototyypit on jo tehty. Vaikka tämä prosessi toimii tietyntyyppisissä projekteissa, etenkin niissä, joissa on enemmän strategiaa, se ei ole kaukana luovimmasta.

Kun aloitimme uuden verkkosivujen suunnitteluprosessin, päätimme lähestyä sitä samalla tavalla ( lähestymme luovia perjantaitamme), joissa kokeilut inspiroivat usein uusia jännittäviä tekniikoita. Tämä tarkoittaa, että luovilla kehittäjillä saattaa olla idea, ja suunnittelijat hyppäävät mukaan rakentamaan konseptia sen ympärille. Näin suunnittelemme ja koodaamme yhdessä, alusta alkaen, koko ajan, koko ajan. 🚀

Suunnittele liikekonseptit koodissa

Tämän jaetun suunnitteluprosessin etu on melko yksinkertainen. Usein me suunnittelijat kuvittelemme täydellisen kuvapistemallin ja annamme kehittäjien selvittää, kuinka jäljitellä mallia parhaiten koodilla. Mutta varsinkin kun kyse on luovista verkkosivustoista, se, mitä kuvittelemme, ei aina ole mahdollista, se ei välttämättä näytä samalta tai voi muuttua vain suorituskykyiseksi kokemukseksi. Joten kun olet käyttänyt kohtuullisen määrän aikaa minimalististen mallien kiillottamiseen, loppuu aika ja valitset minkä tahansa ratkaisun, joka toimii parhaiten.

Jos vain voisimme ymmärtää kaikki WebGL: n, Three.js: n ja CSS: n mahdollisuudet animaatioiden sijaan, että näisimme niiden rajoituksia, voisimme työntää rajoja ja kehittää suunnittelukonsepteja tekniikan mukaisesti. Kun luovat kehittäjät ovat osa suunnitteluprosessia, niin juuri tapahtuu. He haastavat ajattelutapojamme ja tuovat pöydälle ainutlaatuisia ratkaisuja, joita emme koskaan ajattele yksin. Ja tämän tiedon sovittaminen vahvaan käsitteeseen johtaa taikaan. ✨

Verkkosivustollamme käytimme viikkoja tutkimalla, romuttamalla ideoita ja aloittamalla alusta. Ajan myötä määritelimme yhdessä, minne halusimme mennä, ja päädyimme vuorovaikutukseen, josta pidimme. Kun meillä oli liikekonsepti, kaikki muu laski paikoilleen.

Tässä on joitain varhaisia ​​tutkimuksiamme:

Liiketutkimukset koodissa

Kuinka teimme sen

Ei ole yllätys, lopullinen liikekonseptimme sai inspiraationsa saarista. Saaren määrittelee jatkuvasti muuttuva vesimaisema, joka muokkaa maata. Kun ajattelet sitä, verkkosivusto ei ole veden muotoinen, mutta se reagoi jatkuvasti vierityksiin, napsautuksiin, leijumiin ja muihin väärinkäyttökohteisiin.

Tutkimme veden vääristymisen ideaa jokaisessa käyttäjän vuorovaikutuksessa, mutta halusimme sen pysyä hyvin minimalistisena ilman tarpeettomia vaikutuksia, jotka varastavat huomiota todellisesta sisällöstä.

Liikekonsepti on seuraava: Katsokaa sivustoa ja saat trooppisten saarten hiljaisuuden kristallinkirkkaalla vedellä. Aloita kuitenkin vierittäminen ja vuorovaikutus – siellä aallot alkavat tulla sisään. div id = ”9b8dffd257”> 14islands.com

Suunnittelijana minulla ei ollut aavistustakaan, että tällaista voisi saada sujuva muotoilu-pikkukuvien reunojen muotoilu, joten kuinka voisin keksiä kyseisen suunnittelukonseptin? Aloitimme prosessin yhdessä, työskentelimme yhdessä konseptin parissa ja teimme yhteistyötä joka päivä julkaisuun saakka. Ja osana koko prosessia, kehitystiimillämme oli ratkaiseva rooli lopullisen kokemuksen suunnittelussa.

Koodilla suunnittelu ei tietenkään tarkoita, että sinun pitäisi lopettaa kaikenlainen liikesuunnittelu prosessin aikana. Siellä on upeita prototyyppityökaluja, kuten Figma ja Flinto, ja ne ovat hyviä testata virtauksia ja mikrovaikutuksia. Puhtaasta luovuudesta After Effects toimii parhaiten meille, koska se antaa paljon vapautta.Vaikka et olisikaan liikeasiantuntija, se auttaa jättämään suunnittelutiedostosi hetkeksi ja tutkimaan korkean tason ideoita liikkeessä. Saat konkreettisempia tuloksia, joista voit irrottaa tai siirtyä eteenpäin, ja antaa dev-tiimillesi perustan aloittaa iterointi.

Kaikki mitä suunnittelijat voivat oppia tekniikasta

Tässä se menee : Hanki luova kehittäjä mukaan koko ajan suunnitteluprosessin aikana. Haasta toisiaan, tutki liikettä rinnakkain ja työnnä vuorovaikutusta eteenpäin, kunnes pääset liikekonseptiin. Vain kun se on paikallaan, keskity yksityiskohtaiseen verkkosivustosi suunnitteluun. Konsepti ei vain inspiroi paljon tulevia suunnittelupäätöksiäsi, vaan auttaa myös rakentamaan kokemusta entistä johdonmukaisemmin toistamalla liikettä.

14-saarella olemme onnekkaita, kun meillä on erittäin tiukka suunnittelijoiden ja kehittäjien tiimi yhdessä joka päivä ja parannamme jatkuvasti tapojamme. Toistaiseksi se on tuottanut tulosta ja tuonut paljon luovuutta suunnitteluprosessiin. Pysyminen uteliaana siitä, miten asiat rakennetaan, ja haastaminen toisilleen sekä suunnittelussa että koodissa auttavat meitä luomaan käyttökokemuksia, jotka ovat toimivia ja minimalistisia, mutta joilla on myös niin vähän persoonallisuutta.

Toivottavasti tämä oli hyödyllinen luku, kerro meille, jos sinulla on kysyttävää tai ehdotuksia. Ensi kerralla ✌️