Když už víme co je wireframe, sekce, řádky a moduly a umíme je aspoň trochu použít tak je na čase dát jim nějaký vzhled.
Nejsem grafik a ani v typografii se moc nevyznám ale existují nástroje, které nám s tím pomohou.
Vy kteří máte aspoň trochu grafické cítění budete ve výhodě. My ostatní si musím takto trochu pomoct.
Takže v prvá řadě, je potřeba si ujasnit barevnost stránek. Na tohle téma najdete řadu článku, které vysvětlují psychologii barev, kdy jakou barvu použít a v jaké kombinaci. My se budeme bavit v podstatě o třech barvách. Jedná nějaká základní, doplňková a konverzní. Tyhle barvy by spolu měli ladit a proto dobře rozmýšlejte, jaké barvy zvolíte.
Návrh grafiky webu si klidně můžete udělat už ve chvíli, kdy si navrhujete wireframe. Vlastně návrh grafiky si můžete udělat i mnohem dřív i wireframe pak podle toho poskládat ale to je celkem nestandardní postup a asi bych teď vyfasoval facku od nejednoho webdesignéra a UX designéra.
Samozřejmě ať už navrhujete grafiku nebo wireframe
V dalším kroku si můžeme vybrat buď že začneme s prázdnou stránkou a nebo si vybereme hotovou šablonu.
My začneme pracovat s prázdnou stránkou, pro lepší pochopení jak builder funguje.
Stránku tvoříme z jednotlivých sekcí, řádků a modulů, které skládáme podle potřeby. Každá sekce, řádek i modul má své nastavení a proto je potřeba postupovat systematicky. Představte si to jako vrstvy. První vrstva je sekce, druhá vrstva je řádek, který obsahuje sloupce a třetí vrstva jsou moduly, které vkládáte do jednotlivých sloupců
Sekce – sekce si představte, jako část stránky, která vám rozděluje web. Do každé sekce vkládáme řádky, které obsahují sloupce. Tím můžeme stránku rozdělit třeba:
1/2, 1/2
1/3, 1/3, 1/3
1/3, 2/3
1/4, 1/4, 2/4
1/4, 1/4, 1/4, 1/4 a další
Hero sekce:
První sekce může být tzv hero sekce. Je to sekce, kterou návštěník uvidí jako první a měla by obsahovat ty nejdležitější informace aby zákazník věděl, že zde najde co hledá.
Další sekce mohou obsahovat:
- Rozcestník do jiných části webové stránky
- výpis blogu
- reference
- galerie
Na každé stránce můžete mít tolik sekcí, kolik využijete. Každé sekci můžete nastavit jako pozadí barvu, obrázek, video nebo gradient. Díky tomu stránku hezky rozdělíte pro lepší orientaci. každeé sekci můžete nastavit výšku podle potřeby.
Do sekci vkládate řádky, které obsahují sloupce. Ty jsou důležité pro rozvržení stránky a rozložení obsahu po stránce.
Řádky – Řádky obsahují sloupce, tím určujete rozložení obsahu na stránce.
Díky tomu můžete obsah na stránce rozložit na poloviny, třetiny, čtvrtiny apod. Do jednoho řádku můžete vložit až 6 sloupců.
Díky tomu můžete mít v sekci na levé straně text a na pravé straně obrázek a opačně.
Rozložení sloupců záleží na návrhu webové stránky.
Jeden sloupec využijete když chcete mít text a pod textem například obrázek, tlačítko nebo kontaktní formulář.
Rozložení se 4 sloupci, můžete například zase využít jako rozcestník na další stránky webu.
6 sloupců můžete využit například pro loga vašich klientů, ikony s výhodama apod.
Moduly – moduly se vkládají do sloupců v řádcích. Základní moduly jsou textové, obrázkové, video, tlačítka, slideshow, výpis blogu apod. Existují stovky modulů, které můžete do sloupců vložit a tím vytvářite na stránce obsah.
Tohle je základní rozložení sekcí, rádků. sloupců a modulů. To je první krok, ke správnému rozložení stránky. V dalším návodu si ukážeme práci s nejčastěji používanými moduly.
