A kreatív webhelyek tervezésének titka

(Aline Kesting) (2020.09.02.)

Sok dolog foglalkozik weboldalak tervezésével, de egy dolog rendkívül fontosnak tartjuk a kreatív webhelyeket: szoros együttműködés a tervezők és a fejlesztők között.

Egy teljesen új 14islands.com elindítása után. pár hete megkérdezték, hogyan készítettük el a hullámos lebegő animációkat. Bár ezeknek az interakcióknak a kódvarázslata remélhetőleg egy jövőbeni blogbejegyzésben fog megjelenni (maradjon velünk!), Arra szeretnék koncentrálni, hogy miként terveztük meg ezeket az animációkat. Lehet, hogy meglepődik.

Fordítsa meg a folyamatot fejjel lefelé

Új projekt indításakor könnyen beleeshet valamilyen vízesési folyamatba. A felhasználói kutatástól kezdve a tervezésig jut, és kattintható prototípusokhoz jut. Csapatellenőrzési pontjaid vannak, de a tervezési és fejlesztési együttműködés általában nem indul el, amíg a prototípusok már nem készültek. Noha ez a folyamat bizonyos típusú projekteknél működik, különösen azoknál, amelyeknek nagyobb stratégiája van, korántsem ez a legkreatívabb.

Amikor elkezdtük új honlaptervezési folyamatunkat, úgy döntöttünk, hogy ugyanúgy közelítünk hozzá ( kreatív péntekinkhez közelítünk), amelyekben a kísérletek gyakran inspirálják az izgalmas új technológiákat. Ez azt jelenti, hogy a kreatív fejlesztőknek lehet ötletük, és a tervezők a fedélzetre ugranak, hogy segítsenek egy koncepció felépítésében. Így folyamatosan tervezünk és kódolunk, kezdettől fogva, teljes munkaidőben. 🚀

Mozgási koncepciók tervezése kódban

Ennek a megosztott tervezési folyamatnak az előnye meglehetősen egyszerű. Mi, tervezők, gyakran képpontos tökéletes kialakítást képzelünk el, és hagyjuk, hogy a fejlesztők kitalálják, hogyan lehet a legjobban utánozni ezt a tervet kóddal. De főleg a kreatív weboldalak esetében az elképzelhető elképzelések nem mindig valósíthatók meg, nem mindig ugyanúgy néznek ki, vagy egyszerűen csak nagy teljesítményű élménnyé válnak. Tehát miután elegendő időt töltött a minimalista tervek csiszolásával, elfogy az ideje, és bármelyik megoldást választja, amelyik a legjobban működik.

Ha csak megértenénk a WebGL, a Three.js és a CSS összes lehetőségét az animációk ahelyett, hogy látnánk korlátaikat, meghúzhatnánk a határokat és kialakíthatnánk tervezési koncepcióinkat a technika szerint. Amikor a kreatív fejlesztők részt vesznek a tervezési folyamatban, pontosan ez történik. Kihívják gondolkodásmódunkat, és olyan egyedi megoldásokat hoznak az asztalra, amelyekre soha nem gondolnánk egyedül. És ennek a tudásnak egy erős koncepcióhoz való illesztése mágiához vezet. ✨

Ami weboldalunkat illeti, heteket töltöttünk az ötletek feltárásával, selejtezésével és a semmiből indulva. Idővel közösen meghatároztuk, hová akarunk eljutni, és végül egy olyan interakciót kötöttünk ki, amely nekünk tetszett. Miután elkészült egy mozgáskoncepciónk, minden más a helyére került.

Íme néhány korai felfedezésünk:

Mozgáskutatások a kódban

Hogyan sikerült

Nem meglepő, a végső mozgáskoncepciónkat szigetek inspirálták. Ami meghatározza a szigetet, az a folyamatosan változó vízkép formálja a földet. Ha belegondolunk, a webhelyet nem a víz alakítja, de folyamatosan reagál a görgetésekre, kattintásokra, lebegésekre és egyéb rossz bánásmódokra.

A víz torzításának gondolatát minden felhasználói interakció során megvizsgáltuk, de szerettük volna nagyon minimalista maradni, felesleges hatások nélkül, amelyek elrabolják a figyelmet a tényleges tartalomtól.

A mozgás koncepció így hangzik: Nézd meg a helyszínt, és kristálytiszta vízzel megkapod a trópusi szigetek csendességét. De kezdje el a görgetést és az interakciót – ott kezdődnek a hullámok. P>.

A webhely utolsó mozgása a div id = “9b8dffd257”> 14islands.com

Mint tervező, nem is sejtettem, hogy ilyeneket lehet kapni az indexképek éles formája, morfondírozása, akkor hogyan tudnám előállítani ezt a tervezési koncepciót? Együtt kezdtük a folyamatot, közösen dolgoztunk ki egy koncepciót és minden nap együttműködtünk az indulásig. És mivel az egész folyamat része volt, fejlesztői csapatunk döntő szerepet játszott a végső élmény megtervezésében.

Természetesen a kódban történő tervezés nem azt jelenti, hogy a folyamat során le kell állítania bármilyen típusú mozgástervezést. Vannak fantasztikus prototípus-készítő eszközök, mint például a Figma és a Flinto, és nagyszerűek az áramlások és a mikrokapcsolatok tesztelésére. Ami a tiszta kreativitást illeti, az After Effects nekünk működik a legjobban, mert sok szabadságot ad.Még akkor is, ha nem vagy mozgásszakértő, segít, ha egy kicsit elhagyod a tervdokumentációdat, és felfedezheted a magas szintű ötleteket mozgásban. Kézzelfoghatóbb eredményeket érhet el, ha el akar utasítani, vagy továbblép, és megalapozza a fejlesztői csapatát, hogy elkezdhesse az iterációt.

Minden, amit a tervezők megtanulhatnak a technikától

Itt van : Vegyen részt egy kreatív fejlesztőben, aki teljes munkaidőben részt vesz a tervezés során. Kihívja egymást, párhuzamosan fedezze fel a mozgást, és tolja tovább az interakciókat, amíg el nem jut a mozgás koncepciójáig. Csak akkor, ha ez a helyén van, összpontosítson részletes webhelytervére. A koncepció nemcsak a közelgő tervezési döntéseit fogja inspirálni, hanem a mozgás megismétlésével is hozzájárul a tapasztalatok következetesebb felépítéséhez.

A 14islands-nél szerencsénk van, hogy nagyon szoros tervezői és fejlesztői csapat dolgozik minden nap együtt vagyunk, és folyamatosan fejlesztjük az együttműködés módját. Eddig kifizetődő és sok kreativitást hozott a tervezési folyamatunkba. Ha kíváncsiak vagyunk a dolgok felépítésére, és kihívást jelentünk egymásnak mind a tervezés, mind a kódolás terén, akkor funkcionális és minimalista felhasználói élményeket teremthetünk, amelyek ugyanakkor extra személyiséggel is bírnak.

Remélem, ez hasznos olvasmány volt, tudassa velünk, ha kérdése vagy javaslata van. Legközelebb ✌️