Design
5 minut
V solidpixels si dokážete upravit design webu podle svých potřeb tak, aby přesně odpovídal vaší indentitě.
Jednotný design webu
V solidpixels si dokážete upravit celý web podle svých potřeb tak, aby přesně odpovídal vaší indentitě. Cílem nastavení designu v solidpixels je vytvořit váš vlastní design systém – sadu jednotných pravidel pro vzhled všech komponent webu. V designu nastavujete globální vlastnosti komponent jako je navigace, typografie, tlačítka, boxy a mnoho dalšího. Tyto úpravy se pak projeví na celém webu a zajistí, že vzhled celého webu bude konzistentní a jednotný.
Vyberte si vhodný koncept
S návrhem designu vašeho webu vám do začátku pomůžou naše připravené koncepty. Podívejte se, jak vybrat správný design.
Změny designu s živým náhledem
Záložku Design otevřete pomocí ikonky pírka v levé liště nebo vyhledáním ve Spotlightu (Ctrl/⌘ + K).
V otevřeném Designu pak můžete upravovat vzhled jednotlivých komponent na webu. Díky zobrazení Designu zároveň s obsahem webu pak uvidíte své úpravy živě přímo nad otevřenou stránkou.
Možnosti nastavení designu
V nastavení designu webu je rozdělené do čtyři kategorií:
Obecný: zahrnuje globální komponenty webu, jako je Hlavička, Sekce, Typografie a Patička. Můžete zde upravit vzhled hlavičky, detailně nastavit typografii, výchozí odsazení sekcí nebo grafickou podobu patičky.
Layout: zahrnuje všechny bloky, do kterých lze vložit obsah, např. Harmonika, Slider nebo Box. Nastavíte zde výchozí pozadí, barvu textu a vnitřní odsazení těchto bloků. Pořád vám ale zůstane možnost tyto parametry individuálně upravit přímo po vložení bloku do stránky. Vytvoříte tak unikátní grafické prvky, které se vymykají globálnímu nastavení.
Obsah: zahrnuje všechny zbývající bloky od Tlačítek, Obrázků, Formulářů až po Dělící čáry. Nastavení těchto bloků se liší podle potřeb a vlastnostní jednotlivých prvků.
Ostatní: obsahuje zbývající prvky webu – Cookie lištu, Vyhledávání a Video.
Správné barevné schéma webu
Při změně barev je důležité používat vhodné barevné kombinace, které se skládají maximázně ze tří až čtyř barev. Méně je v tomto případě více. Pokud nemáte nastavený vizuální styl vaší firmy, můžete nastavit vlastní barevné schéma. Důležité je přitom dbát na dostatečné kontrasty a čitelnost písma i všech konverzních tlačítek. Barvy, které jsou použité v ploše, by neměly být agresivní vůči lidskému zraku, aby bylo příjemné web prohlížet i uprostřed noci.
Tip: Použijte generátory barevných schémat
Při nalezení barevných kombinací vám mohou pomoci následující aplikace, které dokáží vygenerovat originální a správné barevné kombinace. V zápětí stačí pouze překopírovat HEX kódy barev do nastavení vzhledu.
Snadná změna barev pomocí Proměnných
Ambasadoři solidpixels mají k dispozici Design s rozšířenými funkcemi Proměnné a Vrstvy.
Proměnné vám umožňují ukládat barvy a barevné gradienty, které pak můžete připojit k jednotlivým komponentám místo klasického nastavení barev. Následně můžete změnit již dříve nastavenou barvu napříč celým webem. Stačí jí upravit v záložce Proměnné a změna se projeví u všech komponent, které mají danou proměnnou připojenou.
Pokud se tak při tvorbě webu rozhodnete pro jinou barevnou kombinaci nebo vás v budoucnu čeká změna celkové vizuální identity, proměnné vám značně usnadní veškeré úpravy.
Vrstvy pro práci se strukturou stránek
Druhou funkcí pro Ambasadory jsou Vrstvy. V této záložce vidíte všechny bloky a sekce umístěné na právě otevřené stránce. Zároveň zde vidíte přehlednou strukturu obsahu, jeho rozdělení do sekcí, řádků a sloupců.
Snadno tak můžete pracovat s rozložením obsahu a jeho zobrazením na různých zařízeních. Vidíte taky hierarchii všech komponent a snadno tak upravíte jejich řazení. Pokud navíc často využívate posun sekcí a obsahu stránek, jednoduše pomocí Vrstev označíte obsah, který je překrytý.
