Moderní web design: základy a tipy

Seznamte se se základními principy webového designu a vyšperkujte svoje interntové stránky či e-shop. Jaké jsou nejnovější praktiky a trendy moderního web designu? A proč je dnes responzivní web design nutností?

Obsah

1. Vývoj web designu
2. Základní principy web designu
3. Nejlepší praktiky pro web design
4. Trendy ve web designu

1. Vývoj web designu

Krása leží v očích toho, kdo se dívá.

Vzhled internetových stránek se za posledních 30 let hodně vyvíjel. Pamatujete si ještě, jak vypadaly weby v devadesátých letech a na začátku milénia? Bývaly to časy, kdy jsme museli přes telefon vytáčet připojení, abychom si mohli přečíst zprávy nebo se přihlásit do profilu na Myspace. Ostré hrany, křiklavé barvy, omezené množství fontů, žádné zarovnání textu – stránky vypadaly spíše jako koláže vytvořené ve Wordu v kombinaci s fotografiemi, připíchnutými na nástěnku.

Počátky webdesignu

V roce 1991 vznikla za branami bájného CERNu úplně první internetová stránka. Vítá nás jednoduchým textem na bílém pozadí. V devadesátých letech byly stránky navrhované pro konkrétní účel, ale otevíraly se nové dveře pro vznikající obor: webdesign.

Webdesign zahrnuje všechno, co na stránkách vidíme a s čím interagujeme. Na začátku tisíciletí byly základními prvky stránek navigační lišta se záložkami, které vedly na podstránky, titulek stránky a logo. Startovní stránka byla pojmenovaná jednoduše „úvodní stránka“, aby bylo jasné, že jsme se ocitli na hlavní stránce celé prezentace. Počátky designu se soustředily na informační hodnotu a texty. Jde o první generaci webů – takzvaný „Web 1.0“.

V posledních 14 letech funguje Web 2.0: soustředí se na sledování, čtení a psaní s cílem být co nejvíce interaktivní.

Schéma vývoje internetu

Web 3.0 posouvá hranice ještě dál – soustředí se na (inter)aktivitu. Jako návštěvníci můžeme aktivně komunikovat s webem nebo aplikací. Vývoj jde směrem k symbiotickému webu, kdy návštěvník svou akcí spolupracuje s webem, aplikací či jinou platformou a přizpůsobuje si je. Spolu s rozvojem webu 2.0 a stále častějším využíváním mobilních zařízení přišel do hry responzivní design.

Responzivní webdesign

Responzivní design znamená to, že se vzhled stránek automaticky přizpůsobí jakémukoliv zařízení – počítači, telefonu, tabletu s malým i velkým displejem. Nastavení typografie, písma, nebo zarovnání textu se přizpůsobuje změnám velikosti displeje či obrazovky – dlouhý text se zalomí do vícero krátkých řádků. Široký formát fotografie se převede na formát na výšku bez toho, aby utrpěla kvalita rozlišení.

Responzivní design si můžete představit třeba takto: všechny prvky vašich stránek jsou rozložené jako figurky na šachovnici. Tuto šachovnici můžeme roztáhnout nebo zmáčknout na všechny strany a figurky se přemístí tak, aby jejich rozestavení stále odpovídalo původní podobě stránky.

Všechny šablony ve Webnode jsou naprogramované jako responzivní. Editor automaticky formátuje text tak, aby byl dobře čitelný a vypadal přesně tak, jak má, aniž by do něj přidával další mezery nebo zalamoval řádky.

Design „Mobile first“

Tento princip vlastně doplňuje responzivní design. Místo, aby se stránky navrhovaly primárně pro počítače, jako první se navrhuje mobilní verze a té se přizpůsobují verze pro desktopy a notebooky. V České republice vzrostl mezi lety 2010 a 2020 počet uživatelů, kteří využívají internet v mobilním zařízení, ze 4 % na dvě třetiny populace a čísla i nadále celosvětově rostou.

V současnosti Google upřednostňuje stránky, které jsou přizpůsobené mobilním zařízením. V přístupu „Mobile first“ nejde jen o vzhled stránek, důležité je přizpůsobit i jejich celkovou strukturu, navigaci a zajistit rychlé načítání obsahu. Rychlost je v dnešní době jedním z nejdůležitějších principů designu internetových stránek. Těm se budeme věnovat v následující části.

2. Základní principy web designu

Styly

Základní rámec webovým stránkám dává styl. Popisuje, jak jsou na stránce jednotlivé prvky rozložené a jak fungují navzájem. Nejdůležitějšími částmi jednotného stylu jsou:

• navigační lišta
• hlavička (s logem a volitelným nadpisem)
• patička
• (volitelné) sekce

Hlavní prvky internetové stránky – ukázka navigační lišty nahoře, hlavičky a patičky

Tyto prvky jsou vzhledem k navigační liště uspořádány v tzv. standardním stylu. Tyto standardní styly existují 4, nejběžnějším rozložením je navigace nahoře nebo na levé straně. Webnode nabízí šablony se všemi běžnými typy rozložení.

Vlevo nahoře až vpravo dole: hamburger menu, navigační lišta nahoře, navigační lišta dole a navigační lišta vlevo

Bez ohledu na to, kterou ze šablon si vyberete, později můžete mezi standardními styly přepínat.

I když je zatím na 80 % stránek k vidění navigační lišta nahoře, nové možnosti jsou vidět stále častěji. Příkladem nového přístupu je hamburgerové menu (tři krátké horizontální čáry v rohu stránek), které po kliknutí otevře seznam stránek webu. Navigační lišta se také z vršku přesouvá blíže k prostředku stránek.

Patička stránek obvykle obsahuje právní informace, odkazy na sociální sítě a jiné odkazy. Kontaktní informace je na stránkách zvykem sdílet vpravo nahoře. Proto většina šablon obsahuje prostor v navigační liště, kam můžeme kontakty vyplnit.

Naše oči se při čtení automaticky pohybují zleva doprava a informace umístěné na pravé straně tak získají více pozornosti. Loga se naopak standardně umisťují nahoru doleva, nebo doprostřed vrchní sekce.

Hlavní myšlenkou standardního stylu je odklon od šachovnicového rozložení prvků, typického pro rané fáze designu. Nyní jde zejména o přehledné představení obsahu, kde má každý prvek své místo.

Rozvržení

Rozvržení popisuje, jaký podíl by měly na obrazovce zabírat hlavní prvky. Je možné je umístit doprostřed a kolem vytvořit okraje, nebo je nechat zabrat celou šířku stránky – můžeme si to představit stejně, jako formátování nadpisu ve Wordu – buď na šířku stránky, na střed, nebo doleva.

Jeden sloupec

V tomto rozvržení je veškerý obsah soustředěný v jednom sloupci, který zabírá většinu obrazovky nebo displeje. Jde o jednoduchý, nejčastěji používaný design.

Jde o rozložení ideální hlavně pro různá mobilní zařízení a v současnosti je velmi rozšířené a oblíbené.

Ukázka obsahu v jednom sloupci

Rozdělení obrazovky (Split-screen design)

Někdy potřebujeme na stránce zobrazit vícero důležitých informací vedle sebe.

Může jít třeba o obrázek a doplňující informace, text rozdělený do sloupců, dva obrázky a textové pole a podobně.

Pokud je potřeba, obrazovka se rozdělí na dvě či více částí – může jít o souměrné poloviny, ale i o jiný poměr stran.

Velice často tento typ rozložení využívají e-shopy, u kterých je pro prezentaci produktů stejně důležitý text i fotografie.

Ukázka rozdělené obrazovky

Mřížky

Rozložení obsahu do mřížky je stále populárnější hlavně díky platformám jako Pinterest, Facebook nebo Twitter.

Mřížkové rozložení, také nazývané „card design“, připomíná karty rozložené do pravidelného obrazce. Funguje na jednoduchém principu – kombinuje výstižné obrázky a krátké popisky, které po kliknutí čtenáře zavedou k podrobnějšímu textu.

Obrázky čtenáře snadno provedou obsahem, který má před sebou přehledně rozložený. Prohlížení stránek je díky mřížkám jednodušší a informace jsou snadno dostupné.

Příklad mřížek, neboli karet

Rozlišujeme dva typy mřížek:

• jednotlivé karty o stejné velikosti – souměrná mřížka
• karty o různé velikosti – řádky mřížky mají různou výšku

„Nad ohybem“ a „pod ohybem“

Jakmile otevřeme webovou stránku, vidíme navigační lištu, hlavní obrázek v hlavičce, titulek a možná i část úvodního textu. Když chceme vidět víc, musíme zascrollovat myší. To, co vidíme hned – bez toho, abychom scrollovali – se nazývá „část nad ohybem“ a zbytek „část pod ohybem“ – terminologie pochází ještě z dob papírových novin, kdy se nejdůležitější událost umístila právě „nad ohyb“. Současný webdesign tento princip udržuje a nejdůležitější informace jsou umístěné vždy úplně nahoře na stránce.

Ty nejdůležitější a nejzajímavější informace umístěte úplně na začátek, aby byly viditelné i bez scrollování. Standardní styly a rozložení určují, jak bude stránka vypadat, ale design musí být i praktický. Potřebujeme rychle najít to, co hledáme a jednoduše se dostat k informacím. Dobrý design je tedy především funkční. Nejdůležitější prvky, které design vylepší, jsou:

Prvky podporující SEO

Jde o políčka v editoru, kde vyplníte fráze relevantní pro vyhledávače, jako např.:

• meta popisek
• název stránky
• adresa webu neboli URL
• klíčová slova v textu i nadpisech

Google upřednostňuje nadpisy, obsažené v textu stránek – největší prioritu mají nadpisy označené jako H1.

Moderní editory typ nadpisu definují rovnou v kódu, stejně je tomu i u Webnode.

Nadpisy jsou ve Webnode editoru jako H1 označené automaticky, takže se můžete soustředit na klíčová slova či fráze, které by měly obsahovat.

Rychlost

Rychlost jde ruku v ruce s jednoduchostí používání. V lednu 2021 změnil Google svůj algoritmus a stránky, které mají optimalizovanou rychlost načítání, řadí ve výsledcích výše, než ty ostatní.

Se stránkami vytvořenými ve Webnode je to jednoduché. Jsou naprogramovány tak, že se automaticky načítají tou nejvyšší možnou rychlostí, na jakémkoliv zařízení. Nejdůležitější je udržet optimální velikost obrázků, nahraných na vaše stránky.

Uživatelská přívětivost

Jde v podstatě o co nejsnadnější přečtení a používání stránek. Odvíjí se od přehledné struktury a intuitivní navigace celým webem.

Šablony Webnode dodržují pravidla jednoduchosti. Obsahují jasnou strukturu, přehlednou navigaci a je v nich omezený počet podstránek, které můžete přidat pod jednotlivé stránky.

Navíc Webnode v rámci URL stručně a jednoduše pojmenuje cestu každé podstránky – adresu si pak uživatel snadno zapamatuje. Dlouhá adresa s pomlčkami nepůsobí dobře a k moderním stránkám nepatří.

Například adresa vaší stránky „galerie“ bude vždy vypadat takto: „mojestranky.cz/galerie“. Nezáleží na tom, jestli je stránka Galerie v hlavním menu nebo zanořená jako podstránka podstránky. Tím pomáháme čtenáři nalézt jakýkoliv obsah na co nejmenší počet kliků.

3. Nejlepší praktiky pro web design

Šablona v online editoru vám poskytne vše, co je pro vaše nové stránky potřeba. Získáte tak jednotný styl, základní funkce, kvalitní obrázky, odpovídající font a barevné schéma. To vše vám poslouží jako skvělá inspirace pro váš vlastní obsah. Šablona je skvělý základ – co ale tvoří opravdu dobré stránky?

Je na vás, abyste svým stránkám vtiskli jedinečnou podobu. Ukážeme vám, jak je pomocí správně strukturovaného obsahu posunete o úroveň výš.

Vaše značka a webdesign

Ideální spolupráce. Promyslete, co znamená vaše značka a co by měla sdělovat. Jaký máte cíl, co je vaší misí. Design je něco, co může podpořit vaše záměry i důvody, proč děláte to, co děláte. Stanete se jedinečnými, autentickými a budete se cítit ve své kůži. Prodáváte-li sladkosti, nebojte se výrazných barev. Vyplatí se vám prozkoumat sílu barev a toho, jak ke které skupině zákazníků promlouvají. Objevte pro svou osobní značku to nejlepší barevné schéma a buďte mu věrni. Dalším bodem, který vám pomůže se sebe-prezentací, je struktura.

Struktura

Texturou se myslí pozadí vašich stránek – každého textového i vizuálního prvku. Nemusí být bílé. Nemusí být jednobarevné. Může to být fotografie krajiny, animace tekoucí vody nebo geometrický vzor. V editoru Webnode si můžete pro své stránky vybrat jedno z dostupných pozadí, nebo nahrát vlastní obrázek.

Struktura a navigace

Udělejte ze stránek svého webu přehledné a jednoduché restaurační menu, kde návštěvník snadno najde předkrm, hlavní chod i dezert. Stránky, které jsou plné detailních informací, patří hlouběji do struktury webu a ne na úvod. Ty nejdůležitější stránky by neměly přetékat informacemi.

Důležité stránky si představte jako plakát. Udržujte je stručné a zajímavé. Dobrou strategií je vložit na takovou stránku mřížku s obrázky (tzv. kartami), které po kliknutí návštěvníka dovedou na stránky s dalšími detaily. Obrázek nebo design každé takové karty by měl odpovídat tomu, co čtenář na odkazované stránce najde. Vaše stránky snadno proměníte v interaktivní web a čtenář má nad prohlížením obsahu kontrolu.

Sekce

Sekce pomohou návštěvníkům procházet vašimi stránkami. Představme si detailní stránku o všech členech vašeho firemního týmu. Na začátek je dobré vložit krátkou sekci, která popisuje, jak to všechno začalo. Teprve potom můžete poskytnout více detailů o struktuře vaší firmy.

Méně je více. Tato poučka se hodí pro jakýkoliv obsah na jednotlivých stránkách. Myslete na délku textů, střídání různých pozadí sekcí, fonty i barvy. V současné době už není nutné, aby hlavička obsahovala titulek – nechte promluvit výstižný obrázek.

Nechte čtenáře odpočinout. Prázdný prostor na stránce – známý také jako negativní prostor – umožní, aby si oko čtenáře odpočinulo a mozek lépe vnímá okolní obsah. Je to podobné, jako když po dlouhém sezení u počítače vstanete a dojdete si pro svou pátou kávu. Používejte negativní prostor – nemusí jít jen o bílý obdélník, použijte klidně stejnou texturu, jakou mají vaše stránky v pozadí.

Aby váš obsah čtenáře nemátl a nezahltil, zkuste využít geometrii.

Pravidlo třetin

Toto pravidlo má původ ve vysokém umění a popisuje poměr, v kterém je obsah umístěný do prostoru. Každou stranu stránky rozdělte na třetiny a propojte jednotlivé třetiny rovnými čárami. Tam, kde se protínají, se oko automaticky zastavuje a je dobrou strategií umístit na takové místo důležitý obsah.

Obraz od Clauda Moneta „Procházka na vrchol útesu poblíž Pourville” zobrazuje dvě dámy, které stojí napravo od středu krajiny, horní třetinu obrazu vyplňuje krásná oblačná obloha.

Obraz Procházka na vrchol útesu poblíž Pourville (1882) od Claude Moneta perfektně ukazuje dodržení pravidla třetin (Art Institute of Chicago)

Umístění není náhodné a to, jak silně obraz působí na diváka, je nepopiratelné. Dodržení pravidla třetin zajistí, že obraz nebo fotografie jsou vyvážené a snadno pochopitelné.

Ty nejdůležitější informace zkuste vyplnit do první třetiny stránky a zbytek by měly zabrat informace, které doplní ty nejdůležitější a vyváží jejich náročnost.

Ukázka pravidla třetin – mřížka zobrazuje devět dostupných ploch, kam můžeme umístit objekt

Webnode editor vám naštěstí s dodržením tohoto pravidla pomůže. Ukáže vám devět sekcí a vy si jednoduše vyberete, do které svůj obsah vložíte.

Konzistence je základ

To platí o každé části vašich stránek – o barvě, textuře, fontech, množství obsahu i jeho zaměření. Nezapomeňte, že v jednoduchosti je síla a nezahlcujte čtenáře – každé téma si zaslouží svou vlastní stránku.

Představme si, že máte tesařskou dílnu. Zákazníky nepotěší, když na web nasdílíte obrázky z dovolené. Určitě pro ně budou přínosnější například videa z výrobny, recenze spokojených zákazníků, nebo video s prezentací výrobků. Kreativita je povolena, ale buďte střídmí a konzistentní.

Čemu se vyhnout

Čím je hodný bez zlého a ošklivého? Toto jsou příklady prvků, které byly ve webdesignu ještě pár let nazpět trendy, ale nadšení rychle vyprchalo.

• rotující prvky na webu – slideshow, carousel
• bannery
• příliš mnoho obsahu pod ohybem

V současnosti se od nich v rámci zjednodušování, minimalismu a čistoty designu opět odklání. Slideshow hned v úvodu stránky může návštěvníka zahltit. Bannery existovaly hlavně v době, kdy byly možnosti online reklamy ještě omezené. V současnosti se ale reklama odehrává hlavně na sociálních sítích a ve formě videí.

Obsah, který je nám k dispozici, za poslední desetiletí rostl exponenciálně. Prohlížíme, scrollujeme, klikáme, vyhledáváme – na webech, sociálních platformách, v aplikacích, v počítači, v telefonu, tabletu. Vjemů je všude opravdu hodně, nepřidávejte nic zbytečného a udržujte svůj web čistý.

Pro ten nejlepší výkon vašich stránek připomínáme těchto 6 největších NE:

• Příliš mnoho textu
• Žádné záchytné body pro oko čtenáře
• Nízká kvalita obrázků
• Chaotická struktura stránek
• Monotónní obsah bez kontrastu
• Fonty, pozadí a barvy, které spolu neladí

4. Trendy ve web designu

Nejdůležitějším úkolem web designu je:

Zajistit, aby návštěva webových stránek byla zážitkem, zábavou; aby s návštěvníkem stránky komunikovaly a zaujaly ho.

Navíc my jako návštěvníci máme rádi, když máme při prohlížení nad webem kontrolu a také se chceme učit a získat něco hodnotného. Jak toho všeho dosáhnout?

Jednoduchost

Jednoduchost je naprostý základ. Tzv. Flat (plochý) design je formou minimalismu ve webdesignu. Každý prvek v něm má svůj prostor a pozadí.

Vše je prezentováno v jasných, harmonických barvách. Fonty, linie a pozadí jsou výraznější, ostřejší a jasnější. Ideální ukázkou je ve světě mimo displej počítače architektura Ludwiga Mies van der Rohe dvacátých a třicátých let a její čistota a jednoduchost – ostatně jeho aforismy „Méně je více“ a „Bůh je v detailech“ to potvrzují.

3D

Plochý design doplnila i 3D dimenze. Neumorfismus přidává stín dvojrozměrným tvarům, jako jsou tlačítka či ikony, a tím zvýrazňuje jejich obrysy. Díky němu vzniká vizuální reliéf a jasněji odděluje prvky od jejich pozadí.

Ukázka neumorfismu

Ve Webnode můžete tento princip využít – každé sekci můžete přidat dekorativní okraj a tím zvýraznit obsah, který obsahuje. Také můžete přidat stín k jednotlivým tlačítkům.

Dekorativní okraj sekce a stínování

Tmavé barvy a gradient

Co se týče pozadí, doporučujeme tmavé pozadí a doplňující barvy v jedné paletě. Měkké barevné tóny, které se stupňují od nejsvětlejší až k tmavé, šetří zrak čtenáře a umožňují tak vydržet u obrazovky déle.

Design webu s příběhem

Nejde jen o vizuální stránku internetových stránek. Důležitý je i příběh, který za vaším obsahem je a správně zvolenými obrázky a texty ho můžete podpořit.

Proč nezkusit převyprávět vaši cestu k tomu, jak jste se stali šéfkuchařem, kadeřnicí nebo automechanikem s pomocí animovaného hrdiny a hravých obrázků?

Už jste asi narazili na naše hrdiny, kteří žijí ve světe tlumených barev a uvádějí naše blogové články i zprávy o novinkách ve Webnode.

Avatary, emotikony a meme již nejsou doménou sociálních sítí a chatů. Dokáží odlehčit obsah, vnést do něj prvek humoru a představit pointu rychleji než samotný text. Na čtenáře dobře působí, když naleznou společný prvek na vašich sociálních sítích i internetových stránkách. Animované postavičky můžou čtenáře podvědomě vrátit do dětství, do časů, kdy listovali komiksem nebo pohádkovou knížkou. Avatar oživí váš obsah a působí mnohem lépe než samotný text a barevné pozadí.

Chatbot

Chatbot je počítačový program, který na stránkách a e-shopech komunikuje se zákazníky v reálném čase. Možná už se vám taky stalo, že jste raději zavřeli okénko chatu, které na vás vyskočilo – řekli jste si, že to je neosobní forma komunikace a že vám nemůže nijak pomoci. Nezapomeňte ale, že tyto chatboty programují lidé, kteří znají dané prostředí a vědí, jaké otázky kladou zákazníci nejčastěji.

Navíc zvládne naprogramovaný chatbot pokrýt jen předem daný soubor otázek. Otázky, které nejsou naprogramované, vám zodpoví živý člen zákaznické podpory, stejným způsobem, jakým s vámi komunikuje chatbot – v reálném čase a se znalostmi zboží či služeb, o které máte zájem.

Interaktivní webdesign

Každá webová stránka vlastně interaguje s návštěvníkem. Často se objevují chatboti, ankety, formuláře, kvízy a jiné formy interaktivního designu. Opravdu interaktivní stránky jdou ještě dál a umožňují návštěvníkům, aby měli nad komunikací kontrolu. Návštěvníci pak přesně vědí, jak stránkami projít, jak oslovit zákaznickou podporu, jak zanechat zpětnou vazbu a podobně.

Cílem je co nejsnadnější a zároveň technicky pokročilá interakce se stránkami. Začít se dá analýzou cesty, kterou uživatel projde od příchodu na vstupní stránku až po dokončení nákupu – s tím vám pomůžou třeba aplikace Smartlook nebo Hotjar. Dalším krokem může být například přidání chatbota nebo jiných interaktivních aplikací.

Z pohledu marketingu má interaktivní webdesign jednoduchý účel – vyzývat návštěvníka k akci a vytvářet konverze. Výzva k akci (tzv. CTA – Call To Action) je prvním krokem konverze – návštěvník na ni klikne a dostane se na stránku s konkrétní akcí, např. formulářem pro přihlášení, nebo přidá zboží do košíku.

Nekonvenční styly

V širším slova smyslu interaktivní webdesign vlastně vyzývá ke změně zaběhlých standardů. Pamatujete, jak jsme si říkali o obsahu nad a pod ohybem? Dnešní design umožňuje zcela nové způsoby scrollování – místo klasického směru shora dolů se můžete obsahem pohybovat i zleva doprava.

Diagonální webdesign je trendem poslední doby. Spočívá v tom, že se do pozadí přidají prvky, které vedou čtenáře zleva doprava a pomáhají s procházením celé délky stránky. Vodorovná čára může například navést uživatele k požadovanému tlačítku.

Vytvořte si vlastní web a pusťte se do toho