Web design je nezbytnou součástí procesu tvorby internetových stránek či vývoje webových aplikací. Ovlivňuje celkový vzhled webu, jeho hierarchii a má zásadní podíl na vytváření uživatelského dojmu. Pojďme se dnes společně na design webu podívat trochu podrobněji, postupně si povíme:
co je web design,
jak s web designem začít,
jaká pravidla a zásady bychom měli při návrhu webu dodržovat,
jaké programy můžeme k prototypování webu či aplikace použít,
několik tipů, jak webdesign tvořit,
s jakými trendy se můžeme u designu webů v roce 2021 setkat.
Co je web design
Web design (někdy také webdesign nebo design webu) je obor zabývající se návrhem uživatelského rozhraní a vzhledu webových stránek či aplikací. Je nedílnou součástí tvorby webu, přičemž udává zásadní směr způsobům uživatelské interakce nebo prezentace firmy. Ne nadarmo se říká, že obal prodává a první dojem můžeme udělat jenom jeden.
Cílem web designu je vytvořit koncept atraktivního a přehledného webu, který zaujme návštěvníky a dosáhne vysokých konverzních poměrů. Design webu není pouze o grafických prvcích nebo návrhu jednotlivých komponent. Úzce souvisí i s dalšími obory, jako je optimalizace pro vyhledávače (SEO), copywriting a marketing. Webdesign definuje:
vizuální prvky,
použité technologie (například ReactJS nebo VueJS),
obsah,
výkon a účel webu či aplikace.
Původní návrh, vytvořený v některém z grafických editorů, později realizujeme prostřednictvím jazyka HTML, CSS a JavaScriptu. Ty se dále kombinují s multimediálním obsahem, jako jsou ilustrace, fotky, videa nebo animace. Často v kontextu návrhu webu hovoříme o takzvaném UI/UX designu, který má za cíl návštěvníkovi přinést co možná nejlepší uživatelský zážitek.
Webdesignérovi by tak kromě smyslu pro estetiku neměla chybět ani znalost principů uživatelského rozhraní a aktuálních trendů, které se v tvorbě webu vyskytují. Stále častěji se přitom, zejména v důsledku instantních řešení jako je WordPress, setkáváme s vítězstvím jednotvárnosti nad originalitou. Dostupné šablony totiž do jisté míry odstraňují nutnost vymýšlet zcela nové návrhy.
Můžeme se setkat i s automatizovaným řešením s využitím umělé inteligence, které na základě dodaného obsahu zvládne nejen vygenerovat design, ale i vybrat font a barevné kombinace. V důsledku toho si všechny weby, e-shopy nebo aplikace začínají být stále více podobné, což z jedné strany zvyšuje míru intuitivnosti, ze strany druhé ztěžuje budování vlastní značky a znemožňuje vyčnívání nad konkurencí.
Web design pro začátečníky aneb kde začít
Výše uvedené odstavce již naznačily, že je webdesign velice komplexním oborem, který se ani zdaleka nezabývá pouze vytvářením grafiky pro internetové stránky. Pokud tak chceme s designem webu začít, měli bychom nejprve pochopit základní principy či standardy, se kterými se na internetu setkáváme.
Takřka každá webová stránka se skládá z pěti základních sekcí:
hlavička (header),
navigace (menu),
hero sekce (banner v horní části stránky),
obsah (fotky, texty, videa, ilustrace),
patička (footer).
Všechny z nich by měly být vzájemném souladu, ať už co se týče kombinace barev, použitého fontu či konzistence elementů (pokud například u hero fotky použijeme obdélníkové tlačítko, tak by mělo zůstat ve tvaru obdélníku i v dalších komponentách a na podstránkách).
Jednotlivé sekce webové stránky by měly mít stanovené následující elementy, jejichž návrh řeší právě webdesigner (UI / UX designer):
barvy,
font,
ilustrační grafika,
obsah,
layout čili rozčlenění stránky.
Elementy by měly skládat obraz toho, o čem web je, co má uživatel dělat a čeho svou činností dosáhne. Již po několika vteřinách proto musí být jasné, jaké služby stránka nabízí, přičemž by měla udržet návštěvníkovu pozornost natolik, aby ji hned neopustil.
Pravidla a zásady web designu
Mezi základy web designu můžeme započítat také určité ustálené normy, jichž bychom se při tvorbě návrhu měli držet:
přístupnost a použitelnost,
informační struktura,
vzhled a funkčnost (smysluplnost prvků),
dodržování stylistických a typografických pravidel,
budování důvěryhodnosti.
Prvním pravidlem webdesignu je snaha o zachování co možná největší přístupnosti a použitelnosti na všech zařízeních – na počítači, mobilu i tabletu. Volíme proto dostatečnou velikost fontů i prvků. Mezi prvky musí zbýt dostatek prostoru, aby šlo například pohodlně ovládat menu, aniž bychom zasahovali do dalších částí stránky.
Barvy by měly být zvoleny tak, aby vytvářely dostatečný kontrast a nesnižovaly čitelnost textu. V textu i v menu bychom se měli snadno orientovat a dbát na to, aby návštěvník nemusel zbytečně přemýšlet nad významem jeho položek, ani funkcí tlačítek nebo smyslem formuláře – nic by zkrátka nemělo nabourávat uživatelskou zkušenost (UX).
Již při úvodním wireframu promýšlíme informační strukturu neboli třídění a organizaci informací či volíme vhodné názvy a místo pro jednotlivé sekce i položky v menu. To stejné platí i pro podstránky, které by měly vycházet ze stejné hierarchie a vzhledově korespondovat s homepage.
Před umístěním prvku se zamýšlíme nad tím, zda je na webu či e-shopu skutečně nezbytný a zbytečně nenabourává minimalistické vzezření stránek. Z toho vyplývají trendy posledních let, jako jsou single-page aplikace či weby, které veškerý obsah schraňují na jediné stránce.
Funkční a atraktivní design, který prodává
Každá sekce, tlačítko nebo formulář by měly mít nějaký smysl a dosahovat maximální rovnováhy mezi formou prezentace a funkcí. Současně bychom si měli vytvářet vlastní podpis, značku, kterou si uživatelé zapamatují a spojí s daným produktem. Důležitý je zejména obsah, se kterým by se návštěvníci, respektive cílová skupina, měla ztotožnit.
Mezi pravidla a zásady web designu řadíme i určité stylistické standardy, které opět eliminují nadbytečné sekce. Odstavce by měly být tvořeny rozumným počtem řádků, aby se čtenář v textu zbytečně neztrácel. Neměly by chybět ani kotevní body, díky nimž návštěvník získává přehled o obsahu, aniž by ho nezbytně musel číst celý. Vyjadřování a forma by přitom měly vyplývat ze znalosti cílové skupiny.
Responzivní webdesign
Způsoby, jak vytvářet web design do značné míry ovlivnila také stále vzrůstající potřeba responzivních webů, která zajišťuje, že se stránky, webová aplikace nebo e-shop budou zobrazovat stejně na všech zařízeních. Tato potřeba vychází z množství uživatelů, kteří pro procházení webů i nákupy využívají mobilní telefony, přičemž by jim původní desktopové zobrazení jejich snažení ztěžovalo.
Již při tvorbě návrhu webu tak bereme v potaz i mobilní telefony a tablety. Mimo uživatelský zážitek navíc responzivní webdesign ovlivňuje také hodnocení Googlu, který upřednostňuje právě tento způsob vytváření mobilních webů. V průběhu uplynulého roku navíc oznámil takzvané mobile first indexing čili prioritní indexování mobilní verze stránek.
Weby by se přitom měly na všech zařízeních zobrazovat se stejným obsahem (fotkami, ilustracemi apod.) a dodržovat jednoduchou navigaci, kterou zvládneme ovládat i z displeje telefonu.
Software pro tvorbu designu webu
Základy web designu, respektive jeho prvotní návrh můžeme pohodlně zvládnout pouze s papírem a tužkou. Dříve či později budeme nuceni přistoupit i k vytvoření jeho digitální verze, kde je třeba zvolit některý z grafických editorů. Mezi programy vhodné pro webdesign a vytváření prototypů řadíme například:
Adobe Photoshop , který hierarchií vrstev napomáhá přehlednosti jednotlivých prvků.
, který hierarchií vrstev napomáhá přehlednosti jednotlivých prvků. Adobe XD , vektorový editor určený pro vytváření rychlých návrhů a interaktivních prototypů.
, vektorový editor určený pro vytváření rychlých návrhů a interaktivních prototypů. Figma , cloudový vektorový editor pro rychlé prototypování a snadnou spolupráci mezi členy týmu.
, cloudový vektorový editor pro rychlé prototypování a snadnou spolupráci mezi členy týmu. Framer, pro online prototypování a vytváření komplexních animací. Podobně jako v předešlých případech se i zde jedná o vektorový editor, který navíc nabízí předpřipravené komponenty.
K návrhu webu můžeme použít i další nástroje, jako je Adobe Illustrator, Gimp, Affinity a podobně. Jejich výběr záleží hlavně na našich předchozích zkušenostech. Pokud například pracujeme zejména s bitmapovou grafikou, pak pro nás pravděpodobně bude nejsnazší tvorba ve Photoshopu. Pokud však začínáme na zelené louce, tak může být lepší volbou specializovaný software, jako je Adobe XD nebo Figma a Framer.
Pro webdesign, design webových stránek a design webů naopak nedoporučujeme nástroj jako je například Adobe Indesign, který neumožňuje snadné předání designu webovým vývojářům a kodérům.
Tipy, jak na web design
Po přečtení předchozích odstavců bychom již měli mít utvořenou určitou představu o tom, jak s webdesignem začít. Před samotnou vizualizací je však důležité splnit ještě několik dílčích úkolů, které nám pomohou styl vzhledu nasměrovat k očekávání naší cílové skupiny.
Jako první je důležité vědět, pro koho web, e-shop či aplikaci tvoříme. Vytvořit si persony a charakteristiku uživatelů, podle které budeme vytvářet nejen texty, ale i konkrétní podobu jednotlivých prvků. Současně bychom si hned na začátku měli ujasnit, jaký má náš digitální produkt plnit cíle a jakou nabízí přidanou hodnotu.
Důležité je rovněž zanalyzovat konkurenci, pečlivě prozkoumat, jakým způsobem komunikuje se svými zákazníky, odhalit mezery a snažit se je ve svém projektu napravit. Pokud webdesignem zaúkolujeme někoho jiného, agenturu či přímo designera, tak je třeba všechny tyto poznatky shrnout v zadávací dokumentaci a ujasnit tak své požadavky.
Již při tvorbě návrhu webu nesmíme opomíjet SEO a vytvářet prostor pro kvalitní a zajímavý obsah, který přivede relevantní návštěvníky. S tím se pojí i použitá CTA (call to action) neboli výzvy k akci, jako je odběr newsletteru, odeslání formuláře, kliknutí na tlačítko k odběru a podobně.
Stěžejní je též interakce mezi webem a jeho návštěvníkem. V době sociálních sítí je dobré umožnit sdílení na Facebooku, LinkedIn nebo zapojit interaktivní prvky, jako jsou AR katalogy se zbožím. Pokud se na stránky rozhodneme umístit reklamu, tak by neměla nabourávat design webu a rušit ku příkladu při čtení.
Praktická stránka designování webu či aplikace
Při designování bychom se měli alespoň částečně držet určitých zažitých konvencí, které napomáhají intuitivnímu ovládání webu i aplikace. Mezi ty nejzákladnější můžeme bezpochyby řadit umístění loga a menu v horní liště. Přesně tam je totiž budou příchozí hledat a proč je zbytečně nechat tápat?
Logo by pak mělo být východiskem pro barevnou kombinaci, typicky dvojici / trojici kontrastních barev, přičemž zachováváme světlý podklad a tmavé písmo, nebo naopak. Font by měl být čitelný a odrážet pověst brandu. Například Comic Sans pravděpodobně nebude působit příliš profesionálně.
Pokud se rozhodneme do obrázků vkládat text, tak by měl být čitelný i na menších displejích, třeba na iPhonu a stejně jako zbytek prvků konzistentní – tedy totožný s fontem použitým v článcích a podobně. Ikony či ilustrace by přitom měly zůstat jednoduché, aby zapadaly do celkového vzhledu stránek a příliš nevyčnívaly.
Design průběžně testujeme a inovujeme, aby vždy odpovídal aktuálním trendům či požadavkům cílové skupiny. Testování podrobujeme jakékoli úpravy, ať už změnu vzhledu tlačítek nebo upravenou hierarchii.
Web design trendy pro rok 2021
Segment informačních a komunikačních technologií v současnosti patří mezi nejdynamičtěji se rozvíjející obory. Neustále se proto setkáváme s novými technickými vymoženostmi, jako jsou produkty IoT či autonomní vozy. Určité evoluci se nevyhneme ani u softwaru, například na poli vývoje mobilních aplikací či právě tvorby webu.
Takřka každý rok se objeví nějaký must-have prvek či styl, který chtějí mít na svých stránkách a aplikacích všichni. Když se zaměříme na webdesign, můžeme mezi tyto trendy pro rok 2021 zařadit:
responzivní design v kombinaci s mobile-first přístupem, kde nejprve navrhujeme vzhled webu pro mobilní zařízení,
v kombinaci s mobile-first přístupem, kde nejprve navrhujeme vzhled webu pro mobilní zařízení, interaktivní a video obsah , ku příkladu na pozadí hero sekce a začlenění rozšířené reality (AR),
, ku příkladu na pozadí hero sekce a začlenění rozšířené reality (AR), animace při scrollován í stránky nebo bannery s měnícím se obsahem,
í stránky nebo bannery s měnícím se obsahem, integrace chatbotů, jako nástroje pro zlepšení zákaznického servisu,
chatbotů, jako nástroje pro zlepšení zákaznického servisu, asymetrický layout , který zaujme a zdůrazní nebo oživí vybrané prvky,
, který zaujme a zdůrazní nebo oživí vybrané prvky, kombinace ilustrací a fotografií , respektive fotografie doplněné o ilustrace či 2D a 3D abstraktní i realistické obrázky,
, respektive fotografie doplněné o ilustrace či 2D a 3D abstraktní i realistické obrázky, tmavý vzhled vycházející z material designu, jenž začal dominovat zejména mobilním aplikacím v důsledku příchodu nové verze operačního systému Android 10,
vycházející z material designu, jenž začal dominovat zejména mobilním aplikacím v důsledku příchodu nové verze operačního systému Android 10, retro styl a návrat vzorů typických pro 50. a 60. léta, kdy se ustupuje od výrazných barev, jež nahrazují přechody, pastelové odstíny či vzorované pozadí spolu s dynamickými kolážovými efekty,
typických pro 50. a 60. léta, kdy se ustupuje od výrazných barev, jež nahrazují přechody, pastelové odstíny či vzorované pozadí spolu s dynamickými kolážovými efekty, důraz na příběh a ztotožnění se značkou, weby jsou nyní osobnější, nabízejí více možností interakce a prostor pro bližší vztahy mezi uživatelem a tvůrcem stránek či webové aplikace,
a ztotožnění se značkou, weby jsou nyní osobnější, nabízejí více možností interakce a prostor pro bližší vztahy mezi uživatelem a tvůrcem stránek či webové aplikace, výrazné prvky s dominantní typografie, která přináší jasné a stručné sdělení.
A hlavně minimalismus, dostatek volného prostoru (vzdušnost) mezi jednotlivými sekcemi i prvky a čistý design. Základy webdesignu tak dnes tvoří decentní jednoduchost, funkčnost a stručné sdělení hlavní myšlenky. Mezi benefity tohoto přístupu můžeme řadit rychlejší načítání stránek, případně přehlednější navigaci díky hamburgerovému menu.
Moderní weby jsou přesným opakem původních kýčovitých a přeplácaných stránek, jež překypovaly nadbytečným obsahem. Pokud se chystáte vytvářet nový web či aplikaci, neváhejte využít naší bezplatné konzultace, kde vám rádi s celý procesem návrhu UX/UI designu pomůžeme, případně zajistíme celý vývoj.
