Rozhodli jsme se vytvořit webové stránky. Klient nám dodal potřebné informace a podklady pro realizaci. Jelikož mezi podklady bylo i celkem zastaralé logo společnosti, které má klient umístěno na všech dopravních prostředcích svého vozového parku, je nutné ho zachovat.

Fiktivní společnost Nábytek Vystrčil, s.r.o., kterou náš klient vlastní se zabývá distribucí a výrobou nábytku z masivu. Vlastní výrobní halu, která dominuje nejmodernější technologií a distribuční středisko.  Pro návrh našeho designu, budou tyto informace a podklady klíčové k vytvoření základní palety barev, které budou spolu s logotypem tvořit část firemní identity (Corporate Identity).

Nástrojů a pomůcek pro návrh palety barev existuje celá řada. Jedním z nich je online aplikace KULER. Nabízí vám možnost si vybrat již z vytvořených schémat, nebo si můžete vytvořit schéma vlastní.

Já jsem vybral již vytvořené schéma, které odpovídá barvám loga společnosti a obsahuje i barvy různých druhů odstínů. Samotné schéma si můžete upravit dle libosti.

Tvorba wireframe neboli skici webu

Nyní, když už máme vybrané barevné schéma je načase vytvořit wireframe = (skica webu). Na tvorbu wireframe nepotřebujete žádné speciální utility či programy, můžete použít svůj bloček a tužku. Důkladně si rozmyslete a nakreslete různé varianty rozmístění jednotlivých boxů hlavní stránky a podstránek. Někteří designéři tento krok často podceňují a záměrně vynechávají, my si však chceme být jisti, že zákazníkovi daná struktura webu bude vyhovovat.

Pokud se vám nechce kreslit wireframes ručně, tak jako mně, doporučil bych program Pencil. Obsahuje různé vychytávky jako (Touch Screen Hand Gesture, Famfamfam Flag icons atd.), které si stačí stáhnout ze stránek a doinstalovat.

Pro ty línější existuje online nástroj Balsamiq Mockups. Pokud vám nepřijde zrovna vhod, využijte Google a vyhledejte si jiný. Na internetu je těchto nástrojů opravdu velká spousta.

Jakmile máme schváleny jednotlivé wireframy a celkovou strukturu obsahu webové stránky, nic nám nebrání začít vytvářet grafickou část firemní prezentace.

Dobrým pomocníkem při návrhu designu je 960 grid systém.

Grafický návrh

Ještě před tím, než začnete designovat, rozmístěte si správně základní vodítka (Photoshop ->menu->zobrazení->nové vodítko). Vodítka ve photoshopu slouží jako pomocník, který vám zabrání přesažení velikosti vymezeného layoutu. Pomůže nám tedy udržet konstantní šířku stránky (960px) atp.

Pokud jste aspoň trošku zkušený designér a máte vlastní kreativní nápady, nezapomeňte na jednoduchost a hlavně použitelnost webu. Nechceme, aby naše kreativní výstřelky stěžovali návštěvníkům orientaci na stránce a posléze kodérům jejich práci. Dále bych doporučil klást důraz na přehlednost struktury jednotlivých vrstev designu. Každou vrstvu je nutné náležitě pojmenovat a zařadit ji do té správné složky.

Jak navrhnout grafiku pro web?

Při tvorbě dbáme především na uživatele, kteří budou naši stránku používat.

Dbáme na uživatele webu

Stránku musíme přizpůsobit cílové skupině uživatelů, je dobré při návrhu zachovat základní konvenci.

Standartní prvky na webu:

• Logo v hlavičce webu odkazující zpět na hlavní stránku
• Fulltextové vyhledávání umístěné v pravo nebo ve středu nahoře
• Menu stránky horizontální nebo vertikální
• Navigace (u obsahově bohatších stránek – e-shopů atp.)
• Změna barvy odkazu po najetí
• Mapa stránek umístěná v patičce webu
• Nákupní košík u e-shopu umístěný v pravo nahoře

Každý člověk, muž i žena vnímá různé podněty odlišně. Grafický vzhled webu proto optimalizujeme pro ty, kteří ho budou skutečně používat.

Pokud to s použitelností webu myslíte skutečně vážně, doporučuji vám knihu Webdesign, Nenuťte uživatele přemýšlet (Steve Krug ).

Jakmile je návrh hotov, necháme ho schválit zadavatelem (klientem). V průběhu tvorby designu je dobré klientovy pravidelně zasílat náhledy vaší práce k vyjádření. Jakmile je klient spokojen, máte hotovo.

Tento článek není podrobným návodem výroby grafického designu, ale snaží se popsat soubor konvenčních postupů a kroků důležitých k tvorbě návrhu.