Stejně jako minulý rok přinášíme velký přehled nejlepších ukázek webového designu. Jaké budou trendy pro rok 2019? Inspirujte se...
3D grafika Integrace 3D grafiky do mobilních a webových prezentací je jedním z nejžhavějších trendů letošního roku. Ruku na srdce, aplikovat "třidéčko" na web, je hodně náročná disciplína. Vyžaduje pokročilé znalosti 3D technologie a především umělecké oči, aby grafika vypadala realisticky. Faktem je, že existuje nepřeberné množství vysoce pokročilých online nástrojů na tvorbu 3D grafiky. Přesto považuju 3D design za největší výzvu pro návrháře grafického designu webových stránek. 
Webová stránka společnosti, která navrhuje a staví udržitelné domy pomocí solární energie. 3D model domu poskytuje fotorealistický obraz nabízených služeb.
Web rezervačních služeb využívá 3D grafiku v podobě výrazného motivu na nejexponovanějším místě webu - levá část domovské stránky. Neuvěřitelný magnet na návštěvníky! Opravdu skvělý výtvarný motiv dělá web mimořádně přitažlivý.
Úvodní stránka aplikace My Baby atraktivním a elegantním způsobem udává atmosféru milého mobilního deníčku pro ukládání fotografií a videí vašich dětí.
Díky chytlavé a elegantní grafice můžou i nudné části aplikací, jako je registrace, vypadat celkem výživně. Uživatele chytne a nepustí. Ukázka je z webu moderní restaurace.
Součást aplikace kreativního studia Moon, kde děti studují design a animaci.
Personalizace
Uplynulý rok zaznamenal masivní používání hluboké a vážně sofistikované personalizaci uživatelské zkušenosti digitálních produktů. Návrháři lidem nabízejí funkce, aby si svou oblíbenou aplikaci maximálně přizpůsobili - podle svých představ a také vkusu. 
Aplikace Perfect Recipe umožňuje stanovení cílů, kterých chtějí lidé dosáhnout (chci zhubnout, chci jíst zdravě, atd...). Pak jim poskytne vysoce relevantní informace na míru (recepty, rady apod.). Každý uživatel tak získá unikátní osobní informace a doporučení.
Perfect Bouquet. Návštěvníci si mohou sestavit vlastní kytici a vyladit ji do posledního detailu. Hotovo? Už jen zaplatit a počkat si na kurýra se skutečnou květinovou zásilkou. Slavnostní oběd/večeře v restauraci může začít... 
Aplikace Tasty Burger: připravte si svůj virtuální burger a nechte ho proměnit v pochoutku. Přidávejte ingredience podle své chuti bez omezení. Návrháři dobře vědí, že vysoce kvalitní fotografie skvěle prodávají produkty...
Plnoformátové fotky nebo video
Fotky nebo videa na plný formát jsou na vzestupu už od loňska. Působivé fotky, vizualizace nebo videa poskytují návštěvníkům úžasný zážitek, obzvlášť při vkusném začlenění do ostatních grafických prvků. A platí pravidlo, že méně je někdy více. Vyžaduje dobré znalosti a zkušenosti designéra s rozvinutým výtvarným cítěním.
Web, který nabízí lety balónem, poskytuje návštěvníkům úžasné pohledy. Super lákadlo. Díky plnoformátovým fotkám s pohyblivým efektem zákazník vnímá naprosto jasnou souvislost s plynulým letem v horkovzdušném výletním balónu. Nesmíme zapomenout nabídnout také pohled z ptačí perspektivy. Proč? Nekliknout na objednávku je pak vážně těžké :) 
Domovská stránka designového studia zaměřeného na tvorbu vizualizací interiérů a exteriérů. Originální grafika na plný formát dominuje celé úvodní stránce. Vizuální vjem okamžitě napovídá, jaké služby tyto webové stránky poskytují.
UI Design koncept pro Explore Universe, interaktivní online encyklopedii věnované Sluneční soustavě, planetám a zajímavým průzkumům. Fotografie, videa a grafické prvky integrované do tmavého pozadí evokují silné vizuální spojení s tématem. Čistá animace diváka ponoří do hlubin do nekonečného vesmíru.
Digitální ilustrace pro web
Digitální ilustrace jsou na vzestupu. Grafika pomáhá čtenářům přijmout informace mnohem rychleji, než čtení textového sdělení. A co víc, digitální ilustrace díky originalitě okamžitě odliší designově přitažlivé weby od těch šedých, průměrných. Aplikace a webové stránky se jen hemží maskoty, ikonami a minimalistickými či naivními vektorovými kresbami. Mimořádně zvyšují použitelnost webu a web prezentace jsou tak ještě více intuitivní. Digitální ilustrace zlepšují UX design (uživatelský design), napomáhají přístupnosti a použitelnosti. Co to znamená? Například toto: Stránky jsou srozumitelné pro děti předškolního věku, pro nerodilé mluvčí, pro lidi, kteří mají potíže s rozpoznáváním textu. Digitální ilustrace jsou zkrátka cool. Webům nebo aplikacím dodávají srozumitelnost a zvyšují jejich informační hodnotu. 
Úvodní stránka platformy Kiddy. Agentura na hlídání dětí na principu "kousku dortu". Není to milé? Designéři šli podnikatelskému záměru vstříc a vytvořili úžasný design. Jak to dokázali?
Příjemné pocity navozuje několik faktorů. Klíčovou roli hrají původní animované ilustrace s vtipnými motivy. Přinášejí skvělou náladu. Vytvoří tím potřebnou atmosféru ještě před tím, než návštěvník začne číst první řádky textu. Designéři posouvají hranice webové grafiky díky sofistikované animaci Vstupní stránka konference pro ilustrátory a digitální umělce. Ilustrací hrdiny stránky okamžitě získaly velkou přitažlivost. Chytlavé a originální UI prostě jede.
Vizuální příběhy
Trend používání původní a originální grafiky otevřel široké možnosti vyprávění příběhů na webu. Ilustrace popisují příběhy, přinášejí sdělení a prezentují benefity v potřebné atmosféře platformy/webu. Postavy pomáhají přiblížit interakce a tím vzniká silný vztah se skutečným světem. Navíc jsou nositeli vlídné nálady. A co víc: jsou vysoce efektivním nástrojem pro vytváření dynamických živých obrazů. 
Sada illustrací platformy Florence App z Velké Británie. Online tržiště pro zdravotní sestry na volné noze, ve kterém najdou skvěle placenou práci. Postavy tvoří vizuální příběhy a prezentují funkce a výhody aplikace.
Vstupní stránka společnosti nabízející kompletní balík služeb pro marketing a propagaci. Digitální ilustrace vypráví příběhy pomocí rychlých vizuálních výzev. Díky nim se dozvíme o poskytovaných službách, navíc s pocitem silné jednolitosti webových stránek.
Buttonless interakce (beztlačítkové)
Tlačítka jsou stále důležitým prvkem webu, ale objevují se kreativní experimenty pro uživatele mobilních telefonů. Interakce nejsou založené na stisknutí tlačítka, ale na principu gest. V grafickém rozhraní tahle technologie ušetří ohromný kus místa. Skvělé! 
Aplikace Encyklopedie v ukázce na téma Sloni. Každá interakce uvnitř aplikace se děje na základě gest uživatele, které provede na svém displeji - bez použití jediného klikacího tlačítka.
UI-orientovaný branding
Minulý rok pokračoval masivním trend redesignu firemních log: globální i místní firmy, výrobky a značky měnily loga a grafické ikony. Trend je jasný: Zjednodušte to Na internetu soupeří stále více a více firem a společností. Logo je silná vizuální spojka. Všimněte si, jak jsou nová loga přívětivá, graficky čistá. Při tvorbě značky designéři počítají s nepřeberným množstvím nejrůznějších zařízeních, na kterých si lidé budou logo prohlížet. (Od chytré televize, počítače až po malý displej na chytrém telefonu.) Na strmém vzestupu jsou taky animovaná loga. Více interaktivity a ještě větší posílení povědomí o značce. Podívejte se na ukázky z webu Moon Creative. Jsou skvělé, že? 
Logo design a branding aplikace pro Moon Creative, což je vzdělávací zařízení pro děti a dospívající, pro studenty Designu a animace. Zvolená barevná škála, animované logo, interaktivní prvky, a především animace v aplikaci ukazují důsledný přístup k firemnímu logu.
Chytlavé a chytré UI animace
Obliba animací v grafickém rozhraní je stále oblíbený. Nejen, že vdechne život a pohyb interaktivnímu procesu, taky významně zlepšuje použitelnost. Zkušenosti uživatelů se stávají více informativnějšími a přitažlivějšími. Interakční prvky jsou více srozumitelné a lépe na uživatele promlouvají. Tady návrháři velmi dobře pracují s tabulkami, sloupcovými grafy, kruhovými grafy i animacemi pro navigaci. 
Zde je souhrn z aplikace Finance App, která lidem pomáhá sledovat výdaje a příjmy, individuálně nebo ve skupině. Animace podporuje intuitivní ovládání a dobře uživatele informuje.
Aplikace Slumber má v úvodní obrazovce moc hezký a chytlavý motiv. Nepříjemný okamžik, kdy se aplikace připravuje, nemusí být nudný. Slumer dokazuje, že i čekání s preloaderem může být graficky atraktivní.
Šťastná volba typografie a pečlivě psané titulky
Tučné fonty (bold) jsou na webových stránkách a v aplikacích často používané. Designéři ho považují za důležitý způsob komunikace s návštěvníkem. Totiž, zjednodušeně řečeno: Obsah webu je pro skenující čtenáře shrnut do "bold" titulků webu. Schválně, skenujte tento příspěvek Z titulků fontem Roboto Bold se dozvíte moje hlavní sdělení S tím pochopitelně velmi úzce souvisí copywriting, který jde ruku v ruce s UI grafickým designem. Přitažlivé titulky (taglines) jsou integrujícím prvkem webových prezentací. Webová stránka společnost z oblasti architektury a stavebnictví. Minimalistické uspořádání, skvělá čitelnost, parádní animace klíčových slov a popisků služeb, barevná paleta s "omezeným kontrastem" - to je charakteristika kvalitního a funkčního designu. 
Elegantní návrh biografického webu Stanley Kubricka. Hlavním nástrojem designéra je kontrast a typografie. Proto je prezentace tak expresivní.
Výborná čitelnost
Čitelné mají být nejen titulky, názvy a tagy, ale celý textový obsah. Na to kladou důraz návrháři UX a UI. Jak to dělají? Pečlivý výběr fontů, aby dobře odrážel mobilní a webové rozhraní. Správná kombinace typů písem a velká preference jednoduchých fontů. Žádná složitá a umělecká písma. UX = uživatelský prožitek (user experience) UI = uživatelské rozhraní (user interface) 
Koncept interaktivního muzejního programu. Stylové a monumentální vizuální prvky ve spojení se snadno čitelnými fonty. Parádní aplikace na cesty.
Experimenty s přechody
Protože nástroje jsou stále více dostupnější a dokonalejší, webové i mobilní aplikace mají velmi efektní a přívětivý design. Stále větší oblibu uživatelů si získávají animované přechody mezi obrazovkami, rolování a interakční design. Je to více přirozené lidskému oku. Animované přechody dodávají základním interakcím ladnost. 
Návrh uživatelského rozhraní pro webovou aplikaci Carfinder s ukázkou interakční sady. Díky použitému designu se snadno ponoříte do světa automobilů.
Vítací banery
Vítací banery jsou velké obrázky, které přitáhnou pozornost uživatele v prvních sekundách doteku s webovou stránkou. Hlavní obsah je doručován uživatelům atraktivní formou. Proč se vítací banery tak osvědčily? Efektně a účinně nastavují potřebou náladu a emoce. Současně čtenáři dodávají informační obsah. Vítací banery se používají k dosažení těchto cílů:
Návrh webových stránek na téma dětství. Úvodní stránka sítě mateřských škol představuje milého a zábavného maskota. Na webu je sice animovaný ale možná ho mají (aspoň v 1 exempláři) v životní velikosti. 
Nákupy domů, tak by se dal ve dvou slovech představit web doručovací prodejní služby. Hlavním grafickým motivem je něco dobrého. Designérský záměr vychází z faktu, že se budete logicky snažit dozvědět o službě mnohem více. Originální barevné schéma v kombinaci s výrazným grafickým prvkem. Taková je návod na úspěšný a funkční design webu.
Úvodní stránka e-shopu s dětskou literaturou. Dobrá ukázka, jak ilustrace dokážou navodit náladu. Hodně atraktivní řešení UI, myslím.
Prvky uživatelského rozhraní
Předchozí ukázky dokazují ještě jeden současný trend. Růst podílu umělecké tvorby integrované do návrhu webových stránek. Uživatelé se na webových rozhraních rozhodují nejen na základě logiky. Dalším motivem je vytváření emocí a silných vizuálních prožitků. Výtvarné prvky přitahují pozornost a dodávají náboj grafickému prostředí. Úvodní stránka pro CryptoBlogu se sofistikovanou abstraktní 3D grafikou od zdatného výtvarníka. 
Návrh ikony pro aplikaci Cuteen. Dodávají eleganci a krásu uživatelskému rozhraní.
Koncept portfolia webových stránek specialisty na celebrity, zábavu, hudbu a filmovou produkci. Tmavé pozadí v kombinaci s hlavním hrdinou je živější a vytváří spojení s atmosférou koncertů a turné. Navrhnout podobný web je mým přáním, nejlíp ještě letos.
Dělené obrazovky
Dělené obrazovky nejsou nic nového. To už tu bylo. Jenže jsou zpět. Vrátily se hlavně tam, kde je potřeba spojit nekonzistentní obsahové bloky. Dělené obrazovky se taky používají v případě, že chceme porovnat 2 objetky (dualita) Navíc otevírají prostor k experimentování s kombinacemi barev. Co se týká chytrých telefonů, převažuje trend kontrastu světlého a tmavého pozadí. 
Aplikace Watering Tracker užívá horizontálního dělení. Horní tmavé pozadí je jako stvořené pro vizuální prezentaci grafů. Naproti tomu bílé pozadí zachovává vysokou čitelnost. Je nositelem informace.
Mobilní verze blogovací platformy. Nahoře témata. Uživatel může listovat (vodorovně) a vybrat si z nabízených témat.
Vícevrstvé rozvržení
Návrháři UI designu neustále zkouší nové cesty, jak vytvořit webovou prezentaci ještě více interaktivní i atraktivní. Tohle je docela novinka: Více interaktivních vrstev, které vytvářejí prožitek rolování. Vážně originální! 
Návrh animace charitativních webových stránek k záchraně oceánů. Návrhář rozpohyboval 2 různé vrstvy ve stejnou chvíli. Tentokrát jako podkladová textura pro textovou zprávu. Hodně oblíbené v současnosti.
Kvalitní foto/video obsah
Mimořádně kvalitní fotografie. Fotografování je skvělý způsob, jak působit na uživatele s realistickými a vizuálními prvky pro nastartování potřebných asociací. V oblasti eCommerce přibývá původního produktového videoobsahu. Ukažme zákazníkovi produkt co nejvíce realisticky. Online obchody s módou, hračkami, jídlem nebo nápoji jsou obory, které nejvíce užívají video marketingu. 
Návrh uživatelského rozhraní mobilní aplikace dokonalé kombinuje 3D grafiku s kvalitními fotografiemi.
Růst video obsahu
Vysvětlující a propagující videa jsou častým prvkem na webových stránkách. Aby ne. Efektivně plní marketingové cíle a posiluje důvěru ve vás nebo vaši značku. Přitáhne diváka. Rychle a jasně ho informuje, s čím mu stránka pomůže. Video aktivuje několik kanálů vnímání: sluch i zrak. Další úroveň tomu přidá síla příběhu. Jsme zahlceni informacemi, takže už nechceme věnovat velkou pozornost zjišťování podrobností. Video formáty jsou skvělou jasnou a rychlou zkratkou. Ovšem jako obvykle i tady to nefunguje bez potřebné velmi vysoké úrovně kvality zpracování.
Ukázka vysvětlujícího videa pro aplikaci OffCents (explainer video)
Ukázka vysvětlujícího animovaného videa na podporu blogového příspěvku. V tomto případě o UI/UX designu na téma Gamifikace.
Webové stránky ve stylu plakátu
Další způsob zobrazování obsahu: Webová stránka vypadá jako plakát. 
Vstupní stránka pro aplikaci Tasty Burger je založena na atraktivní a chytlavé animaci.: Čerstvý hamburger vytváří úžasný efekt. Okamžitě nastolí téma a emocionální přitažlivost. Popisky (titulky) z toho udělají plakát.
Barevné experimenty
Trend barevného experimentu přinesl nové originální kombinace. Barva je jedním z nejúčinnějších způsobů, jak do grafického prostředí dostanete náladu a zároveň bude vypadat atraktivně. Experimentování s barevnými kombinacemi ale není jen čistá kreativní fantazie. Ty nejpřekvapivější kombinace jsou založené na dobrých znalostech barev, psychologie barev a praktických výtvarných dovednostech návrhářů. 
Návrh šablony webové platformy pro on-line diskusní fórum věnované oblíbeným nápadům. Výtvarná prezentace jako by nebyla z tohoto světa. Psychedelické barevné kombinace a působivé 3D. Kombinace lidského prvku (ruka) s geometrickými tvary. Ty mají symbolizovat moderní technologie.
Závěr
V roce 2019 pokračování v hledání nejrozmanitějších principů, jak zvýšit použitelnost rozhraní. Miliony lidí denně používají aplikace. Aplikace jsou součástí naší každodenní rutiny. Každý máme jiné chutě, jiné preference. Hlavně ale představy o tom, co je pohodlné a co vypadá hezky. Říká se: Každému podle jeho vkusu a přání. Zjednodušeno: čím více variant, tím více uživatelů. Aplikace musí odpovídat konkrétním potřebám. Hořím nedočkavostí, co nového letos designéři vymyslí. :) Doslov Článek je adaptace z anglického originálu z portálu UXplanet. Věřte, že jsem se u něj zapotil. Takhle zabrat mi nedal žádný jiný článek. *** Odborníci, nezlobte se na mě za to, že některé formulace mohou být nepřesné. Platforma Webevize přibližuje budování webových stránek začínajícím on-line podnikatelům. Přehled jsem psal s přihlédnutím k tomu, aby pro ně byl obsah příjemnější. David z Webevize Prohlédněte si taky předhled web design trendů na rok 2018: 15 světových trendů web designu na rok 2018
Zdroj: Uxplanet.org
https://uxplanet.org/review-of-ui-design-trends-we-start-2019-with-68f128151215 |
Vytvořte si svůj webSledujte násBlog píše
David z Webevize david@webevize.cz Témata |
Aktualizace