Zdroj: https://www.invisionapp.com/defined/web-design-and-development
Koncept návrhu a vývoje webových stránek existuje přibližně stejně dlouho jako webové stránky. Dříve měl mnohem jednodušší definici, protože tvorba webových stránek bývala mnohem jednodušší.
Když porovnáte první webovou stránku, která vyšla v roce 1991, s moderními webovými stránkami, je skutečně vidět, jak moc se webové stránky vyvinuly. Dnes je tvorba a údržba webových stránek složitější a zahrnuje celý ekosystém rolí a dovedností.
Pro designéry může být obtížné zjistit, kam přesně do tohoto ekosystému patří. Tento článek popisuje hlavní aspekty procesu tvorby webových stránek a nabízí jasnou představu o vaší roli, rolích ostatních a souborech dovedností, které jsou s tím spojené.
Co je to návrh a vývoj webových stránek?
Návrh a tvorba webových stránek je souhrnný pojem, který popisuje proces tvorby webových stránek. Jak název napovídá, zahrnuje dvě hlavní oblasti: návrh a vývoj webových stránek. Webový design určuje vzhled webových stránek, zatímco vývoj webových stránek určuje jejich fungování.
Protože ne vždy existuje pevná hranice, která by tyto dvě role oddělovala, používají se tyto názvy často zaměnitelně. S tím, jak se web vyvíjí, se vyvíjejí i jeho role.
Za téměř 30 let od vytvoření první webové stránky se objevilo mnoho názvů pracovních pozic, které popisují různé dovednosti používané při tvorbě webových stránek, a každý rok přibývají další. Tyto názvy se často překrývají a jejich význam se v jednotlivých firmách mění. Je to dost na to, aby se vám z toho zatočila hlava.
Design vs. vývoj front-endu vs. vývoj back-endu
Pro zjednodušení rozdělme tvorbu webových stránek do dvou kategorií: co uživatelé vidí a co nevidí.
To, co vidí uživatel, se odehrává v prohlížeči a zahrnuje návrh a vývoj front-endu. Návrh definuje barvy, rozvržení, písmo a obrázky – vše, co se podílí na vytváření značky a použitelnosti webu – a vyžaduje nástroje jako Photoshop, Illustrator, Fireworks a Sketch.
Použití kódovacích jazyků, jako jsou HTML, CSS a Javascript, k implementaci návrhu se nazývá front-end development. Tyto jazyky umožňují interakci uživatelů s tlačítky, obrázky, texty, kontaktními formuláři a navigačními nabídkami. A jsou nedílnou součástí responzivního a adaptivního designu.
Někteří designéři kódují a někteří vývojáři front-end designu. Někteří designéři se nedotknou ani kousku kódu. A někteří front-end vývojáři se drží kódování a ničeho jiného. Užitečné, že?
To, co uživatel nevidí, se odehrává na serveru a zahrnuje vývoj back-endu.
Webové stránky potřebují backend, který ukládá a organizuje všechna data, která přicházejí přes frontend. Pokud tedy uživatel něco koupí nebo vyplní formulář, zadává informace do aplikace na front end webu. A tyto informace jsou uloženy v databázi na serveru.
Webové stránky fungují tak, jak si přejete, protože front a back end webových stránek spolu neustále komunikují. Vývojář back-endu je jako dirigent. Zajišťuje, aby aplikace, databáze a servery harmonicky spolupracovaly, a to pomocí jazyků, jako jsou Ruby, PHP, .Net a Python, spolu s frameworky, jako jsou Ruby on Rails a Code Igniter.
Prvky webového designu
Kultovní designér Paul Rand ve své eseji Politika designu napsal: „Design je činnost, která řeší problémy. Je prostředkem k objasnění, syntéze a dramatizaci slova, obrazu, výrobku nebo události.“
Weboví designéři neustále řeší problémy svých uživatelů. Webové stránky by měly uživatelům usnadnit cestu tam, kam chtějí, a dělat to, co chtějí. U frustrovaného uživatele je méně pravděpodobné, že se na webu zdrží, natož aby se na něj vrátil
Proto každý prvek webového designu slouží k tomu, aby se webové stránky používaly co nejsnadněji: aby je lidé navštěvovali a komunikovali s nimi opakovaně.
Rozvržení: Rozložení je uspořádání záhlaví, navigačního menu, zápatí, obsahu a grafiky webu. Rozložení závisí na účelu webu a na tom, jak chce webdesignér, aby uživatel s webem komunikoval. Například fotografický web by upřednostnil velké krásné obrázky, zatímco redakční web by upřednostnil text a rozestupy mezi písmeny.
Vizuální hierarchie: Uživatel by měl mít možnost dostat se k informacím, které potřebuje, pouhým pohledem na webovou stránku. K tomu slouží vizuální hierarchie. Vizuální hierarchie je proces určování, které estetické aspekty webu by měly vyniknout pomocí velikosti, barvy, rozestupů a dalších prvků.
Nadpisy v tomto článku jsou základním příkladem vizuální hierarchie. Díky nim se čtenář rychle dozví, o čem tento článek je.
Navigace: Navigace pomáhá uživateli dostat se z bodu A do bodu B pomocí navigačních nástrojů, jako jsou architektura webu, nabídky a vyhledávací panely. Jednoduchá a efektivní navigace pomáhá uživatelům rychle a snadno najít informace, které hledají.
Barva: Barva dodává webu osobitost, dává mu vyniknout a ukazuje uživateli, jak má jednat. Barevná paleta může být určena stávající identitou značky nebo obsahem webu (jako například tento web o rostlinách používá odstíny zelené). Konzistentní barevná paleta pomáhá dát webu řád.
“Pokud stejné prvky uživatelského rozhraní vypadají v různých částech aplikace nebo webu různě, může to uživatele zmást. Zachování konzistentního přístupu k designu umožňuje uživatelům využít při interakci s produktem své předchozí znalosti.”
Nick Babich
Editor-in-Cheif, UX Planet
Grafika: Grafika jsou loga, ikony a obrázky, které se nacházejí na webových stránkách. Měly by doplňovat barevnou paletu, rozvržení a obsah.
Rychlost: Rychlost: První dojem uživatele závisí na tom, jak dlouho trvá načtení webové stránky. Pokud to trvá příliš dlouho, je pravděpodobné, že uživatel nezůstane na stránce.
Podle zprávy Akamai 2017 State of Online Retail Performance je optimální doba načítání stránky napříč zařízeními 1,8 až 2,7 sekundy. Stejná zpráva zjistila, že dvousekundové zpoždění zvyšuje míru odchodu z webu – procento návštěvníků, kteří web opustí po zobrazení jedné stránky – až o 103 %.
Přístupnost: Přístupnost webových stránek závisí na tom, kdo je může nebo nemůže používat. To, že je přístupnost prioritou, zajišťuje, že všichni uživatelé mají k webu a jeho funkcím stejný přístup a mohou je používat.
Příklady webového designu
Následující příklady zahrnují webové stránky agentury, stránky elektronického obchodu a osobní portfolio. Každý z nich slouží jinému účelu, ale všechny se snadno používají díky jednoduché navigaci, rychlému načítání a přehlednému rozvržení.
Partneři & Spade
Partners & Spade je newyorské brandingové studio. Design jejich webových stránek je interaktivní, aniž by byl obětován jednoduchosti. Hned po návštěvě jejich domovské stránky přesně víte, o co jde, a snadno najdete jejich kontaktní informace, příklady práce, seznam klientů a umístění.
The Sill
Webové stránky The Sill jsou vizuálně ucelené, s navigačními nástroji, které usnadňují vyhledávání informací o péči o rostliny, nadcházejících akcích a rostlinách k zakoupení.
Agnes Lloyd-Platt
Webové stránky portfolia módní a kosmetické fotografky a filmařky Agnes Lloyd-Platt jsou vizuálně působivé a snadno použitelné. Úvodní stránka poskytuje návštěvníkovi prakticky všechny informace, které potřebuje vědět: ukázky práce, kontaktní informace a její zastoupení.
Navigační menu je jednoduché, takže pokud se někdo chce dozvědět více o její práci a o tom, kdo je, může. Navíc lze její portfolio filtrovat podle typu nebo barvy, což usnadňuje vyhledávání konkrétních projektů.
Společně je to lepší
Tvorba webových stránek zahrnuje mnoho pohyblivých částí. Pokud budete vědět, jak se jednotlivé role doplňují, stanete se lepším designérem. Možná se chcete naučit kódovací jazyky, nebo se chcete zaměřit na uživatelské prostředí. Ať už je to jakkoli, pevné povědomí o tom, co vlastně návrh a vývoj webu obnáší, vám bude vodítkem po celou dobu vaší kariéry.
Vytvoření kouzelného zážitku na webu
Život se stále častěji odehrává na obrazovce – jak může váš tým zajistit, aby váš produkt poskytoval takovou webovou zkušenost, kvůli které se k němu budou lidé vracet?
Platforma InVision pro návrh digitálních produktů propojuje celý pracovní postup vašeho týmu a poskytuje mu vše, co potřebuje – od začátku až do konce – k navrhování úžasných online zážitků. Pomocí nástěnek můžete shromažďovat a sdílet inspiraci. Skicujte wireframy na společném plátně Freehand. Pomocí aplikace Studio proměňte nápady ve výkonné obrazovky a pomocí aplikace Inspect překlenete propast mezi návrhem a vývojem. Získejte kreativitu a konzistenci v měřítku díky Správci systému návrhu jako jedinému zdroji pravdy pro váš tým. InVision podpoří váš proces návrhu produktu na každém kroku.