Odkud profil bere data, od nejsilnějšího zdroje
Slabší zdroj doplní jen to, co silnější nechal prázdné, a stránka Značka ukazuje, ze kterého zdroje pochází každé pole.
| Zdroj | Co z něj Demander čte |
|---|---|
| Vaše ruční úpravy | Cokoli nastavíte na stránce Značka, má přednost před všemi zdroji, a každé pole můžete vrátit na hodnotu ze zdroje |
| Design systém | Design tokeny W3C a JSON z Tokens Studio; soubor nebo URL s CSS custom properties (globals.css, HSL hodnoty ze shadcn, Tailwind v4 @theme); publikované styly z Figmy a u tarifů Figma Enterprise i lokální proměnné; nahrané fonty (TTF, OTF, WOFF, WOFF2) a loga (SVG, PNG, JPEG, WebP) |
| Referenční obrázky | Vaše vlastní reklamy, brand manuály a snímky obrazovky (PNG, JPEG nebo WebP, každý do 10 MB, nejvýš 24 na pracovní prostor). Paleta se změří z pixelů a přiřadí se rolím. Se zapnutou AI vyčte vizuální model ze čtyř nejnovějších obrázků zaoblení rohů, styl tlačítek, hustotu, zarovnání, velikost písmen v nadpisech, charakter obrazového materiálu a písma; název fontu nikdy neodhaduje |
| Web | Načítá se při každém procházení produktu a pokaždé, když kliknete na Znovu načíst web: styly domovské stránky, vyhodnocené tak, jak je uplatňuje prohlížeč |
| Výchozí nastavení | Jednoduché a neutrální: bílá, téměř černá, ostré rohy, systémové bezpatkové písmo, žádné ozdoby |
Co čte z vašeho webu
-
Vzorky stránky
Domovská stránka se zredukuje na vzorky: tělo stránky, nadpisy h1 až h3, nejvýraznější tlačítka, karty, sekce, úvodní sekci (hero), záhlaví a odkaz v obsahu, každý se svými třídami a nadřazenými prvky.
-
Soubory stylů
Styly ze stejného webu, z hostingu webových builderů a z Google Fonts, včetně importů do hloubky dvou úrovní: nejvýš 12 souborů, každý do 1,5 MB a celkem do 4 MB, do 25 sekund, vše přes stejného zabezpečeného klienta, jakého používá crawler.
-
Zjednodušená kaskáda
Pro tyto vzorky se vyhodnotí specificita, dědičnost, proměnné s náhradními hodnotami, calc(), vrstvy, media queries a vnořování. Pravidla pro hover, focus a tmavý režim se nepočítají.
-
Barvy podle rolí
Z pojmenovaných custom properties, z pozadí a textu primárního tlačítka, z barev textu a pozadí stránky, barvy odkazů, theme-color a z toho, jak často se která barva objevuje. Každá role projde kontrolou kontrastu: text 4,5:1, tlumený text 3:1, text na primární barvě 3:1.
-
Písmo, tvary a rozvržení
Rodiny písma pro nadpisy a text s řezem, velikostí písmen, prostrkáním, výškou řádku a typografickou škálou; soubory fontů z @font-face nebo Google Fonts. Zaoblení a styl tlačítek (pozná i tlačítka ve tvaru pilulky), zaoblení a okraje karet, linky mezi sekcemi, stíny, vnitřní odsazení sekcí a zarovnání úvodní sekce.
-
Logo a obrázky
Inline SVG nebo obrázek v záhlaví, přednost má SVG. Obrázek pro Open Graph, obrázky z úvodní sekce a z popisu funkcí, každý zařazený jako fotografie, snímek obrazovky nebo ilustrace.
Pravidla, která dodržuje každá kreativa
-
01
Barvy podle rolí
Pozadí, plocha, text, tlumený text, primární barva, text na primární barvě, akcent a okraj. Každá barva textu má vůči ploše za sebou kontrast aspoň 4,5:1 a černá nebo bílá vyhoví vždy.
-
02
Tvary, jaké používá vaše značka
Značky s ostrými rohy zůstanou hranaté a tlačítka ve tvaru pilulky se objeví jen u značek, které je samy používají. Výzva k akci má styl vašich tlačítek a v obrázcích pro placenou reklamu na sociálních sítích se vynechá tam, kde platforma vykresluje vlastní tlačítko.
-
03
Ozdoby, jen pokud je používáte
Oddělovače a stíny se objeví jen tehdy, když je používá váš web. Žádné skvrny, kruhy, barevné pruhy ani ozdobné uvozovky a žádná slova navíc, která jste nenapsali.
-
04
Skutečné měření textu
Text se měří podle šířek glyfů fontu, kterým se vykresluje, a zalamuje se mezi slovy (u čínštiny a japonštiny mezi znaky). Než by se rozdělilo slovo, písmo se zmenší, a ke zkrácení textu dojde až v krajním případě.
-
05
Jen vaše obrázky
Pouze logo a obrázky z vašeho profilu nebo z toho, co jste nahráli. Z log ve formátu SVG se před vykreslením odstraní skripty a externí odkazy a tmavé logo na tmavé ploše dostane podklad.
Osm rozvržení
| Rozvržení | Co dělá |
|---|---|
| Editoriál | Velké písmo a velkorysé okraje |
| Plakát | Jedna věta přes celou plochu |
| Produkt | Dominuje váš snímek obrazovky nebo fotografie |
| Dělené | Obrázek a text, nebo dvě strany srovnání ve dvou barvách značky |
| Číslo | Jedno velké číslo |
| Reference | Citace v obyčejném písmu, bez ozdobných uvozovek |
| Seznam | Číslované nebo prosté body |
| Logo a minimum | Vaše logo a skoro nic dalšího |
Demander volí rozvržení podle obsahu (statistika dostane rozvržení Číslo, citace rozvržení Reference) a rysů vaší značky, v sadě kreativ jedné kampaně je obměňuje a nikdy nesáhne po takovém, které potřebuje obrázek nebo logo, jež nemáte. Slidy dokumentů a scény videí vědí, jestli jsou titulní, obsahovou, nebo závěrečnou stranou.
Fonty
K vykreslení je potřeba samotný soubor fontu. Demander ho vezme z vašich nahraných souborů (WOFF a WOFF2 dekóduje sám), z pravidel @font-face na vašem webu nebo z Google Fonts podle názvu rodiny písma. Pokud se nedá načíst nic, použije systémový font stejného typu (Liberation, DejaVu nebo Noto) a stránka Značka na to upozorní. Fonty slouží jen k vykreslení vašich vlastních kreativ.
Každá změna profilu zvýší číslo jeho verze a verze je součástí klíče cache u každého vykreslení. Nová barva nebo font tak vaše kreativy překreslí, aniž by o to kdokoli musel žádat.
Stránka Značka
Ukazuje výsledný profil se zdrojem každého pole, barevné role s kontrolou kontrastu, živé ukázky vašich fontů, rysy tvarů a rozvržení, logo na pozadí i na primární barvě, vaše referenční obrázky s naměřenými paletami a pás vašich kreativ, který se při změně profilu znovu načte. Najdete tu také import design systému, nahrávání fontů a loga a tlačítko Znovu načíst web.
Jednotlivá kreativa se od značky přesto může lišit: editor v kreativním studiu nastaví úpravy pro konkrétní kreativu, kartu, slide nebo scénu a každou z nich jde vrátit na nastavení značky.
Časté otázky
Potřebuji design systém nebo soubor ve Figmě?
Ne. Váš web se načte při prvním procházení a pro začátek stačí. Soubor s tokeny, soubor ve Figmě nebo referenční obrázky profil zpřesní a mají přednost před tím, co poskytl web.
Co když mají barvy našeho webu slabý kontrast?
Každá barevná role se kontroluje už při načtení a každá barva textu v kreativě musí vůči své ploše dosáhnout kontrastu 4,5:1. Když barva značky nevyhoví, vybere vykreslování jinou z vašich barev, která projde, případně bílou nebo téměř černou.
Používají landing pages a hostovaný blog stejný design?
Ano. Landing pages se vykreslují z profilu s vašimi fonty, barvami, rohy, tlačítky a logem a hostovaný blog používá fonty a barvy vaší značky. Když v profilu chybí, vezme barvy nalezené na vašem webu.
Co načítá import z Figmy?
Publikované styly a jejich hodnoty přes osobní přístupový token a lokální proměnné, pokud máte ve Figmě tarif Enterprise. Když Figma požadavek na proměnné odmítne, stránka Značka to uvede a styly se použijí i tak.