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<ty organizace představuje základní prvky vzhledu: barva, písmo, styl tlačítek, navigace aj. musí vzbudit zájem: dostatečně informa<vní a důležitá, rychle se načte 5
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<kálním studie sledování pohybu očí dominantní čtecí vzor je poměrně konzistentní napříč různými typy stránek nečtou, ale skenují obsah někdy je vzor čtení spíše ve tvaru E nebo L obráceného vzhůru nohama 10
11
12
13
14
Velikost stránky teore<cky nekonečně dlouhá i široká obpžné zobrazování a Fsk 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<kách cílová skupina (téma stránek) účel a dosažitelný obsah veřejné vyhledávače závisí na globálních sta<s<kách konzerva<vní přístup k předpokládaným rozlišením = zajis<t prostor navíc
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<vní weby rela<vní velikos< nemožná přesná kontrola nad umístěním prvků (obrázky, příliš široký text apod.) proměnlivá velikost (a tedy i kvalita) obrázků při velkém množství obsahu 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<cká změna CSS dle potřeby 20
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<n mřížka členící kompoziční prostor na 9 stejných obdélníků/čtverců zjednodušená varianta principu zlatého řezu 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<kála vyvolává dojem klidu, vyváženosf striktně pravidelné rozmístění prvků může být vnímáno i jako strnulost 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<zace nápadu (skica) umožňující rychlé sdělení viditelné celá je bezprostředně vidět naznačené neviditelná spojnice mezi prvky silné, přímé = umělé; tenké, zakřivené = přirozené směr: svislé = stabilita a napěu, vodorovné = stabilita a uklidnění, šikmé = pohyb a napěu emocionální vyznění a sdělné kvality linií jsou často podceňovány 30
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<vní prostor prázdná plocha (pozadí) obklopující pozi<vní tvar (obrazec) u ztvárnění jasně rozpoznatelného námětu je snadno rozlišitelný od pozifvního tvaru u abstraktních tvarů není vždy snadno rozlišitelný rám obrazu pomáhá vymezit oblasf negafvního pozadí a pozifvního tvaru méně prostoru = agresivnější, údernější více prostoru = vyrovnanější, poklidnější 34
Kompoziční prvky (5) objem trojrozměrný prvek realis<cky zobrazitelný současně z řady úhlů ve svém prostředí tónová hodnota světlost nebo tmavost tónu závisí na světle umožňujícím vidět kontrast tónových hodnot vytvářejících tvar velmi světlé = radostnější atmosféra tmavé = ponurá a vážná atmosféra 35
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<cká a obužně vnímatelná kompozice prostředky k dosažení souladu rozmístění pravidelné, ke středu kompozice, rovnoběžné linie okrajů, podobné blízko sebe opakování vícenásobné použip prvku rytmus pravidelné opakování/střídání stejných/ podobných prvků spojitost vlastnost prvku vážící se na jiný prvek 38
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<vnější proces návrhu rozložení (rozhodnuu o umístění, šířce a výšce elementů) 57
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<t prvky navigace: v horní čásf, ve spodní čásf, vlevo, vpravo uprostřed každé umístění má svoje výhody i nevýhody 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~- Boom) 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 Paern For Reading Web Content. 2006. URL: hp://www.useit.com/alertbox/ reading_paern.html 960 Grid system. URL: hp://960.gs/ 73