Webový design - Web design
Webový design zahrnuje mnoho různých dovedností a oborů při výrobě a údržbě webových stránek . Mezi různé oblasti webového designu patří webový grafický design; návrh uživatelského rozhraní (design UI); autorství, včetně standardizovaného kódu a proprietárního softwaru ; návrh uživatelské zkušenosti (design UX); a optimalizace pro vyhledávače . Mnoho jednotlivců často pracuje v týmech pokrývajících různé aspekty procesu návrhu, ačkoli někteří návrháři je pokryjí všechny. Termín „webový design“ se obvykle používá k popisu procesu návrhu souvisejícího s designem front-end (na straně klienta) webové stránky včetně psaní značek . Webový design částečně překrývá webové inženýrství v širším rozsahu webového vývoje . Očekává se, že weboví návrháři budou mít povědomí o použitelnosti, a pokud jejich role zahrnuje vytváření značek, pak se také očekává, že budou mít aktuální pokyny pro přístupnost webu .
Dějiny
1988–2001
Ačkoli web design má docela nedávnou historii. Lze jej propojit s jinými oblastmi, jako je grafický design, uživatelská zkušenost a multimediální umění, ale je vhodnější z technologického hlediska. Stala se velkou součástí každodenního života lidí. Je těžké si představit internet bez animované grafiky, různých stylů typografie, pozadí, videí a hudby.
Začátek webu a web design
V roce 1989 Tim Berners-Lee během práce v CERN navrhl vytvořit globální hypertextový projekt, který se později stal známým jako World Wide Web . V letech 1991 až 1993 se zrodila World Wide Web. Stránky pouze s textem lze prohlížet pomocí jednoduchého prohlížeče v řádkovém režimu. V roce 1993 Marc Andreessen a Eric Bina vytvořili prohlížeč Mosaic . V té době existovalo více prohlížečů, ale většina z nich byla založená na Unixu a přirozeně těžká. Neexistoval žádný integrovaný přístup k prvkům grafického designu, jako jsou obrázky nebo zvuky. Prohlížeč Mosaic tuto formu zlomil. W3C byl vytvořen v říjnu 1994, aby „povede World Wide Web na svůj plný potenciál rozvojem společných protokolů, které podporují jeho vývoj a zajištění jeho interoperability.“ To odradilo jakoukoli společnost od monopolizace vhodného prohlížeče a programovacího jazyka, což mohlo změnit účinek World Wide Web jako celku. W3C pokračuje v nastavování standardů, což je dnes možné vidět u JavaScriptu a dalších jazyků. V roce 1994 založil Andreessen společnost Mosaic Communications Corp., která se později stala známou jako Netscape Communications , prohlížeč Netscape 0.9. Netscape vytvořil vlastní HTML tagy bez ohledu na proces tradičních standardů. Například Netscape 1.1 obsahoval značky pro změnu barvy pozadí a formátování textu pomocí tabulek na webových stránkách. V letech 1996 až 1999 začaly války prohlížečů , protože Microsoft a Netscape bojovaly o maximální dominanci prohlížeče. Během této doby bylo v této oblasti mnoho nových technologií, zejména kaskádové styly , JavaScript a dynamický HTML . Soutěž v prohlížeči vedla celkově k mnoha pozitivním výtvorům a pomohla webovému designu vyvíjet se rychlým tempem.
Vývoj webdesignu
V roce 1996 společnost Microsoft vydala svůj první konkurenční prohlížeč, který byl vybaven vlastními funkcemi a značkami HTML. Byl to také první prohlížeč, který podporoval šablony stylů, což bylo v té době považováno za nejasnou autorskou techniku a dnes je důležitým aspektem webového designu. Markup HTML pro stoly byla původně určena pro zobrazování tabulkových dat. Designéři si však rychle uvědomili potenciál použití tabulek HTML pro vytváření složitých rozvržení s více sloupci, která by jinak nebyla možná. V této době se zdálo, že design a dobrá estetika mají přednost před dobrou strukturou značek a malá pozornost byla věnována sémantice a přístupnosti webu . Stránky HTML byly omezeny ve svých možnostech návrhu, ještě více s dřívějšími verzemi HTML. K vytvoření složitých návrhů muselo mnoho webových designérů použít komplikované struktury tabulek nebo dokonce použít prázdné mezerníky .GIF, aby zastavily sbalení prázdných buněk tabulky. CSS byl představen v prosinci 1996 W3C na podporu prezentace a rozvržení. To umožnilo, aby byl HTML kód sémantický spíše než sémantický i prezentační, a zlepšila se přístupnost webu, viz webový design bez stolu .
V roce 1996 byl vyvinut Flash (původně známý jako FutureSplash). V té době byl nástroj pro vývoj obsahu Flash ve srovnání s dneškem relativně jednoduchý, používal základní nástroje pro rozvržení a kreslení, omezený předchůdce jazyka ActionScript a časovou osu, ale umožňoval webovým návrhářům překročit hranice HTML, animovaných GIFů a JavaScriptu . Protože však Flash vyžadoval modul plug-in , mnoho webových vývojářů se jeho používání vyhýbalo ze strachu z omezení jejich podílu na trhu kvůli nedostatečné kompatibilitě. Místo toho se návrháři vrátili k animacím gif (pokud se úplně nevzdali používání pohyblivé grafiky ) a JavaScriptu pro widgety . Ale díky výhodám Flash je mezi konkrétními cílovými trhy natolik populární, že se nakonec propracoval k drtivé většině prohlížečů, a dostatečně výkonný, aby se dal použít k vývoji celých webů.
Konec prvních válek prohlížeče
V roce 1998 Netscape vydal kód Netscape Communicator pod licencí open source , což umožňuje tisícům vývojářů podílet se na vylepšování softwaru. Tito vývojáři se však rozhodli spustit standard pro web od nuly, který vedl vývoj open source prohlížeče a brzy se rozšířil na kompletní aplikační platformu. Standards Project Web byl vytvořen a podporován soulad prohlížeč s HTML a CSS standardy. Programy jako Acid1 , Acid2 a Acid3 byly vytvořeny za účelem testování shody prohlížečů s webovými standardy. V roce 2000 byl pro Mac vydán Internet Explorer, což byl první prohlížeč, který plně podporoval HTML 4.01 a CSS 1. Byl to také první prohlížeč, který plně podporoval formát obrázku PNG . V roce 2001, po kampani společnosti Microsoft na popularizaci aplikace Internet Explorer, dosáhl Internet Explorer 96% podílu využití webového prohlížeče , což znamenalo konec válek prvních prohlížečů, protože Internet Explorer neměl žádnou skutečnou konkurenci.
2001–2012
Od počátku 21. století se web stále více integruje do života lidí. Jak se to stalo, technologie webu se také posunula dál. Došlo také k významným změnám ve způsobu, jakým lidé používají a přistupují k webu, a to změnilo způsob, jakým jsou stránky navrženy.
Od konce válek prohlížečů byly vydány nové prohlížeče. Mnoho z nich je open source, což znamená, že mají tendenci mít rychlejší vývoj a více podporují nové standardy. Nové možnosti považují mnozí za lepší než Internet Explorer od Microsoftu .
W3C vydala nové standardy pro HTML ( HTML5 ) a CSS ( CSS3 ), jakož i nový JavaScript API , z nichž každá jako nový, ale jednotlivé normy. Zatímco termín HTML5 se používá pouze k označení nové verze HTML a některých API JavaScriptu, stalo se běžným jeho používáním odkazovat na celou sadu nových standardů (HTML5, CSS3 a JavaScript).
2012 a později
Se zlepšením pokrytí internetu 3G a LTE se velká část provozu webových stránek generovala z mobilních zařízení. To ovlivnilo průmysl webového designu a posunulo jej směrem k minimalistickému, odlehčenému a zjednodušujícímu stylu. Objevil se zejména přístup „Mobile first“, což znamená vytvořit nejprve design webu s rozložením orientovaným na mobilní zařízení a poté jej přizpůsobit vyšším rozměrům obrazovky.
Nástroje a technologie
Weboví designéři používají celou řadu různých nástrojů v závislosti na tom, do jaké části výrobního procesu jsou zapojeni. Tyto nástroje jsou v průběhu času aktualizovány novějšími standardy a softwarem, ale principy za nimi zůstávají stejné. Weboví designéři používají k vytváření snímků nebo prototypů návrhů ve vektorovém i rastrovém grafickém editoru. Technologie používané k vytváření webových stránek zahrnují standardy W3C, jako jsou HTML a CSS, které lze ručně kódovat nebo je generovat software pro úpravy WYSIWYG . Mezi další nástroje, které mohou weboví designéři používat, patří validátory značek a další testovací nástroje pro použitelnost a přístupnost, aby se zajistilo, že jejich webové stránky splňují pokyny pro přístupnost webu.
Dovednosti a techniky
Marketingový a komunikační design
Marketingový a komunikační design na webové stránce může určit, co funguje pro její cílový trh. Může to být věková skupina nebo konkrétní oblast kultury; designér tak může porozumět trendům svého publika. Designéři mohou také porozumět typu webových stránek, které navrhují, což například znamená, že úvahy o designu webových stránek mezi podniky (B2B) se mohou výrazně lišit od webových stránek zaměřených na spotřebitele, jako jsou maloobchodní nebo zábavní webové stránky. Je možné pečlivě zvážit, zda estetika nebo celkový design webu nebude v rozporu s jasností a přesností obsahu nebo snadnou navigací na webu , zejména na webových stránkách B2B. Designéři mohou také vzít v úvahu pověst vlastníka nebo firmy, kterou web reprezentuje, aby se ujistili, že jsou zobrazováni příznivě.
Design uživatelské zkušenosti a interaktivní design
Pochopení obsahu webové stránky uživatelem často závisí na tom, jak uživatel webové stránky funguje. Toto je součást návrhu uživatelské zkušenosti . Uživatelská zkušenost souvisí s rozložením, jasnými pokyny a označováním na webových stránkách. To, jak dobře uživatel chápe, jak může interagovat na webu, může také záviset na interaktivním designu webu. Pokud uživatel vnímá užitečnost webové stránky, je pravděpodobnější, že ji bude nadále používat. Uživatelé, kteří jsou zruční a dobře se orientují v používání webových stránek, mohou přesto považovat za užitečné výraznější, ale méně intuitivní nebo méně uživatelsky přívětivé webové rozhraní. Uživatelé s menšími zkušenostmi však méně vidí výhody nebo užitečnost méně intuitivního webového rozhraní. To vede k trendu univerzálnějšího uživatelského zážitku a snadného přístupu, aby se přizpůsobilo co největšímu počtu uživatelů bez ohledu na uživatelské dovednosti. Většina návrhů uživatelského prostředí a interaktivního designu je zohledněna v návrhu uživatelského rozhraní .
Pokročilé interaktivní funkce mohou vyžadovat zásuvné moduly, pokud ne pokročilé znalosti kódovacího jazyka. Volba, zda používat či nepoužívat interaktivitu, která vyžaduje doplňky, je zásadním rozhodnutím při návrhu uživatelského prostředí. Pokud modul plug-in není ve většině prohlížečů předinstalován, existuje riziko, že uživatel nebude mít ani know how, ani trpělivost k instalaci modulu plug-in jen pro přístup k obsahu. Pokud funkce vyžaduje pokročilé dovednosti v oblasti kódovacího jazyka, může být kódování příliš časově nebo finančně nákladné ve srovnání s množstvím vylepšení, která funkce přidá k uživatelskému zážitku. Existuje také riziko, že pokročilá interaktivita může být nekompatibilní se staršími prohlížeči nebo hardwarovými konfiguracemi. Publikování funkce, která nefunguje spolehlivě, je pro uživatelskou zkušenost potenciálně horší než žádný pokus. Záleží na cílovém publiku, zda je pravděpodobné, že bude potřeba, nebo zda stojí za nějaké riziko.
Rozvržení stránky
Část vzhledu uživatelského rozhraní je ovlivněna kvalitou rozvržení stránky . Při návrhu rozložení může například návrhář zvážit, zda by rozložení stránky na webu mělo zůstat konzistentní na různých stránkách. Šířku pixelu stránky lze také považovat za zásadní pro zarovnání objektů v návrhu rozvržení. Nejoblíbenější weby s pevnou šířkou mají obecně stejnou nastavenou šířku, aby odpovídaly aktuálnímu nejoblíbenějšímu oknu prohlížeče, při aktuálním nejoblíbenějším rozlišení obrazovky a aktuální nejoblíbenější velikosti monitoru. Většina stránek je také zarovnána na střed kvůli obavám z estetiky na větších obrazovkách.
Plynulé rozvržení vzrostlo na popularitě kolem roku 2000, aby umožnilo prohlížeči provádět uživatelská nastavení rozvržení tekutých rozvržení na základě podrobností obrazovky čtenáře (velikost okna, velikost písma vzhledem k oknu atd.). Vyrostly jako alternativa k rozvržení založenému na HTML tabulce a mřížkovému designu jak v principu návrhu rozvržení stránky, tak v kódovací technice, ale jejich přijetí bylo velmi pomalé. Důvodem byly úvahy o zařízeních pro čtení z obrazovky a různé velikosti oken, nad nimiž návrháři neměli žádnou kontrolu. V souladu s tím může být návrh rozdělen na jednotky (postranní panely, bloky obsahu, vložené reklamní oblasti, navigační oblasti), které jsou odesílány do prohlížeče a které prohlížeč co nejlépe namontuje do zobrazovacího okna. Ačkoli takové zobrazení může často měnit relativní polohu hlavních obsahových jednotek, postranní panely mohou být přesunuty spíše pod text těla než na jeho stranu. Toto je flexibilnější zobrazení než napevno zakódované rozložení založené na mřížce, které se nevejde do okna zařízení. Zejména relativní poloha bloků obsahu se může změnit, zatímco obsah v bloku zůstane nedotčen. To také minimalizuje potřebu uživatele vodorovně posouvat stránku.
Responzivní webový design je novější přístup založený na CSS3 a hlubší úroveň specifikací pro každé zařízení v rámci šablony stylů stránky prostřednictvím vylepšeného používání @mediapravidla CSS . V březnu 2018 společnost Google oznámila, že zavede indexování nejprve pro mobilní zařízení. Weby využívající responzivní design jsou dobře umístěny, aby zajistily, že splňují tento nový přístup.
Typografie
Weboví designéři se mohou místo použití široké škály písem nebo stylů písma rozhodnout omezit různorodost písem na webové stránky pouze na několik, které mají podobný styl . Většina prohlížečů rozpoznává určitý počet bezpečných písem, která návrháři používají hlavně proto, aby se vyhnuli komplikacím.
Stahování písem bylo později zahrnuto v modulu písem CSS3 a od té doby bylo implementováno v Safari 3.1, Opera 10 a Mozilla Firefox 3.5. To následně zvýšilo zájem o webovou typografii a také používání stahování písem.
Většina rozvržení webu obsahuje negativní prostor, který rozděluje text na odstavce a také se vyhýbá textu zarovnanému na střed.
Pohybová grafika
Rozložení stránky a uživatelské rozhraní může být také ovlivněno použitím pohyblivé grafiky. Volba, zda použít nebo nepoužít pohyblivou grafiku, může záviset na cílovém trhu pro web. Pohybovou grafiku lze očekávat nebo přinejmenším lépe přijímat na zábavně orientovaném webu. Webové stránce cílové na publikum s vážnějším nebo formálním zájmem (například podnikání, komunita nebo státní správa) však mohou připadat animace zbytečné a rušivé, třeba jen pro zábavu nebo dekoraci. To neznamená, že serióznější obsah nelze vylepšit pomocí animovaných nebo video prezentací, které jsou relevantní pro daný obsah. V obou případech může pohybový grafický design dělat rozdíl mezi efektivnějšími vizuálními a rušivými vizuálními prvky.
Pohybová grafika, která není iniciována návštěvníkem webu, může způsobit problémy s přístupností. Standardy přístupnosti konsorcia World Wide Web vyžadují, aby návštěvníci stránek mohli deaktivovat animace.
Kvalita kódu
Weboví designéři mohou považovat za správnou praxi dodržování norem. To se obvykle provádí pomocí popisu určujícího, co prvek dělá. Nedodržení standardů nemusí způsobit, že web bude nepoužitelný nebo náchylný k chybám, ale standardy se mohou týkat správného rozložení stránek pro čitelnost a také zajištění vhodného uzavření kódovaných prvků. To zahrnuje chyby v kódu, organizovanější rozložení pro kód a zajištění správné identifikace ID a tříd. Špatně kódované stránky se někdy hovorově nazývají tag polévka . Ověření prostřednictvím W3C lze provést pouze tehdy, je -li provedena správná deklarace DOCTYPE, která slouží ke zvýraznění chyb v kódu. Systém identifikuje chyby a oblasti, které neodpovídají standardům webového designu. Tyto informace pak může uživatel opravit.
Vygenerovaný obsah
Webové stránky jsou generovány dvěma způsoby: staticky nebo dynamicky.
Statické webové stránky
Statický web ukládá jedinečný soubor pro každou stránku statického webu. Při každém požadavku na tuto stránku se vrátí stejný obsah. Tento obsah je vytvořen jednou, během návrhu webových stránek. Obvykle je vytvářen ručně, přestože některé weby používají automatizovaný proces vytváření, podobný dynamickému webu, jehož výsledky jsou dlouhodobě uloženy jako dokončené stránky. Tyto automaticky vytvořené statické weby se staly populárnějšími kolem roku 2015 s generátory jako Jekyll a Adobe Muse .
Výhodou statického webu je, že byl jednodušší na hostování, protože jeho server potřeboval pouze poskytovat statický obsah, nikoli spouštět skripty na straně serveru. To vyžadovalo menší administraci serveru a menší šanci odhalit bezpečnostní díry. Mohly by také rychleji zobrazovat stránky na levném serverovém hardwaru. Tyto výhody se staly méně důležitými, protože levný webhosting se rozšířil také o dynamické funkce a virtuální servery nabízely vysoký výkon v krátkých intervalech za nízkou cenu.
Téměř všechny webové stránky mají nějaký statický obsah, protože podpůrné prostředky, jako jsou obrázky a šablony stylů, jsou obvykle statické, a to i na webových stránkách s vysoce dynamickými stránkami.
Dynamické webové stránky
Dynamické webové stránky jsou generovány za běhu a ke generování webových stránek používají technologii na straně serveru. Obvykle extrahují svůj obsah z jedné nebo více back-end databází: některé jsou databázové dotazy napříč relační databází pro dotazování katalogu nebo pro shrnutí číselných informací, jiné mohou k ukládání větších jednotek obsahu použít databázi dokumentů, jako je MongoDB nebo NoSQL , jako jsou blogové příspěvky nebo články na wiki.
V procesu navrhování, dynamické stránky jsou často terčem posměchu-up nebo wireframed pomocí statické stránky. Sada dovedností potřebných k vývoji dynamických webových stránek je mnohem širší než u statických stránek, zahrnuje kódování na straně serveru a databáze i návrh rozhraní na straně klienta. I středně velké dynamické projekty jsou tak téměř vždy týmovou prací.
Když se dynamické webové stránky poprvé vyvíjely, byly obvykle kódovány přímo v jazycích, jako je Perl , PHP nebo ASP . Některé z nich, zejména PHP a ASP, používaly přístup „šablony“, kde stránka na straně serveru připomínala strukturu dokončené stránky na straně klienta a data byla vložena do míst definovaných pomocí „značek“. Byl to rychlejší způsob vývoje než kódování v čistě procedurálním kódovacím jazyce, jako je Perl.
Oba tyto přístupy byly nyní nahrazeny pro mnoho webů nástroji vyšší úrovně zaměřenými na aplikace, jako jsou systémy pro správu obsahu . Ty staví na platformách kódování pro obecné účely a předpokládají, že existuje web, který nabízí obsah podle jednoho z několika uznávaných modelů, jako je časově sekvenovaný blog , tematický časopis nebo zpravodajský web, wiki nebo uživatelské fórum. Díky těmto nástrojům je implementace takového webu velmi snadná a je čistě organizačním a designovým úkolem, aniž by bylo nutné kódovat.
Úpravu samotného obsahu (stejně jako stránky šablony) lze provést jak prostřednictvím samotného webu, tak pomocí softwaru třetí strany. Možnost upravovat všechny stránky je poskytována pouze konkrétní kategorii uživatelů (například správcům nebo registrovaným uživatelům). V některých případech mohou anonymní uživatelé upravovat určitý webový obsah, což je méně časté (například na fórech - přidávání zpráv). Příkladem stránky s anonymní změnou je Wikipedie .
Design domovské stránky
Experti na použitelnost, včetně Jakob Nielsen a Kyle Soucy, často kladli důraz na design domovské stránky pro úspěch webových stránek a tvrdili, že domovská stránka je nejdůležitější stránkou na webu. Nielsen, Jakob; Tahir, Marie (říjen 2001), Použitelnost domovské stránky: 50 webových stránek dekonstruováno , New Riders Publishing, ISBN 978-0735711020Praktici však do roku 2000 začínali zjišťovat, že rostoucí počet návštěvnosti webových stránek obchází domovskou stránku a přechází přímo na interní stránky s obsahem prostřednictvím vyhledávačů, elektronických zpravodajů a kanálů RSS. Vést mnoho praktiků k argumentu, že domovské stránky jsou méně důležité, než si většina lidí myslí. Jared Spool v roce 2007 tvrdil, že domovská stránka webu je ve skutečnosti nejméně důležitá stránka na webu.
V letech 2012 a 2013 se kolotoče (nazývané také „posuvníky“ a „otočné bannery“) staly extrémně oblíbeným designovým prvkem na domovských stránkách, které se často používají k předvádění uváděného nebo nedávného obsahu v omezeném prostoru. Mnoho odborníků tvrdí, že kolotoče jsou neúčinným designovým prvkem a poškozují optimalizaci a použitelnost webových stránek pro vyhledávače.
Povolání
Na tvorbě webu se podílejí dvě hlavní úlohy: webdesigner a web developer , kteří na webu často úzce spolupracují. Weboví designéři jsou zodpovědní za vizuální stránku, která zahrnuje rozložení, vybarvení a typografii webové stránky. Weboví designéři budou mít také funkční znalosti značkovacích jazyků, jako je HTML a CSS, ačkoli rozsah jejich znalostí se bude u jednotlivých webových designérů lišit. Zejména v menších organizacích bude jedna osoba potřebovat potřebné dovednosti pro návrh a programování celé webové stránky, zatímco u větších organizací může být webdesigner zodpovědný pouze za vizuální stránku.
Mezi další pracovní místa, která se mohou podílet na tvorbě webových stránek, patří:
- Grafičtí designéři pro vytváření vizuálů pro web, jako jsou loga, rozložení a tlačítka
- Specialisté na internetový marketing, kteří pomáhají udržovat přítomnost na webu prostřednictvím strategických řešení zaměřujících se na diváky na stránce pomocí marketingových a propagačních technik na internetu
- SEO spisovatelé k výzkumu a doporučují správná slova, která mají být začleněna na konkrétní webovou stránku, aby byla webová stránka přístupnější a nalezená v mnoha vyhledávačích
- Internetový copywriter k vytvoření písemného obsahu stránky, který se bude líbit cíleným divákům webu
- Návrhář uživatelské zkušenosti (UX) zahrnuje aspekty úvah o designu zaměřených na uživatele, které zahrnují informační architekturu, design zaměřený na uživatele, testování uživatelů, návrh interakce a příležitostně vizuální design.
