Rozvržení stránek. Kompoziční prvky a pravidla

Transkript

1 Rozvržení stránek Kompoziční prvky a pravidla

2 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

3 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

4 Ú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

5 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

6 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

7 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

8 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

9 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

10 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 11

12 12

13 13

14 14

15 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

16 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

17 Rozlišení displeje v ČR!"#$%&'()*+%,-.*/"012+3(%*&*45* (!" '!" &!" %!" $!" #!"!" $!!)*!%" $!!)*!&" $!!)*!'" $!!)*!(" $!!)*!+" $!!)*!," $!!)*!)" $!!)*#!" $!!)*##" $!!)*#$" $!#!*!#" $!#!*!$" $!#!*!%" $!#!*!&" $!#!*!'" $!#!*!(" $!#!*!+" $!#!*!," $!#!*!)" $!#!*#!" $!#!*##" $!#!*#$" $!##*!#" $!##*!$" $!##*!%" $!##*!&" $!##*!'" $!##*!(" $!##*!+" $!##*!," $!##*!)" $!##*#!" $!##*##" $!##*#$" $!#$*!#" $!#$*!$",!!*#!$&" #!)%*#$,!" #%(!*#&&!" #(!!*#(,!" #)$!" -./0" 17

18 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

19 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

20 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ř px), automa<cká změna CSS dle potřeby 20

21 Vnímání stránky v čase 21

22 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

23 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

24 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

25 Rozvržení podle pravidla tří 25

26 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

27 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

28 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

29 Radiála 29

30 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

31 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 32

33 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

34 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

35 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

36 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

37 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

38 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

39 Soulad (2) rytmus a opakování Opakování (bez rytmu) Rytmus opakováním Postupný rytmus Střídavý rytmus 39

40 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

41 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 42

43 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

44 Vizuální váha Vliv tónové hodnoty a velikos< na vizuální váhu 44

45 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

46 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

47 Barevný kontrast Tvarový kontrast Zvýraznění izolací (poloha) Zvýraznění dotykem (poloha) 47

48 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

49 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

50 Rovnováha vs. nerovnováha 50

51 51

52 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

53 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

54 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

55 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

56 Neflexibilní vzhled

57 Mřížkový systém běžné moderní monitory podporují rozlišení alespoň > 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 58

59 Mřížka o 16 sloupcích 59

60 Porušení mřížky 60

61 Bez použiu mřížky 61

62 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

63 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

64 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

65 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 66

67 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 68

69 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 70

71 71

72 72

73 Literatura Hashimoto, A. Velká kniha digitální grafiky a designu ISBN Ambrose, G., Harris, P. Layout velký průvodce grafickou úpravou ISBN Powel, T. A. Web design kompletní průvodce ISBN Nielsen, J. F- Shaped Paern For Reading Web Content URL: hp:// reading_paern.html 960 Grid system. URL: hp://960.gs/ 73