Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 16 - Jak se tvoří web v UX

V minulé lekci, Návrh uživatelského rozhraní v UX, jsme si ukázali, jaké kroky a metody práce musí UX designér použít při návrhu uživatelského rozhraní. Od skicování, přes wireframe až po prototyp a mockup.

Aby mohl UX designér dobře vykonávat svou práci, je třeba, aby znal principy práce svých kolegů, hlavně programátorů, kteří tvoří na základech jeho práce webové stránky a aplikace. Proto si dnes v této lekci představíme koloběh prací na projektu a základy o vývoji webu.

Jak se tvoří web

Práce kolem vývoje uživatelských rozhraní, ať se již jedná o webové stránky, aplikace či jiný software, vyžaduje kooperaci několika odvětví.

Pro snadnou práci na projektu je vhodné, aby všichni zúčastnění spolupracovníci znali principy práce svých kolegů. Je důležité, abychom věděli, kdo má jakou náplň práce, jaké má kdo pravomoce a za co nese odpovědnost, zkrátka, co spadá pod koho. Také bychom ale měli mít hrubý odhad, jak asi práce kolegů vypadá proto, abychom mohli dobře pracovat s jejich výstupy a nebo pro ně připravovat podklady. 

Koloběh projektu

Běžný koloběh práce na webových stránkách (případně aplikacích apod.) ve firmách je ten, že na začátku se dostává do komunikace zadavatel práce (náš klient) s obchodním či projektovým manažerem. Tento manažer konzultuje klientovi představy a zadání a připravuje cenový návrh. Zároveň by měl být projektový manažer dohlížitelem a koordinátorem celého průběhu projektu napříč všemi odděleními až po finální výstup a předání klientovi.

Projekt může jít přes marketingové oddělení, které spolu s obchodním oddělením navrhnou hlavní obchodní cíle a jejich plnění a marketing připraví případné analýzy. V tomto bodě by se měl ideálně zapojit UX designér, který připraví své návrhy s ohledem na vše dříve zjištěné, připraví wireframe, prototyp a všechny další potřebné kroky. Ideálně na svých návrzích spolupracuje s grafikem a programátorem, jelikož jsou to právě oni, kteří hned po něm nastupují na svůj hlavní díl práce.

Když se web začíná programovat, je na místě, aby se zapojil SEO konzultantcopywriter. SEO konzultant při­praví všechny kroky pro dobrou optimalizaci a copywriter připraví ideální texty dle obsahové strategie plnící marketingové cíle a bere ohled i na optimalizaci. 

User Experience (UX)

Podklady pro tvorbu webu

Co vše potřebujeme za podklady pro tvorbu webu a kdo je připraví:

  • Projektový manager - připraví klientský brief, tedy dokument, který odpovídá na všechny základní otázky ohledně projektu a sbírá podstatné informace pro představu o klientovi i projektu.
  • Marketingové oddělení - připraví marketingovou strategii a různé další analýzy, jako určení cílových skupin a person, může připravit i obsahovou strategii ve spolupráci se stratégem či copywriterem.
  • UX designér - připraví potřebné UX analýzy, navrhne způsob práce, vytvoří wireframe a prototyp a testuje v každém kroku své a další práce programátorů.
  • Programátoři - pracují na front-endovém (to, co vidíme jako uživatelé na první pohled) i back-endovém (hosting, databáze, zabezpečení atd.) zastřešení webu.
  • SEO konzultant - analyzuje vhodná klíčová slova a sám či ve spolupráci s copywriterem také napíše všechny vhodné titulky, popisky a další atributy včetně správného určení jejich umístění.
  • Copywriter - napíše vhodné texty na míru klientovi, ale také dle obchodní a marketingové strategie a optimalizace pro vyhledávače.
  • Grafik - připraví vizuální návrh a podílí se ve fázi programování na dodávání grafických podkladů.

Tímto výčtem jsme získali alespoň základní představu o lidech, kteří kooperují při vzniku ideálního webu. Čím složitější projekt, tím je spolupráce více odborníků nezbytná. Může se ale stát, že téměř vše zmíněné může při menších projektech zastoupit jeden či dva šikovní freelanceři.

Z čeho se skládá web

Díky naší již získané znalosti o wireframu a návrzích již víme, jak je webová stránka strukturovaná. Její hlavní "výkladní skříní" je homepage – domovská stránka. Díky ní by měl každý získat základní povědomí o tom, kam přišel a co může očekávat. Nejpodstatnější část homepage (i dalších stránek) je ta část, která se zobrazí ihned po načtení stránky na viditelné části obrazovky uživatelova zařízení. Na homepage by měly být hlavní informace o čem web je a měla by být rozcestníkem na další stránky.

Homepage se dělí na části, které se nazývají:

  • header (hlavička) – ta obsahuje většinou logo, navigaci, vyhledávací pole;
  • body (tělo) – vše, co je třeba na stránce sdělit;
  • footer (patička) – adresa, sekundární menu, copyright atd.

Stejné dělení má i HTML dokument, ve kterém se stránka kóduje, viz níže.

Další stránky téhož webu mohou být konstruovány podobně, někdy se třeba vynechává patička a zmenšuje hlavička.

Co už na první pohled nevidíme, ale je velmi důležité vyplnit z důvodu optimalizace pro vyhledávače (SEO), jsou popisky v kódu jako Title, Description. Používají se k tomu slova dle výstupu analýzy klíčových slov a návrhů SEO konzultanta či SEO copywritera. Každá stránka má svůj název neboli Title, kde by měl být hlavní popis, co na stránce je. Nemusí kopírovat nadpis ve viditelné části textu (H1 – viz níže). Dále má každá stránka Description, neboli popis o čem stránka je. I když tyto dvě položky, nejsou uživateli na stránce viditelné většinou (dle rozhodnutí robotů vyhledávačů) je vidíme jako snippety (úryvky v SERPu, tzn. na stránkách výsledků vyhledávání).

Snippety jsou tedy takovým naším reklamním textem zdarma, na který je třeba velmi dbát jak z hlediska obchodního, tak i z hlediska optimalizace, protože tyto dvě věci jsou důležité pro umisťování ve vyhledávačích.

Ukázka Snippetu homepage:

Ukázka Snippetu homepage naší stránky - User Experience (UX)

Velmi důležité pro optimalizaci také je, aby programátor dobře využíval strukturu stránky. Například nadpisy se v kódu označují písmene H a úrovněmi od 1 pro hlavní nadpis stránky, po další subnadpisy (2, 3, 4, …). I v těchto nadpisech je důležité se řídit instrukcemi od SEO oddělení, jelikož v těchto nadpisech musejí být použita klíčová slova pro danou stránku. Stejně tak se musí dobře dbát na rozdělení obsahu do struktury HTML dokumentu, ve kterém web tvoří.

Dvě oblasti webové tvorby

Při práci na webových stránkách je třeba rozlišovat tyto dvě oblasti:

  • Front-end – rozhraní přístupné uživateli, to, co vidíme na webové stránce a s čím můžeme interagovat jako uživatelé.
  • Back-end – administrační část webu a technologie běžící na serveru, infrastruktura služby.
User Experience (UX)

Jak postupuje programátor

Nyní se podíváme, jak programátor postupuje.

Hosting

Na začátku je třeba mít kde web provozovat, tzn. musí zřídit hosting. Hosting je pronájem prostoru pro webové stránky na cizím serveru.

Doména

Aby web měl svoji webovou adresu, je třeba zaplatit doménu, pro kterou je třeba vybrat unikátní název. Doména je unikátní internetová adresa, jejíž hlavní funkcí je nahrazovat číselný kód v podobě IP adresy.

Přístup k tvorbě webu

Poté programátor vybírá, jakým způsobem přistoupí k tvorbě webu. Web se může psát i čistě jako kód pomocí HTML a CSS. Všechno o tvorbě jednoduchých webů najdeme v našem kurzu Webové stránky krok za krokem - Online kurz.
  HTML je zkratkou z HyperText Markup Language – textový značkovací jazyk, který udává strukturu a obsah webové stránky.

CSS je zkratkou názvu Cascading Style Sheets neboli tabulky kaskádových stylů. Jde o formátovací jazyk, který popisuje, jak se mají zobrazovat stránky napsané v HTML. CSS se tedy stará o vzhled a formátování obsahu popsaného v HTML.

Využít se může i systémů, jako je třeba Bootstrap, což je sada nástrojů kaskádových stylů pro tvorbu webu, které obsahují šablony napsané v HTML, CSS a JavaScriptu, ze kterých lze také poskládat webovou stránku nebo je využít ve vlastním kódu.

Ukázka, jak může vypadat kódování pomocí HTML a CSS:

Ukázka jak může vypadat kódování pomocí HTML a CSS. - User Experience (UX)

Pro běžný web menších firem i jedinců se většinou volí z redakčních systémů, nejznámější je asi Wordpress, který má velmi intuitivní administraci, se kterou člověk i sám sestaví jednoduchý web. Známá je i Joomla

Pokud se jedná o eshop, dá se volit opět z připravených systémů jako je Prestashop či Shoptet a další. Případně existuje plugin pro Wordpress s názvem WooComerce, který se dá propojit a ze statického webu jde udělat eshop.

Řešením pro neprogramátory může být i ještě intuitivnější online tvorba webu na připravených šablonách s ovládáním většinou systémem Drag and drop (přetahování myší). Příkladem může být Webnode nebo například Wix.

Pokud se ale jedná o velké a košaté weby, předpřipravená řešení nejsou většinou tak variabilní, aby obsáhly všechny potřebné požadavky. Také u nich často nedokážeme upravit vše, co bychom potřebovali kvůli UX nebo například SEO. U webů, které potřebují fungovat ve spolupráci s rozsáhlými databázemi, jako je třeba velký eshop s napojeným skladem a finančním systémem či firmy, které například na svých interních webech mají databáze klientů či správu klientsky personalizovaných profilů atd., je nutné volit individuální řešení. Tyto velké weby v sobě již spojují velké složitosti a potřebují mít naprogramovaný dobře jak front-end, tak ale i back-end, který se u menších webů téměř nemusí řešit. 

Dnes jsme si tedy představili, co vše se skrývá za tvorbou webu a čemu je nutné rozumět, abychom mohli dobře komunikovat o našem projektu a vzájemně si kolegy byli nápomocní. Také již víme základní pojmy a úkony při tvorbě webové stránky.

V následujícím kvízu, Kvíz - Návrh uživatelského rozhraní a tvorba webu v UX, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.


 

Předchozí článek
Návrh uživatelského rozhraní v UX
Všechny články v sekci
User Experience (UX)
Přeskočit článek
(nedoporučujeme)
Kvíz - Návrh uživatelského rozhraní a tvorba webu v UX
Článek pro vás napsala Natálie Růžičková
Avatar
Uživatelské hodnocení:
52 hlasů
Autorka je odbornicí na digitální marketing, specializuje se také na UX/UI Design. Její oblíbenou disciplínou je SEO a jako nováček se pouští do webového vývoje a programování.
Aktivity