Jak navrhnout webovou stránku

V tomto článku:Part One: Hledání designu Part Two: Tvorba základního designu Part Three: Design pro mobilní zařízení

Navrhnout skvělou webovou stránku se může zdát jako zastrašující výzva, ale jakmile se naučíte základy poznáte, že se jedná o poměrně zábavný a zajímavý proces. Nemusí to en skvěle vypadat, ale také umět spoustu věcí. Ukážeme Vám základy, jak navrhnout takovou stránku, aby se lidé k ní vraceli.

Metoda 1
Part One: Hledání designu

1

Navrhněte si svou vlastní stránku. Pokud jste v oblasti kódování a tvorby stránek noví, ale chcete si navrhnout vlastní, existuje pro Vás mnoho možností. Můžete vytvořit jednoduchou stránku pomocí základního HTML kódu a vytvořit styl pomocí CSS. Pouze si musíte být jisti, že stránku dokážete udělat pěknou a profesionálně vypadající.
2

Použijte předpřipravené šablony. Jednou z možností je jejich nákup, a nebo najít šablony zdarma. Tyto šablony jsou připravené pro použití, stačí je jen drobně upravit pro vlastní potřeby. Existuje mnoho poskytovatelů šablon, jedním z velmi dobrých je například Wix.
3

Zaměstnejte webdesignéra. Pokud chcete něco přímo na míru Vašim potřebám, něco co vypadá opravdu profesionálně a také spolehlivě funguje, je dobré uvažovat o spolupráci s profesionálním webdesignérem. I když to nepochybně bude stát nějaké peníze, nemusí to být tak finančně náročné jak se dá. Můžete například využít služeb studentů designu na místní univerzitě. Jejich zkušenosti Vám pomohou dosáhnout úspěšnější a profesionálnější stránky.

Metoda 2
Part Two: Tvorba základního designu

1

Zefektivněte svou stránku. Určitě chcete, aby Vaše stránka byla rychlá a jednoduchá k použití. Minimalizujte počet kroků, které musí návštěvník udělat - navigace musí být jednoduchá, intuitivní a navést návštěvníky rychle k tomu, co hledají.
2
Hledejte vhodné uživatelské rozhraní. Rozmístění prvků (titul, sidebar, logo, grafika, texty) na stejném místě na každé stránce jí činí více intuitivní a přehlednou.
- Udržujte stejnou hlavičku na vrchu na každé stránce. I když stránka obsahuje mnoho navigačních prvků, které se opakují, pevně ukotvená hlavička je základ.
- Používejte logiku. Prvky na každé stránce by měly být uspořádány logicky podle důležitosti nebo podle témat; různé stránky na Vašem webu by se měly chovat stejně.
3
Vytvořte jednotný styl. Zatímco layout (rozvržení) dodává stránce strukturu, styl by měl dodat tématickou harmonii. Držte se dvou nebo tří hlavních barev, které spolu ladí. Vyhněte se používání velkého množství fontů a velikostí. Pokud se rozhodnete použít jich více, měli by na každé stránce reprezentovat to samé.
- Používejte kaskádové styly CSS pro vytvoření jednotného stylu, a zároveň snadné změny jednotlivých prvků napříč celým webem. S použitím CSS není potřeba upravovat každou stránku a oddíl zvlášť.
4
Maximalizujte čitelnost. Text rozdělte do menších částí, bude lépe čitelný. Používejte podnázvy a správné mezery k oddělení jednotlivých sekcí. Pro zvýraznění hierarchie textu používejte tučné nebo různě velké fonty.
- Dávejte pozor na pozicování a úpravu textu. Nedělejte font příliš malý a dbejte na větší mezery mezi řádky při větších odstavcích - budou se lépe číst. Velké bloky textu se budou hůře číst; rozdělte je na menší odstavce.
5
Vytvořte univerzální stránku. Používejte standardní HTML a vyněte se tagům, vlastnostím a plug-inům, které jsou podporovány pouze jednou firmou nebo jedním prohlížečem.
- I když většina moderních prohlížečů a počítačů nemá problém s obrázky, vše bude svižnější pokud je udržíte menší a optimalizované pro web. Najděte rovnováhu mezi požadovanou kvalitou a rychlostí načítání.
6
Otestujte svůj web. Zkontrolujte, jestli každý odkaz vede tam kam má a každý obrázek se zobrazuje správně.
- Můžete také zvážit test použitelnosti na Vašem cílovém publiku a zjistit, jestli stránka odpovídá Vašim představám použitelnosti a také získat důležitou zpětnou vazbu.

Metoda 3
Part Three: Design pro mobilní zařízení

1
Počítejte s mobilní verzí. V poslední době se více a více přístupů na web realizuje pomocí mobilních telefonů. Pokud chcete přilákat co nejvíce lidí, je nutné přizpůsobit Vaši stránku také mobilním prohlížečům. Nejspolehlivějším způsobem je vytvoření speciální verze pro mobily, nicméně existují i jiné možnosti.
- Vyhledejte si příklady mobilních stránek. Většinou obsahují “m” v místě “www” ve webové adrese. Vy budete potřebovat něco podobného.
2

Udržujte svou stránku jednoduchou. Obecně by Váš design měl být jednoduchý a věcný. Doby tabulek a blikající grafiky jsou pryč. Všichni uživatelé ¨chtějí něco jednoduchého k použití. To znamená jednoduchý design, minimum sloupečků a minimum textu nutnému k navigaci.
3

Používejte responzivní webdesign. Responzivní design je způsob kódování, který umožňuje flexibilitu webové stránky, kterou lze pak zobrazit na obrazovkách s nejrůznějším rozlišením. Nejjednodušeji to lze udělat nastavením šířky sloupců v procentech namísto pixelů. Nicméně existují i elegantnější metody.
4

Vyhněte se takovým prvkům designu, které nepodporují mobilní zařízení. Mnoho mobilních zařízení neumí zobrazit například vyskakovací okna, Flash, Javu nebo rámy. Toto vede opět k nutnosti udržet web jednoduchý.
5

Zvažte tvorbu aplikace. V některých případech je jednodušší vytvořit mobilní aplikaci namísto webu, přizpůsobeného těmto zařízením. Nepotřebujete k tomu žádné výjimečné programátorské schopnosti. Nicméně stejně jako existují šablony webů, i v tomto případě existují společnosti, které Vám navrhnou základní aplikaci (např. Conduit Mobile).

Tipy

Nezahlcujte návštěvníky rádoby roztomilou nebo blikající grafikou. Flashové animace, zářivé barvy, vzorce na pozadí a hudba, která se sama spouští byla “in” v 90. letech. Držte se jednoduchého designu - světlého pozadí kontrastujícího s barvou textu pro maximální čitelnost.
I když chcete vytvořit vlastní návrh na základě již hotových webů, které se Vám líbí, může být snazší koupit si hotovou šablonu.
Pro přizpůsobení lidem se sluchovým a zrakovým postižením můžete zahrnout video, přepsat audio a přidat poznámku o přístupnosti. I když tabulky mohou být dobrý způsob jak organizovat informace, lidé se zrakovým postižením, kteří používají předčítací zařízení, mohou mít problémy s pořadím informací ve sloupcích.
Aby Vaši návštěvníci neplýtvali barvou v tiskárně, přizpůsobte speciální verzi stránky k tisku.
- V možnostech tisku vypněte obrázky na pozadí.
- Používejte černý text na bílém pozadí.
- Odstraňte menu a všechny zbytečné obrázky.
Používejte CSS pro vhodné mezery mezi odstavci.

Varování

Vyhněte se plagiátorství a dávejte pozor na autorský zákon. Nepoužívejte náhodné obrázky z webu, nebo jiné prvky bez svolení autora. Cokoliv se objeví na Vaší stránce musí být legální a etické.