Web Design Trendy 2015
Je začátek nového roku a s novým rokem přicházejí i novinky v oblasti webové grafiky, webdesignu a UI designu. V loňském roce se událo pár nenápadných až revolučních změn a u některých to vypadá, že nás dlouho neopustí. Asi největším hráčem na poli tvorby změn ve webdesignu a UI designu je překvapivě strýček Google a pan Apple, (nemluvě o dalších velkých společnost, udávající směr v této oblasti) kterými se my, menší až větší designéři můžeme (anebo nemusíme) řídit.
Zde je výčet oněch trendů, které nás budou provázet v roce 2015:
MINIMALISMUS
Není čas! To asi nejvíce vystihuje důvod, proč se začalo při tvorbě webu používat stále méně a méně věcí, které by uživatele zbytečně rozptylovaly namísto toho, abychom mu jasně a jednoduše ukázali, kde co je.
Až budete začínat s tvorbou nového webu, vzpomeňte si na poučku z marketingu: „Text, který jsi napsal, zkrať na polovinu a se zbytkem udělej totéž!“
Prostě: Přehledně a čistě!
FLAT DESIGN
Rozlučte se s barevnými přechody, stíny a víceméně také s kulatými rohy! Nastává doba Flat design… Flat design je už s námi nějaký ten pátek a kdo by si myslel, že jde jen o přechodný trend, ten je na velkém omylu. Flat design je výborný nástroj na to, dělat věci jednoduše, rychle, hezky a moderně.
Při výběru barvy, vám může pomoct nástroj Adobe Color.
No posuďte sami, který styl se vám zdá modernější…
Výhody, které nám Flat design přináší:
- Rychlejší načítání stránky
- Jednoduchost u grafiky a stylování v CSS
- Cross-browser – neboli žádný strach, že vám staré prohlížeče neukáží to, co chcete
- Přehlednost a moderní vzhled
Jak pracovat s Flat designem se můžete dočíst i v novém „manuálu“, který pro nás přichystal Google – Google’s Material Design. Více o Google’s Material Design pro Vás připravím v příštím článku…
RESPONSIVE
Mobily a tablety! V dnešní době, kdy téměř každý má chytrý mobil, si nelze představit, aby webové stránky nebyly responsivní. Tento trend narůstá a my se mu musíme přizpůsobit. Protože 90% prohlížení stránek na smartphonech a tabletech není málo. Pokud se tedy rozhodnete začít s tvorbou responsivních webových stránek, začněte u grafického návrhu pro mobil a teprve potom se dostaňte k desktopové verzi.
Mobil na prvním místě!
Velkým pomocníkem (pokud si rádi neděláte věci sami a od píky) mohou být užitečné frameworky, které vám neskutečně pomůžou s responsivitou a ušetří hrooomadu času. Jedním z nejlepších a nejznámějších frameworků je Bootstrap a Foundation.
Prostě: Dělejte stránky tak, aby se snadno mohli zobrazovat v každém zařízení. A používejte CSS framework!
TYPOGRAFIE
Větší! S prohlížením stránek na mobilu (a nejen na mobilu) souvisí důležitá věc a tou je typografie. Pro jednoduché a přehledné čtení, je potřeba si zapamatovat dvě věci: Větší písmo a širší řádkování. Nebojte se prázdného místa, naopak! Hned uvidíte, že se text čte snáze a čtenář jistě ocení, že nemusí mít mobil přilepený u obličeje.
Vše větší!
Velký nadpis! Chcete uživateli něco důrazně říct? Použijte velký nadpis, nejlépe s netradičním fontem.
Nové fonty! Ta tam je doba Arialu a Times New Roman. Nebojte se používat nové fonty a jejich řezy. Ale nezapomeňte, že při výběru fontu, vám naše oblíbené prohlížeče budou házet klacky pod nohy. Proto doporučuji stránku www.google.com/fonts, kde si vyberete z řady moderních i standartních fontů. Při výběru nezapomeňte zaškrtnout ve výběru Latin Extended, který vám vybere fonty s diakritikou.
Prostě: Větší nadpis. Větší obyčejné písmo. Větší proklady. Nové (české) fonty.
OBRÁZKY / VIDEO PŘES CELOU OBRAZOVKU
Větší! Obraz řekne více než tisíc slov… Webdesign není v tomto roce jen o plochých tlačítkách. Jde také o design, estetiku, vzhled! Dejte na pozadí velkou fotografii či video a uvidíte, jak se z vašich stránek, stane najednou mistrovský kousek. Navíc tematické pozadí zdůrazní poselství, které chcete sdělit uživateli. A rychleji!
Prostě fullwidth!
Že to zpomalí načítání stránek? Možná tak před dvěma lety ale dnes už si s tím dokážeme poradit. Mimochodem slider je skoro minulostí, takže nechte uživatele scrollovat. Nejen že je na to už zvyklý, ale také nemusí zbytečně čekat, než se mu objeví patřičný slide.
VIDEO
Rychlost sdělení! Nebudeme si namlouvat, že uživatelé čtou všechny naše texty na stránkách. Oni chtějí přece všechno hned a rychle. Stačí, když místo textu použijete video a máte po starostech.
Prostě: Pozadí přes celou obrazovku. Video namísto textu.
PARALLAX
Parallax je elegantní technika, kdy se v popředí pohybují obrázky jinak, než v pozadí. Nebo naopak… Je to přesně ten „Wow“ efekt, který vám pomůže vdechnout vašim stránkám trochu života. Parallax je sranda, ale nenechte uživatele scrollovat do nekonečna…
SCROLLING & ONE PAGE LAYOUT
Vše v jednom! Jak už jsem zmínil, uživatelé jsou již zvyklí scrollovat. Nenuťte je hledat v navigaci požadované stránky. Prostě mu je dejte pod sebe a máte vyhráno.
Nechte uživatele scrollovat!
U tohoto typu stránek bych však doporučoval statickou horní navigaci nebo statické levé/pravé menu, aby mohli uživatelé VŽDY překliknout na jinou stránku bez zbytečného scrollu nahoru.
Prostě: Vše na jedné stránce.
GHOST BUTTONS & CALL TO ACTION
Elegantní důraz! Ghost button je nový designový prvek, který jednoduchou formou navádí uživatele k nějaké akci. Mají většinou bílé okraje a transparentní pozadí, proto asi název Ghost button.
Call-to-Action button jsou obdobná tlačítka, které už více nabádají uživatele ke kliknutí. (Většinou se také nikam jinam kliknout nedá).
Prostě: Jedno lehké tlačítko.
CARDS / DLAŽDICE
Dlaždice! Znáte Pinterest? Používá tzv. dlaždicový systém – jednoduché karty ve sloupcích. Tento systém vám dává možnost ukázat velké množství informací či fotek na jednom místě. Někomu se může zdát, že s přehledností to nemá nic společného, ale vezmeme-li v potaz praktickou část, tak svůj účel to plní.
Podobně můžeme ukazovat fotografie za pomoci některých pluginů či scriptů. Např. Isotope, Masonry, atd. Výhodou je totiž automatické přizpůsobení velikosti obrazovky.
Prostě: Množství informací. Automatická responsivita.
IKONY
Ikony everywhere! Ač je dobré dělat webové stránky pro všechny a všechno pečlivě popisovat, nad jeden argument to nemá: Lidé jsou líní. Čím rychleji zpracovaná informace, tím lépe. S tím souvisí i zobrazení informací společně s ikonkami. Takové slovo Home (Úvodní stránka) lze už jednoduše nahradit ikonku alá domeček. Takže pomalinku polehoučku nahrazujte popisy tematickými ikonkami.
Zkuste FontAwesome
Doporučuji používat sadu ikonek, které se dají použít jako font. Jedná se o speciální vektorové ikonky, které neztrácí na kvalitě při změně velikosti, a nebojte se, že si nevyberete. Takový FontAwesome jich má nepřeberné množství a hlavně ušetříte čas kodérovi, který jen vezme kód ikonky a strčí ho do kódu.
Prostě: Používat ikonky (minimálně s popisy). Používat ikonky alá font.
