Koncepční změny
V případě obecných designérských zásad se nové podoby, resp. rozšíření, dočkal plochý (flat) design. Hloubky a nuancí mu nyní mají dodat hlavně přechody a stíny, tedy prvky, kterým se dosud vyhýbal. V obou případech se ovšem předpokládá uměřené použití, bez excesů minulostí ve stylu designu webů z prvního desetiletí tohoto století. Přechody nyní staví na jasných barevných paletách a jemnějších subtilnějších změnách. Oblíbenými se staly aplikace výplňového filtru přes fotografii či použití přechodových pozadí. Rovněž stíny by měly být nasazeny střídmě a stylizovaně, zejména pro zvýraznění interakcí (tlačítka apod.), formulářových prvků, výzev k akci či odkazů. Použity s mřížkovým rozvržením a paralaxovým efektem dovolí stíny ještě více vytvořit pocit hloubky a světa za obrazovkou. Nová verze plochého designu se tak pokouší o symbiózu s principy skeuomorfismu a hyperreality, vůči kterým se původní koncepce ostře vymezovala.
Výrazně narůst by měl počet webů, jež proti někdy až přílišné úměrnosti plochého designu staví opačný extrém, tedy často až nadměrné užití různorodosti na malé ploše. Hovoří se zde o nových trendech maximalismu a brutalismu. Tyto, lapidárně řečeno, dávají designérovi úplnou volnost v jeho tvorbě s vyloučením omezení, optimalizačních doporučení a nejlepších postupů. Netřeba až příliš zdůrazňovat, že mezi esteticky zdařilým výsledkem a přeplácaností je v takovém případě jen velmi tenká hranice, na kterou si designér musí dávat opravdu pozor.
Obdobně v protikladu ke stávajícím zaběhaným principům je nárůst popularity asymetrických layoutů a layoutů postavených na narušené mřížce. Jdou hlavně proti principům responzivního designu a jeho uniformnosti. Neotřelost spojená s daným typem layoutu předpokládá výrazně vyšší investici úsilí i invence, což se vyplatí zejména velkým značkám, disponujícím dostatkem prostředků a potřebou vymezit se vůči uniformitě.
Mobil versus desktop
Loni začalo poprvé mobilní využití internetu převažovat nad desktopovým, a lze předpokládat, že jde o setrvalý trend. To znamená i pro webdesignéry nové výzvy – ač byl mobilní faktor brán v potaz i v minulosti (responzivní a mobile first design, požadavek na mobilitu v Google Search aj.), stal se nyní mnohem důležitějším. Zásadní bude např. další rozšíření podpory mobilních interakcí typu dotykových gest a přizpůsobení designu a navigace malým obrazovkám (různé formy rozvinovacích a vysunovacích nabídek, převod horizontálního obsahu na vertikální pro snazší skrolování aj.). Rovněž bude třeba víc než kdy dříve již na začátku návrhu designu webového rozhraní zohlednit omezení a specifika mobilních zařízení, jako jsou nižší výpočetní výkon a potřeba redukovat spotřebu energie, což konkrétně znamená např. omezení animací a přechodů.
Desktopové brouzdání nicméně samozřejmě není mrtvé (podíl vůči mobilnímu je stále skoro půl na půl) a má nyní k dispozici stále větší obrazovky (Ultrawide, 4k a 5k displeje aj.), I tento faktor bývá stále častěji zohledněn v designu webové stránky či aplikace, a to zejména formou širokého layoutu, využívajícího typicky mřížku, postavenou např. na nové technologii CSS Grid.
Barvy
Rok 2018 na webu měl být ve znamení přemíry barev, mnohdy v odvážných odstínech a kombinacích. Stále více designérů se dnes totiž přestává držet výlučně bezpečných webových barev a namísto toho se pouští do experimentování. Mimo jiné tak využívají výrazných barev, maximálního nasycení, jasných odstínů a protikladných barev, kombinovaných se záhlavími, jež nejsou jen horizontální, ale používají také řezy a výrazné úhly. Tyto nové přístupy jsou mj. umožněny technickým pokrokem v oblasti zobrazovacích zařízení, jež dnes dokáží reprodukovat bohatší barvová spektra. Použití výrazných a neortodoxních barev dává šanci vyniknout brand identitě, která chce naznačit inovaci a odklon od tradice, a to nejen v rámci webových prezentací, ale rovněž na sociálních médiích či billboardech.
K tvorbě barvových schémat a palet lze využívat různorodé nástroje. Kromě těch zavedených, jako jsou Adobe Color CC, COLOURlovers, Design Seeds či Coolors.co, se objevují i zajímavé novinky, jako například na umělé inteligenci postavená služba Khroma.co Ta nabízí designérovi barvové palety vycházející z jeho osobních preferencí, které si aplikace ,,natrénuje“ v úvodní fázi projektu.
Typografie
Webová typografie bude pokračovat v dosavadním příklonu k výrazným textům využívajícím velké a výrazné písmo. Zvýšit by se měl počet webů používajících patkové písmo či kombinujících patkové a bezpatkové písmo na stránce. Stále populárnější jsou výsekové nápisy, využívající překrytí obrázku, animace či videa textem na barevném pozadí.
Nové postupy úzce souvisí se zvýšením rozlišení a rozměrů zobrazovacích jednotek a zdokonalením renderovacích enginů webových prohlížečů. Díky tomu roste i popularita uživatelských písem. Jedinečnost a rozmanitost pak může webové prezentaci dodat i promyšlené použití nastupující technologie variabilních písem (rozšíření písem OpenType), za kterou stojí giganti softwarového průmyslu (Apple, Adobe, Google, Microsoft) a která je podporována jak v současných webových prohlížečích, tak třeba i nástrojích nejnovější verze Adobe Creative Cloud (Photoshop, Illustrator aj.). Díky dané technologii je nyní možno z jediného souboru fontu vygenerovat mnoho typografických obměn.
Původní ilustrace
V uplynulém roce se značně rozšířila obliba originálních ilustrací. Ty pomáhají dodat prezentaci značky či myšlenky na jedinečnosti, zajímavosti, neotřelosti a hravosti. Přitom mají značný informační potenciál, a to i v případě vyjádření abstraktních konceptů. A hlavně: obvykle se líbí. Dá se tudíž očekávat, že využití tohoto typu obsahu dále poroste.
Animace a interakce
Obdobně jako ilustrace dodávají i dobře navržené webové animace na jedinečnosti a činí značku méně statickou a více dynamickou. Navíc dokáží velmi rychle a intuitivně předat své sdělení. Obvykle ihned přitahují pozornost návštěvníka webové stránky, zvlášť nejsou-li na stránce nadužívány, a tudíž se jejich sdělení nepřekrývají.
Letos by mělo dojít k nárůstu obliby animovaných log. Dále lze očekávat větší rozšíření subtilních animací ve všech interakcích s uživatelským rozhraním stránky (indikátor načítání, přejezdy přes odkazy a tlačítka, přechody mezi stavy, skrolování a navigace aj.). Do popředí také přicházejí částicová pozadí – pomocí JavaScriptu rozpohybované různorodé tvary typu čar a oblouků. Jejich výhodou oproti pozadí s videem jsou menší nároky na výpočetní výkon a rychlejší načítání. Paralaxové skrolování je evidentně na ústupu, místo něj ale do módy přichází např. použití odlišné rychlosti skrolování pro vybrané prvky stránky. Inovace a snaha o méně uniformní podobu jsou vypozorovatelné i u použití přechodů mezi stránkami.
Z technologického hlediska je možno v oblasti animací počítat s dalším revivalem nasazení formátu GIF. Jeho animace lze vytvářet velmi snadno s použitím rozmanitých nástrojů, navíc je pak dokáže zobrazit v podstatě každý webový prohlížeč, třeba i v hodně staré verzi. Vedle toho se dá v oblasti webových animací očekávat další masivní nárůst využívající CSS, SVG a JavaScriptu, naopak platforma Flash je již definitivně mrtvá, nakolik Adobe oznámila konec její podpory v roce 2020. Pokrok v hardwaru a webových prohlížečích umožňuje i na mobilních platformách a ve vektorových formátech, jako je SVG, používat animace se snímkovou frekvencí překračující 60fps, což dovoluje použití rychle se měnících scén.
Video
V případě vkládání videa do webových stránek lze očekávat masivnější použití HTML tagu video vedle dosavadního použití videa ze služeb, jako jsou YouTube a Vimeo. Důvodem je větší flexibilita jak při začlenění videa do ostatního obsahu stránky (žádné unifikované prostředí přehrávače jako v případě výše zmíněných služeb), tak i při nastavení přehrávání a interakcí (opakované přehrání, spouštění podle aktuální pozice na stránce aj.). Hostování video souborů na stále výkonnějších a zároveň cenově dostupnějších sítích pro doručování obsahu (CDN) přitom umožňuje snížení zátěže vlastního webového serveru a urychlení stažení do návštěvníkova počítače.
Použití videa by každopádně mělo zůstat uměřené. Některé studie a výzkumy z poslední doby poukazují na fakt, že mnohé, zejména zpravodajské, weby ztratily v krátkém časovém úseku mnoho pravidelných návštěvníků poté, co začaly video příliš preferovat před textovým a statickým obrazovým obsahem.
Kinetický email
Letošek by měl být rovněž ve znamení dalšího šíření takzvaného kinetického emailu, tedy emailových sdělení typu nabídek, kampaní či newsletterů, využívajících atraktivní přechody, animace, efekty a interakce. Vzhledem k omezení e-mailových klientů, jež blokují JavaScript, staví přitom tento typ e-mailů výlučně na chytrém a často inovativním použití dynamických prvků jazyka kaskádových stylů CSS3 (transformace, animace, přejezdy) a HTMl prvků, zejména formulářů. Kinetický email je v podstatě nová generace designu mailu (navazující na dřívější rozvržení), postavená na odkazech, obrázcích a animacích v GIF, které pak byly rozšířeny a podporu responzivity.
Designéři a vývojáři (viz. např. řešení spol. Litmus či Rebelmail) dnes dokáží v případě kinetického emailu přijít s často až nečekaně propracovanými řešeními, umožňujícími např. přímo z prostředí mailového klienta provést výběr a objednávku zboží v online shopu, či vyplnění a odeslání dotazníků. Rovněž atraktivita sdělení může být na mail překvapivě vysoká díky využití prvků, jako jsou interaktivní animované navigace či slideshow.
Email má tedy nyní podstatně větší šanci zaujmout a v mnoha ohledech přestává zaostávat za webovou prezentací. Při tvorbě kinetického mailu je nicméně třeba vždy dbát na použití záložních technik, jež poskytnou jednodušší formu sdělení a v nekompatibilních poštovních klientech (přinejmenším odpovídající text).
Softwarové nástroje a technologie
Aplikace a technologie pro oblast webu se v poslední době dočkaly řady novinek. Na poli nástrojů je bezesporu nejdůležitější inovací mohutný nástup umělé inteligence. Týká se přitom jak produktů Adobe poskytovaných v rámci Creative Cloudu, tak i řešení jiných výrobců. Díky umělé inteligenci, zejména učení postavenému na neuronových sítích, se nyní nabízí možnost rychlých automatizovaných úprav a generování návrhů, nad kterými by jinak designér při využití dosavadních manuálních postupů strávil mnohem více času.
Rodina nástrojů pro webdesign se v poslední době dočkala hned několika zajímavých novinek, z nichž minimálně některé budou zřejmě ovlivňovat příští pracovní postupy. Vedle finální verze prototypovacího nástroje Adobe XD takto můžeme zmínit prostředek pro kolektivní práci nad návrhy Figma, prototypovací software Marvel, multiplatformní vektorový editor Vectr, univerzální řešení pro digitální design a animace InVision Studio a službu pro vizuální tvorbu webových prezentací Webflow.
Pozornost nedávno opět přitáhl i populární nástroj digitálních designérů Sketch, když přišel s otevřeným formátem svých souborů. To dovoluje vývojářům vytvářet různorodé prostředky pro automatizované či specializované zpracování dokumentů daného programu. Tato nová schopnost Sketch vychází vstříc nastupujícímu trendu v oblasti nástrojů daného typu, kterým je užší provázání návrhu a produkce, neboli, jinak řečeno, webového designu a webového vývoje.
V případě nových technologií pro web se v loňském roce nejvíce zvýraznil CSS Grid Layout. Jedná se o prostředek pro komplexní rozvržení webové stránky, který významně doplňuje stávající možnosti CSS v čele s technologií flexbox. Od loňska je grid podporován ve významném procentu současných webových prohlížečů (více jak 75%), a tudíž již prakticky nic nebrání jeho nasazení. Rozvržení webových stránek, obrázkové galerie, sestavy karet a obecně jakákoli celostránková rozvržení, pro která se dosud používal plovoucí, tabulkový či flexbox layout, jsou nyní výrazně snazší a bohatší.
Flexbox je spíše komplementární nežli konkurenční technologií (slouží k rozvržení v jednom směru, na řádku či sloupci, zatímco grid je určen pro současné rozvržení v obou dimenzích). I v jeho případě bychom se měli letos dočkat výrazně širšího nasazení (navigace a nabídky, karty a panely, tabulkové layouty, responzivní mřížky aj.), jeho podpora v současných prohlížečích je již takřka stoprocentní. Výrazné je užití flexboxu v rámci nové verze 4 populárního frameworku Bootstrap, zveřejněné na začátku tohoto roku.
Původní článek vyšel v časopise FONT č. 1 2018 (autor: Richard Krejčí) a byl redakčně upraven
A co Vy? Jste spokojeni s designem Vašeho webu?
Pojďme to probrat osobně!
