Weby se už dlouho navrhují podle stejného scénáře. Přijde klient, že chce web. Následuje proces, na jehož konci je v ideálním případě komplexní zadání, včetně analýzy, drátového modelu, nebo rovnou plně interaktivního prototypu webu. Zde vstupuje do procesu grafik, který oblékne dodané wireframy do slušivého kabátku a předá štafetu kodérovi. Kodér vyrobí HTML/CSS šablony a předá je programátorům, kteří pokračují v implementaci šablon, napojují je na redakční systém… někde mezi tím se pohybují SEO specialisté, textaři, linkbuildeři, marketéři, obsahoví stratégové.
Celý proces je jasně definován jednotlivými kroky návrhu, na které potřebujete úzce specializované nástroje. Na wireframy Axure, na grafiku Photoshop, pro prezentaci grafiky klientovi InVision, na HTML kód třeba PSPad, atd.
U velkých týmů je pak na každou tuto činnost specialista, u těch malých si často musí vše ohlídat jedinec sám, až kam mu to dovolí jeho schopnosti a odborné znalosti. Do tohoto stavu přichází nové nástroje, které vám umožní ohlídat si buď celý proces návrhu webu, nebo je tu část, kterou jako profesionál ovládáte nejlépe. Nástroj, který tohle umí velmi dobře se jmenuje Webflow.
S Webflow můžete mít při návrhu webu pod kontrolou:
- rozmístění jednotlivých prvků (wireframes)
- obsah webu (texty, obrázky)
- interakce a animace UI (interaktivní prototyp)
- grafický vzhled (barvy, typografie…)
- HTML/CSS
- chování UI na různých velikostech displejů (responsive webdesign)
- klíčová slova stránky, alt u obrázků, title u odkazů (prvky přístupnosti i SEO)
Pár dalších možností a funkcí:
- správa vlastního kódu (HTML, CSS, JS)
- webfonty (Google Fonts a Typekit)
- napojení na Google Analytics
- vlastní nebo Webflow hosting (včetně správy robots.txt a sitemap.xml)
- plně funkční formuláře bez znalosti PHP
- verzování
- vytváření šablon
- sdílení návrhů v rámci týmu
- knihovna znovupoužitelných elementů
- …
S Webflow tak můžete web kompletně navrhnout, rozpohybovat jeho jednotlivé části, provázat všechny vytvořené stránky odkazy, opatřit hezkým vzhledem, udělat ho kompletně responsivní a rovnou ho zcela funkční nahrát na libovolný hosting.
Nástroj je to poměrně komplexní (možnostmi užití, ne složitostí ovládání) a s každou další aktualizací se jeho možnosti budou nejspíše dále rozšiřovat. Nemyslím si ale, že by v nejbližší době zcela nahradil např. Axure, jako hlavní nástroj pro návrh drátových modelů a interaktivních prototypů webů. Stejně tak na kvalitě výsledného kódu je ještě hodně co zlepšovat, takže ani dobří kodéři se ještě o místo nutně bát nemusí. Pokud se ale budeme bavit o běžných firemních webech, microsites, nebo osobních prezentacích, tak už teď vidím velký přínos Webflow minimálně pro návrh vizuální podoby webu. Uvedu nyní tři hlavní důvody, kvůli kterým by si každý grafik měl Webflow vyzkoušet.
1. Photoshop
Představte si, že musíte ve všech již vytvořených grafických návrzích změnit použité písmo Roboto na Verdanu. Nebo že chcete změnit zaoblení rohů u tlačítek ze 3 na 5 px. Pokud děláte grafiku ve Photoshopu, tak vám nezbývá, než zatnout zuby, otevřít si všechna PSD a začít upravovat jednotlivé prvky, hezky jeden po druhém. Photoshop totiž není na podobné věci vůbec stavěný, je to ostatně primárně software na úpravu fotografií. Nemá nic jako globální styly, knihovny grafických prvků, nebo možnost jednoduše kopírovat podobu jednoho prvku na druhý.
Ve Webflow jsou tyto změny otázkou několika vteřin. Kliknete na tlačítko ve vašem návrhu, změníte mu poloměr rohů a tato změna se ihned projeví v celém designu, na všech stránkách. Navíc tento program umí pracovat s SVG, ikonkovými fonty, umožnuje nahrávat obrázky v HiDPI rozlišení, takže máte návrh rovnou připravený pro displeje s vysokým rozlišením, nebo si zkrátka nemusíte dělat starosti, když chcete něco zvětšit či zmenšit bez ztráty kvality.
Zde musím dodat, že na úpravu fotografií a vytváření fotomontáží je Photoshop (případně libovolný bitmapový editor) stále potřeba. Stejně tak třeba Illustrator pro vytváření vektorových objektů a tvarů.
2. Responsive webdesign
Jeden návrh webu znamená v dnešní době další dva – pro tablet a mobil. Celkem tedy musíte připravit tři návrhy, má-li být grafika pro kodéra kompletní. Z důvodu času, nebo nízkého rozpočtu se ale často responsivní weby navrhují jen pro desktop a pro mobil jen nejnutnější stránky či jen dokonce jednotlivé prvky, jako navigace, patička apod. Zbytek pak musí z vytvořených návrhů dedukovat kodér, což zhusta nedopadá vůbec dobře. Pro klienta a jeho finální web. Pro uživatele toho webu bohužel také.
Ve Webflow jsou tyto změny částečně automatické, takže to, co navrhnete v desktop zobrazení, to se projeví i v tabletovém a mobilním. Jen si pohrajete s paddingy, malinko zmenšíte nadpis apod., aby návrh na menších zobrazovacích zařízeních vypadal přesně tak, jak si přejete vy. Soustředíte se tak na detaily, nemusíte přemýšlet o celku, aby vám to vůbec nějak drželo pohromadě.
3. Klienti
Pokud jste někdy prezentovali klientovi statický obrázek reprezentující jeho budoucí web, mohlo se vám někdy stát, že měl různé všetečné otázky, jako např.: „To pozadí bude takhle uřízlé, nebo bude přes celou obrazovku?“, „Jak bude vypadat tento box, když na něj kliknu, nebo přes něj přejedu myší?“ atd. Stalo se někdy, že si klient otevřel PNG v 90 % velikosti a hned sepisoval poznámky o malém písmu v návrhu a jeho špatné čitelnosti.
S Webflow vytváříte web, 1:1, v prohlížeči. Klient, zcela logicky, taky vidí rovnou web, 1:1, přímo ve svém prohlížeči!
Nejen klient, ale i všichni na projektu zainteresovaní s Webflow hned vidí výsledek, ne nějaký mezistav, který si mnozí ani neumí dát do souvislostí. Neděláte návrhy a někde bokem hover stavy. Nepopisujete v mailu či dodávané dokumentaci chování toho či onoho elementu webu. Nemusíte popisovat kodérovi, že tady se vysune tohle a že tady má být 20 a ne 10 pixelů mezera. Jednoduše to navrhnete, vyexportujete, pošlete odkaz, necháte si zaslat připomínky.
Příležitost pro grafiky
Vše samozřejmě není tak snadné, jak se s každou novou technologií může zprvu zdát. Každý nový nástroj samozřejmě vyžaduje, aby se ho obsluha naučila bezchybně ovládat a aby jej hlavně dokázala začlenit do svého lety prověřeného pracovního procesu.
I když je totiž Webflow nástroj hlavně „klikací“, tak se v něm bez základních znalostí kodérského řemesla dobrého výsledku nedoberete. Grafik v něm navrhující musí třeba vědět, jaký je rozdíl mezi paddingem a marginem, musí dbát na logické pojmenování CSS tříd (jméno nově vytvořeného elementu), musí znát problematiku float prvků, měl by rozeznávat inline a block elementy atd.
Grafik se tady stává zároveň kodérem, ale i interakčním designerem… ne, prostě se stává z kreslíře designerem. Web designerem!
Alternativy k Webflow:
Jinak Webflow nabízí 14 denní trial i free plan, takže neváhejte a zkuste na vlastní kůži!