Design

6 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í:

  1. 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.

  2. 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í.

  3. 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ů.

  4. Ostatní: obsahuje zbývající prvky webu – Cookie lištu, Vyhledávání a Video.

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ý.

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.

Nastavte vlastní typografii webu

Změnu typografie můžete provést v oddílu "Typografie".  Zde je možné měnit fonty pro nadpisy i normální písmo a nastavovat jejich řezy, barvu i velikost. Při nastavování písem je vhodné: 

  • použít jedno shodné písmo pro všechny nadpisy, barvu a velikost mohou mít rozdílnou,

  • použít další písmo pro normální text.

Přidat můžete také vlastní fonty.