Az új full-stack tervező maga épít – tanulságok a Shopifytól

A Y Combinator Design Review sorozatának The New Full-Stack Designer című epizódja azt járja körül, milyen ma a full-stack tervező, amikor a kép és a működő termék közötti határ szinte eltűnt. A vendég Marvin Schwaibold, a Shopify termékdizájn-stúdiójának vezetője, a beszélgetést a YC-s Aaron Epstein vezeti.

A YC epizódleírása szerint Schwaibold végigveszi saját tervezési folyamatát, és bemutatja a Shopify adminfelületének a csapata által nemrég bevezetett újratervezését, valamint a Sidekick asszisztensen végzett munkát. Szóba kerül egy hétvégi projekt is, amelyben egy valódi füves területet shaderként épített újra, továbbá egy körhinta-elem (karusszel), amelynek tökéletesre csiszolása 91 próbálkozásba került. Az epizód második felében a nézők weboldalait értékelik a mozgás és az interaktivitás szempontjából.

A tervező, aki épít

Az epizód fejezetbeosztásában ugyanaz a gondolat tér vissza: a tervezési folyamat megváltozott, és a tervezők ma maguk építenek. A fejezetcímek között szerepel a Shopify vezérigazgatója, Tobi Lütke álláspontja is, miszerint a jövőt meg kell tervezni, valamint az, hogyan működik a stúdió a Shopifyon belül.

Egy kisvállalkozó számára ez nagyon is gyakorlati kérdés. Ha egy vizuális ötletet azonnal működő prototípusként lehet kipróbálni, gyorsabban jön a visszajelzés, és a téves irányok még azelőtt kiesnek, hogy pénzt költenénk rájuk. Ugyanezt a gyors tanulásra épülő logikát jártuk körül cikkünkben arról, hogy az ügyfelek megértése a startup versenyelőnye.

91 próbálkozás és látható változók

A füves shadernél az epizód egy topográfiai térképhez kötődő felismerésről beszél, a következő fejezet pedig a Dialkitet mutatja be, amely a tervezési változókat láthatóvá és állíthatóvá teszi. A karusszel 91 próbálkozása ugyanezt mondja el másik oldalról: a jó mozgás ismétlésből születik, nem egyetlen sikerült vázlatból.

Aki saját weboldalt vagy alkalmazást fejleszt, annak egyszerű a tanulság. Ha az olyan értékek, mint a sebesség, a késleltetés és a távolság, könnyen módosíthatók, egyetlen délután alatt akár tucatnyi kísérlet is belefér. A mesterségesintelligencia-eszközök ezt tovább gyorsítják, feltéve, hogy a megtakarított időnek van iránya – erről írtunk abban a cikkben, amely azt vizsgálja, mire érdemes fordítani az AI által megspórolt időt.

A jó mozgás ismétlésből születik, nem egyetlen sikerült vázlatból.

Hat weboldal nagyító alatt

Az epizód második felében hat startup weboldalát elemzik. A fejezetcímek olyan megfigyeléseket foglalnak össze, amelyeket bármely vállalkozó összevethet a saját oldalával:

• Oldalanként egyetlen fő cél.
• A fülek problémái: a fontos tartalom könnyen rejtve marad.
• Mesterséges intelligenciával készült illusztrációk, amelyek semmit sem tesznek hozzá az oldalhoz.
• Magát a terméket mutassa meg, ne csak bélyegképeket.
• Társadalmi bizonyíték, és amikor a kevesebb több.
• A kezdőlap szakaszai fejezetekként, amelyek történetként haladnak előre.
• Hagyja, hogy a látogató maga fedezze fel a munkát, és alaposan gondolja meg, megéri-e átvenni az irányítást a görgetés felett.

Az utolsó fejezetek a ritmusról szólnak, amelyet az epizód a felszállás, utazómagasság és leszállás szavakkal ír le, valamint a technológiai oldalról. A végén a Blossom karusszel bemutatása következik.

Mit érdemes átvenni a saját oldalra?

Válasszon egyetlen fő célt a kezdőlapnak, és hagyjon el mindent, ami nem azt szolgálja. A díszítő képeket cserélje valódi nézetekre a termékéről vagy szolgáltatásáról. Ha mozgást használ, addig finomítsa, amíg természetesnek nem hat, és próbálja ki az oldalt telefonon is. Egy AI-ügynökkel ez az ismétlődő munka gyorsan halad, ha jól működő munkakörnyezetet épített neki.

▶

Nézze meg az eredeti epizódot a YouTube-on: Y Combinator.

Források

• Y Combinator: The New Full-Stack Designer (Design Review, YouTube) — Forrás a YC által közzétett epizódleírás és időbélyeges fejezetbeosztás, nem ellenőrzött átirat. A műsorban többek között: az építő tervezők 18:27-nél, a Dialkit 26:16-nál, a weboldal-elemzések 31:04-től. A gyakorlati javaslatok a szerző saját gondolatai.
• Marvin Schwaibold: grass-shader (GitHub) — Az epizódleírásban hivatkozott füves shader forráskódja.