4 nejčastější chyby při vytváření fullscreen webového pozadí

jak na fullscreen pozadí webu

Fullscreen neboli celoobrazovkové pozadí webu představuje jeden z nejúčinnějších způsobů, jak zaujmout návštěvníka za rekordně krátkou dobu. Stačí pár vteřin a povedená, krásná či originální fotka nebo grafika jako poklad celé stránky „zabrnká na tu správnou strunu“. Abyste však mohli využít potenciál „fullscreenu“ naplno, musíte pamatovat na možné chyby, které dokážou snahu mít super efektní webovky úplně zazdít. Když se jich vyvarujete, máte vyhráno.

webove-stranky-pro-fotografa

1. Rozkostičkované nebo zdeformované fotografie

Neexistuje nic horšího, než když fotka na pozadí webu vypadá jak z digitálního pravěku nebo ze hry Minecraft, kdy kvůli umístění na velké ploše není ostrá, ale kostičkovaná. A prvotní dobrý dojem, který v návštěvníkovi moderní design vyvolal, vmžiku zmizí. Proto vždy používejte jen vysoce kvalitní obrázky s dostatečnou velikostí i zobrazovacím rozlišením dpi. Na druhé straně dbejte i na to, aby soubor nebyl příliš velký a zbytečně neomezoval rychlost načítání webových stránek.

Tip: Pokud stahujete fotografie zdarma z volně dostupných zdrojů, některé portály vám umožní volbu rozměru. Vybírejte takový, který má rozlišení minimálně 1920px na šířku.

A na předchozí informace můžeme navázat i nejrůznějšími deformacemi, jako jsou protáhlé obličeje či podivně široké nebo pokroucené budovy a předměty. Ty vznikají při úpravách rozměrů, kdy si nepohlídáte proporce. Pokud máte fotku např. 800×500 px a chcete zmenšit její šířku, tak úplně stejnou porci musíte ubrat i výšce. Všimněte si, jak vypadá oproti originálu vlevo obrázek, který je rozostřený a navíc ještě zmenšený pouze v jednom směru:

práce s fullscreen fotografií

2. Pozadí, ve kterém vše ostatní zaniká

Další problém bychom mohli popsat i jako pozadí, ze kterého se stane neprostupné popředí. Znamená to, že absolutně převálcuje textový obsah i prvky, jako jsou menu či tlačítka a další. Na vině může být několik faktorů. Uvedeme dva z nejobvyklejších.

Obrázek je buď velmi výrazný sám o sobě (barevností, složitostí scenérie, vyobrazenými detaily apod.), nebo je laděný podobně jako další součásti webu. A tím pádem vše splyne do jednoho celku, ve kterém nelze nic pořádně rozpoznat.

fulscreen-pozadi-webu-necitelny-text

Pamatujte tedy na to, že pozadí musí být vždy jen pozadím. I když jde o působivý designový doplněk, co umí velké věci, neměl by zastínit účel a funkčnost webu. K čemu je ohromující grafika, když ukradne veškerou pozornost a nedovolí co nejrychleji vyřešit problém, se kterým návštěvník na web přichází? Klíčem k úspěchu je kontrast.

použití fullscreen pozadí s barevným filtremFotku překryjte barevným filtrem

použití fullscreen pozadí se zvýrazněným textemText zvýrazněte jednobarevným podkladem.

Fotografie na pozadí musí dávat příležitost vyniknout – písmu, tlačítkům, menu a všemu podstatnému, co předává informace nebo směruje uživatele. A toho dosáhnete rozličnými způsoby. Nemusíte se vydávat jen cestou syté vs. jemné barvy či barva vs. black&white. Nabízí se i velké vs. malé tvary, ostré vs. umělecky rozostřené apod.

Tip: Jestliže text není vidět tak, jak byste si představovali ani po aplikování metody kontrastu, můžete ho vyzdvihnout jednoduchým trikem. Umístěte ho do zvláštního jednobarevného „okna“, jako kdybyste na fotku přilepili lístek z poznámkového bločku.

3. Špatná kompozice

Tato chyba úzce souvisí s předchozí. Dá se říci, že na ni přímo navazuje. Jde o případ, kdy použitá fotografie nemá vhodnou kompozici. Příkladem může být snímek, ve kterém sehrává hlavní roli nějaká budova. Avšak nachází se na stejném místě jako důležité texty na webu. Ve výsledku tak opět vzniká nepřehledný chaos. Obsah se na pozadí ztratí a i naopak – z vizuálu zbyde zlomek toho, co mělo být hlavním tahounem.

špatně čitelný text na pozadí webu

Tip: Začínejte vždy nejprve vložením obrázku na pozadí a až poté rozmisťujte jednotlivé webové prvky, jako jsou textové bloky, tlačítka, menu, widgety atd.

fullscreen pozadí s barevným filtrem

4. Nezobrazuje se všude správně

Nežádoucí také je, když si „pozadí dělá, co chce“ v závislosti na velikosti zařízení, přes které uživatel na stránky vstupuje. Na 4palcovém displeji telefonu se např. kus ukrojí, na 22palcovém monitoru nedoléhá až k okrajům… A tak bychom mohli ve výčtu obtíží pokračovat. Přitom plně responzivní web je v současné době naprostou nutností. Nedokonalosti se mohou projevit i v jednotlivých prohlížečích.

Proto je vždy vhodné důkladně otestovat, že web vypadá na všech nejpopulárnějších platformách stejně. A případné chyby okamžitě odstranit.

Tip: Zapojte do ověřování a zkoušení své přátele a známé. Velmi snadno tak shromáždíte údaje z různě velkých zařízení.

Moderní fullscreenové pozadí dokáže i v jiném ohledu průměrný nebo ještě nedotažený web dovést k pomyslné dokonalosti. Vypadá skvěle a nejednoho návštěvníka ohromí. Protože na internetu více než kde jinde platí, že co je atraktivní, to v očích uživatelů stoupá na hodnotě skutečně raketovým tempem. Pokud se vyhnete chybám, které jsme v tomto článku uvedli, bude fullscreen pro váš web trefa do černého a posune váš projekt nebo podnikání dopředu.

V MioWebu se starám o marketing a prodej. Posílám Vám e-maily, hledám a sepisuju pro Vás tipy nejen okolo webů a e-shopů, ale i podnikání a marketingu na internetu, které Vám pomohou se prosadit a vydělávat.

Vytvořte si profesionální web
za pár hodin

Od teď už nepotřebujete programátora.
Web si jednoduše poskládáte sami z desítek připravených obsahových prvků a designových bloků.

Komentáře
  1. Igor napsal:

    Díky Viktore 🙂

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *