Design101: Využití silných zarovnání
Dnes se chystáme prozkoumat jeden z nejzákladnějších principů designu: zarovnání. Toto klamně jednoduché téma je ve skutečnosti celkem složité a patří dnes k nejvýznamnějším chybějícím schopnostem designérů.
Silný přehled o tom, jak a kdy použít určitá zarovnání, vás okamžitě učiní lepším designérem a zůstane základním stavebním kamenem všeho, co vytvoříte po zbytek vaší kariéry.
Prozkoumejte prvky Envato
Úvod do zarovnávání
Pro mnohé může diskuse o zarovnání znít jako svévolné cvičení. Taková základní teorie designu je jistě pouze pro jednotlivce, kteří ve svém životě nikdy nic nenavrhli, ne pro profesionální komunitu, která takové stránky navštěvuje. Že jo?
Já sám bych dále argumentoval, že taková diskuse je pro začátečníky tím, že prohlašuji, že solidní pochopení vizuálního zarovnání je nepřekonatelným základem pro všechny typy designu. Je to druh znalostí, které jakmile pochopíte, budete používat při každém jednotlivém rozvržení, které vytvoříte jako návrhář.
I přes myšlenku, že tyto koncepty leží v samém jádru toho, co děláme jako návrháři, se zdá, že zarovnání je primárním zdrojem většiny špatných návrhů, které dnes na webu vidím.
Samostatně vyškolení designéři mají často intuitivní přehled o tom, jak používat zarovnání, ale toto může a nemusí selhat bez explicitních znalostí pro jeho zálohování.
Lemování věcí nahoru
Základní myšlenka zarovnání je necitlivě jednoduchá: uspořádat věci. Mimo organického designu, což je úplně jiné téma, by měl být každý prvek, který umístíte na stránku, doprovázen logickým myšlenkovým procesem, pokud jde o jeho umístění.
Opět je to základní věc, že? Každý už to dělá ... že? Špatně. Zvažte následující web, který byl nedávno odeslán do naší galerie CSS. Nepoužívám to jako příklad s průměrným duchem, ale jako nástroj pro výuku. Návrhář je úžasný člověk, který právě začíná. Denně zlepšuje své dovednosti a dychtí se učit.
Tento příklad je velmi typický a je to přesně ta věc, kterou každý den vidíme v našich galerijních příspěvcích. Estetická hodnota zde není špatná. Světlé barvy a zajímavé textury upoutají vaši pozornost docela dobře. Zarovnání zde však značku opravdu vynechalo.
Problémy zde mohou být pro mnoho lidí těžké. Z tohoto důvodu vždy doporučuji zjednodušit návrh, abych prozkoumal základní tvary. Uvidíte, jak to udělám v několika článcích, které píšu o designu, a určitě byste to měli vyzkoušet na několika svých vlastních designech.
Nyní, když vidíme grafické objekty ve zjednodušeném stavu, můžeme lépe analyzovat objem místa, které zabírají, a řešit případné problémy se zarovnáním.
Všimněte si, že prvky na stránce najednou vypadají rozptýleně. Hlavní oblast obsahu dole není zarovnána s předsazeným pruhem vlevo nahoře ani s rozptýlenými prvky v pravém horním rohu. Logo Facebooku se dále jeví jako malé a uvízlé samo od sebe a titulek je odsazen od okraje navigace, který je odsazen od okraje obsahu.
Ačkoli se tento design cítil docela slušně, když jsme ho právě cítili, nyní vidíme, že by mohl použít hodně restrukturalizace. Od této chvíle musíte řešit dvě klíčové věci: Zarovnání a negativní prostor.
Tyto koncepty jsou velmi úzce svázány. Práce s negativním prostorem má hodně společného se zaměřením na mezery a použitím základní symetrie. Další informace o správném postupu ohledně negativního prostoru naleznete v Průvodci negativním prostorem po šesti revizích.
V tomto článku se budeme dále soustředit na to, jak používat základní zarovnání, která znáte ve složitých rozloženích.
Zarovnání středu
Centrovaná rozvržení jsou volbou pro téměř každého člověka na planetě… kromě designérů. Z nějakého důvodu se centrování položek na stránce jeví jako to, co byste měli dělat. Určitě je hlavní úlohou designéra jednoduše středit položky!
K tomuto problému jsem se dostal před několika lety, když jsem předal návrh, který jsem vytvořil vývojáři, aby kódoval. Když mi ukázal hotovou verzi, všechno bylo posunuto zleva doprava do středu! Vysvětlil jednoduše, že vždy upřednostňoval všechno zarovnání na střed „tak to vypadá hezky“.
Realita je taková, že centrování každé položky je tou nejslabší volbou zarovnání, kterou můžete provést.
Neexistují žádné tvrdé hrany, které byste měli sledovat, takže vaše oči musí udělat mnohem více práce, aby zabraly celkové rozložení a absorbovaly konkrétní obsah.
Kdy použít
To však vůbec neznamená, že by se vždy mělo vyvarovat vyrovnání středů. Sám jsem je použil na demonstracích právě pro tento web. Klíčem je vědět, kdy je použít.
Zjistil jsem, že nejlepší možný scénář pro zarovnání na střed je, když je na stránce velmi málo. Čím složitější je rozvržení, tím menší zarovnávání středů funguje. Pokud se na dané stránce mnoho neděje, zarovnání středů může učinit silné prohlášení.
Zarovnání doleva
Zarovnání doleva, i když je pravděpodobně nudné, je pevné a mělo by být vaším výchozím nastavením pro většinu práce, kterou děláte.
Jsme zvyklí vidět obsah uspořádaný způsobem zarovnání doleva. Crack otevře knihu nebo noviny a najdete spoustu zarovnání vlevo. Procházejte reklamy v nevyžádané poště, opět spoustu zarovnání. Uvidíte je na Facebooku, ve výsledcích vyhledávání Google, streamech Twitter a na všech ostatních hlavních webových stránkách.
Zarovnání doleva vládne světu, nebo alespoň těm společnostem, které čtou zleva doprava. Neměli byste úplně záviset na levém zarovnání všeho, stačí vědět, že je to bezpečná cesta.
Kdy použít
Používejte ve všech typech situací, ale zejména v případech, kdy je mnoho textu. Stačí se podívat na stránku, kterou právě čtete. Pokud by to bylo zarovnané na střed, byla by to noční můra.
Všimněte si, že zejména na webu něco zarovnávání doleva neznamená, že jej nemůžete vystředit. Například HTML div často obsahuje spoustu odstavců a obrázků zarovnaných doleva, ale poté je na stránce vystředěn pomocí CSS.
Správné zarovnání
Pravá zarovnání jsou pravděpodobně nejvzácnější. Protože čteme zleva doprava, cítí se divné, že se něco drží na pravém okraji.
Je to však dokonale silné zarovnání, které lze důkladně použít ve vašich návrzích, zejména v tisku (má tendenci být ještě více neočekávané online).
Kdy použít
Správné zarovnání často, i když ne vždy, vyvolá pocit jedinečnosti. Pokud navrhujete něco, co musí vyniknout a cítit se jinak, správné zarovnání je skvělé místo, kde začít.
Zarovnání zarovnání na webu
Zarovnání, které jsme vynechali, je zjevně odůvodněné. To se do hry dostává silně, když celé stránky spojíte jako koncepční prvek.
Zajímavostí při navrhování webu je to, že často zahrnuje kombinaci zarovnání. Pravděpodobně jste slyšeli návrháře, aby nikdy nemíchali zarovnání, ale tato rada v reálném světě prostě nefunguje.
Místo toho musíte učinit rozhodnutí jak pro prvky na stránce, tak pro prvky stránky jako celek. Všimněte si, jak jsem zahájil tuto diskusi tím, že jsem se podíval na příklad prohlížení zarovnání webu jako celku, ale poté jsem pokračoval v diskusi o vyrovnání jednotlivých položek.
Jakmile se rozhodnete pro zarovnání textu a obrázků na své stránce, pak to všechno dohromady znamená házení všeho na stránce do zarovnání. I když můžete mít drsnou hranu, ospravedlnění všeho může dodat, že dokončovací úklidový dotek, který v původním příkladu chyběl.
Všimněte si, jak v místě nahoře je silné zarovnání vlevo, ale vše na pravé straně bylo také seřazeno, aby se vytvořil soudržný odůvodněný vzhled. Malé přihlašovací tlačítko se zarovná s obrázky prohlížeče, které se zarovná s pravou stranou ikony kalendáře.
To je čistý, profesionální design. Nemusí to být vhodné pro všechny projekty, ale často vidím designéry, kteří se ho snaží dosáhnout a selhávají, a chtěl jsem se zabývat některými pravděpodobnými příčinami.
To je jeden z důvodů, proč jsou mřížkové systémy tak populární. Házení všeho na mřížku zajišťuje, že vaše zarovnání jsou pevná a snadno sledovatelná.
Závěr
Abychom to shrnuli, pokud je to možné, použijte silná zarovnání, která vašemu oku usnadní sledování toku informací. Zarovnání středů jsou přijatelné, ale je obtížnější je správně implementovat s rostoucím obsahem na stránce.
Nezapomeňte, že zarovnání odkazuje na konkrétní položky na stránce a také na uspořádání objektů jako celku. Trávte čas každým designem a ujistěte se, že jsou všechny prvky správně zarovnány se vším na stránce. To platí svisle a vodorovně podél všech okrajů návrhu.
