Otevřete e-shop a na úvodní stránce vidíte banner, který má jinou barevnost než produktové karty. Kategorie používá fotografii v jiném stylu, newsletter jiný typ ilustrace a sezónní kampaň přidá ještě třetí sadu barev. Každý jednotlivý obraz může být povedený. Dohromady ale obchod působí, jako by ho skládalo několik různých značek.
AI může pomoci připravit více bannerů, kolekce produktových scén i sezónní varianty rychleji. U e-shopu je ale potřeba udržet dvě věci zároveň: vizuální nápad a přesnou informaci o tom, co zákazník skutečně kupuje.
V tomto díle si ukážeme, jak vytvořit jednoduchý vizuální systém pro e-shop, jak z jednoho zdroje připravit více komponent a jak kontrolovat, aby AI nezměnila produkt, cenu nebo obchodní sdělení.
E-shop není galerie jednotlivých obrázků
Každý vizuál v e-shopu má své místo v nákupní cestě. Hlavní banner má přitáhnout pozornost a orientovat. Kategoriový banner má vysvětlit výběr. Produktová karta má podpořit rychlé porovnání. Detail produktu má odstranit nejistotu.
Stejný obraz proto nemůže dobře zastat všechny úlohy. Pro začátek si rozdělte e-shop na několik vrstev:
- Úvodní plocha: značka, hlavní nabídka nebo aktuální kampaň.
- Kategorie: společný motiv kolekce a rychlé vysvětlení, pro koho je určena.
- Produktová karta: jasný, konzistentní náhled produktu bez zbytečné dekorace.
- Detail produktu: přesné fotografie, detaily, použití a případně doplňková vizualizace.
- Kampaň: sezónní nebo obchodní motiv s jasným sdělením a návazností na stránku.
Než začnete generovat, napište si, co má každá vrstva vyřešit. Pomůže vám to zabránit situaci, kdy se AI snaží udělat z produktové karty reklamní plakát nebo z hero banneru technický katalog.
Vytvořte si e-shopový vizuální předpis
Vizuální předpis nemusí být velký brand manuál. Pro práci s AI stačí jedna stránka, kde popíšete opakující se pravidla:
- hlavní a doplňkové barvy,
- poměr barevných ploch,
- typ pozadí a světla,
- velikost a pozici produktu v obrazu,
- přípustné rekvizity,
- typ stínu a kontaktu s podkladem,
- zakázané prvky a efekty.
Uveďte také příklady: „produkt má být vždy dobře viditelný“, „pozadí může být sezónní, ale nemá soutěžit s výrobkem“, „nepoužívat falešný text na obalu“, „ve všech bannerech ponechat volné místo pro nadpis vpravo“.
Pravidla formulujte tak, aby je dokázal použít i někdo další. Věta „ať to vypadá hezky“ nepomůže. Věta „měkké světlo, tlumené pozadí, jeden bordó akcent a dostatek prostoru kolem produktu“ už ano.
Jedna kolekce, více komponent
Produktová kolekce je dobrý základ pro celý e-shop. Z jednoho promyšleného obrazového směru můžete připravit:
- hlavní banner s více produkty,
- kategoriový obraz s atmosférou,
- samostatné produktové karty,
- čtvercové obrazy pro sociální sítě,
- sezónní variantu s omezenými dekoracemi.
Výhodou není jen rychlejší výroba. Když používáte stejný zdrojový směr, zákazník snáz pozná, že jednotlivé obrázky patří k sobě. E-shop působí klidněji a výběr je méně náročný.
Prompt pro hlavní e-shopový banner
Vytvoř široký hero banner pro e-shop s kolekcí [doplňte kolekci]. Použij vizuální pravidla značky: [doplňte barvy, světlo, materiál a atmosféru]. Produkty musí zůstat přesné, rozpoznatelné a dobře oddělené od pozadí. Nech na [levé/pravé] straně klidný prostor pro nadpis, krátký popis a tlačítko. Banner má působit jako jeden celek, ne jako koláž. Nevkládej žádný text, logo, cenu ani vymyšlenou vlastnost produktu. Připrav kompozici vhodnou pro desktop i pozdější mobilní ořez.
Pro produktovou kartu použijte jiné zadání:
Vytvoř čistý produktový náhled stejné kolekce pro kartu e-shopu. Zachovej přesný tvar, proporce, barvu, materiál a všechny důležité detaily produktu. Použij neutrální pozadí, měkký stín a dostatek okraje kolem objektu. Obraz musí být čitelný ve čtvercovém ořezu a všechny produkty v sadě musí mít stejnou měřítkovou logiku. Nevkládej text ani logo.
Rozdíl mezi oběma prompty je důležitý. Banner prodává atmosféru a kolekci. Karta podporuje porovnání a rychlé rozpoznání produktu.
Produktová karta musí být předvídatelná
Na výpisu kategorie zákazník porovnává více produktů vedle sebe. Pokud je jeden výrobek malý, druhý vyplňuje celý rámeček a třetí má úplně jiné pozadí, porovnání se ztíží.
U produktových karet stanovte:
- stejný poměr stran,
- stejnou přibližnou velikost produktu v rámečku,
- stejnou barvu nebo typ pozadí,
- stejný směr světla a stínu,
- pravidlo pro produkty s více částmi.
U produktů, které se výrazně liší velikostí, nemusí být možné použít stejnou vizuální měřítkovou logiku. V takovém případě zákazníkovi pomozte rozměrem, měřítkovou fotografií nebo jasným popisem. AI nesmí velikost jen odhadnout.
Sezónní kampaň bez ztráty značky
Sezónní kampaň nemusí znamenat, že změníte celý vizuální jazyk e-shopu. Stačí definovat, co se může změnit a co zůstává stabilní.
Stabilní prvky: typografie, hlavní barva, proporce produktu, styl ikon, umístění loga, velikost tlačítka a pravidla pro text.
Proměnlivé prvky: drobné rekvizity, světlo, přírodní motivy, sezónní akcent a nálada pozadí.
Například jarní varianta může přidat jemné větvičky a světlejší pozadí. Zimní varianta může pracovat s tmavším modrým tónem a texturou. Pokud ale každá sezóna použije úplně jinou kompozici, barvu a styl ilustrace, zákazník přestane poznávat, že jde o stejný obchod.
Text, cena a tlačítko patří mimo obraz
AI může navrhnout kompozici s místem pro text, ale obchodní informace vkládejte až v e-shopu nebo v kontrolovaném editoru. Cena, sleva, dostupnost, termín akce a CTA musí být přesné, dostupné pro vyhledávače a snadno upravitelné.
U banneru si proto při zadání rezervujte prostor pro:
- krátký nadpis,
- jednu podpůrnou větu,
- jedno hlavní tlačítko,
- případně informaci o platnosti akce.
Čím více textu vložíte do obrazu, tím hůře se banner upravuje pro mobil, překlad nebo změnu ceny. Obraz má nabídku podpořit, ne se stát jejím jediným nosičem.
Kontrola pravdivosti v e-shopu
Produkt
Porovnejte tvar, barvu, materiál, počet kusů, víčko, zapínání a další detaily s reálným produktem. U variant se ujistěte, že obraz odpovídá právě vybrané variantě.
Prostředí
Rekvizity nesmí vytvářet dojem, že jsou součástí balení, pokud nejsou. Pokud je obraz pouze atmosférickou ilustrací, označte jej tak, aby neklamal.
Měřítko
Velikost produktu v obrazu musí odpovídat skutečnosti nebo být doplněna přesným rozměrem. Zvlášť opatrní buďte u nábytku, oblečení, doplňků a produktů, které se posuzují podle velikosti.
Obchodní sdělení
AI nesmí změnit význam akce, doplnit neexistující vlastnost nebo vytvořit falešný důkaz. Zkontrolujte také, zda obraz neukazuje jiný počet kusů, jiný typ balení nebo jinou barevnou variantu.
Výkon a přístupnost
E-shop může obsahovat desítky obrazů. Každý zbytečně velký soubor zpomaluje procházení a může zvýšit odchod zákazníka. Generované PNG proto před nahráním optimalizujte, používejte vhodný WebP nebo AVIF, nastavte rozměry a připravte menší varianty pro mobil.
U každého důležitého obrázku doplňte alternativní text. Produktová karta by měla obsahovat název a podstatnou informaci o produktu. Dekorativní pozadí může mít prázdný alternativní text, pokud nepřidává význam.
Nezapomeňte, že banner s textem jen v obrázku může být problém pro mobil, překlad i přístupnost. Nadpis a CTA držte v HTML, kde se dají upravovat a číst.
Praktické cvičení: vytvořte systém pro jednu kolekci
Vyberte jednu reálnou produktovou kolekci a připravte si:
- jeden vizuální předpis na půl stránky,
- jednu produktovou kartu,
- jeden kategoriový banner,
- jeden hero banner,
- jednu sezónní variantu.
Všechny výstupy zobrazte vedle sebe. Kontrolujte, zda mají společné světlo, pozadí, měřítko a barvy. Potom zkontrolujte samotné produkty bez okolní dekorace. Pokud produkt není konzistentní, vraťte se k referenční fotografii a nejdříve opravte zdroj.
Rychlý checklist
- Má každý vizuál jasnou úlohu v nákupní cestě?
- Existuje krátký vizuální předpis pro celou kolekci?
- Jsou produktové karty porovnatelné?
- Odpovídají produkty skutečnému tvaru, barvě, velikosti a materiálu?
- Nejsou rekvizity zaměnitelné za součást balení?
- Je text, cena a CTA vložené mimo obrázek?
- Má sezónní varianta stále stejnou identitu značky?
- Je obrázek optimalizovaný, přístupný a otestovaný na mobilu?
Malý kvíz
1. Co má být stejné u produktových karet?
A) Poměr stran, měřítko, světlo a způsob zobrazení produktu. B) Všechny rekvizity. C) Jen barva tlačítka.
2. Co se může v sezónní kampani měnit?
A) Skutečná velikost produktu. B) Atmosféra, drobné rekvizity a akcenty při zachování značky. C) Cena přímo v obrázku.
3. Kam patří cena a důležité obchodní sdělení?
A) Do generovaného obrazu. B) Do upravitelného textu e-shopu. C) Nikam.
Správné odpovědi: 1A, 2B, 3B.
Závěr: e-shop potřebuje klidný systém
AI může e-shopu pomoci připravit více vizuálů bez toho, aby každý nový banner vznikal od začátku. Nejdříve ale potřebujete systém: jasnou roli jednotlivých komponent, vizuální předpis, referenční produkty a kontrolu toho, co obraz zákazníkovi slibuje.
Začněte jednou kolekcí, ne celým katalogem. Připravte kartu, banner a jednu sezónní variantu. Pokud vedle sebe vypadají jako součást stejného obchodu a produkt zůstává pravdivý, máte základ, který lze rozšířit.
V dalším díle se podíváme na AI, retuš a úpravy existujících fotografií: kdy má smysl odstranit pozadí, změnit světlo nebo připravit variantu a kdy už zásah mění realitu příliš.