Konzistence je víc než kreativita
Web s jednou výbornou ilustrací a devíti, které vizuálně nesedí, působí chaoticky. Portál getillustrations.com, který dodává ilustrace pro SaaS produkty, tuto zkušenost shrnuje jednoduše: deset solidních ilustrací v jednotném stylu buduje důvěru lépe než jedna skvělá obklopená vizuálním šumem.
Proč to platí dvojnásob u SaaS webů? Protože softwarový produkt je nehmotný. Zákazník nemůže sáhnout na krabici, nemůže si prohlédnout materiál. Ilustrace jsou jediný nástroj, kterým SaaS web komunikuje abstraktní koncepty: bezpečnost dat, rychlost zpracování, automatizaci workflow. Každá ilustrace na stránce by měla odpovídat na jednu otázku: „Co mi tento produkt přinese?" Pokud ji můžete odebrat bez ztráty informace, je to dekorace.
Tento průvodce pokrývá výběr stylu, budování systému a technickou implementaci. Pokud řešíte vizuální identitu obecně nebo zakázkové ilustrace mimo kontext SaaS produktu, začněte tam.
Šest ilustračních stylů pro SaaS v 2026
Portál getillustrations.com identifikuje šest stylů, které se na SaaS webech v 2026 opakují. Každý funguje pro jiný typ produktu a jiné publikum.
Tactile Tech napodobuje fyzické materiály: papír, textury, emboss efekty. Hodí se pro produkty, které chtějí působit hmatatelně a lidsky, třeba projektové nástroje nebo CRM systémy.
Blueprint pracuje s monolineárními ikonami, technickými gridy a schematickými diagramy. Je to signál preciznosti pro technické publikum. Vývojáři a inženýři čtou blueprint styl jako důkaz, že tým za produktem dbá na detail.
Spot ilustrace jsou malé, kontextové vizuály u jednotlivých features. Fungují jako vizuální „odpočívadla", která zvyšují zapamatovatelnost sdělení. Hodí se pro každou fázi SaaS produktu.
Abstract a surreal vizuály sázejí na metaforu místo doslovnosti. Datový sklad jako krystalická struktura, API jako propojené planety. Silné pro produkty, které řeší těžko zobrazitelné problémy.
High-contrast 3D využívá clay-morphic elementy a high-gloss objekty. Signalizuje prémiovost, ale pozor na velikost souborů; 3D vizuály snadno narostou na stovky kilobajtů.
Character-driven ilustrace staví na opakujících se postavách. Postava na webu, v produktu, v emailech, na sociálních sítích buduje narativní kontinuitu a brand recall. Nejlépe funguje pro consumer-facing SaaS, HR nástroje, vzdělávací platformy nebo komunitní produkty.
Framework: styl podle fáze produktu
Ne každý SaaS je na stejném místě. Getillustrations.com nabízí jednoduchý framework, který propojuje fázi produktu s vhodným vizuálním jazykem.
Early stage (pre-seed, seed, první zákazníci): Spot ilustrace a minimální linka. Rychle vyrobitelné, levné na iteraci. Když se produkt každý měsíc mění, nepotřebujete investovat do 3D systému, který za čtvrt roku přepracujete.
Growth (product-market fit, škálování): Tactile tech a character-driven přístup. Produkt má stabilní positioning, investice do rozpoznatelného vizuálu se začíná vracet přes opakovaný brand recall.
Enterprise (etablovaný produkt, stovky zákazníků): 3D vizuály, blueprint systém, kompletní ilustrační knihovna. V této fázi ilustrace nejsou marketingový výdaj, ale součást produktové infrastruktury.
Praktický test: pokud někdo uvidí vaši ilustraci na LinkedIn bez kontextu webu, pozná okamžitě vaši značku? Pokud ne, máte recognition problém, který se s růstem produktu jen prohlubuje.
Spot ilustrace: systém, ne jednotlivé obrázky
Spot ilustrační systém počítá s 5–8 core features produktu. Ke každé patří jedna ilustrace, ale všechny sdílejí vizuální pravidla: tloušťku linky, barevnou paletu, úroveň detailu a proporce.
Proč systém? Protože SaaS web není statický. Přibývají features, mění se pricing stránka, vznikají landing pages pro kampaně. Bez definovaných pravidel každý nový vizuál vypadá trochu jinak a celkový dojem se rozpadá.
Minimální definice ilustračního systému obsahuje:
- Stroke width (tloušťka linky): jednotná napříč všemi ilustracemi, například 1,5 pt nebo 2 pt.
- Barevná paleta: maximálně 3–4 barvy plus neutrály. Barvy vycházejí z brand identity.
- Detail level: kolik detailů má jedna ilustrace. Jednoduchá linka s 10 uzlovými body, nebo bohatší kresba se stínováním?
- Proporce a grid: postavy a objekty sedí na stejném gridu, aby vedle sebe nepůsobily jako z jiného světa.
- Prostor: definovaný padding a clear space kolem každé ilustrace.
Pokud stavíte design systém, ilustrační pravidla by měla být jeho součástí.
Ikony jako rozšíření ilustračního jazyka
Portál author.envato.com mapuje devět icon trendů pro 2026: soft 3D, hyper-minimální linka, retrofuturismus, mascot icons, micro-ilustrované ikony, variable icons, bold geometric, multi-material a animované ikony.
Pro SaaS produkty jsou nejrelevantnější tři z nich.
Variable icons reagují na kontext: mění se podle stavu (aktivní/neaktivní), role uživatele nebo tématu. Tento trend roste s adaptivními UI systémy, kde jeden ikon potřebuje fungovat v desítkách kontextů.
Mascot icons kombinují funkčnost ikonografie s brand personalitou. Návrat maskotů patří mezi top grafické trendy 2026 (pchmck.com) a promítá se i do ikonografie. Fungují nejlépe pro produkty, které chtějí působit přístupně.
Micro-ilustrované ikony rozmazávají hranici mezi ikonou a ilustrací. Obsahují víc detailu než klasická ikona, ale zachovávají funkčnost v malých rozměrech. Hodí se pro prázdné stavy, onboarding průvodce nebo feature karty.
Pravidlo konzistence platí u ikon ještě přísněji než u ilustrací. Deset ikon v jednotném stylu (stejný stroke, stejné zakulacení rohů, stejná optická váha) drží vizuální jazyk pohromadě.
Technická implementace: SVG a performance
SVG je pro SaaS web standard. Škálovatelný, lehký, stylable přes CSS. U ilustrací above the fold (nad přehybem stránky) doporučuje getillustrations.com inline SVG přímo v HTML, které eliminuje render-blocking requesty.
Tři pravidla pro implementaci:
Inline critical SVG. Hero ilustrace a feature ikony, které uživatel vidí jako první, patří přímo do HTML. Žádný externí request, žádné blikání při načítání.
Lazy load zbytek. Ilustrace pod přehybem stránky načítejte lazy loadem. Moderní prohlížeče podporují `loading="lazy"` na `<img>` a Intersection Observer API pro pokročilejší scénáře.
Optimalizace velikosti. SVG soubory z Illustratoru nebo Figmy obsahují metadata, prázdné skupiny a zbytečné atributy. Nástroj SVGO je odstraní a typicky zmenší soubor o 30–60 %. U 3D ilustrací ve formátu PNG nebo WebP komprimujte přes sharp nebo squoosh na rozumnou velikost (pod 100 kB na ilustraci).
Cenový rozpad: custom, stock, AI
Tři cesty k ilustracím na SaaS webu, každá s jinými náklady a omezeními.
Custom ilustrace jsou nejdražší, ale unikátní. Podle cueballcreatives.com (2026) stojí jednoduchá linková ilustrace $50–150, character nebo maskot $200–600 a brandová ilustrace $300–1 200. In-house ilustrátor vyjde průměrně na $4 000 měsíčně. Ilustrační subscription služby (Undraw, getillustrations.com) nabízejí plány za $399–999 měsíčně.
Stock fotografie jsou řádově levnější. Shutterstock nabízí 750 snímků měsíčně za 3 911 Kč, Depositphotos 30 snímků za 725 Kč. Jenže stock fotky nepodporují rozpoznatelnost značky a těžko komunikují abstraktní koncepty.
AI-generované vizuály jsou cenově nejdostupnější: FLUX.2 stojí $0,03 za megapixel, Nano Banana Pro $0,134 za obrázek v rozlišení 1K (aifreeapi.com, 2026). Ale s omezeními. AI modely nedokáží udržet vizuální konzistenci napříč desítkami ilustrací bez lidského kurátorství. A v Česku AI výstupy nemají autorskoprávní ochranu: Městský soud v Praze (sp. zn. 10 C 13/2023) rozhodl, že prompt je myšlenka, ne tvůrčí akt ve smyslu §2 odst. 6 autorského zákona. Právní stav se v jednotlivých zemích liší; čínský soud Li v. Liu naopak copyright AI výstupu přiznal.
Nejefektivnější týmy v 2026 kombinují přístupy: AI pro explorační fázi a rychlou ideaci, lidského ilustrátora pro finální systém a brand-specifické úpravy.
Jak začít: checklist pro první iteraci
- Sepište seznam features. Které funkce produktu potřebují vizuální podporu? Většinou jich je 5–8.
- Vyberte styl podle fáze. Early stage: spot ilustrace. Growth: tactile tech nebo characters. Enterprise: 3D nebo blueprint.
- Definujte vizuální pravidla. Stroke width, paleta, detail level, proporce. Zapište je do design systému.
- Vyrobte první sadu. 5–8 spot ilustrací + hero vizuál + 2–3 prázdné stavy. Celkem 10–12 kusů pro MVP.
- Implementujte jako SVG. Inline critical above the fold, lazy load zbytek. Optimalizujte přes SVGO.
- Testujte. A/B test hero sekce (ilustrace vs. product screenshot) rozhodne lépe než preference designéra. Sledujte konverzní poměr, ne jen estetický dojem.
- Iterujte. Ilustrační systém roste s produktem. Když přibude feature, přibude ilustrace ve stejném stylu.
Výsledek je SaaS web, kde vizuální jazyk podporuje produkt, buduje rozpoznatelnost a pomáhá konvertovat návštěvníky na uživatele.
