Tajemství navrhování kreativních webů

(Aline Kesting) (2. září 2020)

Do navrhování webových stránek se dostává mnoho věcí, ale existuje jedna věc, o které si myslíme, že je mimořádně důležitá, pokud jde o kreativní stránky: úzká spolupráce mezi designéry a vývojáři.

Po spuštění zcela nové 14islands.com před pár týdny jsme dostali otázku, jak jsme vytvořili animace zvlněného přechodu. Zatímco kouzlo kódu za těmito interakcemi snad přijde v budoucím příspěvku na blogu (zůstaňte naladěni!), Chci se zaměřit na to, jak jsme tyto animace vlastně navrhli. Možná vás překvapí.

Obraťte svůj proces vzhůru nohama

Při zahájení nového projektu je snadné spadnout do nějakého typu vodopádu. Od uživatelského průzkumu přejdete k designu a nakonec získáte prototypy, na které lze kliknout. Po celou dobu máte týmové kontrolní body, ale spolupráce na designu a vývoji obvykle nenastartuje, dokud již nejsou vyrobeny prototypy. I když tento proces funguje u určitých typů projektů, zejména u těch, které mají více strategií, zdaleka nejde o ten nejkreativnější.

Když jsme zahájili proces nového designu webových stránek, rozhodli jsme se k němu přistupovat stejně ( přistupujeme k našim kreativním pátek), ve kterých experimenty často čerpají inspiraci z nových vzrušujících technologií. To znamená, že kreativní vývojáři mohou být ti, kteří mají nápad, a designéři skočí na palubu, aby jim pomohli vytvořit koncept. Tímto způsobem navrhujeme a kódujeme společně, od začátku, na plný úvazek, po celou dobu. 🚀

Navrhování pohybových konceptů v kódu

Výhoda tohoto sdíleného procesu navrhování je docela přímá. My designéři si často představujeme design dokonalý v pixelech a necháme vývojáře přijít na to, jak tento design nejlépe napodobit pomocí kódu. Ale zvláště pokud jde o kreativní webové stránky, to, co si myslíme, nemusí být vždy proveditelné, nemusí vypadat stejně nebo se může změnit v zážitek s vysokým výkonem. Takže poté, co strávíte slušné množství času leštěním svých minimalistických návrhů, vám dojde čas a přejdete na jakékoli řešení, které nejlépe funguje.

Kdybychom jen rozuměli všem příležitostem WebGL, Three.js a CSS animace místo toho, abychom viděli jejich omezení, jsme mohli posunout hranice a vyvíjet naše koncepty designu podle technologie. Když jsou kreativní vývojáři součástí procesu návrhu, stane se přesně to. Zpochybňují naše způsoby myšlení a přinášejí jedinečná řešení ke stolu, na který bychom sami nikdy nemysleli. A sladění těchto znalostí se silným konceptem vede k magii. ✨

Pokud jde o náš web, strávili jsme týdny zkoumáním, sešrotováním nápadů a začátkem od nuly. Postupem času jsme společně definovali, kam chceme jít, a skončili jsme interakcí, která se nám líbila. Jakmile jsme měli pohybový koncept, všechno ostatní zapadlo na své místo.

Zde jsou některé z našich raných průzkumů:

Průzkumy pohybu v kódu

Jak jsme to udělali

Žádné překvapení, náš konečný pohybový koncept byl inspirován ostrovy. To, co definuje ostrov, je neustále se měnící krajina vody formující zemi. Když na to pomyslíte, web není formován vodou, ale neustále reaguje na posouvání, klikání, vznášení se a jiné špatné zacházení.

Zkoumali jsme myšlenku zkreslení vody pro každou interakci uživatele, ale chtěli jsme ji zůstat velmi minimalistický bez zbytečných efektů, které ukradnou pozornost skutečnému obsahu.

Pohybový koncept zní takto: Podívejte se na web a získáte klid tropických ostrovů s křišťálově čistou vodou. Ale začněte rolovat a komunikovat – to je místo, kde vlny začínají. P>.

Konečný pohyb webu na 14islands.com

Jako designér jsem neměl tušení, že je možné takové získat plynulé tvarování okrajů miniatur, tak jak bych mohl přijít s tímto konceptem designu? Proces jsme zahájili společně, společně jsme pracovali na koncepci a spolupracovali každý den až do uvedení na trh. A protože byl součástí celého procesu, měl náš vývojový tým zásadní roli při navrhování finální zkušenosti.

Návrh v kódu samozřejmě neznamená, že byste měli během procesu zastavit jakýkoli typ návrhů pohybu. Existují fantastické prototypové nástroje, jako jsou Figma a Flinto, a jsou skvělé pro testování toků a mikrointerakcí. Pokud jde o čistou kreativitu, After Effects pro nás funguje nejlépe, protože poskytuje velkou svobodu.I když nejste odborníkem na pohyb, pomůže vám trochu opustit návrhový soubor a prozkoumat myšlenky na vysoké úrovni v pohybu. Získáte více hmatatelných výsledků, které můžete odmítnout nebo posunout vpřed a dát svému vývojářskému týmu základ, od kterého se bude moci začít iterovat.

Vše, co se designéři mohou naučit od technologie

Tady to je : Zapojte kreativního vývojáře na plný úvazek během procesu návrhu. Vyzvěte se navzájem, paralelně prozkoumejte pohyb a posuňte interakce dále, dokud se nedostanete ke svému konceptu pohybu. Až se to stane, zaměřte se pouze na své podrobné návrhy webových stránek. Koncept nejen inspiruje mnoho vašich nadcházejících návrhových rozhodnutí, ale také pomůže konzistentněji budovat zkušenosti opakováním pohybu.

Na 14islands máme štěstí, že pracuje velmi těsný tým designérů a vývojářů každý den společně a neustále zlepšujeme způsoby naší spolupráce. Zatím se to vyplatilo a přineslo do našeho procesu navrhování hodně kreativity. Zůstat zvědavý na to, jak se věci staví, a vzájemně si konkurovat jak v designu, tak v kódu, nám pomáhá vytvářet uživatelské zkušenosti, které jsou funkční a minimalistické, ale zároveň mají tak extra osobnost.

Doufám, že to bylo užitečné čtení, dejte nám vědět, pokud máte nějaké dotazy nebo návrhy. Až do příště ✌️