Plusy a mínusy psaní odborných článků

Dneska vyšel na blogu Follow Bubble článek s názevm Plusy a mínusy Sketch 3.

Hned po jeho přečtení jsem si trochu ulevil na Twitteru s tím, že celý článek mi nedává vůbec žádný smysl. A hned se mě dva lidé ptali, co je na tom článku konkrétně špatného.

Kdyby se celý článek jmenoval třeba „Sketch aneb mé první seznámení“ a byl uveden na nějakém soukromém blogu, byl bych to celé přešel mávnutím ruky a dál se věnoval své práci.

Ale protože já ten článek nevidím jen jako špatný, ale dokonce za hrubě povrchní, zavádějící a hlavně nevhodný pro kohokoliv, kdo se právě o Sketchi tímto dozvěděl poprvé v životě, tak jsem se rozhodl krapet rozepsat.

Tak si to vezmeme hezky popořádku:

  1. Text tweetu, kvůli kterému jsem článek otevřel hlásal, že pro návrh mobilní (app) se Sketch nehodí. Samotný nadpis článku už ale nic takového neuvádí a je zde prosté „Plusy a mínusy Sketch 3“. Ok, stane se.
  2. Text článku se ale i dále v textu zmiňuje o nevhodnosti Sketche pro návrh mobilních aplikací. V čem je ale návrh mobilní aplikace jiný, než návrh webu, plakátu, či banneru? Nebo je Sketch sice nevhodný na mobilní aplikace, ale web si s ním navrhnout mohu? Co když chci Sketch na vektorové ilustrace? Půjde to? Samé otázky, ale kloudné odpovědi nikde.
  3. Výhod Sketche je v článku vypsáno celkem pět, nevýhody pak dvě. Čistě matematicky bych počítal, že dobré tři důvody navíc pro dobro Sketche. Ale přesto je vyznění a závěr článku jasné ne pro Sketch. Na nějaké zápory autor zapomněl? Nebo bylo prostě jen nutné hned teď a honem sepsat nějaký článek na firemní blog?
  4. Jako hlavní nevýhoda je uvedena nekompatibilta s PSD. Už pro tohle by stálo napsat rozsáhlou obhajobu. Tedy ne obhajobu Sketche, ale obhajobu svobodné volby designera, klienta, či kodéra, jakým způsobem si budou vyměňovat výsledky grafikovo snažení. PSD je totiž proprietární formát firmy Adobe a to znamená, že jej efektivně nikdo jiný s jiným software nemůže používat a jste nuceni být v područí jedné firmy, jednoho grafického software. A vezměte si třeba chudáka kodéra, co si musí platit měsíčně cca 1700 Kč za Creative Cloud jen kvůli Photoshopu. Není vám to blbý?
  5. Jako druhá nevýhoda pak v článku je, že ve Sketchi prý neuděláte žádný „designérský šperk“. Co je podle autora ten správný a jediný designerský šperk, že jej nemůžete vytvořit pomocí písma, čar, barev, tvarů, přechodů, ikonek, průhledností a dalších nástrojů a funkcí Sketche? Nemůže maskovat fotky a dělat retuše? Nemůže dělat fotomontáže? No jasně, od toho tu přece jsou nástroje pro úpravku fotek, ne nástroje pro návrh uživatelských rozhraní a grafiky. Třeba Photoshop je na to velmi dobrej :-)
  6. Podle mého nenahradí Sketch Photoshop a ani nemá takové ambice.“ Samozřejmě, že nemá a proto nechápu, proč ten článek vysvětlující nevýhody Sketche pro návrh mobilních aplikací vůbec vznikl. Photoshop je software pro úpravu fotografií, Sketch je zase software pro návrh uživatelských rozhraní (UI) a vektorové grafiky. To, že se Photoshop léta používal na návrh webů a všemožné grafiky je spíše omyl a z nouze ctnost, daná dřívější nulovou konkurencí na trhu. Jestli jste si všimli, webu už nedominují bitmapové obrázky, ale webové fonty, CSS tvary a SVG obrázky. Tedy datově nenáročné a velmi efektivně rozměrově škálovatelné křivkové výtvory.
  7. Tak jako tak, se mi v něm při tvorby mé appky pracovalo relativně dobře …“ Pochopil jsem správně, že je článek vydestilovaný z jednoho jediného návrhu mobilní aplikace? Důležitější ale asi je, že z toho má autor „… super pocit UI Product Designera v hrozně hustém startupu“.
  8. Dále je zde velmi odvážné tvrzení, že Comet vymaže Sketch z trhu. Nu, možné je vše (zdravíme Fireworks), ale celkové dění je okolo Sketche už hodně rozjeté, že by to bylo s podivem. Je pro něj k dispozici spousty kvalitních zdrojů nebo užitečných pluginů. Navíc kromě Sketche je tu i Affinity, jako další zástupce velmi kvalitních nástrojů pro návrh grafiky, webů i mobilních aplikací. To vše za velmi rozumnou jednorázovou cenu, oproti velmi drahému předplatnému Creative Cloud. Trh návrhářských nástrojů (znáte třeba Webflow?) tak konečně spěje k tolik potřebné pestrosti a větším možnostem výběru dle konkrétních potřeb projektu nebo preferencí designera.
  9. Sečteno podtrženo, práce ve Sketchi je spíš aktuální trend a přelomový software v rukou nemáme.“ zní další odvážné tvrzení. On právě Sketch je přelomový, jako žádný jiný grafický software za čtvrt století od první verze Photoshopu. A právě a jedině Sketch dokázal po letech spánku probudit již značně neinovativní Adobe a donutil je implementovat nové nástroje pro moderní návrh webů a aplikací. Například v článku zmiňované artboards. Do nedávna tu byl prostě jen Photoshop a nikdo se ani nedokázal představit něco jiného. Bylo pár odvážlivců, kteří i dříve navrhovali v Illustratoru, Gimpu, Fireworks, ale Photoshop a ukládání do PSD se bralo jako pomalu průmyslový standard.
  10. Poslední věc je čistě subjektivní a chápu, že co vadí mě, vyhovuje jinému. Jenže psát články na firemní blog ve stylu: „flatovou appku v něm neuděláte“ mi prostě trhá žilky v očích a kroutí prsty nad klávesnicí. Jo a taky to dá hezký desátý bod do mého seznamu.

Ne vážně. Svět se mění a ten digitální dvojnásob rychle. Co platilo léta letoucí, je za pár dní minulostí. Minulost byla bitmapová a pevně daná. Budoucnost je ve křivkách a flexibilitě. To první reprezentuje právě Photoshop a to druhé Sketch.

Můžete se nakonec podívat i na nedávno uveřejněnou studii jednoho z nejrespektovanějších designerů na světě, kde, mimo jiné, další designeři z celého světa hlasovali, v čem že nejradši navrhují uživatelská rozhraní.

Promigo – největší realitní portál ve Španělsku

Rozhodl jsem se svůj nový projekt průběžně popisovat nějakou záživnější formou. Asi tak, jako kdybych si sedl s nějakým kámošem na pivko a tam si s ním o tom nezávazně povídal. Tím snad budou mnohé technické detaily záživnější i pro lidi mimo svět webdesignu, stratupů a byznysu. No a mě, notorickému nepsavci, to snad půjde lépe od huby … pardon, od klávesnice!

 

Nazdar kámo, jak se daří?

Ále, mám se dobře, díky za optání. Jen zas poslední dobou nevím, kam dřív skočit. Makám teď pro jeden zajímavej startup a do toho si kutím i něco svého. Klasika.

 

Už zase? Neděláš každý měsíc nějaký nový projekt?

Znáš to, jak mám volný čas, začnu hned vymýšlet plány na ovládnutí světa :-) Poslední věc, kterou jsem s dalšími skvělými lidmi dal trochu do pohybu, je taková jakože freelance agentura. Pár prvních zakázek už máme za sebou, takže se brzy pochlubíme i nějakou tou společnou referencí.

Jinak prostě stále chci nějaký svůj vlastní projekt, startup, byznys, který, i když se budu věnovat svým klientům, bude generovat nějaké peníze. Ne nějak moc, ale aspoň tolik, aby až mě přemůže demence, bylo co odkázat dětem a manželce.

Takže vždy něco vymyslím, chvíli se tím zabývám, začnu pilovat detaily a … po střetu s realitou to zpravidla skončí někde v šuplíku. Tak začnu znova, vezmu další nápad a opět zkouším, kam až ho jsem schopen sám dostat.

 

Jaké oblasti se tvůj nový projekt bude věnovat?

Už přes rok bydlím ve Španělsku, které, jak známo, na tom není zrovna ekonomicky nejlépe. Jedna věc tu však stabilně vydělává mnoha lidem slušné peníze. Jsou to reality a všechno s nimi spojené. Od ostrahy objektů, po údržbu zahrady nebo bazénu. Od obchodů s vybavením domácnosti, po stavební firmy. No a tomu všemu pochopitelně kralují realitní kanceláře všeho druhu, které nemovitosti prodávají nebo pronajímají. V každé vísce na pobřeží najdete více realitních kanceláří, než v Čechách hospod! Proto to bude něco užitečného hlavně pro realitní kanceláře, které jediné jsou ochotni za něco platit.

 

To je hezký, ale můžeš být konkrétní?

No, mým snem je vybudovat opravdu komplexní all-in-one systém pro každou realitní kancelář v zemi. Prostě si představ, že jednu zrovna zakládáš, nebo ji naopak již máš. Co vše je k tomu potřeba? Kancelář, nějaký lidi, sehnat prvních pár klientů, znalosti místních zákonů se taky hodí. No a v dnešní době je to pak celá kupa digitálních věcí. Web (responsivní), aplikace (nativní a mobilní), systém (pro správu webu), další systém (pro správu klientů a poptávek), přehledy (manažerské) atd. Já bych k tomu rád přihodil nějaký ten marketing, SEO, grafické práce, poradenství v těch internetech a zabalil to do dnes velmi módního SaaS balíčku. S měsíční cenovkou za pár € by tomu neměl nikdo odolat :-)

 

Není zde již v oblasti realit na internetu velká konkurence?

Kdyby nebyla, značilo by to, že o danou oblast zájem není. Nějaká konkurence tu ale naštěstí je. Naštěstí pro mě pak celkem technologicky zaostalá a v mnoha ohledech dost povrchní. Myslím povrchní vzhledem k problémům, kterým tu realitní byznys denně čelí. Sám o sobě hovoří fakt, že oba zmníněné weby jsou pouze španělsky. Drtivá většina úspěšných realitek je však v rukou Angličanů, Němců, Holanďanů nebo třeba Francouzů. No a popravdě, nejen tyhle „detaily“ místním podnikatelům jaksi unikají.

 

Takže jsi si dělal nějaký průzkum trhu?

No jasně, to dělám vždy přece, jsem ten UXák, žeano! Ne, vážně. Tentokrát jsem to vzal celkem poctivě a kromě jiného jsem si osobně zašel do realitní kanceláře (Thanks, Marc!), kde jsem majitele řádně vyzpovídal. Prostě jsem se na rovinu optal, co ho trápí, jaké systémy používá, co by rád kde zlepšil. Byl velmi sdílný, takže jsem si odnesl plný notýsek poznámek. No a kromě toho tu už nějaký čas žiju a nemovitosti hledám co chvíli. Znám tedy celkem dobře místní realitní weby, (ne)zvyklosti realitních kanceláří a mám už slušný přehled o trhu jako takovém. Kde se co a za kolik dá koupit, nebo naopak prodat. Jo a jak tragické weby tu drtivá většina kanceláří má.

 

Mluvíš o all-in-one řešení, tak ho zkus hezky popsat?

To, co mám v hlavě (a částečně už Evernote, Axure i jinde), to je dost komplexní systém, který bude trvat nějaký čas vybudovat. To si tedy vyžádá jak peníze, tak lidskou sílu. No a já tomu zatím mohu věnovat jen svůj volný čas a nějaký drobný bokem, co zbydou po běžných výdajích. Proto jsem se rozhodl, že půjdu krok po krůčku. Udělám vše, co zvládnu sám a až tam, kde skončím, tak tam se porozhlédnu po pomoci.

Sám si udělám vše od výzkumu, validace obchodního modelu, až po prototypy, grafiku a funkční frontend. Umím se, aspoň do začátku, postarat i o propagaci, sociální média, onboarding nových klientů, testování a průběžnou validaci projektu na reálných uživatelích, obstarám snad i nějakou tu technickou podporu prvním zákazníkům.

Neumím naopak vůbec programovat, takže cokoliv končí v okně mého prohlížeče a vede kamsi dál na servery a ještě hlouběji do databází, to už bude muset obhospodařovávat někdo jiný.

 

Takže co bude ten první krok?

Aby dávalo smysl moje vysněné řešení, musím si nejprve získat důvěru samotných realitních kanceláří. Ukázat jim, že tu jsem, že pro ně něco dělám, že to umím dobře (lépe, než konkurence), že jim pomáhám s jejich moderními problémy v online světě. Jo, to jsem ani neřekl, že se tu dost lidí teprve učí používat dotykové mobilní telefony a e-mail?

Chci je taky mít hezky v kontaktech, aby, až jim napíšu mail, že mám pro ně to moje skvělé řešení, to nebyl jen tupý spam, ale už se tím reálně zabývali.

No, takže jim chci dát možnost zdarma propagovat svoje nemovitosti na mém portálu. Když to bude zdarma, tak to snad přitáhne dost inzerátů, abych si brzy mohl říkat, že mám největší realitní portál v zemi. Spousta inzerátů, spousta realitních kanceláří, se kterými budu v kontaktu.

Jo a taky budu mít vlastně hotovou první část celého systému. Export všech nemovitostí realitní kanceláře na největší realitní portál ve Španělsku. A pro ně pochopitelně zdarma, což už je myslím slušný marketingový tahák, hehe :-)

 

Zajímavý, ale jaký je ve free portálu business model? Nebo chceš vydělávat až potom, na tom svém celkovém řešení?

Idea zpočátku byla skutečně taková, že udělám něco zdarma a až do toho natáhnu lidi, přibalím další funkce a ty zpoplatním. Ale už jsem se mnohokrát s tímto přístupem spálil, tak jsem se snad i poučil.

Jde o to, že jsem se takhle například snažil rozchodit projekt na podporu grafiků a jejich klientů, ale zatím to na nějaké terno zrovna nevypadá. Vše je zdarma, dělám to ve svém volném čase, není jak platit programátora, aby tam ty placené funkce dodělal, zadarmo se do toho zpočátku nikomu dalšímu nechce atd.

Peníze tedy v projektu musí být od samotného počátku! Nebude-li portál vydělávat aspoň něco, nebudu rozjíždět ani ten zbytek. No a z každé vydělané koruny, pardon eura, půjde zpočátku vše jen do marketingu a rozvoje projektu. Jachty a vily až potom, to se ví.

 

Jsem nějakej zmatenej! Tak bude ten portál zdarma, nebo placenej?

Portál bude skutečně naprosto zdarma. Pro každého a s neomezeným počtem nahraných nemovitostí. Prodeje, dlouhodobé pronájmy, prázdninové vilky, zadáno přímým vlastníkem, stejně tak jako realitkou. Tím chci konkurovat známým a zaběhnutým portálům, které se sice tváří free, ale jen po omezenou dobu, nebo jen na omezený počet nemovitostí. Jsou tak, dle mě, někde na půl cesty.

Placené funkce tu pak budou jakýsi nadstandard, tedy známý freemium model. O jaké funkce se jedná, to se rozpovídám někdy příště. Klasicky nápadů je dost, ale k realizaci cesta dlouhá.

 

Ok, chytrej chlapec. Takže v jakém stádiu máš projekt momentálně?

Teď mám nějaký ten průzkum trhu, první validaci nápadu na potencionálních klientech, zjistil jsem si něco o konkurenci, mám stoh poznámek, nákresů, mindmap a diagramů, nějaké ty uživatelské scénáře. A začal jsem si připravovat wireframes, respektive plně interaktivní prototyp, abych to mohl dále testovat v reálném světě mezi běžnými lidmi a realitními makléři.

Cílem je tak do měsíce připravit vše potřebné, abych to mohl hrdě vystavit a sesbírat zpětnou odezvu, která mě pak, jak doufám, posune zase o kus dál.

 

Hmm, tak dneska už snad poslední otázka. Co ten blbej název? Promigo?!

Hele, to je jednoduchý. Property Amigo, chápeš?

 

Webflow – mějte design webu pod kontrolou

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!