POSTUP REALIZACE TVORBA WEBU

UX - User experience

UX uživatelská zkušenost je to, jak se návštěvník na vašem webu cítí. Když na první pokus ví, kudy vede cesta k nějakému cíly. Ať už je to získání informací, nákup na e-shopu a nebo rezervace ubytování. Uživatelská přívětivost není na první pohled viditelná ale je zásadní pro návštěvníka jestli na webu dokončí to, kvůli čemu na web přišel.

Příklady špatného UX designu

• když na stránkách restaurace hledáte kde se nachází nebo jídelní lístek. Pokud musíte přemýšlet nad tím, kde najdete kontakt nebo jídelní lístek, je to špatně.
• pokud si na e-shopu vložíte zboží do košíku, které po té chcete odebrat a vložit jiné ale nemůžete najít tlačítko k odebrání. 
• když si chcete rezervovat ubytování a v každém mezi kroku na vás vyskakuje například bannerová reklama na související služby.

UI - User interface

UI Uživatelské rozhraní, to je to, co vnímá návštěvník na první pohled. Barvy, rozložení prvku na stránce, tlačítka, animace apod. Jsou to všechny prvky na webu, který by měli být v určité harmonii, která bude pro návštěvníka příjemná a zapamatovatelná. Proto je ideální zamyslet se nad vizuální identitou značky, se kterou se pracuje napříc celou firmou od vizitek, přes web až po emailing.

Příklady špatného UI designu

• špatně čitelný nebo příliš kontrastní text. Například světlé šedý text na bílém pozadí.
• přehnaně blikající bannery, nekonzistentní grafika.
• neresponzivita pro mobilní telefony

Před vytvořením cenové nabídky nového e-shopu je důležité provést základní analýzu, která nám společně pomůže pochopit potřeby a rozsah projektu. Tato analýza zahrnuje několik klíčových kroků. Prvním krokem je úvodní konzultace, která zahrnuje setkání s klientem, buď formou osobní schůzky nebo videohovoru, za účelem získání základních informací. Následuje pochopení cílů, kdy diskutujeme o cílech e-shopu, cílové skupině zákazníků a konkurenčních výhodách. Posledním krokem v rámci úvodní konzultace je sběr požadavků, kdy získáváme podrobné požadavky na funkce, design, integrace a další aspekty e-shopu.


1. Úvodní konzultace

Setkání s klientem: Osobní schůzka nebo videohovor pro získání základních informací
Pochopení cílů: Diskuse o cílech e-shopu, cílové skupině zákazníků a konkurenčních výhodách.
Sběr požadavků: Získání podrobných požadavků na funkce, design, integrace a další aspekty e-shopu.

2. Analýza stávajícího stavu

Hodnocení stávajícího e-shopu (pokud existuje): Analýza aktuálního e-shopu z hlediska designu, UX, technologií, SEO a výkonu.
Posouzení technické infrastruktury: Zjištění, jaké systémy a technologie klient aktuálně používá (např. ERP, CRM, platební brány).

3. Konkurenční analýza

Identifikace konkurentů: Určení hlavních konkurentů klienta na trhu.
Analýza konkurenčních e-shopů: Hodnocení designu, funkcionality, marketingových strategií a uživatelského zážitku u konkurenčních e-shopů.

4. Funkční specifikace

Definice požadovaných funkcí: Seznam klíčových funkcí e-shopu, jako jsou nákupní košík, platební brány, uživatelské účty, produktové stránky, filtrování produktů a další.
Požadavky na integrace: Určení, které externí systémy a služby budou potřeba integrovat (např. účetní software, logistické služby).

5. Design a UX požadavky

Designové preference: Diskuse o vizuálním stylu a designových preferencích klienta.
UX požadavky: Identifikace klíčových prvků uživatelského rozhraní a navigace pro zajištění optimálního nákupu

6. Technické požadavky

Výběr technologie: Diskuse o preferovaných technologiích a platformách (např. Upgates, Shoptet a jiné).
Bezpečnostní požadavky: Identifikace bezpečnostních potřeb, jako jsou SSL certifikáty, ochrana proti DDoS útokům a zabezpečení osobních údajů.

7. SEO a marketingové požadavky

SEO strategie: Zjištění požadavků na optimalizaci pro vyhledávače.
Marketingové nástroje: Identifikace potřebných marketingových nástrojů a integrací (např. e-mail marketing, sociální média, PPC kampaně).

8. Plánování a harmonogram

Časový plán: Diskuse o očekávaném harmonogramu projektu a milnících.
Rozpočet: Přibližný odhad rozpočtu na základě požadavků a složitosti projektu

Bez důkladné přípravy a potřebných podkladů není možné začít s realizací nového e-shopu. Je třeba stanovit typ projektu, cíle, kterých chcete dosáhnout, specifikovat cílovou skupinu a předpokládaný dosah projektu. Zadání pro realizaci e-shopu by mělo být detailní a jasné, aby poskytovalo všechny potřebné informace pro návrh, vývoj a implementaci projektu. Jedná se především o odpovědi na otázky z analýzy doplněné o technické specifikace.

Tento strukturovaný přístup k zadání pro realizaci e-shopu zajistí, že všechny aspekty projektu budou důkladně promyšleny a specifikovány, což povede k hladšímu průběhu projektu a spokojenosti.


- Struktura a počet produktů včetně kategorií.
- Funkcionalita nákupního košíku, podporované platební metody.
- Možnosti registrace a správy uživatelských účtů.
- Požadavky na vyhledávání produktů (např. filtry, fulltextové vyhledávání).
- Specifické funkce (např. wishlist, srovnávání produktů, recenze).
- Integrace s externí systémy: Požadavky na integraci s ERP, CRM, účetními systémy.
- Marketingové nástroje pro e-mail marketing, sociální sítě, analytiku
- Logistika a doprava
- Požadavky na redakční systém pro správu obsahu.
- Technická dokumentace a specifikace technických požadavků.

Interaktivními prvky jsou myšleny dynamické efekty na webu - např. grafika, tlačítka a obrázky reagující na Váš pohyb myši. Patří sem různé vyjížděcí pop-up prvky, počítadla a další vychytávky. Pokud je web dynamický, vytváří interakci s návštěvníkem (UX - User Experience ), která pozitivně ovlivňuje délku setrvání návštěvníka na webu a zvyšuje jeho zájem. A tím i pravděpodobnost konverze návštěvníka na zákazníka.

Dnešní doba je charakteristická neustálým zrychlováním. Jistě nám dáte za pravdu, že málokdo z nás má čas a prostor na pročítání předlouhých odstavců. Hlavním úkolem infografiky je usnadnit čtenářům pojmout různé druhy informací. Použitím vizuálně zajímavých prvků, zvýrazněním a postupným dávkováním informací umožňuje infografika upozornit na ty nejdůležitější informace tak, aby si jich každý všimnul a zapamatoval.

O co jde?

Díky službám Google Maps Vám nabízíme možnost vytvoření vlastní Google mapy, která bude odpovídat grafickému a barevnému řešení Vašeho nového webu. Mapy, kromě přizpůsobení vzhledu, dále umožňují i umístění interaktivních bodů na mapě.

Například lze pomocí různých ikonek vyznačit na mapě Vaše zákazníky, partnery, dodavatele apod. Body zájmu na mapě se vkládají pomocí GPS bodů, můžete tak označit naprosto přesná místa. Například sídlo Vaší firmy.

O co jde?

Call to action prvky - tedy tlačítka "Mám zájem o" a "Chci" jsou nejdůležitějšími nástroji pro vytvoření zákaznické konverze. A tedy i hlavním smyslem při tvorbě nového webu. Aby byla tlačítka funkční a co nejefektněji plnila svůj účel - velmi záleží na jejich barevnosti, kontrastu k pozadí, umístění, sdělení atd.

Proč je to potřeba?

Tlačítka obvykle směřují do objednávkového formuláře, který umožní zákazníkovi objednat službu, případně zjistit více informací.

Někdy jsou však weby pouze prezentační, takže call to action prvky pro Vás nemají význam. Nebo byste naopak kapacitně nezvládali na konverzi zákazníků adekvátně reagovat. Neváhejte proto sdělit, jaký účel potřebujete, aby call to action prvky plnily.

Responzivní design zaručuje optimalizované zobrazení webových stránek na různých zařízeních (mobilní telefony, tablety aj.) S responzivním designem se musí počítat již u grafického návrhu webu, kde se určí prioritní elementy k zobrazení na menších obrazovkách.

Co je to redakční systém?

Redakční systém je software, který slouží pro správu obsahu a tvorbu webových stránek nebo blogu. Redakční systémy se používají taktéž pro správu příspěvků, diskusí , produktů, dokumentů, komentářů, pro publikování obrázků nebo videí, případně lze v rámci redakčního systému určovat práva jednotlivým uživatelům.

Mezi nejčastější redakční systémy webových stránek patří Wordpress, Joomla, Drupal a Wix. 

Součástí našich webů může být redakční systém, který slouží ke snadné správě obsahu a struktury webu. Systém je navržen s ohledem na snadné a intuitivní ovládání, proto i počítačový laik dokáže se systémem pracovat.

Jelikož se jedná o software vyvinutý našimi programátory, jsme schopni CMS upravit a přizpůsobit Vašim požadavkům.

Video návod jak používat redakční systém zde.

Možnosti redakčního systému

• přihlášení na základě jména a hesla / změna a nastavení
• účet pro samostatného uživatele (jméno+heslo - možnost změny)
• kompletní editace menu + obsahu stránek včetně kontaktů
• přehled kategorií – zobrazení – přehled – úprava
• přehled produktů a výrobků – zobrazení – přehled – úprava
• vkládání vlastního obsahu, obrázků, dokumentů a odkazů na stránky
• kontaktní formulář - kompletní přehled vložených dotazů
• vkládání novinek / aktualit / články
• FAQ / diskuse

Jak to funguje?

Jazykové mutace webu slouží ke korektnímu překladu požadované jazykové verze stránek. Součástí překladu a jazykové mutace webu (multijazyčnost) je překlad url adres, kontaktních formulářů, ale také pojmenování všech obrázků a dostupných souborů  na webu (včetně vyplnění title a alt).

Úspěšně jsme vytvořili a optimalizovali desítky jazykových mutací pro světové vyhledávače v angličtině, němčině, ruštině, francouzštině, italštině a dalších jazycích světa.

Jazykové mutace vytváříme na samostatné doméně. Např.: http://www.xyz.com/ Včetně překlopení redakčního systému s kompletní funkčností a úpravou zdrojového kódu ( i URL adres) pro daný jazyk.

Z hlediska zpracování zakázky je postup následující: vytvoření kompletního webu v jednom jazyce, spuštění webu, následné vytvoření jazykykových mutací, vzájemné propojení všech webů.

Proč vlastní domény?

• Pro každou jazykovou mutaci je potřeba objednat a zaplatit vlastní doménu a webhosting.
• Hlavní výhodou je možnost SEO optimalizace pro zahraniční trhy a kompletní supervize nad obsahem. Níže uvádíme několik příkladů pro představu:
• Japonsko - Yahoo.jp
• Čína - Baidu.com
• Rusko - Yandex.ru
• Itálie - Libero.it
• Slovensko - Zoznam.sk
• Německo - Google.de

Co to je?

Sledovací kód Google Analytics (nově GA4) umožňuje analyzovat chování návštěvníků a jejich pohyb, délku setrvání na webu atd. Pomocí Google Analytics můžete také sledovat nárůst návštěvnosti související s novým webem a SEO optimalizací.

Jak to funguje?

Pokud již máte existující web s vlastní doménou, pravděpodobně již máte také založený Google Analytics účet a Váš sledovací kód měří návštěvnost a chování zákazníků na webu. V rámci redesignu stávajícího webu je zajištěno plynulé pokračování tohoto měření.

V případě zcela nového webu (na nově vzniklé doméně) dojde k založení nového Google Analytics účtu a nahrání sledovacího kódu na stránky webu. Vy sami určíte, kdo budou osoby s oprávněným přístupem k tomuto účtu.