Grafika webu, responzivní design

Tvorba webů a e-shopů

Grafika webu, responzivní design

Grafiku se snažíme navrhovat tak, aby splňovala nejen všechny požadavky na moderní design, ale především na přehlednost a příjemnost, tj. kladné vnímání návštěvníky (UX design). Podle druhu a zaměření projektu používáme jak tzv. „flat design“, tj. jednoduchý design využívající barevné plochy a výraznou typografii, až po ručně malovanou grafiku včetně animací.

Na prvním místě je však vždy sdělení, tj. grafika pomáhá obsahu, který má web komunikovat, případně produktu, který má být prodán na e-shopu.

Responzivní nebo adaptivní?

Ať tak nebo tak, důležité je, aby byl web nebo e-shop přehledný a bylo příjemné jej používat jak na počítači s velkým monitorem, notebooku s menším displejem, tak tabletech a mobilních telefonech. Vždyť přístupů z mobilních zařízení stále přibývá a již překročily 20 % ze všech návštěv.

Responzivní design přizpůsobuje obsah stránky velikosti obrazovky.

Na počítačích a noteboocích je ten samý obsah zobrazen jinak než na tabletech, protože máme k dispozici nejen větší monitor, ale také myš, se kterou se návštěvník „trefí“ i na menší odkazy. Na tabletech upravujeme zobrazení obsahu nejen pro lepší čtení, ale i ovládání prsty. Pro mobilní telefony je nutné ještě více zvětšit text, tlačítka apod., aby byl web stále dobře „čitelný“ a ovladatelný na malé obrazovce.

S nárůstem mobilních zařízení a tím změnou chování návštěvníků doporučujeme realizovat stránky s minimem dělení na podstránky (jsou preferovány stránky s maximem informací než rozdělení obsahu na několik stránek) a současně zobrazením multimediálních prvků (fotografií, videí, 2D a 3D animací) přes celou obrazovku.

Existenci „mobilní verze“ dnes vyžadují nejen návštěvníci a zákazníci, ale preferují je také vyhledávače. Pokud není web nebo e-shop optimalizován pro mobilní telefony, je penalizován ve vyhledávání.

Postup návrhu grafiky

1. Drátěné modely (wireframe)

Návrh grafiky webů i e-shopů začíná drátěnými modely, na kterých je odladěn způsob navigace, struktura a rozsah publikovaných informací a umístění hlavních prvků na typických stránkách vznikajícího projektu.

2. Grafický návrh

Grafika projektů vzniká v týmu, není tedy dílem samotného grafika. Na tvorbě se podílí kreativec, grafik, manažer a okrajově i programátor, který konzultuje reálnost realizace.
Grafické návrhy vznikají na zakázku, tj. jsou jedinečné a snaží se maximálně zohlednit typ obsahu (web, e-shop, intranet, webová aplikace) i obor. Jinou grafiku vyžaduje představení služeb, prodej korálků nebo strojírenských sestav nebo dětský vzdělávací portál. Disponujeme několika grafiky, kteří mají svůj vlastní styl, a můžeme tak nabídnout i několik variant návrhů.

3. Mobilní verze

Mobilní verzi, resp. varianty zobrazení na různých zařízeních (velikostech obrazovek), připravujeme současně s grafickým návrhem. Nesouhlasíme s tvrzením „Mobile First“, tj. první navrhovat mobilní verzi a následně rozšiřovat na větší obrazovky, ale navrhujeme design koncepčně, s myšlenkou „pro všechna zařízení“.

Mobilní verzi lze realizovat dvěma způsoby, prvním je responzivní design přizpůsobující se všem velikostem obrazovek (fluidní řešení grafiky) nebo vytvoření variant zobrazení obsahu pro počítače, tablety a mobilní telefony (fixní šablony). Druhý způsob je ekonomičtějším řešením splňujícím základní požadavky návštěvníků.

Drátěné modely i vlastní grafické návrhy jsou odladěny společně s klientem a na základě testování s focus group (různé velikosti dle rozsahu projektu).

Vlastnosti webů z pohledu grafiky

Grafiky webů ovlivňuje nejen vnímání celku návštěvníky, ale také další důležité vlastnosti celého projektu.

  • Rychlost načítání – grafiku je nutné navrhovat tak, aby se web načítal rychle. Studie hovoří až o 7 % úbytku návštěvníků s každou sekundou čekání.
  • Responzivní vs. Mobilní verze – v závislosti na druhu a cílech projektu je možné realizovat plně responzivní grafiku nebo jednodušší „mobilní verzi“, která je optimalizována pro všechna mobilní zařízení jako celek.
  • Používání webových vs. mobilních komponent – pro mobilní zařízení je vhodné používat nativních komponent zařízení (kalendář, formuláře, filtry apod.) Ovládání je pak výrazně jednodušší.
  • Tablet a Mobilní telefon – pro tablety je nevhodné používat mobilní verzi. Tablety dosahují rozlišení jako stolní počítače, je tedy vhodnější webová nebo upravená webová verze.
  • Obsah – obsah by měl být členěn do odstavců s nadpisy pro lepší přehlednost a musí se přizpůsobovat velikosti dané obrazovky. Grafické prvky stránky se musí přesouvat na místa pro ně nejvhodnější a neměly by obsahovat text, protože ten je při malých rozlišeních nečitelný.

Mobilní web

Samostatný mobilní web, který má svou adresu a zobrazuje stejný obsah jako webové verze, je v dnešní době nevhodným řešením hned z několika důvodů:

  1. Nákladnější tvorba než responzivní design
  2. Nákladnější správa a rozvoj projektu než responzivní design
  3. Duplikace stejného obsahu na více adresách a tím penalizace vyhledávači, a naopak podpora „mobile-friendly“ (responzivních) webů – zde
  4. Nevhodnost zobrazení na některých zařízeních – např. tablet na výšku vs. na šířku (rozlišení podobné jako počítače)

Kontaktujte nás!

captcha