načítání...
menu
nákupní košík
Košík

je prázdný
a
b

Kniha: Inspirativní webdesign -- Průvodce nejlepšími tématy, trendy a styly - Patrick McNeil

Inspirativní webdesign -- Průvodce nejlepšími tématy, trendy a styly
-15%
sleva

Kniha: Inspirativní webdesign
Autor: Patrick McNeil
Podtitul: Průvodce nejlepšími tématy, trendy a styly

Kniha je přehledem konkrétních webů (650) z celého světa a z různých zájmových oblastí. Screenshoty (náhledy) jsou seřazeny podle typu, prvků designu, stylů a témat, strukturálních ... (celý popis)
Titul doručujeme za 5 pracovních dní
doručujeme do Vánoc
Vaše cena s DPH:  499 Kč 424
+
-
rozbalKdy zboží dostanu
14,1
bo za nákup
rozbalVýhodné poštovné: 49Kč
rozbalOsobní odběr zdarma

hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6% 80%   celkové hodnocení
1 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Médium / forma: Tištěná kniha
Rok vydání: 2011
Počet stran: 264
Rozměr: 203 x 203 mm
Úprava: ilustrace (převážně barevné)
Vydání: Vyd. 1.
Název originálu: Web designer’s idea book
Spolupracovali: překlad Tereza Dusíková
Vazba: brožovaná, šitá nitmi
Datum vydání: 13. 7. 2011
Nakladatelské údaje: Brno, Computer Press, 2011
ISBN: 9788025135174
EAN: 9788025135174
Ukázka: » zobrazit ukázku
Popis / resumé

Kniha je přehledem konkrétních webů (650) z celého světa a z různých zájmových oblastí. Screenshoty (náhledy) jsou seřazeny podle typu, prvků designu, stylů a témat, strukturálních stylů a strukturálních elementů. Obrázky jsou výstižně komentovány.

Popis nakladatele

Najděte špičkovou inspiraci pro vaše vlastní projekty Vybírejte z více než 650 tematicky seřazených designů webů. Patrick McNeil, tvůrce populárního blogu designmeltdown.com věnujícího se webovému designu, shromáždil tisíce mezinárodních webů, aby vybral ukázky nejžhavějších trendů a stylů současného webdesignu a seřadil je do této knihy. Publikace nabízí přehled toho, co se dnes děje na scéně světového webdesignu. Weby jsou seřazeny podle typu, prvků designu, stylů a témat, strukturálních stylů a strukturálních elementů. V knize najdete také užitečnou kapitolu vysvětlující základní principy designu a jak je používat online. Získejte jedinečný podklad k uvažování nad špičkovým webdesignem a přesvědčivý argument pro vašeho klienta. Publikace vám dává do ruky silný nástroj ke sdělení vašich myšlenek klientovi a užitečnou inspiraci pro další projekty. (průvodce nejlepšími tématy, trendy a styly)

Předmětná hesla
Kniha je zařazena v kategoriích
Ke knize "Inspirativní webdesign -- Průvodce nejlepšími tématy, trendy a styly" doporučujeme také:
Přitažlivý interaktivní design -- Jak vytvářet uživatelsky přívětivé weby a aplikace Přitažlivý interaktivní design
 
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

011

/

011011

/

základní principy

designu

02 zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

Můj přístup k analýze a výuce designu se vždy lišil od standardu. Pre

feruji analýzu ukázek designu a toho, jak se vyrovnávají s různými pro

blémy, spíše než abych abstraktně mluvil o vágních tématech. Analýzou

reálných příkladů získáme praktický přehled o zcela základních princi

pech designu. To je dobré nejen pro začátečníky, ale také pro pokro

čilejší designéry. Často zjišťuji, že když se vrátím k základům, naleznu

něco nového, co mi poskytne nový pohled na věc. Také to v ypadá, že

kdykoliv design trpí, potřebuji si pouze projít základní principy, abych

si připomenul hlavní aspekty designu.

V případě základních principů, o nichž se zde bavíme, vás odkážu

na knihu Basic of Design od Lisy Grahamové. Jde o knihu, kterou jsem

používal ve škole, kde mi vždy sloužila jako základní přehled. Lisa tvrdí,

že se veškerý design vytváří podle základních principů: zvýraznění,


012012012

kontrastu, vyváženosti, zarovnání, opakování a toku. Čím více budete

myslet na tyto prvky, tím lepší design budete vytvářet. Pokud tyto prin

cipy opomenete, pak design často sejde z té správné cesty. Návratem

k základům se může váš zrak a mysl opětovně zaměřit na vytváření výjimečného designu.

Nicméně pamatujte si, že pouhé následování tohoto postupu vám

nezaručí úspěch. Mohu říct, že čas od času je tím, co mě povzbuzuje

k vypilování mého vlastního designu a umožní mi objevit důvod, proč

jedny designy fungují a druhé zase nikoliv.

V této části knihy se zaměřujeme na poskytnutí příkladů webů, jež dané

prvky různými způsoby demonstrují v praxi. Některé z nich je používají nápadně obvyklými způsoby, zatímco jiné jsou ve svém přístupu

mnohem důvtipnější. To je to, co miluji na reálných příkladech; pro

ilustrování toho, o čem jsme mluvili, jsou mnohem praktičtější, neboť ve skutečném světě se nic neděje přesně podle učebnic.


013

/0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

zvýraznění

Zvýrazněním zdůrazňujete zvláštní důleži

tost nebo významnost obsahu a v mnoha

ohledech je spíše chápáno, nebo dokon

ce zaměňováno, jako hierarchie. V rámci

navrhování na základě principů zvýraznění

musíte analyzovat obsah webu, abyste urči

li, jakou hierarchii důležitosti by obsah měl

používat. Jakmile je určená, můžete vytvo

řit design, jenž plně vyjadřuje stanovenou

hierarchii obsahu. Skvělou metodou, jak

určit, co je významné, je vytvoření sezna

mu všech prvků potřebných na dané strán

ce. Poté prvky očíslujte podle důležitosti.

A dále navrhujte tak, aby vizuální hierarchie

stránky odpovídala určené významnosti

těchto prvků. Jedním z důvodů, proč je to

tak důležité, je fakt, že se vyhnete pokušení

zvýraznit vše. Také se díky tomu vyhnete

pasti nahodilé hierarchie. Je vždy lepší se

vědomě rozhodnout, co by mělo mít vizu

ální prioritu, a co naopak nikoliv. Pokud se

pokusíte zvýraznit vše, zcela samozřejmě

to dospěje k tomu, že nezvýrazníte nic.

Podívejme se nyní na několik příkladů,

abyste viděli, co lze udělat pro vytvoření

vizuální hierarchie.

Bryan Connor (obrázek 1)

Web Bryana Connora je skvělým příkladem

vhodného použití zvýraznění. Nejnápadněj

ším prvkem stránky je seznam posledních

příspěvků v blogu. Ostře kontrastuje s hlav

ním obsahem stránky, a to díky bílé části

a také pomocí většího písma a umístění

blízko horního okraje stránky. Jde o znám

ku jasného úmyslu a touhy po směrování

pozornosti. V případech jako tento byste

si mohli myslet, že ukázky z portfolia nebo

kontaktní informace by měly být stejně

důležité, ale opět platí, že snažit se zvýraz

nit vše stejně vede pouze k tomu, že nebu

de zvýrazněné nic.

Digitalmas (obrázek 2)

Web nabízí jiné, zcela jasné použití zvý

raznění, ke kontrole uživatelova zájmu

na stránce. Velký, dominantní text, jenž byl

opět umístěn v horní části stránky, jasně

sděluje záměr autora webu: Tato stránka

slouží k náboru zaměstnanců. Není zde

proto, aby představila jeho rodinu, ukáza

la fotografi e z Flickru nebo se chlubila jeho

posledním tweetem. Slouží prostě k tomu,

aby nabírala zaměstnance. Zvažte proto

účel svého webu a jak jej můžete zvýraznit,

aby byl zřetelný a jasný.

Cold Stone Creamery (obrázek 3)

Web obsahuje běžný layout, v němž je

efektivně použito zvýraznění. Stránka má

typické záhlaví obsahující logo a položky

hlavní navigace. Odtud design začíná velmi

silným zvýrazňováním. Hlavně jej ovlivňuje

množství prostoru, který zabírají jednotlivé

prvky, takže se výraznost položek snižuje

tím rozložením do prostoru, jímž se pohy

bujete směrem dolů. Některé weby mohou

mít více než tři vrstvy, které najdeme


014

na tomto příkladu, ale není to úplně nutné.

Zde uživatelovu pozornost přitahuje velká

tirážová animace. Poté se design posunu

je k hustějšímu obsahu se třemi sděleními

v oddělených blocích. Hustota znamená,

že se na ni uživatel nezaměří hned, ale až

napodruhé. Což velmi dobře odpovídá

snaze o zvýraznění prvků takovým způ

sobem, aby se uživatel o stránku zajímal

ve směru odshora dolů. Nebojujte s tím,

ale nechte se unést a využijte to ve svůj

prospěch.

Obrázek 1 http://www.bryanconnor.com

Obrázek 2 http://www.digitalmash.com

http://www.greencircleshoppingcenter.comObrázek 3 http://www.coldstonecreamery.com


015

http://www.serj.ca

http://www.smartosc.com

http://stonetire.com http://www.atebits.com


016

/0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

kontrast

Kontrast je způsobem vizuálního odlišení

dvou nebo více prvků. Prvky se silným

kontrastem se zobrazují odlišně a oddě

leně, zatímco elementy s nízkým kontras

tem se zobrazují podobně a mají tendenci

mezi sebou splývat. Existuje mnoho prvků

designu, s nimiž můžete manipulovat,

abyste dosáhli kontrastu; například barva,

velikost, umístění, volba typu písma a jeho

síly. Kontrast v designu pomáhá vizuální

pestrosti a umožňuje vyhnout se dojmu

vyčichlosti. Kontrast také může pomoci

získat pozornost, čímž řeší potřebu zvý

raznění některých prvků. Vidět můžete,

jak vypadá mimo jiných principů designu

třeba opakování, jak se k ovlivnění zvý

raznění, toku a jiných aspektů designu

po užívá kontrast.

Kontrast má svůj největší vliv na uspo

řádání stránky, neboť se často používá

k dosažení požadovaného zvýraznění.

Tímto způsobem může kontrast přispívat

k nastolení vizuálního pořádku v desig

nu. Rychle může upoutat pozornost

na klíčové prvky, jako je obsah, položky

nějaké akce nebo účelová prohlášení.

Abyste mohli úmyslně upoutat pozornost

na určité prvky pomocí uváženého využití

kontrastu, jako obvykle byste měli pečli

vě zvážit skutečné potřeby vašeho webu.

Prohlédněme si některé příklady, abyste

viděli, jak se s kontrastem vypořádali jiní

designéři.

Twe4ked Studio (obrázek 1)

V tomto příkladu je snadné všimnout si

kontrastu, neboť ze stránky vystupují

dvě velká zelená tlačítka. Tyto dvě klíčo

vé výzvy k akci byly zvýrazněny pomo

cí barvy a velikosti. Zcela jistě vedou

designera tohoto webu dva důvody; jed

nak chce, abyste si prohlédli jeho portfolio,

nebo abyste mu zavolali. Kontrast může

me vidět také v několika dalších oblastech

webu. Jeho uvedení je velké, čímž domi

nuje horní části stránky. Nejen že zabí

rá celou šířku stránky, ale jde zde také

o největší text. Celá horní polovina stránky

je o černé na bílé, zatímco spodní polo

vina je obráceně. Tento kontrast hornímu

obsahu přiděluje zjevnou úroveň důleži

tosti, jež je dále zvýrazněna kontrastem

v hutnosti písma. Text ve spodní části je

naproti tomu mnohem méně hutný, čímž

naznačuje menší důležitost. Je úžasné,

jak kontrast funguje nebo může fungovat.

Be the Middle Man (obrázek 2)

Tento web opět demonstruje, jak může

radikální použití kontrastu ovlivňovat zvý

raznění a akci požadovanou po uživateli.

Tento web uživatele povzbuzuje k tomu,

aby otestoval vyhledávací nástroj tím, že

z něj na stránce udělal dominantní prvek.

Tak jako tak, jejich účel je zřetelný. Jiným

zajímavým aspektem tohoto designu je to,

jak se na stránce směrem dolů zvyšuje

hutnost obsahu. Tento zvyšující se kon


017

trast pěkně prochází stránkou a odpoví

dá chování uživatelů. Jestliže člověk tuto

stránku čte směrem dolů, je zde šance,

že jej bude stále více a více zajímat, až

dorazí zcela dolů (nebo bude stále zoufa

leji hledat to, co potřebuje), takže stránka

toho postupně nabaluje čím dál víc, aby

se pokusila nabídnout to, co uživatel

hledá.

http://www.swgraphic.com/v2

Obrázek 2 http://www.bethemiddleman.com

Obrázek 1 http://twe4ked.com


018

http://www.onebyfourstudio.com http://www.mediacontour.com

http://www.pokeseo.com


019

http://www.allisclear.com

http://andrewlindstrom.com

http://www.tunnel7.com


020

/

vyváženost

0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

Princip vyváženosti se točí kolem myšlen

ky, jak se prvky v designu rozmisťují a jak

souvisejí s celkovým rozmístěním vizuální

důležitosti na stránce. To má značný vliv

na vizuální stabilitu designu. Jak jsou

prvky v designu seskupeny, dosahují vizu

ální váhy. Ta musí být obvykle regulována

rovnoměrnou a protikladnou silou, abys

te v designu dosáhli vyváženosti. Pokud

to neuděláte, výsledkem je design, který

působí nestabilně, čímž nenaznačuji, že

by byl vysloveně špatný. Nemám žádné

námitky proti tomu, aby byl nedostatek

vyváženosti využit ve prospěch věci. Ale

dobře vyvážený design dotváří jemný

dojem stability a obvykle je i přitažlivější.

K vyváženosti vedou dva přístupy:

symetrický a asymetrický. Na každý z pří

kladů se podíváme zvlášť.

Symetrická vyváženost

Vyváženost je mezi symetrickými designy

dosažena tehdy, když se design stránky

směrem po ose zrcadlí a dvě protikladné

strany mají stejnou vizuální váhu. Ve webo

vém designu jde obvykle o situaci, kdy

jsou levá a pravá strana svisle rozděleny,

přičemž má každá strana stejnou váhu.

Jako obvykle, i v tomto případě dávám

přednost příkladům, takže se na ně podí

vejme.

MINT Wheels (obrázek 1)

Použití symetrické vyváženosti odpovídá

tomuto webu zcela přirozeným způsobem.

Přesvědčte se o precizním úsilí vyvinutém

k zajištění perfektní vyváženosti mezi

luxusními auty; ta nabízejí jedny z nejúžas

nějších zážitků, jaké můžete z řízení auta

mít. Právě tomuto záměru nejlépe odpo

vídá symetricky vyvážený web. Všimněte

si toho, jak je logo v horní části stránky

posunuté na střed stránky. Tím nejenom

podporuje symetrickou vyváženost, ale

také logo dostává do vizuálně poutavé

ho umístění (nahoře a ve středu stránky).

Tento web je uhlazený a vizuálně čistý

a perfektně odpovídá svému obsahu.

Asymetrická vyváženost

Asymetrické vyváženosti dosáhnete,

pokud vizuální váhu stránky rozložíte

po směru osy, ale určité prvky těchto dvou

částí se nezrcadlí. Jde o skutečně kom

plikovaný způsob, jak říct, že asymetrická

vyváženost je výsledek použití rozdílných

prvků k vytvoření celkové vyváženosti. To

ale stále zní komplikovaně; podívejme se

proto na některé příklady, abychom viděli,

jak to funguje.

Dallas Baptist University

(obrázek 2)

Asymetrická vyváženost ve webovém

designu zcela běžná, neboť jde často

o přirozenější řešení prezentace obsahu.

V tomto případě vidíme na stránce asymet

rickou vyváženost, začít můžeme v záhlaví.

Logo je vyrovnané mimo položky hlav


021

ní navigace (která je umístěna tam, kde

obvykle bývá logo). Logo je velká a tmavé,

takže i vzhledem k jeho malé velikosti stále

pasuje k navigaci. Pod částí s bannerem

je blok s uvítacím textem větší než hut

nější část s rychlými informacemi. Velikost

levého bloku dobře pasuje k menšímu, ale

hutnějšímu vedlejšímu bloku.

Campaign Monitor (obrázek 3)

V některých případech bude dávat nej

větší smysl, když se pro účely dosažení

vyváženosti tyto dva přístupy prolnou. A to

je právě přístup použitý na cílové stránce

Campaign Monitoru. Nahoře vidíme asy

metrickou vyváženost mezi částí s tex

tem a částí s obrázkem. Ale níže vidíme

vyváženou část, v níž je šest položek, logo

níže a zápatí skvěle symetricky vyváženo

ve směru zcela doprava.

Vyváženost je zde jedním z nejjemněj

ších prvků designu a jedním z těch, které

budeme vnímat zcela instinktivně. Jestliže

váš design působí nevyváženě, zvažte, jak

jej vyvážit snížením kontrastu. To zname

ná skončit se dvěma dominantními prvky,

které k sobě pasují, nebo sadou přesně

umístěných, méně významných položek,

které design vyváží. Vypadá váš design

jako by se měl převrhnout? Vypadá nesta

bilně? Toto jsou otázky, které byste si měli

položit, abyste zjistili, zda máte problémy

s vyvážeností.

Obrázek 1 http://www.mintwheels.com

Obrázek 2 http://whydbu.dbu.edu


022

Obrázek 3 http://campaignmonitor.com/designers

http://viminteractive.com http://www.nationalbreastcancer.org


023

http://www.mdswebstudios.com http://bunton.com.au

http://www.visualelixir.com

http://www.typejockeys.com


024

/

zarovnání

0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

Zarovnání je uspořádání prvků takovým

způsobem, že jimi vytvořené přirozené

linky (nebo ohraničení) k sobě co nejvíce

přiléhají. Naplněním tohoto předpokladu

se prvky sjednocují a vytvářejí tak větší

celek. Tomuto konceptu se obvykle říká

mřížka (grid). Neuspořádané prvky mají

tendenci vypadávat a postrádají jednot

nost, kterou tak často hledáme. Některé

příklady zarovnaných prvků obsahují dva

sloupce zarovnané horním okrajem, nebo

k sobě mají vzájemně zarovnané levé hrany

sady prvků. I když jsou tyto příklady zcela

zřejmé, existuje řada mnohem kompliko

vanějších zarovnání na stránce použitel

ných k vytvoření jednotného a půvabného

designu.

Pokud jste si dali práci a obrátili jste

designy naruby, abyste nahlédli do kódu,

pravděpodobně jste se s tímto principem

setkali. Jakmile design přeložíte do rea

lity, často je obtížné z původního desig

nu zarovnání přetvořit. Nejenom, že to je

výzva, ale také můžete snadno tyto pečlivé

řemeslně zpracované detaily přehlédnout.

Upozornění na tuto úroveň designu může

vývojáři opravdu pomoci v procesu pře

kladu.

Design Without Frontiers

(obrázek 1)

Tento web slouží k demonstraci zarovnání

ve webovém designu jako plakátové dítě.

Úmyslné a jednotné použití zarovnání pra

cuje pro design tak, že je z něj cítit čistota

a vyváženost. Například šířka loga odpo

vídá šířce obsahu a všechny nadpisy jsou

zarovnané. Díky přirozenosti designu je

potřeba pouze sledovat linie, abychom se

přesvědčili o záměru designéra. Pedantské

použití zarovnání vytváří perfektně vyvá

žený design.

Indextwo (obrázek 2)

Zarovnání není třeba vést do extrému, jde

o automaticky používané pravidlo, které lze

sem tam porušit. Každá úroveň designu

s tím takto pracuje. Konzistence je často

nabourána právě nedodržením zarovnání

mezi jednotlivými vrstvami. V záhlaví strán

ky narušuje navigace strukturu sloupců

a díky oddělení dvou částí se dotýká okra

jů. To je skvělý příklad linek, které slouží

svému účelu. Pokud by designér vměst

nal volby do menšího prostou, byly by

blíže k sobě a menší, a proto by se hůře

používali.


025

http://leihu.com http://www.rawcoach.be Obrázek 1 http://www.designwithoutfrontiers.com

Obrázek 2 http://www.indextwo.com


026

http://theurbanmama.comhttp://www.onebitwonder.com

http://macallanridge.com


027

http://www.goodbytes.be http://onehub.com


028

/

opakování

0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

V rámci opakování se zaměřujeme na to,

jak prvky v designu použít více než jeden

krát, a to různými způsoby. Designy obsa

hující opakování se stávají sjednocenými.

Opakování je možné dosáhnout použitím

mnoha forem, jako jsou barvy, tvary, linky,

fonty, obrázky a celkový přístup ke stylu. To

je často v rámci navrhování nevyhnutelné,

neboť pokud by se v designu žádné prvky

neopakovaly, pravděpodobně by se z něj

vytratil dojem sjednocenosti a soudržnosti.

Velkou výhodou opakování je předvída

telnost. Uživatel se naučí očekávat určité

věci, pokud design webu pracuje s klíčo

vými prvky stejným způsobem. Jestliže je

ale všeho moc a každá stránka obsahuje

pouze holý návrh místo vyvinutí nějakých

základních vzorců, s nimiž lze pracovat,

webové stránky ztrácejí svou soudržnost.

Vim Interactive (obrázek 1)

V tomto příkladu se vyskytuje tolik opako

vání, že by bylo potřeba spousty stránek

komentářů, abych na vše upozornil. Já

nicméně upozorním na některé z těch

drobnějších použití opakování. Jedním

z nich je použití prázdného místa: zvažte

množství vnitřních okrajů všech bloků, a jak

pasují k mezerám kdekoliv jinde na strán

ce. Tato celková konzistence webu dodá

vá velmi čistý dojem. Složitost stísněného

obsahu je snížena tímto jednoduchým,

těžko zachytitelným prvkem. Jiným zajíma

vým prvkem designu, jenž se silně opakuje,

je vzor většího textu vždy kombinované

ho s významným podtextem: vedle loga

najdete slogan; telefonní číslo obsahuje

prohlášení vyzývající vás k jeho použití;

větší text vedle mapy obsahuje drobný

s vysvětlením; každý blok s textem „learn

more“ obsahuje malý podtext. To vede

k zaznamenání předvídatelnosti. V tomto

designu uživatel ví, co očekávat, a opako

vání je v něm konejšivé.

http://www.rawsterne.co.uk


029

http://www.spoongraphics.co.uk

http://www.ukpads.comhttp://mocapoke.com

Obrázek 1 http://viminteractive.com


030

http://www.nathanhackley.comhttp://www.garretthoffmann.com

http://anderbose.com


031

/

tok

0202

základní principy designu

zvýraznění • kontrast • vyváženost • zarovnání • opakování • tok

Tok je cesta, po níž se na stránce vydává

oko uživatele. To je primárně výsledek toho,

jak jsou použité prvky, jako jsou zvýraznění

a kontrast. Tok je výlučně výsledkem toho,

jak jsou ostatní prvky uspořádány k sobě.

Jednou věcí, kterou je třeba si vždy

pamatovat, je považovat tok za přirozený

pořádek věcí. Existují studie, které ukazu

jí, že lidé mají tendenci se dívat se na věci

kolem předvídatelným způsobem. Obvyk

le se oko člověka pohybuje zleva doprava

a shora dolů. To je také důvod, proč na nás,

kteří čteme zleva doprava, doprava zarovna

ný web působí tak podivně. Není nic špatné

ho na tom, když něco jde proti přirozenému

řádu; prostě jen musíme zvážit důsledky

takových rozhodnutí. Cílem je myšlenka, že

je moudřejší pracovat s přirozeným tokem

namísto toho, abyste se pokoušeli protlačo

vat něco jiného.

Každý web obsahuje tok, dobrý nebo

špatný. Kdo rozhoduje o tom, že je tok

webu špatný? Když jsem vybral weby se

správným tokem, musel jsem stanovit,

co dobrý tok určuje. Proto jsem se shodl

na následujícím: Hledám demonstrace tako

vého toku, jenž působí hladce, komfortně

a tak přirozeně, jak jen to je možné. Může

to být složité, ale je třeba, abych se cítil

pohodlně a přirozeně, tedy abych se necítil

tak, jako bych na stránce narážel jako koule

v pinballu. Pro mě je hladký tok lepší než ten

hrubý. Oko člověka bude přirozeně skákat,

ale web s tím, co považuji za dobrý tok, uži

vatele naopak povzbudí, aby šel příjemnou,

stabilní cestou, a občas oko člověka vezme

dokola, aby povzbudil jeho zájem.

Wilson Doors (obrázek 1)

Web je krásným příkladem komfortního

toku. Přitom vůbec nevadí, že domovská

stránka neobsahuje hodně textů a je zde

jen málo možností. Pozornost se nejdříve

zaměří na velký a zajímavý obrázek, díky

němuž rychle odhalíme, co web prodává.

Odtud oko putuje doleva dolů a přes spo

dek nás zavede zpět na hlavní obrázek. Díky

této čisté smyčce je snadné si prohlédnout

a pochopit možnosti, ale také si jednu zvolit

a věnovat se jí. Všimněte si, že tato smyčka

obsahuje všechny klíčové položky webu

a zajišťuje, že uživatel bude vystaven mož

nosti, kterou hledá. Také je dobré zmínit fakt,

že hlavní navigace nevyskakuje. Pokud by

vyskakovala, soupeřila by s umístěním

v toku a uživatele by rušila od vstřebávání

hlavních informací.

Tento vzor smyčky je něco, co v této

kapitole najdete na mnoha ukázkách. Jak

jsem již zmínil, tok je strategickou kombinací

ostatních prvků designu. Díky tomu je také

tok jedním z nejsnadněji opomenutelných

a přehlédnutelných prvků designu. Ale opět,

zjistil jsem, že jestliže design v mém přípa

dě nefunguje, může zvážení tohoto prvku

designu vést k odpovědi, proč design nepů

sobí dobře.


032

http://www.recaper.com

http://www.gcntv.orghttp://www.fontex.org

Obrázek 1 http://www.wilsondoors.com


033

http://hungryhowies.com http://garyplayer.com http://www.sofi aregalo.com

http://www.digitalnoon.com




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2019 - ABZ ABZ knihy, a.s. TOPlist