TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Po delší odmlce se vracím k seriálu webdesign. Navrhneme si rozvržení budoucího designu, řekneme si čeho se vyvarovat, jaké zvolit barvy a neodpustím vám trochu teorie. Ze všeho trochu.
Pravidlo č.1
Než začneme onu dlouhou pouť na cestě k hotovému designu, chtěl bych vás seznámit s jedním vcelku zásadním pravidlem, které jsem se ještě naplno nenaučil respektovat ani já.
To, že něco můžete udělat neznamená, že to udělat musíte. Zkráceně, méně je někdy více.
Mým problémem je, že tak dlouho design ladím, až ho znehodnotím. Člověk si řekne, hodím tam tamto a už to nechám být. Jenže onen prvek například způsobí nerovnováhu v designu a vy jste nuceni přidat další prvek. A tak se děje do přeplácání designu. Naštěstí už stvořitelé Photoshopu vymysleli metodu ‚progress saving‘ , která vám umožní postupně ukládat vaši práci. Poté shlédnete všechny uložené ‚časy‘ a rozhodnete, který je lepší.
Navrhujeme design
Někteří čtenáři mohou namítnout, že tato metoda je poněkud zbytečná či neefektivní. Hovořím o tužce a papíru. Podobné je to i u tabletu. Já ho ale používám hned z několika důvodů.
› 1. Mám „zápisník“, ve kterém mám navrženy designy, pokud nemám motivaci, stačí mi do něj nahlédnout a rázem je o problém méně.› 2. Tužka mi umožní přemýšlet nad designem a pokud se mi něco nezdá, jednoduše to udělám jinak. Pokud pracujete přímo v počítači, tuto metodu poněkud ztrácíte a vystavujete se nebezpečí, že design budete dělat znovu nebo jej budete delší dobu upravovat.
› 3. Tužka a papír mi nechají volně plynout fantazii, než stihnu udělat v počítači celý design, původní představa může vymizet. Takto si onen návrh načrtnu a kdykoli se na něj mohu podívat, byť jen pro motivační účel.
Určitě bych našel i další důvody proč zkusit tužku či tablet, ale jdeme dále.
Při náčrtu designu se vyvarujte zbytečných detailů, výsledné linie zvýrazňujte, nenechte zaniknout důležité detaily a nesnažte se udělat design zbytečně přeplácaným.
Doporučuji do designu načmárat i pomyslné „Lorem ipsum“, které na papíře udělá alespoň nadneseně obrázek webu a ukáže vám, jak bude web vypadat. Tužka vám také umožní popřemýšlet o rozvržení informací.
Návrh kompozice:
Poněkud složitější otázka, na kterou nelze odpovědět jednoznačně. Důležitou složkou pro designera je mít dostatečné množství podkladů, informací o firmě. Jinak budete nuceni je hledat sami.
Ještě nikdy se mi nepovedlo navrhnout web pro firmu, o které jsem věděl jen její název.
Doporučuji tedy předem si připravit základní fakta o designu, nejlepší je si nechat napsat od klienta krátkou osnovu, kde odpoví na vaše otázky. Jednou z nejdůležitějších otázek je, kolik procent webu budou obsahovat informace. Obecným pravidlem je procentuální rozdělení obsahu na jednotlivé části, tj. obsahová část, grafická část, navigační a reklamní část. My zůstaneme u poněkud obecnější definice.
Jak asi všichni víte, hlavní je text. Jiným problémem je, že pokud web neskrývá tolik informací, musí toto dohonit právě originalitou a provedením designu. Z toho vyplývá, že pro portály s větší obsahovou částí volíme barvy s menší saturací, menším obsahem grafiky a můžeme si dovolit umístít větší množství reklamních prostor.
Naopak u webů typu portfolio bych volil výraznější barvy, oslnivý design a minimum reklamy. Ale to je snad jasné.
Samostatnou kapitolou je právě navigace, která vám může připravit horké chvilky.
Vývoj navigace:
Při návrhu navigace vstupují do hry otázky použitelnosti a snadné údržby. Pokud není navigace správně navržena, webdesigner riskuje ztrátu uživatele. Jedním z velkých problémů je také příliš velký počet nabídek na titulní stránce, které se nakonec propojují „podle nálady“.
Jakmile začnete do každé sekce přidávat další a další nabídky, které nejsou na jednom místě, web razantně ztrácí na přehlednosti a web se stává labyrintem. Na stránky s větším počtem stránek bych doporučil vytvořit také mapu serveru, která pomůže jak vám při návrhu, tak uživateli v nesnázích.
Ukázka náčrtku a převedeného návrhu do počítače :
Vidíte, žádná složitost. Poměrně jednoduchý design na přání zákazníka, připraven k libovolné úpravě. Idea vznikla 10 minut před tím, než jsem usnul. S myší byste to nezvládli. Proto miluji tužku.
O něco horší je ona „digitalizac“ představy. Hlavně si pamatujte, že málokdy se vám povede převést představu do počítače podle vašich představ. Čím déle ale budete grafiku dělat, tím více „vyzrajete“.
Návrh barev:
Poměrně složitou otázkou je také navržení barevné kompozice designu.
Pokud nemáte zrovna rozvinutý barevný cit, na pomoc si můžete povolat mixéry barev či hotová barevná složení.
Jedním z pomocníků může být přímo webová galerie barevných kompozic, kterou najdete například na adrese http://graphicdesign.about.com/library/color/blweb3.htm či na adrese http://www.colorschemer.com/, kde máte k dispozici i onen „mixér“.
Dalším z pomocníků jsou barevné mixéry, které určitě znáte v některých z jejich podob. Jsou to vlastně vzorky barev poskládaných vedle sebe. V praktickém životě jsou to například vzorky žaluzíí, nátěrových barev. Na podobném principu pracují i „virtuální“ vzorky, kde vedle sebe buďto skládáte sobě podobné či kontrastní barvy, nebo je jednoduše necháte vyrobit.
Jak bylo výše zmíněno, tuto utilitu najdete například na adrese http://www.colorschemer.com. Nutno podotknout, že není freeware.
A co vady zraku?
Myslím, že na toto téma již bylo napsáno mnoho věcí a bylo by zbytečné se tím zde zabývat, když jsou v dnešní době na internetu skvělé práce na toto téma. Jedním z nich je nepochybně článek Marka Prokopa na serveru interval.cz
Praktická rada:
› Pokud nevíte na jaké barvy šáhnout, určitě se buďto obraťte na onen mixer, nebo browsdejte po I-netu a hledejte barvy, které se vám líbí. Poté si pomocí jednoduchých utilit můžete zjistit HEX barvy, která vám padla do oka a v budoucnu ji použít. Nemluvím o kopírování všech barev z jednoho webu, nýbrž o využití „jedné z barev“.› Pokud nemáte mnoho zkušeností, raději se nepouštějte do „pískových“ barev. Neopatrně vybrané barvy tohoto ladění lehce odradí.
› Naopak nic nezkazíte využitím všemožných odstínů modré barvy, u větších portálů pokud možno s nižší hodnotou saturace.
› V poslední době osobně využívám odstínů modré, oranžové, šedé a béžové. Ale to se velmi liší u každého vytvořeného díla.
Závěr:
Doufám že vám dnešní článek něco přinesl a příště se již můžete těšit na práci v počítači a plánování.
