6. PROCES TVORBY WEBOVÉ STRÁNKY Cílem této přednášky je přiblížit problematiku procesu při zpracování webové stránky a to z pohledu tří přístupů k tvorbě: na míru, z šablony a drag and drop editorem. Marketingový výzkum . 1.Základní postup tvorby webu 2.Tvorba webu na míru a součinnost zadavatele 3.Tvorba webu z šablony a její výhody 4.Drag and Drop editory Struktura přednášky Proces tvorby webové stránky Úvod •Web design a design = proces. •V této prezentaci se podíváme na to, jak celý tento proces může probíhat, jaké jsou jeho části, kdo se na nich obvykle podílí a jaký vliv mají na celkový výsledek tvorby webové stránky Proces tvorby webové stránky Výsledek obrázku pro proces csvukrs KDO VŠECHNO JE POTŘEBA PŘI TVORBĚ WEBU? Proces tvorby webové stránky csvukrs Web na míru Proces tvorby webové stránky https://www.mediagrafik.cz/wp-content/uploads/2016/08/universalni-procesni-mapa.jpg csvukrs Jak probíhá proces? Proces tvorby webové stránky 1. První schůzka •Otázky kolem podnikání, představ •Poznání a pochopení zákazníků a jejich business modelu •Stanovení cíle webu (Více poptávek? Vyšší návštěvnost?) •Budget celého procesu. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 2. Úvodní analýza •Po první schůzce zpracuje agentura úvodní analýzu. To je vlastně takový prvotní model obsahující pečlivou analýzu konkurence, tržního prostředí a klíčových slov. •Proč? - Aby agentura pochopila klienta a trh, na kterém působí, včetně jeho zákonitostí, co je na něm běžné, důležité, nebo co má naopak ignorovat. Dále jaké je postavení klienta na trhu, co jeho zákazníci hledají a chtějí, a jak jim to nakonec co nejlépe podat. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 3. Vyžádání podkladů •Po analýze se agentura znovu sejde s klientem, představí mu všechna zjištěná data a společně se dohodnou, jakým směrem se budou ubírat. Poté následuje výzva k dodání podkladů. •Agentura bude potřebovat fotografie a texty, které na váš web umístí. Pokud žádné fotografie nemáte k dispozici, většina agentur se o nafocení vašich produktů postará, zároveň by se měla postarat o adekvátnost vašich textů, které buď navrhne upravit, nebo je sama přepracuje. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 4. Rozvržení webu (UX/UI) a marketingová funkčnost •Kromě analýzy musí dojít k celkovému promyšlení toho, co a jak bude na webu fungovat z hlediska marketingu, což vyžaduje specialistu z oboru. •Dále se musí vymyslet, jak bude celý web postaven. To má na starost UX/UI designer jehož prací je udělat web tak, aby se něm jeho návštěvníci dokázali pohybovat snadno a intuitivně a zároveň tak, jak my chceme a potřebujeme. •UX = user experience = „uživatelský prožitek“ •UI = user interface = „uživatelské rozhraní“ https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 4. Rozvržení webu (UX/UI) a marketingová funkčnost •UX designer zpracuje svůj návrh v jedné ze tří podob: 1.Textové zadání ve Wordu 2.Wireframe (můžete si představit jako skici webu) 3.Prototyp (používá se u složitějších webů nebo online projektů – jedná se o funkční model webu, který se následně testuje předtím, než se vytvoří skutečný web) https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 5. Grafika •Když je vymyšlená celková vize vzhledu webu a jeho funkcí, předá zadání grafikovi, který ho zpracuje do výsledné podoby. •Web je jako dobrý vs. špatný obchodník – i když mají oba stejné informace, jeden umí prodat mnohem více než ten druhý. •Dobrým obchodníkem je v našem případě dobře promyšlený proces, jak uživateli webu informace vhodně podat, jakými metodami přesvědčit a uzavřít „deal“. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 6. Kódování •Po grafikovi se práce předává kodérovi, který grafický návrh přivede k životu. Při kódování dochází k přepsání grafického návrhu do jazyka, kterému weby rozumí. •Jedná se o „rozhýbání grafiky“, kdy se z grafiky stává webová stránka, kterou jsou vyhledávače již schopni přečíst. •Vše se musí nakódovat zvlášť pro desktop (PC) a mobilní zařízení. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 7. CMS (Systém pro správu obsahu) •Administrační systém, do kterého se nakódovaný web nasadí. •CMS se přizpůsobuje na míru tak, aby klientům co nejvíce ulehčoval práci. Může obsahovat pouhou správu textů a fotografií, ale také přes něj můžete zpracovávat objednávky, přidávat příspěvky na blog, vést firemní databáze, spravovat poptávky, rezervační systém, distribuční sítě atp. •Tím se u menších a středních firem může stát hlavním systémem pro řízení obchodní výkonnosti firmy. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 7. CMS •Je důležité zvážit, jestli váš web CMS opravdu potřebuje. •U většiny prezentačních webů se dělají změny průměrně dvakrát do roka. Pokud zrovna spadáte do této oblasti, je pro vás lepší ušetřené prostředky za CMS investovat například do většího množství podstránek, které vám agentura navrhne na míru. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 8. Testování •V poslední fázi, kdy je web již hotový, dochází k jeho testování. Klient má určitou dobu na to, aby si web sám v klidu “proklikal” a ověřil si, že vše funguje tak, jak má. •Do tohoto seznamu si nezapomeňte přičíst i konzultaci každého kroku s klientem, čekání na jeho reakci a následnou opravu dle jeho požadavků a připomínek. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Jak probíhá proces? Proces tvorby webové stránky 9. Uživatelské testování •U náročnějších klientů a webových stránek nejvyšší třídy se jako poslední fáze celého procesu provádí uživatelské testování. •Při něm se web podrobuje zátěžovým testům, zkoumá se, jak se uživatelé na webu opravdu chovají. https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ Proces tvorby webové stránky •Úkol: UKÁŽU VÁM WEB NA 6 VTEŘIN. PAK SE BUDU PTÁT. J https://www.grammarly.com http://grammarly.com Další důležité procesní úkony •ANALÝZA KONKURENCE •ANALÝZA KLÍČOVÝCH SLOV •INFORMAČNÍ ARCHITEKTURA •WIREFRAME Proces tvorby webové stránky csvukrs ANALÝZA KONKURENCE •Přihlaste se k odběru jejich newsletteru. •Sledujte jejich stránky na sociálních sítích. •Pozorujte změny na jejich e-shopu. •Všímejte si cenové politiky, zavádění novinek na trh a prezentace slev či akcí. •Prozkoumejte jejich bonusový program, pokud nějaký nabízí. •Analyzujte doplňkové služby, které poskytují k prodeji. •Projděte si důkladně e-shopy a vypozorujte jejich funkce. •Objednejte si u nich zboží a sledujte proces zpracování objednávky. •Zjistěte, kde všude inzerují jak na internetu, tak případně i v offl ine světě. •Dohledejte názory jejich zákazníků, např. na srovnávačích zboží a v diskuzích. •Navštivte jejich kamenné prodejny a sledujte práci zaměstnanců. •Najděte na jejich e-shopech konkurenční výhody, kterými se prezentují. Proces tvorby webové stránky csvukrs ANALÝZA KONKURENCE •Soupis toho, co lidé nejčastěji hledají na internetu. •V podstatě je to naslouchání cílové skupině v tom, jaké konkrétní slova a slovní spojení vyhledávají v souvislosti s oblastí, které se má webová stránka týkat. •Taková slova (klíčová) pak budete mít velmi rádi na webu jelikož na základě toho (nejen toho) bude Google a Seznam váš web vyhodnocovat jako relevantní pro zobrazení ve výsledcích vyhledávání. Proces tvorby webové stránky csvukrs ANALÝZA KONKURENCE •Analýzu klíčových slov si nechávají zpracovávat provozovatelé s dostatečným rozpočtem a také provozovatelé, kteří – i přes její finanční náročnost – si jsou vědomi její přínosnosti. •Na základě ní pak vznikají např. požadavky na vstupní stránky, návrh kategorií na e-shopu nebo filtrů pro zboží. •Pokud si analýzu necháte zpracovat u odborníka a budete se jí řídit vy i váš dodavatel webové stránky, výrazně tak podpoříte první návštěvnost z vyhledávačů po uvedení webu do ostrého provozu. Proces tvorby webové stránky csvukrs INFORMAČNÍ ARCHITEKTURA •Struktura webové stránky vychází mimo jiné i z toho, co vám řekne analýza klíčových slov. •Je přínosné vyjít z detailního popisu vašich zákazníků a z definice jejich potřeb. •Např. Pokud se rozhodnete prodávat např. suroviny pro domácí výrobu přírodních mýdel, web bude potřebovat sekci s návody na výrobu přírodních mýdel. Proces tvorby webové stránky csvukrs INFORMAČNÍ ARCHITEKTURA Proces tvorby webové stránky Výsledek obrázku pro cardsorting web csvukrs INFORMAČNÍ ARCHITEKTURA •Techniku, kterou lze v této fázi využít je Card sorting. Jedná se o uživatelsky orientovanou výzkumnou metodu, která slouží k organizování většího množství pojmů (položek). •Cílem této metody je pochopit, jakým způsobem uživatelé přemýšlejí o informacích, tedy jak vnímají vztahy mezi jednotlivými pojmy a jak je organizují - tedy odhalit mentální modely daného problému. •Vhodná je proto pro navrhování struktury webových stránek, nebo její redesign navrhování nebo hodnocení informační architektury služby Proces tvorby webové stránky csvukrs WIREFRAME •Wireframy jsou podkladem pro zpracování grafického návrhu webové stránky. •Definuje rozmístění funkčních prvků. Nejedná se v žádném případě o grafický návrh, neobsahuje obrázky a je tvořen pouze pomocí čar a textu (odtud drátěný model). •Nedoporučuje se ani použití barev, až na výjimky, které je potřeba odlišit. •Wireframe připravuje informační architekt, ten přenese do nákresů požadavky klienta a usnadní tak práci na řešení Proces tvorby webové stránky csvukrs WIREFRAME Proces tvorby webové stránky Výsledek obrázku pro wireframe https://medium.com/@robertsmith_co/validating-your-product-design-ideas-with-low-fidelity-wireframe s-fba03b84af23 ÚKOL: Překreslete wireframe pro webovou stránku www.opf.slu.cz Proces tvorby webové stránky Proces zpracování pomocí šablony a CMS systému 1. Rezervujte si svou doménu: na výběr máte z více než 800 unikátních koncovek. K dispozici je několik typů doménových koncovek: 1.Generické: ty nejpopulárnější doménové koncovky. Ideální pro oslovení mezinárodní komunity (.com / .org...). 2.Národní: Oslovte uživatele v konkrétní geografické oblasti (.cz / .es / .it / .pl / .de...). 3.Specifické: uvolněte uzdu své fantazii s doménami šitými na míru Vašemu podnikání (.shop, / .sarl /.games...). Proces tvorby webové stránky https://www.ovh.cz/webhosting/website/ Proces zpracování pomocí šablony a CMS systému •2. Vyberte si webhostingový balíček s výkonem odpovídajícím předpokládané datové zátěži Vašich stránek. •Webhosting je prostor umožňující uveřejnění webových stránek na internetu za stanovenou cenu. •3. Zvolte redakční systém (CMS) a nainstalujte ho jediným kliknutím. •Redakční systémy nabízejí intuitivní rozhraní pro tvorbu dynamických a responzivních webových stránek. Proces tvorby webové stránky https://www.ovh.cz/webhosting/website/ Proces zpracování pomocí šablony a CMS systému •4. Proveďte konfiguraci svého webu. V případě potřeby přidejte některé z volitelných rozšíření pro navýšení výkonu. •5. Přidávejte stránky a publikujte články pomocí nainstalovaného redakčního systému. Proces tvorby webové stránky Výsledek obrázku pro redakÄ�nà systém https://www.ovh.cz/webhosting/website/ Proces zpracování pomocí šablony a CMS systému •Návodů na tvorbu webu pomocí šablon je na internetu mnoho a jednoduchou instalaci zvládne téměř každý. •Pokud je projekt webové stránky větší, je dobré minimálně spoléhat na odborné konzultace případně přenechat celé nastavení na externí agentuře či nezávislému webovému designérovi. Proces tvorby webové stránky https://www.ovh.cz/webhosting/website/ https://www.harrys.com/en/gb/ Proces tvorby webové stránky SHRNUTÍ PŘEDNÁŠKY •Krok po kroku jsme představili proces tvorby webu na míru s pomocí specializované agentury nebo studia. •Vysvětlili jsme si jak provádět analýzu konkurence a analýzu klíčových slov. •Popsali jak se vytváří informační architektura webu a k čemu nám pomáhá zpracování wireframu. •Vysvětlili jsme proces zpracování pomocí redakčního systému. Proces tvorby webové stránky Děkuji za pozornost. Proces tvorby webové stránky