Používání orientačních bodů Snadné rozvržení stránky
Návrh může mít dopad. Může mít styl. Ale tohle nestačí.
Aby práce fungovala dobře, design musí obsahovat prvky, které si vzájemně hrají silné stránky. Naštěstí má každý obsah vlastní indikace.
Rozvržení nebo uspořádání obsahu na webové stránce je rozhodující pro úspěch designu. Mimo jiné uspořádání upřednostňuje obsah, aby vedl lidi z jednoho prvku k druhému.
Pokud to uděláte správně, lidé se budou zajímat o obsah, který si nic nevidí.
Přečtěte si další podrobnosti a tipy pro vytváření rozvržení, které fungují ve vašich návrzích.
S příkladem uvedeným níže si většina lidí všimne nejprve fotografie nebo titulku, pak text a nakonec odkazy.
Možná si nevšimnou, že obličej, text a obličej modelu jsou nastaveny na třetinu a dvě třetiny na stránku (respektovat pravidlo třetích), nebo že nadpis a odkazy jsou napsány v barvách vzorkovaných z rtů modelu, nebo že křivka jejího ramena vede oko k výzvám k akci.
Text, fotografie a nadpis tvoří kompozici. Pokud člověk vypadne z místa, celý kus selže.
Uspořádání založené na vzájemném respektu
Kde dáme věci? Dovolte nám, aby nám to řekli. Zvláštnosti grafiky, fotografií a kusů textu se projevují, když se setkají na stránce. Někteří spolupracují lépe než jiní, a někteří pracují jen tehdy, když jsou určitou cestou. Naše rozvržení například funguje technicky dvěma způsoby:
Obrázek 1 ukazuje rozložení použité v našem příkladu výše. Šedé bloky představují nadpis, fotografii a text.
Obrázek 2 ukazuje, jak by se na jeho inverzi uplatňovaly stejné principy: jeden velký prvek vyvážený dvěma menšími prvky. Tato konkrétní fotka vypadá lépe napravo.
Náš model se dívá doleva. Na obrázku 1 se dívá na text. Na obrázku 2 se dívá od textu. Mohlo to fungovat, kdyby se dívala na kameru, ale protože se dívá pryč, ztrácí nějaký dopad. Ne moc, ale dost, aby záleželo.
Model střídavě projevuje zájem o text a při jeho obrácení jej ignoruje. Uspořádání prvků vytváří buď pozitivní nebo negativní postoj.
Zarovnání na základě orientačních bodů
Někdy věc, která dělá prvky pracovat určitým způsobem také poskytuje stopy o prostoru a zarovnání. Poznamenali jsme, jak oči modelu ukazují doleva, ale fotografie a text obsahují další vizuální signály.
Implicitní čáry mezi orientačními body v typografii a obrazu se v této kompozici liší:
- Model a oči, rty a okraj nosu splňují okraj pravého sloupce textu.
- Levý sloupec textu odpovídá levému okraji nadpisu. Skoro dosáhne okraje vlasů modelu, ale zůstane krátké, aby zůstal konzistentní s pravým sloupcem.
- Obličej modelu (zejména oči a ústa) definuje svislý prostor nadpisu.
- Spodní část fotografie označuje spodní třetinu kompozice (v pravidle třetin).
- Oči modelu tvoří třetinu z horní části kompozice.
- Střed tváře modelu a pravý okraj nadpisu se setkávají na jedné třetině a dvě třetině bodů šířky kompozice.
Některé orientační body mají větší sílu než jiné. Návrháři a fotografové by mohli například diskutovat o tom, zda oči modelu mají větší vliv než její silueta. Rozvržení založené na libovolných orientačních bodech je však lepší než rozvržení, které je ignoruje.
Použití funkcí pro vytvoření harmonie
Neexistující návrháři, kteří zkusili ruku při rozvržení, někdy uspořádají prvky založené na tom, jak se vejdou na stránku. Prostor by měl být respektován, ale ne vždy vede k nejlepšímu designu.
Obr. 5 zarovnává prvky s prostorem stránky a zakládá vše na hranicích plátna.
Obrázek 6 však založí rozvržení na ohniskových bodech fotografie. Výsledkem je přehlednější vzhled.
Obrázek 5 je neúčinný, protože diváci se odrážejí mezi ohniskovými body: k nadpisu, až k obličeji, až k textu. Nejjednodušší čára je přímá. Tudíž obrázek 6 vede pozornost diváka zleva doprava, od jednoho prvku k druhému. Základem druhého uspořádání je úzký pás, který běží podél zarovnání nadpisu a textu.
V těchto obrázcích jsou čtenáři přitahováni k tváři modelu, nadpisu a textu - obvykle v tomto pořadí. To jsou tři různé oblasti, na které se můžete podívat. Zarovnáním je zaostřuje rozložení.
Správná odpověď
Všechny tři níže uvedené rozvržení používají stejné prvky titulku, fotografie a textu:
První rozložení má nejvíce "dýchací místnost". Druhý respektuje text. Třetí rozložení využívá záporný prostor k dosažení rovnováhy. Všechny tři používají orientační body, ale různými způsoby. Je to nejlepší?
Pátrání po odpovědi může nás oslepit zřejmým: že více řešení může být stejně platné, když tyto prvky pracují společně. Vizuální orientační body jsou příležitosti, ne pravidla. Podívejte se na první design.
Čím více prvků odpovídají implikovaným čarám, tím více se objeví nevyhovující prvek. Zde návrhář přeruší slovo "Landmarks" z vertikálního zarovnání druhého textu, čímž zvýrazní klíčové slovo.
Není pochyb o tom, co propaguje stránka. Úspěch se nemění podle toho, jak přísně prvky odpovídají zásadám návrhu, ale jak dobře stránka sděluje své poselství.
Napsaný výhradně pro Webdesigner Depot Ben Gremillion. Ben je a spisovatel a návrhář na volné noze který řeší komunikační problémy s lepším designem.
Jak postupujete podle vzoru svých orientačních bodů? Co pro vás nejlépe funguje a co ne?