Jak malý tým čtyř lidí plánuje řešit problémy velkých studií i mimo ně. O západním trhu, konkurenci a tricích, které pomohou návrhářům zbavit se každodenních bolestí.
Krátké pozadí. Vitya a já se známe dlouho: téměř 7 let pracujeme ve stejné společnosti, i když v různých městech – Vitya je teritoriálně v Rostově a já v Petrohradě. Níže uvedený text je výňatek z hodiny a půl rozhovoru, který jsme zaznamenali asi před třemi týdny.
Pro úplnost příběhu o předpokladech zrodu projektu Graphite a úkolech, které dokáže řešení jsme se předem dohodli, že budeme komunikovat na „první schůzce“ – jako bychom se viděli poprvé.
Dobrý den! Řekněte nám několika slovy o sobě, svých zkušenostech a co vás inspirovalo k vytvoření Graphite?
Stručně o sobě, navrhuji asi 12 let. Během této doby pracoval v různých společnostech. Na začátku to byl outsourcing. Pak přišel do uKit.Group a v té době uCoz. Můžeme říci, že toto je moje první vážná zkušenost s potravinami. Pracuji zde 7 let, z toho poslední 4 roky na pozici uměleckého ředitele. To znamená, že takový chlápek, který se nejprve zajímal o to, jak kreslit webové stránky, pak pochopil, že to nejsou jen obrázky, ale věci, které by měly fungovat. Když se toto porozumění objevilo, začal jsem pumpovat své dovednosti a stal se z mě produktový designér a umělecký ředitel. Nějak se to stalo.
Odpověď na otázku, co vedlo k vytvoření, si myslím, že by bylo správné začít s uKit. Zpočátku mě přitahoval, protože to nevypadalo jako jiná seznamovací služba nebo jako pokus o sestavení nové a zbytečné sociální sítě na kolenou, ale jako nástroj kreativity. Pro lidi, kteří to mohou použít k vytvoření něčeho, k uskutečnění svých fantazií. Zkušenosti, které jsme získali při práci na uKit, obrovské množství případů, se kterými jsme se setkali, to vše sloužilo jako motivátor pro vytvoření grafitu.
Mohu také poznamenat, že když je samostatný řádek z práce společnosti se stalo vlastní studio pro vývoj webů na uKit, kde už jsou profesionálnější než běžní uživatelé, kluci shromažďovali weby a podrobně hodnotili, co jim chybí, byla velká touha uspokojit všechny tyto žádosti. Plus, právě v té době došlo k rozmachu návrhových systémů.
Mnoho lidí si uvědomilo, že design není jen tok inspirace a kreativity, ale zcela systematizovaná věc s jistými vzory.
To vše společně vedlo k myšlence, že je možné vytvořit službu, která dosud neexistuje. Což spojí všechny možnosti moderního designu a pomůže vyřešit nejambicióznější úkoly snadněji než nyní.
To znamená, že Graphite je umístěn jako produkt pro profesionály?
Ano, toto je produkt pro profesionály, nebo spíše pro ty, kteří již designu rozumějí a mají nějaké zkušenosti. Pro takové lidi to bude, řekněme, co nejužitečnější. Pro ostatní je vhodný stejný uKit nebo Tilda.
V ideálním případě se jedná spíše o váš projekt nebo týmový příběh?
Tady bude pro mě těžké jednoznačně odpovědět, protože celý náš produktový tým je tak či onak zapojen. Každý přispěl něčím, sdílel svou vizi. V tomto ohledu jsem rozhodně neexistoval samostatně ve vakuu. To znamená, že jsme si neustále vyměňovali nápady. Jako umělecký ředitel jsem všechny tyto myšlenky prošel sám sebou a choval jsem se jako jakési centrum, které interagovalo s každým a formovalo obrys toho, co by mělo být v budoucím produktu.
Je možné říci, že Graphite je kombinace toho, co bych chtěl k Yukitu přidat, ale z nějakého důvodu je snazší, rychlejší nebo možná ještě levnější implementovat od nuly?
Podívej, opravdu bych chtěl přidat tyto funkce do Yukitu, protože jeho publikum, i když neprofesionální, v dobrém slova smyslu, ale i to čelí určitým funkčním omezením. Hlavním motivem pro vznik nového produktu však stále nejsou vysoké náklady na implementaci a nikoli technické obtíže při integraci, i když bychom tam jistě čelili spoustě problémů, pokud bychom tam chtěli realizovat všechna naše přání. Počínaje tak banální věcí, jako je redesign rozhraní, protože nové funkce se tam těžko hodily.
Bereme však v úvahu potřeby publika. Přesto všechny tyto čipy, které vám umožňují vytvářet krásné nebo spíše neobvyklé stránky, vyžadují dovednost. Publikum Yukitu má navíc různé potřeby – musí rychle vytvořit hotový web. K tomu stačí velké množství připravených šablon a bloků. Mírně jsem to upravil – dostal jsem web. Ale nástroje pro vytváření bloků se složitým rozvržením nebo složitými animacemi jsou již jiné publikum.
Podle popisu je to přesně to publikum, které se velmi dobře hodí k popisu hlavního publika Tildy. Souhlasím?
Ano, souhlasím.
Tilda se rozhodla začít navštěvovat studia a profesionály, lidi se schopností. Toto je tedy moje první otázka z bloku otázek o soutěži. Může grafit dát tomuto publiku více?
Usilujeme o to. Současně, pokud rozvíjíme přesně téma soutěže, je důležité objasnit, že při srovnání s Tildou mluvíme pouze o ruském segmentu publika. Tilda je u nás opravdu oblíbená, ale na světovém trhu je situace mírně odlišná. V každém případě však věříme, že můžeme otevřít nové příležitosti, a to i pro naše publikum.
Obecně řečeno, o publiku se nyní soustředíme na návrháře na volné noze. Zatím se nám toho zatím moc nepodařilo implementovat, ale pro freelancery, kteří vytvářejí vstupní stránky a weby pro malé vizitky do 10–20 stránek, je nyní vhodný Graphite. Je schopen uspokojit mnoho z jejich potřeb v oblasti Pixel Perfect, neobvyklých designů a netriviálního rozvržení. Mnoho grafických rozvržení může být uvnitř Graphite rozloženo jedna k jedné.
Když už mluvíme o studiích, stále se k tomu přibližujeme. Zde také vysvětlím: mluvíme o studiích, která na trhu takřka něco dokázaly, a se zaměstnanci, podmíněně, více než 30 lidmi. Kdo má vážnou poptávku po kvalitě. Pokud jde o malá studia do 10 lidí, mohou pro sebe najít mnoho užitečných věcí.
Když už mluvíme o Tildě, samostatně jste zmínil, že se jedná pouze o ruský segment. Je hlavní publikum Graphite západním uživatelem?
Zde jsme se rozhodli jít cestou, která zapadá do jednoho výroku, který jsme sami nevymysleli.
Pokud začnete jako ruský produkt, bude pro vás velmi obtížné růst na světový trh a naopak – počínaje světovým trhem bude pro vás jednodušší přijít na Rusko později.
Takže ano, naše zaměření se přesouvá na západní publikum. Proto je volba výchozího jazyka rozhraní – máme jej v angličtině. Naše první testy byly také na západních uživatelích.
Takže, dva nebo tři hlavní konkurenti, kdo bude muset zacílit na publikum, kdo to je? Mezi nimi je i Figma, předpokládám?
Zpočátku jsme to nakreslili takto: může to být publikum grafických editorů – Figma, Sketch, stejně jako publikum stávajících tvůrců webových stránek, které nyní začaly shromažďovat profesionály kolem sebe. Testujeme různé možnosti. Přiznám se, že zatímco u grafických editorů není vše tak jasné a zřejmé, jak se nám zdálo. Když osobě řekneme, že máme grafický editor, jako je Figma, s kódem připraveným na produkci, úplně nám nerozumí. Zdá se, že v tuto chvíli jsme blíže publiku tvůrců webových stránek, takže zjevný odpor proti Figmě se nezdá být správný. Ale stále jsme v procesu zjišťování (úsměvy).
Mezi konkurenty bych určitě vyzdvihl Editor X od Wix, Studio.design a Webflow. Vezmeme-li přesně koncept a celou sadu funkcí, které chceme nabídnout, pak tu není tolik konkurentů. Na jedné straně to vypadá jako dobrá věc.
Zkusím to uhodnout. Když je produkt uveden na trh dostatečně profesionálnímu publiku, je situace dvojnásobná. Na jedné straně víte lépe, o jaké publikum jde, máte jasnou představu o profilu klienta a na druhé straně musíte nejen zaujmout, ale také odlákat od jiného nástroje, který lidé běžně známé a používané již několik let. Je obtížnější takového člověka přilákat a v důsledku toho je to nákladnější. Stále musí prokázat, že vás musí začít používat.
Ano, je tu takový okamžik. To je pravděpodobně hlavní obtíž. Je nutné nejen informovat lidi o produktu, ale také přesvědčit, že se máte lépe. A když mluvíme o publiku designérů, pak musíme vážně zápasit – v Rusku se stejnou Tildou, nebo jako příklad nebyl uveden Readymag.
Wix's Editor X nedávno vyšel z beta verze, ale vyvíjí se velmi aktivně. Proto také způsobují obavy ohledně jejich temp růstu. Abychom lépe odráželi téma západních konkurentů, zmíním SquareSpace, který návrháři a webmasteři velmi milují.
Co s tím vším? To je pro nás signál, že musíme věnovat více úsilí vytváření takových infrastrukturních věcí, jako jsou příručky, věnovat pozornost školení a mistrovským kurzům.
Abych změnil tón, raději bych řekl, co mě dělá optimistickým. Nejprve se také pohybujeme rychle. Kromě toho se ještě nikdo setkal s naším komplexem užitečných funkcí ve stejné kombinaci. Ano, některé jsou stále implementovány ve fázi MVP a rozhraní nebylo místy vyleštěno, ale obecně se již objevuje synergie, kterou tvoří naše funkce. Dokončíme rozhraní, s tím nám pomohou testy.
Mohu přidat ještě jednu myšlenku na publikum grafických editorů, se kterými jsme zahájili diskusi.
Řekněme, že člověk používá Figma a Sketch, ale nepoužívá nástroje pro vytváření webů. Takové publikum je pro nás atraktivní. Mnoho designérů se tohoto slova nebojí a trpí nutností pracovat s designéry rozvržení.
Pokud chce designér na volné noze rozšířit své portfolio služeb a vydělat více peněz, často spolupracuje s návrhářem rozvržení nebo programátorem. To je vlastně bolest. Nejprve musíte najít osobu. Pak řada úprav, notoricky známý Pixel Perfect. Statické rozložení může být při přenosu do prohlížeče opravdu složité. Kuře není pták a obrázek není web. Pokud tedy kreslíte rozvržení a víte, jak na to, pak je jejich přeměna na web sami bez použití jakéhokoli kódu ve skutečnosti velmi skvělá volba.
K tomu si však znovu udělám výhradu, aby to nevypadalo, jako bych seděl a maloval obraz ideálního světa tady a teď. Opravdu jsme se zaměřili na publikum grafických editorů a pokusili jsme se co nejvíce snížit vstupní prahovou hodnotu pro tyto lidi kvůli tomu srozumitelným rozhraním. Neuspěli jsme úplně, máme na čem pracovat.
Pojďme nyní k nejdůležitější věci – k čipům. Jak plánujete přesvědčit lidi, aby přešli na grafit?
Pravděpodobně začnu obecnou představou. Nejprve je Graphite nástrojem mřížky. uKit se v době svého vzniku také lišil od mnoha jiných. Ve společnosti Graphite jsme si představili spoustu věcí. Vzali jsme v úvahu nevýhody, o kterých jsme se dozvěděli v procesu studia uživatelské zkušenosti.
Historicky se takzvané rozložení mřížky objevilo už dávno: první rámce jsou něco v 10. letech nebo dokonce dříve. Obzvláště populární se staly příchodem Bootstrapu, který zahrnoval jeden z těchto gridových frameworků. Říkalo se tomu 960.gs. Tato sada tříd CSS usnadnila vytváření struktur s více řádky a sloupci a umožnila jim reagovat.
Když se ponoříme trochu hlouběji, existuje vlastnost CSS s názvem position: static. Když umístíte prvek na stránku, okamžitě se vejde do hranic kontejneru. V tomto případě se prvek ležící níže na stránce posune, jak bude horní růst. Ve výsledku jsou všechny prvky na stránce v určitém toku a webová stránka kreslí postupně jeden prvek za druhým.
Myslím, že to není třeba vysvětlovat lidem, kteří se alespoň jednou pokusili vytvořit stránku HTML. To je docela zřejmá věc pro vývojáře, ale ne vždy zřejmá pro návrháře. V grafických editorech je opak pravdou: ve výchozím nastavení jsou prvky umístěny v souřadnicích, obvykle z levého horního rohu.
Ukázalo se, že prvky o sobě nic neví, nemohou reagovat na změny výšky a velikosti kontejneru. To není pro budoucnost rozvržení příliš dobré, protože v prohlížeči web žije v dynamickém prostředí a v rozvržení ve statickém prostředí.
A teď k funkcím. Řeknu vám, co jsme udělali s mřížkou v Graphite.
Nejprve jsme umožnili nakonfigurovat všechny parametry mřížky : počet sloupců, výplň mezi nimi, šířka kontejneru a výplň z ní. Všechny tyto body jsou konfigurovány jako součást návrhového systému pro všechny stránky webu. Navíc je samozřejmě možné v každém bloku webu mřížku dále přizpůsobovat.
Funkce tím zjevně nekončí, nyní se k nim vrátíme. Prozatím další krátká otázka: v polovině rozhovoru už mnoho lidí možná touží po prostorné definici grafitu. Ukazuje se, že se jedná o webový tvůrce s vlastním propracovaným designovým systémem?
Pokud potřebujete formulovat odpověď do jedné věty, je to pro mě tradičně obtížné téma. Stále půjdu trochu ze strany.
Pokud uslyšíte frázi „tvůrce webových stránek“, mnoho designérů má tendenci „vrtět“. Toto je zashkvar. „Shaw, znovu?“ – jako v té sovětské komiksu o vlkovi a psu.
Stále hledáme správné znění. Rozhodně nejsme grafický editor, protože na výstupu máme kód připravený na výrobu. S tvůrci webových stránek je to komplikované. Spojil bych tyto dva koncepty a pak to dopadne takto: Graphite je editor webových stránek, který vám umožňuje dynamicky sázet rozvržení bez kódu.
Nebo, pokud chcete, nástroj No-Code Pixel Perfect pro designéry.
Mimochodem to zní dobře! Jen objasněte, No-Code nebo Low-Code? Jak čistý je kód, který získáte, pokud se ho sami nedotknete?
No-Code, výsledný html lze okamžitě nahrát na váš hosting.
No, pak člověk není svázán s Graphite, že? Shromáždili jste web, stáhli jej a nic vás nezavazuje k tomu, abyste si svůj účet už udržovali?
Tato otázka pro nás ještě není zcela jasná. Nyní to všechno vypadá přesně tak, jak jste popsali: shromáždíte rozložení, uložíte html a můžete s ním dělat, co chcete. Je pravda, že tento html v současné době není příliš vhodný pro ruční úpravy. Pokud chcete něco v editoru vylepšit, bude to problematické. Tento kód je ale co nejvíce optimalizován.
Pokud potřebujete něco změnit, je optimální znovu otevřít projekt v Graphite, provést tam změny a znovu nahrát kód. Zaměřujeme se také na tento formát, protože chceme pracovat pro designéry. Pro ně tento přístup vypadá funkčnější, není nutné kopat do kódu.
Vraťme se k funkcím. Co je kromě pohodlné síťoviny?
Mimochodem, o mřížce jsem zatím neřekl všechno (smích). Můžeme tedy nakonfigurovat všechny parametry mřížky. Potom přímo na plátně návrhář vytvoří sloupce a sestaví je do řádků. U sloupů můžete upravit šířku a výplň, které jsou zase vázány na parametry mřížky. Poté se do sloupců přidá obsah: text, obrázky, tlačítka. Takto návrhář vytvoří základní strukturu bloku.
Je důležité objasnit, že jsme všechny tyto nástroje přivedli na nejvyšší úroveň úprav a návrhář k nim má okamžitě přístup na plátně. Toto je vizuální editační část, která podporuje vizivig.
Kromě toho, že jsme implementovali obvyklé rozložení mřížky, které lze zpracovat vizuálními prostředky, přidali jsme také možnost kombinovat prvky mřížky s absolutními, které lze přichytit na cokoli – umístěné souřadnicemi, přichyceny do stran obrazovky, vzájemně se překrývající. Říkáme tomu hybridní síť. Ve vizuálním režimu můžete upravovat absolutně umístěné i relativní prvky. To vše vám umožňuje vytvářet bloky téměř jakékoli složitosti.
Všimněte si, že tento přístup, když jeden prvek ovlivňuje jiný, je uveden na Obr a nazývá se Automatické rozložení. Toto automatické rozložení jsme však vytvořili tak, jak by mělo být pro webové prostředí, a v souladu s tím, jak jsou webové stránky obvykle rozloženy. Plus adaptivní nastavení: můžeme v něm žít na všech obrazovkách.
Nyní pro další funkce. Můžeme vytvářet kontejnery s widgety přímo na plátně. Pokud umístíte ukazatel myši na jeden widget nad druhým, můžete okamžitě vytvořit kontejner. Kontejnery lze také přidat ručně z panelu nástrojů a poté je vyplnit požadovanými widgety. Jak je obecně v konkrétní situaci výhodnější vyřešit problém designéra. Kontejner a jeho obsah se chovají jako flexbox CSS.
Plátené kontejnery samy o sobě jsou velmi výkonné, protože je lze vnořovat podobným způsobem, což umožňuje skutečně složité vizuály, které zároveň zůstanou v mřížce a udržovat tok To znamená, že i ty nejsložitější složené konstrukce budou ve výchozím nastavení reagovat, nevyžadují přizpůsobení mobilním zařízením.
Abych to shrnul, Graphite má právě teď:
-
Samotná mřížka, kterou si můžete přizpůsobit sami.
- Jeho integrace s absolutním umístěním, co nazýváme hybridní mřížku.
- Kontejnery Flexbox, které jsou vytvořeny přímo z plátna a mají všechny funkce, které poskytují CSS a flexbox.
Trochu objasním adaptivní. Mnoho konstruktérů má přizpůsobivost, přiznejme si to. To znamená, že rozdíl mezi Graphite spočívá v tom, že můžete mít předvídatelnou a přizpůsobitelnou adaptabilitu a nepřijmout ji bez speciální alternativy, jak je tomu obvykle v konstruktoru?
Ano, je to tak. Responzivní chování je plně pod kontrolou.
Poslouchej, chci se vrátit k předchozí otázce a zdůraznit čtvrtou vlastnost. Už jsem o tom hovořil tangenciálně, ale nyní se budu věnovat tomuto tématu podrobněji, pokud budeme mít čas. Mluvím o vizuální kontrole. To je v podstatě stejné jako princip wizivig: přineseme na plátno maximum věcí, které designér možná potřebuje, a umožníme jim s nimi pracovat, aniž bychom museli jít na panely a něco tam nastavovat.
Zde bych zvláště zdůraznil naši koncepci práce s okraji. Pokud kliknete na prvek a umístíte ukazatel myši nad jeho okraj, objeví se tam malá hůlka. Zatažením za něj se zvýší nebo sníží vnější polstrování. Tato možnost je jednoduchá a zdaleka nová, ale je důležitá v gridové infrastruktuře.
Toto vám umožní pracovat s mezerami. To je důležité pro designéry. Je to kontrast mezi prázdným prostorem a obsahem, který utváří dojem rozvržení.
Návrháři někdy tráví spoustu času úpravami těchto okrajů při hledání harmonie a rovnováhy. Chtěl jsem, aby tato práce byla pohodlnější. Myslím, že jsme to dokázali.
Přidám o mini funkcích. Máme panel vrstev. Toto je blízký příběh pro ty, kteří pracují ve Figmě. Pokud nechcete některé prvky přetahovat přes plátno, můžete to udělat pomocí panelu vrstev.
Existuje zajímavé řešení pro řízení multiplicity odsazení. Kromě toho, že lze libovolné odsazení nastavit v pixelech, může návrhář přizpůsobit takzvanou jednotku nebo mikromodul. Obvykle se to děje takto: pro pohodlí návrháře rozvržení designéři vytvářejí všechna odsazení v násobcích čtyř nebo dvou, používají 8px, 16px, 24px, 48px, 96px atd. Kromě vazby na pixel můžeme přizpůsobit váš mikromodul. Řekněme, že je to 10px. Odsazení 40px se potom bude rovnat čtyřem mikromodulům. Na plátně bude také vše změněno s požadovaným krokem. Už pro vás žádné hry na lov pixelů.
O systému návrhu jsem se již zmínil trochu a přidám zde několik slov. Máme proměnné pro barvy, styly písem a další proměnné – ohraničení, zaoblení, stíny. Známý arzenál jakéhokoli konstrukčního systému. Existují témata, která vám umožňují překreslit blok nebo celý web jediným kliknutím. Důležitá nuance: s námi můžete uložit všechna nastavení jako celek – barvy, písma, rámečky, poloměry zaoblení, přechody atd. – a použít je na jiném webu. Nebo si můžete vzít samostatnou sadu barev nebo písem a znovu použít pouze je.
Máme také něco jako variace v návrhovém systému. Jedná se o schopnost synchronizovat vzhled různých prvků.
Brzy zavedeme animace. Nejsou zde žádné zasvěcené informace, děláme zde základní věci, které jsou v jiných konstruktorech. Všechny tyto věci však budou žít v mřížce a to poskytuje nové a zajímavé možnosti.
Promluvme si na konci o obecném pojetí. Poslední víte, jak víte. Proč lidé potřebují grafit?
Obecně se chceme stát takovým vývojovým prostředím webových stránek pro designéry, aby designér mohl dělat vše sám a využívat všechny možnosti moderních prohlížečů.
Jaké jsou nejbližší produktové plány?
Z toho, co je pro nás velmi důležité, je integrace s Headless CMS. Doufejme, že to brzy implementujeme. Směr JAMstack je nyní populární.
Nevím přesně, ke kterému CMS se připojíme. Jsme ve fázi výběru. Možná to bude Strapi, možná to bude starý dobrý WordPress, který může fungovat také v režimu Headless CMS. Možná to bude něco jako Airtable nebo dokonce běžné Tabulky Google.
Při použití na grafit to dá skvělé nové možnosti. Do těchto CMS bude možné vložit váš obsah a poté v našem nástroji pro tvorbu webů svázat potřebná pole, shromáždit vaše struktury. Když editor něco změní, statické stránky na hostingu budou znovu vygenerovány a aktualizovány.
To bude dobře fungovat s další funkcí, kterou plánujeme vyvinout – komponenty. Z prvků webu na plátně můžete vytvořit komponentu a upravit ji na jednom místě a změny se použijí na všechny instance komponenty. Protože to funguje ve Figmě.
To vše vám umožní přiblížit se řešení případů velkých studií a obecně to zjednoduší život mnoha lidem.
Zapomněl jsem se zeptat kolik lidí je nyní v týmu kromě vás?
Máme super mini tým: kromě mě jsou zapojeni dva vývojáři a tester. Abych byl upřímný, na všechno není dost rukou, ale snažíme se. Rád bych tým v budoucnu rozšířil, ale zatím.
V době vydání této publikace kluci aktivně hledají front-end pro svůj tým. Pokud jste právě takoví, vítejte v komentářích nebo v PM 🙂
