Webdesignové trendy pro rok 2016

Webový design se vyvíjí raketovou rychlostí. Neustále přicházejí nové trendy. Některé se udrží sotva pár let, jiné přečkají i dekádu.

Přestože na český internet nemají takový vliv, jako je tomu v zahraničí, rozhodl jsem se shrnout 5 nejdůležitějších trendů pro rok 2016, které by vám neměly uniknout.

#1 sjednocování vzhledu webových stránek

Současný vývoj internetu naznačuje pozvolné směřování k jednotnému vzhledu webových stránek, danému zejména shodnými standardizovanými prvky. Vliv na to má hned několik faktorů.

  1. Stoupající obliba open source řešení (zejména Word Pressu) a s ní související rozvoj obchodů s šablonami.
  2. Dominující trend plochého designu, zjednodušující tvary, barvy i písma (viz níže).
  3. Masivní nástup responzivního designu s potřebou univerzální použitelnosti na různých zařízeních.

Koneckonců na uniformovanost jsme zvyklí z každodenního používání facebooku, youtube apod., takže to vlastně málokomu připadá zvláštní. Navíc důležitější je přece obsah než-li forma.

Nyní se podíváme na nejčastější jednotící prvky, které nás čekají v roce 2016.

Hero images

Anglický termín "hero images" se používá pro velké HD bannery, nejčastěji fotografie, která mají za úkol ukamžitě upoutat návštěvníkovu pozornost. Setkáme se s nimi zejména v záhlaví stránek, přičemž na titulní stránce často zabírají celou obrazovku.

ukázka: https://www.magisto.com

Celostránkové slideshow

Slideshow jsou velmi populární již několik let. A není se čemu divit. Přinášejí způsob, jak předat návštěvníkovi důležitá sdělení zajímavou a efektivní formou a mnohdy šetří místo. Současným trendem jsou velké, celkostránkové slideshow, které podobně jako "hero images" nalezneme nejčastěji v záhlaví titulní stránky webu.

ukázka: http://vanmoof.com

Card layout

Nápad, který rozšířil portál pinterest.com spočívá ve využití menších obsahových kontejnerů, kladených vedle sebe. Pomocí tzv. dynamické mřížky na sebe mohou navazovat různě vysoké (popřípadě různě široké) kontejnery (jQuery dynamickými mřížkami jsem se zabýval v tomto článku). Toto členění je přehledné a praktické. Jeho využití v responzivním designu se přímo vybízí.

ukázka: https://www.pinterest.com (vyžaduje registraci)

Skrytá navigace

Na tlačítka připomínající hamburger, kterými rozbalíme navigaci jsme všichni zvyklí především z mobilů. Proč si ale neušetřit místo a nepoužívat jej i v plném zobrazení webů? V zahraničí už je to celkem běžné. Řešení jakým způsobem skrytou navigaci po kliknutí na tlačítko zobrazit je mnoho. Jedno z nich naleznete v ukázkce.

ukázka: http://tinderflint.tv

Fullscreen formuláře

Pro potřeby responzivního designu a zejména vyššího pohodlí i rychlosti načítání na mobilních zařízeních se postupně prosazují celoobrazovkové formuláře překrývající stránku. Nejčastěji se s nimi setkáme u registračního, přihlašovacího nebo kontaktního formuláře.

ukázka: http://eighty-east.com.au

Scrollování

Doby, kdy se všichni snažili soustředit veškeré důležité informace do omezeného prostoru tak, aby byly vidět hned na první pohled jsou zdá se pryč. Dnes již většina uživatelů disponuje zařízením, na kterém není scrollování problém, takže se mnozí designéři přestali co do výšky webů omezovat. Některé weby to kompenzují různými ovládacími prvky (šipky nahoru a dolu). Připravte se ale, že vaše prsty budou skutečně "namakané".

ukázka: http://burciaga.co/is/photography/

Najdou se ale i výjimky...

ukázka: http://hellouppercase.com

#2 bohaté animace

Přestože běžící text a flash jsou dnes spíše muzejní záležitostí, s animacemi se na interentu setkáváme stále častěji. V době zjednodušování a sjednocování webového designu představují animace způsob jak se odlišit od konkurence. V jakých případech je vhodné a "trendy" je využit?

Video na pozadí

Nejspíš jste se již setkali s touto novinkou. V zahraničí se pomalu dostávají do módy weby, používají místo obrázku na pozadí animaci nebo video.

ukázka: http://www.dunckelfeld.de/en/

Animované slideshow

Animovaná slideshow na pozadí webu může představovat jednodušší a dostupnější variantu přechozího trendu. V ukázce uvádím zajímavý jQuery plugin.

ukázka: http://vegas.jaysalvat.com

Animace po najetí myši

S různými změnami po najetí myši, zejména u obrázků se setkáváme běžně. Proč ale nezvolit kreativnější animace jako v ukázce?

ukázka: http://humaan.com

Příležitostí k využití animace je více, např.:

  • animace při načítání stránky;
  • rozbalování skrytého menu;
  • otevírání vyskakovacího okna.

#3 responzivní design

S masivním rozvojem internetu v mobilních zařízeních jde ruku v ruce rozvoj tzv. responzivního designu. Mobilní verze je dnes takřka nutností a to nejen z toho důvodu, že Google od dubna 2015 oficiálně penalizuje weby bez mobilní verze ve výsledcích vyhledávání. Na rozdíl od dříve časté metody tvorby různých šablon nebo rovnou různých webů pro různá zařízení, responzivní design přichází s univerzálním a jednoduchým řešením - vzhledem, který se automaticky a okamžitě přizpůsobuje danému zařízení. Rozhodující je šířka obrazovky, nebo přesněji řečeno šířka okna prohlížeče.

Takové řešení je vysoce efektivní a přitom mnohem jednodušší a tedy i levnější. Existuje mnoho metod, kterými jde responzivity dosáhnout. Mezi nejoblíbenější z nich patří využití tzv. "media queries", tedy jednoduchých CSS podmínek, kterými se na základě šířky prohlížeče stanoví mezní body pro využití různých sad stylů. Je důležité nezapomínat na optimalizaci z hlediska výkonu. Musejí totiž počítat, že z technického hlediska totožný web může být používán jak na počítači tak na mobilu.

Responzivní design není žádnou horkou novinkou. Ale předpokládá se, že bude v nejbližších letech stále nabírat na popularitě.

ukázka: http://popnews.cz

#4 plochý design

Grafické podobě uživatelského rozhraní nejen na internetu, ale i v počítačových a mobilních aplikacích v posledních letech jednoznačně vládne tzv. plochý design ("flat design"). Ten se vyznačuje až minimalistickou jednoduchostí, čistotou a důrazem na použitelnost. Pracuje s otevřeným prostorem, jednoduchými tvary, ostrými hranami, čistými barvami a jednoduchou typografií. Oproti dnes již zastaralému "skeuomorphism designu" téměř vymizely barevné přechody, rámečky, zaoblení a různé 3D efekty.

Masivní rozšíření můžeme přičíst na vrub Microsoftu, který s plochým designem přišel v rámci své služby Zune a následně jej rozpracoval v OS Windows 8 a 10. Tento trend se téměř s jistotou nebude v dohledné době měnit, naopak se předpokládá, že na něj bude přecházet čím dál více designérů.

ukázka: http://www.buildinamsterdam.com

#5 material design

Material design je vizuální jazyk vyvinutý společností Google. Je postaven na principech plochého designu, do kterého přináší nenásilné prvky realističnosti a hmatatelnosti, čehož dosahuje zdánlivým přidáním třetího rozměru. Ve webdesignu je toho možné dosáhnout např. stínováním a vzájemným překrýváním elementů. V nejbližších letech se očekává velký boom tohoto designu. Pro webdesignéry je již nyní k dispozici balíček Material Design Lite, se sadou CSS stylů a jQuery funkcí, který má usnadnit implementaci material designu do webových stránek (a opět jsme u toho sjednocování...).

 

Přidat komentář

Plain text

  • Nejsou povoleny HTML značky.
  • Řádky a odstavce se zalomí automaticky.
  • Email addresses will be obfuscated in the page source to reduce the chances of being harvested by spammers.
  • Webové a e-mailové adresy jsou automaticky převedeny na odkazy.
CAPTCHA
Ochrana proti spamu.
9 + 7 =
Vyřešte tento jednoduchý matematický příklad a vložte výsledek. Např. pro 1+3 vložte 4.