Sprievodca osvedčenými postupmi pre šablóny značky

Šablóny fungujú najlepšie, keď sa dajú ľahko upraviť, predvídať a prispôsobiť skutočným potrebám tímu.

Plánovaním dopredu a zámerným nastavovaním prvkov môžete vytvárať šablóny, ktoré môže ktokoľvek aktualizovať bez narušenia rozloženia alebo ovplyvnenia štýlu značky.

Táto príručka zobrazuje základné kroky, ktoré dizajnéri používajú na vytváranie šablón, ktoré fungujú vo vašej organizácii.

Silná šablóna začína správnymi stavebnými prvkami. Vyberte prvky a štruktúru, vďaka ktorým sú aktualizácie jednoduché pre každého, kto používa šablónu.

Vyberte prvky, ktoré môžu spoluhráči prefarbiť alebo nahradiť bez zmeny rozloženia.

Na ikony a ilustrácie použite súbory SVG. Mieria čisto a možno ich prefarbiť pomocou farieb súpravy pre značku.

Nahrať SVG

1. Prejdite na položku Nahraté súbory a potom vyberte položku Nahrať súbory.
2. Vyberte súbor SVG pre najlepšiu kvalitu.

Snímky udržiavajú správne veľkosť a umiestnenie obrázkov. To umožňuje spoluhráčom nahradiť obrázok bez úpravy orezania alebo rozmerov.

Rámy použite, keď jeden obrázok potrebuje vyplniť pevný priestor.

Farbysúpravy pre značku zachovávajú jednotnú identitu šablón a znižujú potrebu neskôr manuálnych aktualizácií.

Vďaka tomu zostane vaša šablóna v súlade so značkou pri každej aktualizácii.

Vaša šablóna by mala vydržať, keď niekto pridá dlhší text, kratšie menovky alebo nový obsah. Správne štruktúrovanie textu udržuje medzery stabilné a zabraňuje posunutiu rozložení.

Reflow riadi pohyb textu pri pridávaní alebo odstraňovaní riadkov. Dobré nastavenie zabraňuje prekrývaniu textu s inými prvkami.

• Ponechajte textové polia dostatočne široké na dlhšie riadky.
• Medzi textovými poľami nechajte medzeru, aby sa mohli podľa potreby rozbaliť.
• Zodpovedať šírkam textového poľa pomocou Cmd alebo Ctrl + Shift + J pred zoskupením.

Zoskupenie zabezpečuje, aby sa súvisiace prvky počas zmien rozloženia správali ako jedna jednotka.

Zoskupiť položky ako:

• Nadpisy a podnadpisy
• Ikony a ich textové popisy
• Dekoratívne prvky, ktoré tvoria jeden blok

Vyhnite sa zoskupovaniu:

• Prvky, ktoré sa musia pohybovať samostatne
• Nesúvisiace časti rozloženia

Ukotvenie ovláda, odkiaľ sa text rozširuje, keď ho niekto upraví. Priraďovanie kotiev v zoskupenom texte zachováva konzistentné rozloženie.

Ako vyzerá dobré kotvenie:

• Nadpisy sa rozširujú nadol
• Názvy zarovnané na stred zostanú zarovnané na stred
• Text v tele rastie jedným smerom

Po štruktúrovaní rozloženia uzamknite prvky, ktoré definujú vizuálnu identitu šablóny.

Zamknite položky, ktoré by mali zostať presne tam, kde ste ich umiestnili:

• Logá
• Tvary alebo obrázky pozadia
• Ozdobné čiary alebo ikony
• Bloky rozloženia, ktoré definujú medzery alebo štruktúru

Pozičné uzamykanie udržuje prvky upraviteľné, ale zabraňuje ich náhodnému presunu. Je to užitočné na:

• Orámovania obrázkov
• Tlačidlá
• Opakovane použiteľné bloky obsahu, ako sú bios alebo štatistiky

Zamykanie zaisťuje, že vaša šablóna zostane nedotknutá, aj keď ju používajú viacerí členovia tímu.

Efekty, ako sú prekrytia a transparentnosť, môžu vylepšiť váš dizajn, ale príliš zložité efekty môžu spôsobiť, že nahradenie obrázka bude ťažšie.

Ak používate prekrytia alebo textúry:

• Použiť priehľadnosť na prekrytie, nie na obrázok
• Obrázok ponechajte nad prekrytím, aby sa dal jednoducho nahradiť.
• Vyhnite sa zmesiam, ktoré si vyžadujú ručné premiestnenie

Jednoduché efekty udržia vašu šablónu flexibilnú a ľahko sa udržiava.

• Uistite sa, že medzi textovými poľami je medzera
• Nechajte priestor okolo textu vo vnútri tvarov
• Potvrďte, že všetok zoskupený text používa rovnaké nastavenie kotvy

• Vrstvite obrázok nad priesvitný tvar
• Použiť priehľadnosť na obrázok namiesto tvaru

To umožňuje jednoduchú výmenu pomocou funkcie drag and drop.