Jaké jsou výhledy v roce 2017? Kam jsme se posunuli a co očekáváme?

Nechat vyniknout obsah

Webdesign se vrací zpět ke svému prvotnímu účelu – kvalitně a přehledně prezentovat obsah. Koncepce layoutu by měla navést návštěvníka přímo k hlavnímu sdělení a provádět obsahem. Dobrým příkladem zjednodušování a minimalizace formy je Material Design od Google, který mimo jiné klade důraz na jednotnou formu prezentace a ovládání napříč zařízeními.

Prohloubit spolupráci mezi designery a vývojáři

Ptáte se, jak může spolupráce designera a vývojáře ovlivnit design? Designer se ihned dozví, jaké části návrhu jsou hůře implementovatelné nebo budou dobře opakovaně využitelné. Vedlejším produktem je zajištění konzistence návrhových vzorů i konceptu designu přes všechny stránky projektu. Koncepce opakované použitelnosti konstrukčních bloků (komponent) usnadňuje další rozvoj projektu bez nutnosti stálého dohledu grafika.

Vylepšit workflow od grafiky ke kódu

Stále častěji se vytváří funkční prototypy a dynamické vizualizace. U složitých zakázek a klientů je to vítaná cesta pro prezentaci řešení a názorné ukázání funkčnosti a logiky. Rychle se odhalí případné nedostatky a rozdílná očekávání. Na začátku přípravy je nutné dobře nastavit míru granulity vizualizace – zpracovat jen drátěný model s podrobným rozkresem hlavního obsahu nebo připravovat vizualizaci velmi blízkou s grafickým zadáním. Na trhu se nabízí mnoho nástrojů jako jsou InVision, Marvel, nebo UXPin. V praxi jsou často využívány in house řešení, která jsou založena na frameworcích aplikovaných na produkci.

Smělá a výrazná typografie

Nebojte se udělat hlavní nadpisy a důležité informační bloky velkým písmem! Dejte textu prostor a váhu. Ne vždy musí výrazný znamenat tučný. Naopak, často stačí ponechat textu prostor, zvolit tenký řez a přiměřenou velikost. Lehkost a prostor dá sdělení váhu.

Komplexní layouty

I komplexní vzhled podléhá základním designovým principům a návrhům, které dále rozvíjí. Vývoj na poli prohlížečů a vymírání starých verzí uvolňuje ruce nejen vývojářům, ale i grafikům. Díky flexboxu, CSS mřížce a dalším novinkám můžeme realizovat i zdánlivě bláznivé designy a rozložení. Kritickým místem je však zkušenost vývojového týmu v kontextu znalostí a nastavení responzivního chování.

Více SVG

SVG jsou vpravdě kouzelné vektorové soubory, protože veškeré elementy definujeme matematicky (kruh, úsečka atp.). Můžeme libovolně měnit jejich velikost beze ztráty kvality. Samozřejmostí jsou animace a další transformace. SVG může obsahovat i bitmapovou grafiku – má téměř neomezené možnosti využití.

Zjednodušování chování

Klasický responzivní design pracuje se změnou rozložení na jednotlivých breakpointech (body, kdy měníme vzhled). Nově se začíná pracovat i s ovlivněním vertikálního taktu na jednotlivých breakpointech. Například na úzkých telefonech se zúží prostor okolo elementů. Čitelnost je zachována a vejde se více obsahu.

Jasné barvy

Dá se říci, že rok 2016 byl rokem minimalismu. Cestou ke vtisknutí osobitosti do úzkých mantinelů se stalo použití bohatých a výrazných barevných schemat. Stačí se podívat na logo Instagramu. Klíčovým prvkem je správná volba oku lahodící barevné palety – často tlumenější až pastelové odstíny, které jsou ve velkých plochách příjemné. Měkkost barev a jejich přechody změkčují strohost technického minimalismu.

Větší důraz na animace

Animace už dlouho dobu hrají nemalou roli při návrhu a komunikaci s návštěvníkem webu. V posledních letech vzniká vice a více nástrojů pro tvorbu podmanivých animací bez nutnosti složitého programování. Grafik tak musí být obezřetný a nenechat se unést značnými možnosti nástrojů. Je důležité definovat a udržet jasný koncept pro použití velkých i drobnějších animací. Animace nesmí být hrubé a obtěžující, spíše decentní a vyvolávající úsměv nebo překvapení.

Unikátní design

Webdesign prošel dlouhou cestou od klasické „hokejky“, přes nekonečný fluidní design až po středově centrovaný. Ruku v ruce s novými technologiemi se dají použít nové přístupy k designu jako je asymetrické uspořádání, změna perspektivy, využité negativního prostoru, překrývání textů a bloků a další.

Flexbox

Téměř tajemná funkcionalita umožňující komfortní manipulaci se vzhledem a rozložením bloků na stránce. Extrémně vhodné právě při responzi. Bohužel není dobře podporován v IE 11.

Komplexní mřížky

Flexbox skvěle řeší vertikální zarovnání nebo prohazování pořadí sloupců. Mřížka je oproti tomu navržena na konstrukci a změny pozic celých stránek ve vztahu k měnící se šířce prohlížeče.

Cílení na personalizovaný obsah a konverzi

Vždy bylo důležité poskytovat informace kvalitně a poutavě. Tlak na poskytování informací správným lidem ve správný čas se stává klíčovou zbraní v konkurenčním boji. Personalizaci obsahu můžeme rozdělit do tří základních typů:

  • Demografická – je návštěva soukromá nebo profesní, odkud návštěvník přichází?
  • Chování – co návštěvník právě dělá, co dělal v minulosti?
  • Kontext – jaké zařízení a prohlížeč používá? Jak se na stránky vrací? Je přihlášen?

Zajímavá jsou porovnání ruční personalizace a algoritmických řešení jako má Facebook. Velkou otázkou zůstává, jakou cestou se vydat. Důležité je najít průsečík mezi našimi cíli a očekáváním/potřebami uživatele.

Konverze není jedinou metrikou personalizace. Personalizace nápovědy nebo výukové materiály mohou významně snížit zátěž supportu a zlepšit spokojenost uživatele a to je také velmi cenné.

Větší důraz na konverzaci

V roce 2016 nastal velký rozmach konverzačních robotů a asistentek. Avšak řešení od Apple, Google nebo Amazonu nijak neoslnilo. Co z toho plyne?

  • Používejme pro komunikaci „lidskou” řeč, věcné a přesto hezké slovní obraty.
  • Snažme se zvýšit využití a kapacitu copywriterů a zintenzivnit jejich spolupráci s vývojáři robotů.
  • Tvořme a udržujme komunity, které nám přinesou tolik ceněný obsah.
  • Pokusme se vytvořit ze stoky komentářů nový obsah.

Vhled do designu a obsahu

V průběhu roku 2016 mnoho týmů zakládalo blogy, kde prezentovaly a popularizovaly svou práci a postupy. Trend zlidšťování značky a rozšiřování povědomí o ní pokračuje. Nutno podotknout, že tento typ obsahu je zaměřen spíše na nábor nových členů týmu. Ovšem, když se podaří vhodně skloubit propagaci značky, její zlidštění a apel na prospěšnost – je velká šance na úspěch i mimo vývojářskou komunitu.

Závěr

Naše první projekty v systému m@gnetpro 2.0 pro společnost GS1 jsou realizovány v souladu s aktuálními trendy.