3 věci, které by měl každý CEO a CTO zvážit při designu webové aplikace

Skládáte webovou aplikaci z hotového designového systému či frameworku? Nebo spolupracujete s designérem a navrhujete ji na míru? Zjistěte, co je lepší…

Možná vyvíjíte webovou aplikaci, která nabrala vítr do plachet a je potřeba ji posunout na vyšší úroveň…

Možná se na samotný vývoj teprve připravujete?

V obou případech stojíte před rozhodnutím, jestli použít hotový designový systém či framework nebo oslovit designéra, který vám pomůže s designem na míru. Pojďme si říct, jaké jsou mezi těmito cestami rozdíly…

Dozvíte se:

1. Jaké jsou PRO a PROTI při použití hotového designového systému.
2. Jaké jsou PRO a PROTI při návrhu webové aplikace na míru.
3. Jak se správně rozhodnout? Použít hotový designový systém nebo najmout designéra?

✨ BONUS: Na konci článku najdete TOP 4 seznamy nejznámějších designových systémů, knihoven a frameworků.

(Krátce a stručně) co je to designový systém?

Za designový systém se považuje jakýsi souhrn principů, vzorů, pravidel, postupů a omezení, které se využívají při návrhu webové aplikace.

Díky souboru jasně definovaných opakovaně použitelných komponent se sjednocuje a urychluje vývoj. Designový systém je vyšší pojem. Měl by fungovat v rámci celé organizace a netýká se pouze vývoje, ale i tónu komunikace.

Pro naše zjednodušení si však pod pojmem „designový systém“ představme grafickou knihovnu komponent, styleguide, návrhové vzory nebo vývojářské front-end frameworky.

Designový systém si můžete vytvořit vlastní a nebo pracovat s hotovým, který zpracovala jiná společnost pro své potřeby.

📦 Designový systém či framework

Již hotový designový systém je dobré použít, pokud je webová aplikace v rané fázi a potřebujete zajistit flexibilní vývoj na úkor kvality.

PRO

• ✅ Můžete si vybrat z mnoha hotových designových systémů (na konci článku najdete bonus — seznamy s nejznámějšími designovými systémy).
• ✅ Webovou aplikaci tvoříte tak, že vybíráte z hotových komponent a ty skládáte jako puzzle.
• ✅ Webovou aplikaci „zvládne“ tvořit samotný vývojář (ne vždy to však zvládne udělat tak, aby výsledek vypadal dobře).
• ✅ Vývoj webové aplikace je rychlejší, protože chybí mezičlánek designéra.

PROTI

• ❌ Cizí designový systém obsahuje spoustu definic, ve kterých se snadno ztratíte. Přijde-li pak nový člověk k projektu, bude zmatený a potrvá mu dlouho, než se v systému zorientuje. Všechny části hotového designového systému pravděpodobně nevyužijete. Zbytečně pak budete mít ve znalostní bázi mnoho informací.
• ❌ Je potřeba si uvědomit, že ne vždy designové systémy vznikají cíleně jako produkt. Společnosti pracovaly nejprve na svých projektech a tvořily svoje designové systémy pro vlastní potřeby. Pouze je pak zpřístupnily veřejnosti. Každý projekt i ten váš může mít úplně jiné potřeby.
• ❌ Při použití jednoho designového systému jste odkázáni pouze na něj. Co když budete potřebovat vytvořit vlastní komponenty na míru?
• ❌ Pokud se rozhodnete cizí designový systém rozšířit, je velká šance, že to neuděláte bez designéra správně. Ve webové aplikaci vám začnou vznikat odchylky a celá aplikace bude působit rozházeně a neprofesionálně. Je to jako přilepovat věci lepicí páskou.
• ❌ Uvědomte si, že ani CEO, ani CTO, ani programátor nepřemýšlí jako designér. Vývoj aplikace svépomoci využitím předpřipraveného designového systému přináší různé nástrahy. Oproti tomu designér nejenže umí doladit návrh na míru tak, aby vypadal vizuálně správně, ale navíc přemýšlí nad aplikací v očích uživatele, aby se mu co nejsnadněji používala.

✍️ Design na míru

Design na míru je správná volba, pokud to myslíte s webovou aplikací vážně. Je to vhodné řešení v případě, že je aplikace zajetá nebo je minimálně její funkčnost ověřená. Jednoduše, pokud víte, že bude prosperovat, můžete nad designem na míru začít uvažovat.

PRO

• ✅ Při tvorbě návrhu na míru je výhodou to, že navrhnete pouze části, které budete v rámci webové aplikace potřebovat. Nemusí se vytvářet komponenty, které vývojáři vůbec nepoužijí. Celý projekt se tak stane čistší a přehlednější. Postupně vám začne růst vlastní designový systém.
• ✅ Designér má zkušené oko. Při kompletním návrhu webové aplikace je každá obrazovka vizuálně správně a vše sedí na svém místě tak, jak má.
• ✅ Designér tvoří každý detail uživatelského rozhraní. Z vizuálního pohledu řeší barvy, typografii, hranice, mezery, rámečky a boxy, stínování a mnoho dalších faktorů. Může doladit místa, která vyžadují osobní přístup. Jen tak bude vypadat uživatelské rozhraní opravdu dobře a získá „prémiový“ šmrnc.
• ✅ Designér má větší nadhled. Pomůže vám udělat aplikaci jednoduchou, funkční a pro uživatele použitelnou a přívětivou. Když se uživateli bude dobře používat, rád za ni zaplatí.
• ✅ Můžete použít libovolné písmo. Pokud v rámci značky pracujete s vlastním písmem, je design na míru vhodnější, protože designér celý návrh přizpůsobí písmu. Každé písmo je jiné, jinak tvarované a chová se jinak. Pokud byste vzali již existující designový systém, který pracuje s písmem X a vy byste ho pouze zaměnili za písmo Y, může se stát, že celý návrh doslova rozbijete.
• ✅ Pokud tvoříte design na míru, můžete do něj otisknout trochu originality a tón značky. Návrh nemusí působit tak tuctově narozdíl od použití designového systému.
• ✅ Dnešní designér vám navrhne webovou aplikaci v moderních nástrojích, jako je třeba Figma, což je grafický editor, ve kterém se návrh nejen zpracovává, ale mají k němu přístup i vývojáři. Ti si mohou při kódování aplikace rovnou veškeré hodnoty ze souboru vytáhnout, což je pro ně velmi pohodlné a odpadají jim starosti s předáváním návrhu. Předání návrhů k vývoji (hands-off) je velmi snadné a efektivní.
• ✅ Designér je při vývoji vždy po ruce. Vývojáři obecně nemají cit a často jim unikají detaily. Je dobré, když mají někoho po ruce, kdo jim s realizací pomůže a výstup po nich zkontroluje, aby byla jistota, že aplikaci nakódovali správně.
• ✅ Pokud vám designér připravil vlastní designový systém a udal vizuální podobu, může vám navíc pomoct ve stejném duchu s přípravou dalších digitálních produktů, jako jsou landing pages, jiné související webové stránky, reklamní bannery, příspěvky na sociální sítě, dokumenty apod. Tím budete mít zajištěno, že veškerá komunikace se zákazníky bude jednotná.

PROTI

• ❌ Prvním záporem, proč zvolit design na míru je samozřejmě nutnost poptat designéra, což je náklad navíc.
• ❌ Je potřeba počítat s delším vývojem webové aplikace, protože designér musí vytvořit návrh a vývojáři jej zrealizovat.
• ❌ Další nevýhodou je, že se se často vývojáři odchylují od dodaných návrhů, a proto je potřeba kontrolovat, zda postupují správně.

3 věci, které byste měli při návrhu webové aplikace zohlednit

1 — Je webová aplikace prosperující nebo zatím ověřujete nápad?

Webové aplikace existují v různých fázích životního cyklu a je dobré se zamyslet nad její budoucností.

💡 1.1 Ověřování nápadu, prototypování, testování

V případě, že si pohráváte s myšlenkou a máte nápad na webovou aplikaci, tvoříte prototyp nebo MVP (Minimum viable product) a testujete, zda je vůbec schopná se uživit, je určitě lepší pro její vývoj použít připravený designový systém. Změny při vývoji jsou rychlejší a méně nákladnější. Je to však za cenu kompromisního řešení. Na kvalitě designu se to pravděpodobně projeví.

🚀 1.2 Vzkvétající webová aplikace

Naopak pokud už máte fázi testování za sebou a víte, že je vaše webová aplikace úspěšná, má dobré vyhlídky a dokáže si na sebe vydělat, je lepší jít cestou designu na míru. Aplikace je ustálená a víte, jaké funkcionality a komponenty bude obsahovat. Můžete si dovolit celé uživatelské rozhraní navrhnout na zelené louce a do detailu vyladit.

2 — Máte vyjasněné role ve vývojářském týmu?

V každém projektu fungují jiné procesy. Záleží, kdo a kolik lidí je v týmu a kdo na vývoji webové aplikaci pracuje. Jde o „one man show“? Máte 2–3 lidi v týmu? Nebo na vývoji pracuje celá řada profesionálů?

Musíte si ujasnit, jaké role členové týmu zastávají. Pokud máte v týmu pouze vývojáře a zatím jste nezvažovali zapojit designéra, pravděpodobně sáhnete po hotovém designovém systému či frameworku.

Pokud jste ve fázi, kdy designéra zvažujete a chcete si nechat aplikaci navrhnout na míru, je důležité, abyste práci opravdu delegovali na něj. Stává se totiž, že designér dodá část výstupu a zbytek uživatelského rozhraní pak dotvoří samotní vývojáři (v rámci šetření nákladů). Ti však nemívají cit a celou aplikaci spíše degradují. V tom případě je lepší rovnou použít hotový designový systém.

Pozvěte designéra a nechte si webovou aplikaci navrhnout na míru pouze tehdy, myslíte-li to s návrhem vážně a máte jasně vymezené role. Jen tak získáte stoprocentní výsledek.

3 — Co více ulehčí vývoj? Design na míru nebo připravený designový systém?

Zamyslete se nad tím, jakým stylem budete na vývoji aplikace pracovat. Nedá se říct, jaký přístup je správný. Každému funguje něco jiného. Někdo má nastavené vodopádové procesy a někdo preferuje agilní přístup.

Je na vás, abyste se zamysleli a představili si, jestli pro vás bude lepší pracovat bez designéra a vystačíte si s kompromisním řešením v podobě hotového designového systému a nebo jestli naopak budete počítat s prací designéra, kterého do procesů vývoje začleníte.

Práce na vývoji webové aplikace musí být v rámci vašeho týmu efektivní.

• Vývoj s použitím hotového designového systému je sice flexibilnější a časově výhodnější, ale přináší jen kompromisní výsledky.
• Designér je sice lidský faktor a časový i finanční náklad navíc, ale jeho práce pomůže nejen vzhledu, ale celkovému fungování aplikace.

😍 Získejte ode mě špičkově vyladěný design na míru pro vaši webovou aplikaci

Co získáte?

• ✅ Perfektní nadčasovou grafiku. Na pixel přesnou a bez chyb.
• ✅ Systém. Celý návrh zpracuji ve Figma tak, aby práce byla co nejrychlejší a nejefektivnější. Vytvořím komponenty a vydám se DRY cestou.
• ✅ Jednoduchost. Pomohu vám webovou aplikaci maximálně zjednodušit a ulehčit uživatelům používat ji.
• ✅ Přehlednost. Navrhnu aplikaci tak, aby byla přehledná a správně strukturovaná.
• ✅ Mikro texty. Věnuj se i psaní textů. Texty jsou podceňovaná věc. Každé slovo (i to nenápadné v tlačítku) dokáže uživatele ovlivnit. Je dobré se zaměřit opravdu na každičký text v aplikaci a věnovat mu čas.

⬇⬇⬇

➡️ Podívejte se na můj web ⬅️ a napište mi třeba e-mail nebo zprávu do chatu. Design webových aplikací je moje specializace. Hrozně rád vám s designem pomohu. 👋

PS: Hledám tým (aktualizováno — 20. 9. 2021)

Rád bych pracoval dlouhodobě na jednom digitálním produktu. Na poloviční úvazek (4 hodiny denně). Svůj čas totiž dělím takto:

• 1/2 času nabízím dlouhodobému partnerovi jako člen týmu (aktuálně HLEDÁM!!!).
• 1/4 času věnuji krátkodobým a jednorázovým projektům pro partnery.
• 1/4 času věnuji vlastním projektům.

👋 Hledám perspektivní český tým, který vyvíjí webovou či mobilní aplikaci pro určitou službu nebo produkt. Rád bych se stal členem týmu jako designér, který bude mít vliv a slovo.

Víte o takovém týmu, kterému bych mohl pomoct vylepšit jejich web, e‑shop nebo aplikaci?

Nabízím:

• Spolehlivost a časovou flexibilitu.
• Oddanost projektu.
• Zkušenosti z grafického designu a UI designu s přesahem do UX.
• Přesah do copywritingu. Pomohu otextovat různá místa v rámci produktu.
• Ochotu tvořit reklamní bannery a příspěvky na sociální sítě.

Co bych za to chtěl?

• Práce na dálku. Sídlím v Olomouci. Jednou týdně jsem ochoten přijet do okolních měst (např. Brno).
• Dostat se mezi dobrý a přátelský tým, který nebude příliš „přemotivovaný“ všemožnými metodikami. Prostě lidskost. ❤️
• Fixní paušální ohodnocení. Dle domluvy. Pracuji s nižší sazbou než u jednorázových projektů. 🤗

Pokud přemýšlíte, že byste mě mohli vzít do svého týmu jako designéra, zkuste mi dát vědět a můžeme se o tom pobavit. Za pokus nic nedáte. Případně mě doporučte někomu, koho bych mohl zajímat. Děkuji! 🤝

➡️ Můj web: https://www.lukasaugusta.cz ⬅️

✨ BONUS

TOP 4 seznamy s nejznámějšími hotovými designovými systémy, frameworky a knihovnami s návrhovými vzory:

1. Mezi vývojáři známý a velmi rozsáhlý seznam designových systémů:
   https://github.com/alexpate/awesome-design-systems
2. Seznam designových systémů, který lze filtrovat podle různých parametrů:
   https://adele.uxpin.com
3. Seznam designových systémů, které jsou vytvořeny v rámci Figma komunity:
   https://www.designsystems.com/open-design-systems/
4. Seznam oblíbených CSS frameworků:
   https://2020.stateofcss.com/en-US/technologies/css-frameworks/

❤️ Pokud se vám článek líbí, budu rád, když pomůžete mně i dalším týmům, které tvoří webové aplikace, a podělíte se o článek i s nimi.

1. 🔗 Zkopírujte URL adresu článku,
2. vytvořte příspěvek na Facebook, LinkedIn nebo Twitter,
3. připojte odkaz na článek
4. a …sdílejte. 👏 Děkuji!

PS: 👏 Zatleskejte u článku, aby se dostal k více lidem. 😍

Lukáš Augusta
Web designér a UI/UX designér
https://www.lukasaugusta.cz
Tvořím https://www.designui.cz