Výběr vhodného designu
4 minuty
Prvním krokem při zakládání webu je výběr designu. Pokud víte, podle jakých vlastností se rozhodovat, je výběr nejvhodnějšího designu jednoduchý úkol.
Designy slouží jako výchozí bod a snadno je upravíte podle vašich potřeb. Každý detail webu bude působit, jako by byl navržen přímo pro vás.
Všechny designy můžete využít pro jednostránkovou prezentaci i pro weby s hierarchickou strukturou. Podle čeho se řídit při výběru vhodného designu?
Rozhodujte se podle navigace
Nejdůležitějším faktorem při výběru správného designu je hlavní navigace. Soustřeďte se na její umístění a chování. Všímejte si pozice loga a zarovnání položek menu. Vlastnosti navigace jsou spjaté s designem a nelze je upravovat.
Vybrat si můžete mezi designy s horizontální, vertikální nebo hamburger navigací. Ostatní vlastnosti designu upravíte v administraci podle vašich požadavků.
![](https://academy.solidpixels.com/files/responsive/360/0/canvas-horizontal-menu.png 360w,https://academy.solidpixels.com/files/responsive/720/0/canvas-horizontal-menu.png 720w,https://academy.solidpixels.com/files/responsive/980/0/canvas-horizontal-menu.png 980w,https://academy.solidpixels.com/files/responsive/1280/0/canvas-horizontal-menu.png 1280w,https://academy.solidpixels.com/files/responsive/1920/0/canvas-horizontal-menu.png 1424w)
Canvas
Příklad designu s horizontální navigací
![](https://academy.solidpixels.com/files/responsive/360/0/vintage-vertical-menu.png 360w,https://academy.solidpixels.com/files/responsive/720/0/vintage-vertical-menu.png 720w,https://academy.solidpixels.com/files/responsive/980/0/vintage-vertical-menu.png 980w,https://academy.solidpixels.com/files/responsive/1280/0/vintage-vertical-menu.png 1280w,https://academy.solidpixels.com/files/responsive/1920/0/vintage-vertical-menu.png 1424w)
Vintage
Příklad designu s vertikální navigací
![](https://academy.solidpixels.com/files/responsive/360/0/photographer-hamburger-menu.png 360w,https://academy.solidpixels.com/files/responsive/720/0/photographer-hamburger-menu.png 720w,https://academy.solidpixels.com/files/responsive/980/0/photographer-hamburger-menu.png 980w,https://academy.solidpixels.com/files/responsive/1280/0/photographer-hamburger-menu.png 1280w,https://academy.solidpixels.com/files/responsive/1920/0/photographer-hamburger-menu.png 1424w)
Photographer
Příklad designu s hamburger navigací
Změna vybraného designu
Pokud během tvorby webu zjistíte, že design neodpovídá vašim potřebám, můžete výběr kdykoliv změnit.
Pro změnu designu:
v hlavní navigaci vyberte záložku Nastavení a poté Změna šablony,
vyberte nový výchozí design.
Při změně designu se přepíše jen nastavení designu, například fonty a barevnost. O obsah nahraný na web nepřijdete.
K čemu slouží designy?
Připravené designy vás nebudou omezovat, slouží jen jako výchozí bod a inspirace. Správným výběr vám ušetří práci a pomůže dostat se rychle do požadovaného výsledku.
V nastavení designu vzhled snadno přizpůsobíte vašim potřebám. Během pár kliknutí upravíte nastavení barev, vyberete jiný font nebo vložíte vlastní logo tak, aby web odpovídal identitě vaší firmy.
Volnost máte i při práci s obsahem. Pomocí drag&drop editoru přidáte nový blok s textem, vytvoříte další sloupec nebo přidáte fotku. Díky vzorovým stránkám nebudete muset vytvářet vše od základu. Ušetříte si čas i práci a zároveň vám vzorové stránky poslouží jako inspirace.
Podívejte se třeba na tři různé weby postavené na designu Idea: koloběžky MIBO, UX Workshopy a architektonický ateliér IGLOO ARCHITEKTI. Přestože všechny tři weby vychází z jednoho designu, výsledek je vždy úplně odlišný.
![Náhled konceptu webu Idea](https://academy.solidpixels.com/files/responsive/360/0/design-idea.jpg 360w,https://academy.solidpixels.com/files/responsive/720/0/design-idea.jpg 720w,https://academy.solidpixels.com/files/responsive/980/0/design-idea.jpg 980w,https://academy.solidpixels.com/files/responsive/1280/0/design-idea.jpg 1280w,https://academy.solidpixels.com/files/responsive/1920/0/design-idea.jpg 1350w)
Vzhled původního designu Idea.
![Náhled designu webu UX Workshopy](https://academy.solidpixels.com/files/responsive/360/0/ux-worksopy.png 360w,https://academy.solidpixels.com/files/responsive/720/0/ux-worksopy.png 720w,https://academy.solidpixels.com/files/responsive/980/0/ux-worksopy.png 980w,https://academy.solidpixels.com/files/responsive/1280/0/ux-worksopy.png 1280w,https://academy.solidpixels.com/files/responsive/1920/0/ux-worksopy.png 1920w,https://academy.solidpixels.com/files/responsive/2600/0/ux-worksopy.png 2600w)
Web pro UX Workshopy.
![Náhled webu Igloo Architekti](https://academy.solidpixels.com/files/responsive/360/0/design-igloo.jpg 360w,https://academy.solidpixels.com/files/responsive/720/0/design-igloo.jpg 720w,https://academy.solidpixels.com/files/responsive/980/0/design-igloo.jpg 980w,https://academy.solidpixels.com/files/responsive/1280/0/design-igloo.jpg 1280w,https://academy.solidpixels.com/files/responsive/1920/0/design-igloo.jpg 1350w)
Web ateliéru IGLOO ARCHITEKTI.
![Náhled webu pro koloběžky MIBO](https://academy.solidpixels.com/files/responsive/360/0/design-mibo.jpg 360w,https://academy.solidpixels.com/files/responsive/720/0/design-mibo.jpg 720w,https://academy.solidpixels.com/files/responsive/980/0/design-mibo.jpg 980w,https://academy.solidpixels.com/files/responsive/1280/0/design-mibo.jpg 1280w,https://academy.solidpixels.com/files/responsive/1920/0/design-mibo.jpg 1350w)
Web pro koloběžky MIBO.
Designy mají stejné funkce, nabídka modulů a možnosti nastavení se u designů neliší. Malé rozdíly mohou být pouze u stylu konkrétních detailů. Některé stránky mají například připravené konverzní tlačítko v navigaci nebo barevné zvýraznění tučného textu.
Všechny designy i s ukázkou si prohlédnete v záložce Design na webu solidpixels.