Rozvržení stránek Kompoziční prvky a pravidla
Webová stránka • stejně jako ve světě <sku je rozdělena na menší díly: hlavička (sjednocující prvek), navigace, obsahová část, pata • účelem rozvržení je pomáhat návštěvníkovi v používání stránky – umírněnost je jedním ze zásadních tajemství úspěšného webdesignu – běžné typy stránek: domovské, vyhledávací, obsahové apod. 2
Typy stránek • mnoho způsobů členění podle různých hledisek – podle zaměření: obsahová, navigační, úkolová
• cílem rozdělení je přivést tvůrce webu k organizovanému způsobu práce − jednoduchá kategorizace – vstupní (teoreFcky každá stránka se známou URL) – návštěvní (navigační, obsahové aj.) – výstupní 3
Úvodní stránka • speciální vstupní bod – představení webu – neobsahuje v podstatě žádné důležité informace – má zanechat silný dojem (animace, hudba, ...)
• nabídnout zřetelnou možnost přeskočení • nezobrazovat pro časté návštěvníky • vhodné použít k instalaci nutného SW a přednačtení obsahu • může sloužit jako rozcestník s možnosU volby jazyka, formy úpravy stránek (pro dě<, pro seniory, pro handicapované) atd. 4
Domovská stránka • hlavní vstupní bod − výchozí poloha pro uživatele (značné odlišení vzhledu od ostatních stránek webu) • obvykle obsahuje více vizuálních prvků − názornější zobrazení iden
Domovská stránka (2) • musí zřetelně naznačovat, co se na webu nalézá − jednoznačně prezentovat účel a obsah • nevhodná příliš častá změna vzhledu (známé weby: google, amazon apod.) • informace o klíčových změnách na webu • možnost <sku je spíše druhořadá − větší flexibilita při použiU barev, pozadí, mul<médií, rozměrů stránky 6
Podstránky • zaměřené na obsah nebo navigaci • ve stylu domovské stránky (jednotný styl vzhledu, navigace atd.) • může být orientačním bodem u rozsáhlých webů (pobočka firmy) − odlišení od ostatních podstránek i domovské stránky
7
Další typy stránek • obsahové stránky – cílové stránky, zaměřené na prezentaci obsahu – rozvržení převzato z nadřazené stránky – např. FAQ, právní informace, informace o ochraně soukromí atd.
• stránky pro plnění úkolů – uživateli poskytují informace prostřednictvím interakce s různými prvky – např. kontaktní formulář (s možnosU přímého oslovení), stránky určené pro <sk, vyhledávací stránka, registrační formulář, správa nákupního košíku 8
Výstupní stránky • jasně naznačují závěr, zakončení návštěvy – výstupní bod nebývá u webů zaměřených na obsah (každá stránka může být výstupní) – vhodné u webů zaměřených na úkol
• měly by nabízet možnost návratu • nechat uživatele odejít v klidu
9
Jak uživatelé čtou • teorie Jakoba Nielsena − uživatelé často čtou webové stránky ve vzoru tvaru F: dva horizontální pruhy spojené ver
11
12
13
14
Velikost stránky • teore
• na webu chybí ideální velikost stránky • velikost musí být přizpůsobena obsahu • určení formy a velikos< je jeden z prvních a nejsložitějších aspektů při návrhu – různá zařízení pro prohlížení stránek = různé velikosF a rozlišení zobrazovacích ploch 15
Rozlišení stránky • skutečně použitelné rozlišení je menší než rozlišení obrazovky • stránka musí vyhovovat obrazovce, zejména se musí vejít na šířku • výška je nejčastěji přizpůsobená obsahu – “ohyb” − zlomový bod před přechodem mimo obrazovku – první celá viditelná obrazovka je zásadní 16
$! !) * $! !%" !) * $! !&" !) * $! !'" !) * $! !(" !) * $! !+" !) * $! !," !) * $! !)" !) * $! #!" !) * $! ##" !) * $! #$" #! * $! !#" #! * $! !$" #! * $! !%" #! * $! !&" #! * $! !'" #! * $! !(" #! * $! !+" #! * $! !," #! * $! !)" #! * $! #!" #! * $! ##" #! * $! #$" ## * $! !#" ## * $! !$" ## * $! !%" ## * $! !&" ## * $! !'" ## * $! !(" ## * $! !+" ## * $! !," ## * $! !)" ## * $! #!" ## * $! ##" ## * $! #$" #$ * $! !#" #$ *! $"
Rozlišení displeje v ČR !"#$%&'()*+%,-.*/"012+3(%*&*45*
(!"
'!"
&!" ,!!*#!$&"
#!)%*#$,!"
%!"
$!" #%(!*#&&!"
#(!!*#(,!"
#)$!"
-./0"
#!"
!"
17
Výběr rozlišení stránky • ne vždy závisí výhradně na globálních sta<s
• veřejné vyhledávače – závisí na globálních sta<s
Výběr rozlišení stránky (2) • dojem prázdného prostoru při zobrazení stránky s pevnou velikosU na větších obrazovkách snižuje – umístění stránky uprostřed okna prohlížeče – použiP pozadí, které rozšiřuje hranice stránky nebo vyplní volný prostor vzorkem
• výška stránky − při nutnos< posouvání by se měl obsah vejít do cca 3−5 plných obrazovek 19
Fixní vs. rela
• fixní rozměry (dnes nejčastější šířka 960 px) – problém s pohodlným zobrazením u nižších rozlišení – možnost téměř přesné kontroly vzhledu
• kompromis: rozšiřování v daných mezích (např. 960–1200 px), automa
Vnímání stránky v čase
21
Obrazová kompozice • základem je důkladně promyšlené uspořádání prvků v díle s jasným záměrem – tvůrce vizuálního sdělení by neměl ignorovat způsob, jímž lidé vnímají okolí
• kompoziční prvky: linie, tvar, prostor, objem, tónová hodnota (stupeň světelnos<), barva, textura • kompoziční pravidla − principy/zásady určující uspořádání/skladbu obrazu 22
Kompoziční schémata • zlatý řez − rozdělení, kdy vztah mezi větší čásU a celkem je stejný jako vztah menší čás< a větší čás< (poměr blízký 8:13) – zlatý bod (průsečík zlatých řezů stran obdélníka) − ideální pro umístění dominanty
23
Kompoziční schémata (2) • pravidlo tře
24
Rozvržení podle pravidla tří
25
Kompoziční schémata (3) • využiU geometrického středu k dělení prostoru – vizuální střed − mírně napravo a nahoře od matemaFckého středu – opFcký střed
26
Středová kompoziční schémata • horizontála a/nebo ver
• diagonála – působí dynamickým dojmem, evokuje pocit pohybu – neefekFvní využiP plochy – do prostoru návrhu se vejde méně prvků než při užiP jiných členění
27
Středová kompoziční schémata (2) • radiála – působí velice vyrovnaným, často až meditaFvním/duchovním dojmem
• podle určitého geometrického tvaru – geometrický střed stránky i tvaru se musí překrývat – rozmístění objektů pak kopíruje hlavní tvar – nejčastěji trojúhelník – působí velice stabilním dojmem: ve spodní čásF stránky je více prvků než v horní (kompozice odpovídá fyzikálním zákonům) 28
Radiála
29
Kompoziční prvky • linie − jednorozměrný prostředek schema
Kompoziční prvky (2) • tvar − dvojrozměrný prostředek umožňující rychle iden<fikovat určitý předmět – realisFcké − zachovávají parametry skutečnosF – deformované − záměrně upravené realisFcké tvary jsou stále rozpoznatelné – abstrahované − redukce přirozených tvarů na nejjednodušší formy – stylizované − nízká míra abstrakce se snahou částečně zachovat prvky realismu 31
32
Kompoziční prvky (3) • tvar (pokračování) – abstraktní − vizuálně nereprezentují žádné přirozené objekty • pozornost diváka neruší jednotlivé náměty −> do popředí vystupují základní kompoziční prvky a pravidla vyjadřující sdělení obrazu
– přímé − rovné, zkosené, geometricky strohé = charakterisFcké vlastnosF umělých konstrukcí – křivočaré − organické, oblé, zakřivené = formy vyskytující se v přírodě 33
Kompoziční prvky (4) • nega
Kompoziční prvky (5) • objem − trojrozměrný prvek realis
Kompoziční prvky (5) • barva − prostředek emocionální komunikace – není objekFvní vlastnosP předmětu (na rozdíl např. od tvaru) – subjekFvní vjem vznikající na základě zpracování různých vlnových délek světelného vlnění (viditelné spektrum) – vnímání závisí na zvycích a kulturním kontextu příjemců
• textura − povrchová struktura objektu 36
Kompoziční pravidla • popisují jak poskládat kompoziční prvky • porozumění usnadní pochopit proč se některá kompozice divákovi (ne)líbí či proč jí (ne)rozumí • konkrétní užiU pravidla závisí na účelu, který má kompozice splnit – soulad (harmonie) – různorodost – ohnisko a vizuální hierarchie – rovnováha 37
Soulad • chybějící soulad − chao
Soulad (2) • rytmus a opakování Opakování (bez rytmu) Rytmus opakováním
Postupný rytmus
Střídavý rytmus
39
Soulad (3) • spojitost (podobnost) − příklady – sazební mřížky a vodítka sloužící k uspořádání obrázků a informací − vytvářejí rytmus a jednotnou strukturu (lepší zrakové zpracování) – jednotná grafická podoba obalů firemních výrobků, propagačních předmětů apod.
40
Soulad na webu • vhodný k vizuálnímu spojení jednotlivých voleb v navigaci nebo prvků tvořících hlavičku • častý je přílišný soulad − tzv. obdélníkovitost = obdélníky jsou všude (okno prohlížeče, rámce, tabulky, obrázky) –> nemyslet ve čtvercích – grafika se zaoblenými okraji – obrázky na pozadí – grafika s nepravidelnými tvary – volný prostor – střídání tvarů a velikos< prvků 41
42
Různorodost • zvyšuje zajímavost příliš jednolitě uspořádané kompozice (předvídatelná − fádní) • vyjadřuje se pomocí kontrastu (rozdílu mezi prvky) – opačný účinek souladu spojitosU (vyzdvihování podobnos<) – linií: tlusté a tenké, různý směr – tvarů: vizuální váha (velikost, tónová hodnota), typ tvaru (přímý, křivočarý) 43
Vizuální váha Vliv tónové hodnoty a velikos< na vizuální váhu
44
Různorodost vs. soulad • základem dobré kompozice je vyvážení různorodos< a souladu − jedno může převažovat, ale žádné nesmí chybět Přehnaná různorodost a přílišný soulad
45
Ohnisko a vizuální hierarchie • ohnisko – má přitahovat pozornost – kontrast prvku s okolím a zároveň soulad, aby nedošlo k “osamostatnění” – směr linií, odlišný tvar, tónový a barevný kontrast, poloha prvku
• hierarchie − více ohnisek v kompozici – ohniska různě výrazná, aby navzájem nesoupeřila: divák je bude sledovat postupně 46
Barevný kontrast
Tvarový kontrast
Zvýraznění izolací (poloha)
Zvýraznění dotykem (poloha)
47
Kompozice bez ohniska • evokuje grafický vzor – opakování podobného nebo stejného kompozičního prvku – jednotlivé prvky nejsou tak rychle patrné –> působí jednotvárně – zrak se nemůže opřít o žádný počáteční ani závěrečný bod – oko diváka se při jejím sledování brzy unaví
• na webu např. stránka obsahující jen text (s nadpisy, kontextovými odkazy atd.) 48
Rovnováha • rovnoměrné rozprostření vizuální váhy (v jednotlivých částech prostoru vzniklých aplikací kompozičního schématu) • symetrická − obě strany kompozice shodné • asymetrická − váha rozložena nerovnoměrně, ale rovnováha zůstává • radiální − formuje se kolem hlavního ohniska – symetrická − ohnisko leží uprostřed (alespoň ve vodorovném směru) – asymetrická − ohnisko mimo střed v obou směrech 49
Rovnováha vs. nerovnováha
50
51
Asymetrická rovnováha • velikost, barva a tvar objektu ovlivňují vizuální váhu => větší, tmavší a komplikovanější (obsahující mnoho různých linií) objekt působí vizuálně jako těžší Vyvážení množstvím
Vyvážení barvou
Vyvážení tvarem
52
Layout • jakési schéma, jež říká, kde bude umístěna značka, hlavní navigace, formulář pro vyhledávání a další obvyklé součás< stránky • faktory omezující návrh dobrého layoutu – pravidla informační architektury, – volání po kreaFvitě vzhledu webu, – použitelnost – základ webové prezentace
• tabulkový a beztabulkový layout 53
Webové konvence • logotyp v levém horním rohu funguje jako návrat na domovskou stránku • textové odkazy opakující hlavní navigaci jsou ve spodní čás< stránky • na dlouhých stránkách se používají odkazy na začátek stránky • odkaz na nákupní košík je v pravém horním rohu • sekundární navigační prvky jsou odděleně od hlavní navigace 54
Flexibilní vzhled • možnost snadného přidávání/odstraňování stránek nebo jiných položek – navigační nabídka − nejobvyklejší zdroj nepružnos< – rozvržení obsahu − změny v množství obsahu musí být proveditelné bez narušení vzhledu – oblast s iden<fikací stránky − dostatečná velikost pro delší názvy
• omezuje možnos< webdesignera při rozvržení − není nutné řešit u krátkodobě fungujících webů nevyžadujících budoucí změny 55
Neflexibilní vzhled
Mřížkový systém • běžné moderní monitory podporují rozlišení alespoň 1024 × 768 –> “standardní” šířka webu 960 px – flexibilní číslo 960 – dělitelné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480 – nejčastější rozdělení mřížky na 12 nebo 16 sloupců
• snazší orientace uživatele (mřížku zná z <skovin a jiných webů) • umístění vodících linek redukuje možnos< volby –> jednodušší a efek
58
Mřížka o 16 sloupcích
59
Porušení mřížky
60
Bez použiU mřížky
61
Umístění navigace • není jen otázkou vkusu, ale zejména má vliv na faktor použitelnos< • existuje jen 5 hlavních oblasU, do kterých lze umís
62
Navigace v horní čás< obrazovky • zvyk z GUI − hlavní nabídky programu • v souladu s nejobvyklejším směrem prohlížení • problém s odsunuUm z obrazovky na dlouhé stránce – zakotvení navigace v horní čásF obrazovky – použiP odkazu “Zpět na začátek” – poskytnuP textových odkazů v dolní čásF stránky (tzv. design záhlaví-‐zápaP) 63
Navigace v levé čás< • velmi obvyklá pozice i v programech − rovněž v souladu s obvyklým směrem prohlížení • při malém rozlišení může blokovat mnoho plochy pro obsah – co nejvíce omezit horizontální posouvání – nové okno bez navigace (se zřetelným tlačítkem pro zavření) pro široký obsah – skryP/vysunuP navigace − omezuje vědomí uživatele o možnostech k dispozici 64
Jiná umístění navigace • dolní část obrazovky: – mimo hlavní směr prohlížení – často není zobrazena na první obrazovce (vyžaduje posouvání) − lze ji ukotvit pro< odsunuU – uvolňuje místo pro značku, iden<fikaci stránky
• pravá část obrazovky (kde přesně?) – umožňuje okamžité čtení obsahu (bez “navigační hradby” vlevo), blízko posuvníkům – daleko od oblíbeného tkačítka “Zpět” – neukotvená může být mimo první obrazovku
65
66
Jiná umístění navigace (2) • uprostřed obrazovky – obvyklé a vhodné u domovské stránky a u stránek zaměřených na navigaci (portály) – umožňuje také vizuální odlišení od podstránek – obsahová stránka je s Pmto umístěním navigace nepřehledná – v rámci obsahové stránky vhodné pouze pro umístění křížových odkazů
67
68
Nejpoužívanější rozvržení • “TLB” (Top-‐Le~-‐Bo•om) – horní část: název, primární navigace – levá část: sekundární navigace – spodní část: doplňková, podpůrná navigace
• záhlaví−zápaU: celá šířka využita pro obsah • vycentrované a plovoucí okno • rozšiřitelné stránky − šířka (zejména sloupce s obsahem) se přizpůsobí velikos< okna 69
70
71
72
Literatura • Hashimoto, A. Velká kniha digitální grafiky a designu. 2008. ISBN 978-‐80-‐251-‐2166-‐5. • Ambrose, G., Harris, P. Layout – velký průvodce grafickou úpravou. 2009. ISBN 978-‐80-‐251-‐2165-‐8. • Powel, T. A. Web design – kompletní průvodce. 2004. ISBN 80-‐7226-‐949-‐6. • Nielsen, J. F-‐Shaped Pa•ern For Reading Web Content. 2006. URL: h•p://www.useit.com/alertbox/ reading_pa•ern.html • 960 Grid system. URL: h•p://960.gs/ 73
