Čeká vás tvorba nebo redesign webu? 10 nejlepších webových designů v 2023, kterými se můžete i vy inspirovat
Určitě mi dáte za pravdu, když řeknu, že v dnešním byznys světě se už jen opravdu těžko obejdete bez webové stránky. Vaše stránka představuje v mnoha případech první kontakt klienta s vámi a zákazník si její návštěvou okamžitě vytvoří první dojem o vaší značce. Stejně jako kdyby poprvé otevřel dveře na vaší kamenné prodejně, jen v online světě. Nechcete přece, aby váš potenciální zákazník upřednostnil vaši konkurenci před vámi jen kvůli složité navigaci a špatné prezentaci na vašem webu? Dobrou zprávou je, že kolo už naštěstí není třeba znovu vymýšlet a stačí se jen nechat poučit a inspirovat od těch zkušenějších. V tomto případě společnostmi, které si touto náročnou cestou prošly již před vámi a při tvorbě svých webových stránek nenechali nic náhodě. Pojďme se tedy blíže podívat na 10 nejlepších webových designů firem, díky kterým si i vy poskládáte a nastavíte svoji stránku tak, aby vás již žádný klient neobešel.
Webflow
V první řadě nemůžeme mezi firmy s kvalitním webem nezařadit jeden ze známých CRM systémů pro tvorbu webstránek, samotný Webflow. Mezi hlavní domény tohoto webu určitě patří minimalistický design, který můžeme vidět v každé jeho části i v množství volného místa.
Proč jsou v designu volná místa neboli “whitespace” důležitá?
Volné plochy pomáhají návštěvníkovi lépe zaměřit jeho pozornost na cílený obsah a přispívají tak k lepšímu pochopení obsahu. Naopak příliš mnoho prvků a textu může působit rušivě a ztížit celkovou navigaci na webu.
Na příkladu Webflow můžeme vidět, že používá výrazné nadpisy, animovanou grafiku a jasně barevně odlišená tlačítka s výzvou k akci, přičemž je tam stále velké množství volného místa. Tím, Webflow jednoznačně zvyšuje pravděpodobnost, že návštěvník si skutečně přečte obsah stránky a zároveň tím, že tam nenajdeme zbytečné prvky se zaměří pouze na obsah, na který chce aby se návštěvník webu soustředil.
IBM Watson- The Harmonic State
Dobře známá společnost IBM přišla s novým AI produktem Watson, jehož webová stránka je důkazem toho, že webovky prakticky nemají limit. To, co představili, je úplně jiný level a asi nejvýstižnější popis této stránky zní, že poskytuje jejich návštěvníkům pohlcující zážitek. Ke vtažení a udržení maximální pozornosti IBM využívá jak vizuální tak i sluchové efekty.
V praxi to znamená, že IBM vás ihned po vstupu na stránku vyzve, abyste si nasadili sluchátka, kvůli tomu abyste byli schopni si naplno vychutnat zážitek. Pokud tak však neučiníte jistě vás zaujme interaktivní pozadí, které bude intuitivně následovat pohyb vaší myši. Celkově vás stránka nezahltí spoustou textu, ba naopak velký nadpis zajistí upoutání pozornosti a díky výraznému CTA (call to action) budete hned vědět jak postupovat. IBM si uvědomuje složitost tématu AI proto se rozhodli jejich nástroj Watson v první řadě vysvětlit na základě vizuálního vysvětlování a následně si návštěvníci mohou díky funkcím podobným videohře tento nástroj sami prozkoumat. Ze strany IBM je to skvělý způsob jak vysvětlit tak složité a pro mnoho lidí ne tak zajímavé téma.
Age of Union
Age of Union je nezisková environmentální aliance, jejímž cílem je podporovat a zviditelňovat globální komunitu tvůrců, kteří pracují na ochraně ohrožených druhů a ekosystémů naší planety.
Webová stránka této neziskové organizace slouží jako online časopis a tomu je uzpůsoben i celkový design. Nejcharakterističtější prvek této stránky je za jistá tlustý a výrazný font, který přidává na důrazu složitosti tematiky sociální odpovědnosti. Působí velmi čistě a výstižně a co je důležité koresponduje s hlavní myšlenkou. Stránka obsahuje také řadu kvalitních vizuálů, které přidávají na barevnosti stránce a motivují návštěvníka k dalšímu scrollování. Velmi chytrým prvkem jsou použity vodící lišty, které opticky oddělují jednotlivé sekce. A není třeba zapomenout ani animace, které možná na první pohled nejsou až tak výrazné, ale rozhodně přispívají k lepší navigaci na stránce a vybízejí návštěvníka k provedení akcí.
Proof
Společnost Proof nabízí nástroj pro kompletní správu ESG neboli enviromentálních, sociálních a a vládních dat i management dopadových údajů.
Web stránka je založena na storytellingu nebo převyprávění „příběhu“ na základě interaktivního scrollování. Díky tomu návštěvník obdrží všechny potřebné informace o produktu a zároveň touto metodou zvyšují pravděpodobnost zvýšené pozornosti i větší vtažení do příběhu. Zároveň je tato Web stránka obohacena o množství micro animací, které dělají tuto webovku ještě dynamičtější. Využívání whitespaces zaručí, že návštěvník nebude zahlceni zbytečným množstvím informací a výrazné nadpisy a jasně barevně odlišená tlačítka na akci zase usnadňují celkovou navigaci na webu.
Spotify- Astrology Club
Streamovacího giganta hudby a podcastů Spotify pravděpodobně není třeba blíže představovat. Avšak ve spolupráci s astrologičkou Alizou Kelly však přišli s nápadem vytvořit playlisty určené na základě znamení zvěrokruhu a právě této webové stránce bychom se chtěli blíže věnovat.
Celá tato webstránka se vyznačuje jasnými a charakteristickými barvami, díky kterým je stránka snadno rozpoznatelná a snadno zapamatovatelná. Stránka v podstatě slouží jako dotazník, jehož výsledkem je individuálně přizpůsobený obsah určený jen pro vás na základě vašeho znamení a vkusu. Dotazník přispěje ke zvýšené pozornosti a výrazné nadpisy s minimem textu a jasnou CTA zajistí, že návštěvník obdrží pouze důležité informace a bude vědět jak dále postupovat. Mezi hlavní prvek jednoznačně patří animace, které vás budou provázet celým procesem, čímž přidávají na dynamice a hravosti stránky. Spotify se rozhodl kromě vizuálních také zapojit i audio efekty, které vás ještě více vtáhnou do tématiky.
Hyer
Společnost Hyer je firma soustředící na zprostředkování soukromých letů. Efektivita webové stránky Hyer spočívá v jejím propracovaném UX designu nakolik už hlavní stránka poskytuje návštěvníkovi skutečně všechny nezbytné informace. Čím dávají najevo, že jsou si vědomi potřeb svých klientů a váží si jejich času. Celá stránka působí čistým designem s využitím bílého prostoru, jednoduchým navigačním panelem, sloganem a jasnou výzvou k akci. Hned po vstoupení na hlavní stránku Hyer vás upoutá obrázek letadla, který se bude hýbat současně jak budete postupovat dále na stránce. Obrázek jasně vypráví příběh společnosti a přestože tvoří dominantní část stránky nepůsobí rušivě. Přestože návštěvník teoreticky nemá potřebu postupovat dále na stránce samotný pohyb letadla vybízí klienta ke scrollování a tak k získávání dalších informací o firmě.
Puma- Velocity NITRO 2
Webová stránka sportovní značky Puma představující svůj nový model Velocity NITRO 2 se svým designem rozhodně zařadila do skupiny stránek s unikátním designem. Celá stránka je postavena na principu storytellingu, kde na základě skvělých vizuálních zobrazení a promakaných efektů jsou představeny všechny hlavní funkce a benefity tohoto modelu. Množství textu na této stránce je skutečně na minimu a tak se můžete plně soustředit na již zmíněné vizuály a animace. Nicméně je třeba zmínit, že jediný prvek který vás bude provázet od samého začátku po konec je jasně barevně vyznačené CTA tlačítko. Takže v momentě, že zauvažujete nad nákupem můžete tak učinit jediným klikem.
Digital Cover
Digital Cover je francouzská digitální agentura. Jakmile vstoupíte na jejich webovou stránku přenese vás to do světa designu. Domovská stránka vás přivítá velkým názvem a téměř trojrozměrným tělesem, které je charakteristický prvek celé stránky, a který vás bude celou dobu doprovázet. Animovaná povaha této stránky patří rozhodně mezi její domény. Navigace je také velmi přehledně nastavena s kontaktními informacemi na konci každé stránky a výraznou ikonou menu, kterou celou dobu naleznete v jednom z horních rohů stránky. Digital Cover vsadilo na osvědčenou barevnou kombinaci černého pozadí a bílého textu, což jim zajistilo optické zvýraznění všech prvků.
Mubasic
Mubasis představuje katalog kvalitních písniček pro děti. Barevná kombinace a celkový vizuální vzhled webové stránky navozuje pohodový pocit a celkově koresponduje s vizí celé firmy. Rozhodně se vyznačuje dynamičností, kterou můžete vidět v každé její části. Domovská stránka umožňuje snadno prozkoumat všechny nabídky společnosti obsahující také audio ukázky. Výrazné nadpisy udrží návštěvníkovu pozornost a celkově malé množství textu ho nezahltí informacemi. No a po přescrollování stránky na samotný spodek domovské stránky se vám zobrazí panel se všemi předešlými sekcemi, které vám umožní jednoduše se prokliknout do kterékoli předcházející části a tak se rychle dostat k hledané informací.
Superlist
Superlist je aplikace pro zlepšení pracovní produktivity ať už jednotlivce nebo celého týmu. Jakmile vstoupíte na domovskou stránku této firmy pochopíte její cíl. Velký nadpis popisující hlavní myšlenku a animací složenou z předmětů souvisejících s tématem v obklopení množství volného prostoru vám nedovolí tuto myšlenku utratit. Pod nadpisem uvidíte malou šipku, která vás bude vybízet k pokračování scrollovat a tak získávání dalších informací o produktu. Tam následně můžete vidět další vizuální prvky, které vás motivují pokračovat dále při čemž lišta s menu s vámi bude po celou dobu následovat a usnadní vám celkovou navigaci na webu.