Nadpis 1 velikost 60
Označení jako Nadpis 1 může být pouze jeden nadpis na stránce. Velikost 60 px, označit tučně to důležité.
První blok na stránce odstazení - Vlastní - počítač horní i dolní 150 a mobil obě 100. Obrázek na pozadí, který jde z bílé barvy do obrázku. Šablona v Canvě. Efekt obrázku na pozadí fixní.
Tento hlavní text pod nadpisem může být zvětšený na velikost 20 px, u jiných textů na webu neměnit velikost!
Tohle je Nadpis 2 velikost 40
Všechny nadpisy na stránkách označovat, je to z důvodů SEO. Nadpisů 2 může být více na stránce. Velikost 40 px. Označit důležité slovo v nadpisu tučně. Používat u něj oranžové podtržítko vždy zarovnané stejně s nadpisem, tedy uprostřed nebo doleva. Šířka elementu s nadpisem 700 px a zarovnání podle nadpisu doprostřed nebo doleva.
Texty na stránce vždy standardní velikosti, tedy neměnit, nechat globální. Šířka elementu s textem 600 - 650 px, nikdy ne přes celou šířku stránky! Krátké texty mohou být zarovnané doprotřed, delší vždy doleva.
Odsazení u všech prvků nechávat standardní (30 px), pokud je pod nadpisem nebo textem prvek s boxy, tak je možné zvětšit odsazení na 60 px. Vždy měnit jen spodní odsazení - horní jen vyjímečně.
Odsazení bloků (řádků) volit Střední. Pokud je obrázek na pozadí, tak Velké. Lze zvolit grafický oddělovač - vlnovku o velikosti 40 px.
Nadpis 3
U bloků vždy nastavit zakulacení rohů to největší.
Velikost 26
Vždy zvolit místo čar tak stín - Větší stín.
podtržení
Nepoužívat obrámování a různé čáry u prvků. Čáry jsou známkou líného grafika. Místo toho dát stín nebo jinou barvu pozadí.
Nadpis 2
Delší texty zarovnat doleva.
Pokud je obrázek na pozadí, tak plná barva a text umístit do bílého bloku s maximálně zaoblenými rohy a Velkým stínem. Obrázek roztáhnout přes celou obrazovku a zvolit u něj efekt paralax (případně fixní, pokud by to chtělo posunout střed zobrazení).
Blok (řádek) s obrázkem odsazení Velké. Grafický oddělovač vlnovka s velikostí 40 px.
pozadí
V naprosté většině případů použít bílé #ffffff.
Odsazení bloku Střední (tzn. horní i spodní 100).
Přechod na pozadí
Pro oddělení je možné použít barevný přechod na pozadí z bílé #ffffff do světlé oranžové barvy #fff9f0
Pokud potřebuji dva bloky za sebou spojit, tak velikost odstazení bude u prvního Vlastní horní 100 a spodní 50, druhý 50 a 100.
barva na pozadí
Barva na pozadí jen ve vyjímečných případech!
Když už tak jen světlý odstín oranžové #fff9f0
Pozor, když jsem dal zde obrázek vedle textu a zarovnávám jej doleva, tak musím zarovnat text a v nastavení elementu u maximální šířky taky zarovnání doleva!
Důležitá upozornění
Zde ještě pár důležitých pravidel.
Globální nastavení
Upravuj vždy co nejméně jednotlivé elementy, využívej na maximum globální nastavení!
Mazání stránek a přesměrování
Hlavička a patička stránky
Nevytvářej pro stránky samostatnou hlavičku nebo patičku. Používej globální. Ve vyjímečných případech (např. na objednávkové stránky) se může hodit hlavička pouze s logem a patičká krátká s důležitými odkazy na obchodní podmínky apod.
Tipy a triky
Potřebuješ nový řádek v textu, ale nechceš mezeru mezi odstavci?
Stiskni shift + enter.
Potřebuješ odřádkovat text, ale element neumožňuje formátování? Vlož do textu kód <br /> klidně 2x za sebou a budeš mít v textu volný řádek.
Element neumožňuje formátování textu a ty potřebuješ část tučnou. Vlož na začátek vytučnění kód <strong> a na konec </strong> a text mezi kódem se vytuční (nezapomínej na ten ukončovací).
Shrnutí Specifikace
Souhrn důležitých parametrů.
Celkový styl
| Zaoblení rohů | největší |
|---|---|
| Oddělení prvků | nepoužívat čáry, ale jinou barvu pozadí nebo stín |
| Stíny | Větší stín |
Odsazení bloků
| S obrázkem na pozadí | Vlastní
počítač 150 / 150 mobil 100 / 100 |
|---|---|
| Ostatní | Střední |
| Navazující | Vlastní
první 100 / 50 druhý 50 / 100 |
oddělení bloků
| Grafické oddělení | vlnovka
velikost 40 px používat u bloků s barvou na pozadí nebo obrázkem |
|---|---|
| Možnost oddělit bloky | barvou na pozadí
obrázkem na pozadí |
Barva pozadí bloků
| Bílá | #ffffff |
|---|---|
| Barevný přechod | #ffffff
#fff9f0 |
| Barevné (používat co nejméně) | #fff9f0 |
Barvy
Černá #212121
Oranžová #ffa927
Světle oranžová #fff9f0
Konverzní barva tyrkysová #03b5aa
U projektů se jiná barva používá v kombinaci s oranžovou např. odstín do pozadí, barva Nadpisu 1 nebo jako barva ikon na stránce. Tlačítka zůstávají standardní. Příklad.
Akademi PRO - červená #F02226
Akademi PRO - světle červená #fff0f0
Porozumění byznysu - zelená #4AC952
Porozumění byznysu - světle zelená #f0fff1
Šťastnější Česko - modrá #05A5C4
Šťastnější Česko - světle modrá #f0fdff
Šťastnější Slovensko - modrá #0064a2
Šťastnější Slovensko - světle modrá #f0f9ff
Šťastná škola - tyrkysová #03b5aa
Šťastná škola - světle tyrkysová #f0fffe
Rozměry elementů
| Šířka nadpisu | 700 px |
|---|---|
| Šířka textu | max. 600 - 650 px |
| Spodní odsazení | nechat standardní 30 px, pokud je potřeba větší tak 60 px |
VELIKOSTI písma
Nadpis 1 60 px
Text pod hlavním nadpisem 20px
Nadpis 2 40 px
Nadpis 3 26 px
Text 17 px
Tlačítka
Míša pozn.
barva 1 #FFA20D
barva 2 #03B5AA