Jak používat rovnováhu v návrhu webu
Dosažení rovnováhy v návrhu webových stránek vyžaduje určitou myšlenku, úsilí a dovednosti, ale je to naprosto stojí za to. Skvělá věc o rovnováze, kterou lze aplikovat na širší kategorii designu jako celku, spočívá v tom, že udržuje to, co vytváříte, z nadměrného, přetíženého nepořádek, který selže uživatelské zkušenosti. Jinými slovy, rovnováha v designu webových stránek zajistí, že jste jako návrhář právě zasáhli, že sladké místo moderování. Ne moc, ale ne příliš málo. Ne příliš hlučné, ale ne příliš jemné. Udržuje celý váš design v harmonii, zatímco stále hází všechny cíle použitelnosti vašich klientů. Teď je to dovednost, kterou jste určitě vložili do svého toolboxu pro návrháře! V tomto článku se podíváme na to, jak můžete do webových stránek svých klientů zahrnout dobrou vyváženost.
Symetrická rovnováha
Jeden z nejběžnějších příkladů rovnováhy, se kterými narazíte při procházení webových stránek, je symetrie, třebaže si to neuvědomujete, protože je tak hladce prezentována. Symetrie je vrozeně příjemná pro oko a vytváří design, který je esteticky dobře organizovaný a harmonický. Symetrická rovnováha je definována umístěním prvků rovnoměrně na obě strany horizontální nebo vertikální středové osy. Jinými slovy, obě strany imaginární potápěčské linie v polovině stránky jsou v podstatě zrcadlovými obrazy navzájem. Zatímco někteří kritici mohou tento typ rovnováhy vypustit jako nudný nebo předvídatelný, přesto se stali testem času a zůstávají jedním z nejlepších způsobů, jak ukázat rovnováhu v návrhu webových stránek.
Web společnosti Cisco se rozhodla jít za tento vyzkoušený, testovaný a skutečný přístup k návrhu. Všimněte si, jak je stránka dokonale vyvážená napříč svislou osou. Pokud jste vzali imaginární linku a rozdělili ji uprostřed domovské stránky společnosti Cisco, všimli byste si následující:
- Stejný počet prvků na navigační liště (včetně ikony vyhledávání) na obou stranách
- Nadpis a podstavec jsou na obou stranách stejně dlouhé
- Tlačítko výzvy k akci je dokonale centrovaná
- Stejný počet prvků pod položkou "Rychlé úkoly" na obou stranách
Zatímco stránka nemusí být nejhorší vzrušující místo vůbec, nemusí to být, protože společnost prodává síťová zařízení. Místo je také použitelné a funkční, a to jak atributy, které mohou zákazníci ocenit. Podívejme se na další dva příklady symetrie:
IWC Schaffhausen , švýcarský hodinář, má místo s horizontální, symetrickou rovnováhou. Pokud rozdělíme stránku na středovou osu uprostřed, obě strany budou mít symetrii.
Totéž platí pro Webové stránky služby Beanstalk App . Díky jednoduchému, minimálnímu designu se jeho středová osa pohybuje uprostřed domovské stránky, která ponechává obě poloviny stránky vodorovnou symetrickou rovnováhou.
Asymetrická rovnováha
Polární protějšek symetrie, asymetrická rovnováha je možná také. Nenechte se zmást tím, že asymetrie znamená nedostatek rovnocennosti mezi částmi! Jak brzy uvidíte, asymetrická rovnováha dosahuje i systému protiváhy v designu ... prostě ne tak, jak byste mohli očekávat. Asymetrie může být na webové stránce zobrazena mnoha způsoby. Například jedna polovina obrazovky, vertikálně nebo horizontálně, se může pochlubit intenzivnějším prvkem, zatímco druhá polovina může mít jemnější prvky. Navzdory této nerovnosti, jak v síle, tak i v číslech, je rovnováha vytvářena srovnáním protichůdných prvků. Tímto způsobem může být asymetrie skutečně krásná, možná víc než přímá symetrie, protože hraje na konceptu rozdílu, jak vytvořit rovnováhu. To je paradox designu, ale ten, který funguje tak dobře na jakémkoli místě. Asymetrická rovnováha je proto zajímavější a přemýšlející než předpokládaná symetrie. Vyvolává témata modernismu, energie a zázraku. Návrháři by však měli vzít na vědomí, že vytváření asymetrie na stránce vyžaduje více práce než pravidelná symetrie. Koneckonců, musíte představovat vztahy mezi prvky návrhu, které jsou složitější.
Honda nám dává křišťálově jasný příklad asymetrie v návrhu webových stránek. Pod záhybem, na své domovské stránce, společnost využívá design založený na kartách, což však přináší poněkud dezorganizovaný vzhled, který, i když je vizuálně přitažlivý a barevný, vytváří nedostatek rovnosti na obou stranách vertikální nebo horizontální centrální osy. Jedna věc, karty samy o sobě jsou vždy různé délky, vodorovně, a ne vždy jsou stohovány v libovolném jednotném sloupci nebo řadě. To vytváří velkou asymetrii, která je velmi zajímavá. Je to téměř jako malé bludiště na domovské stránce automobilky! Existují také další zajímavé příklady:
Typografický systém je obrazový dokonalý případ asymetrie v návrhu webových stránek. Jeho místo má dva prvky, které jsou rozloženy. Obě logo TG a zelená známka v pravém, horním rohu vytvářejí asymetrii.
Duplos "asymetrie je ostřejší. Jeho místo se může pochlubit konstrukcí s plovoucími prvky, která nebude souvislá s druhou polovinou, ať už je středová osa vertikální nebo horizontální. Celkově vzbuzuje vzhled, který je zajímavý.
Radiální rovnováha
Radiální rovnováha je poměrně přímočará. Jak naznačuje název, radiální vyvážení nastane, když všechny konstrukční prvky na stránce vyzařují v rovnoměrných bodech od sjednocujícího centrálního bodu. Takže pokud byste rozdělili stránku buď vertikálně nebo vodorovně podél středové osy, prvky obou stran by byly stejně vzdálené nebo blízké centrálnímu bodu. Některé z nejzákladnějších příkladů radiální rovnováhy jsou věci jako paprsky slunečního světla přicházející z centrálního bodu nebo rybníček, který má na svém povrchu spoustu zvlnění. To, co dělá tuto formu rovnováhy speciálnější, je to, že vyzařující efekt jde oběma směry: Stejně jako pozornost vede z centrálního bodu, vede zpět k tomu také díky společnému centru. Z tohoto důvodu je udržení ohniska snadné.
Nejlepší příklad radiální rovnováhy - což je poměrně vzácné na webových stránkách, zejména v domovských stránkách - je Vlog . Je to příklad radiální rovnováhy, protože vše vyzařuje ven z centrálního bodu bílého typu "Vlog.it".
Všechny druhy rovnováhy
Nyní by mělo být docela zřejmé, že všechny typy rovnováhy mají nějaké společné vazby. Existují jednotné faktory, které se důsledně objevují v jakémkoli designu s atraktivní a zajímavou rovnováhou. Rovnováha v návrhu webových stránek je všude kolem vás. Je pravděpodobné, že jste zanedbávali, že si to uvědomíte na všech stránkách, které jste kdy procházeli po celý svůj život; ale to je jen proto, že rovnováha není ve skutečnosti první věcí, o níž si myslíte, že při navigaci na nějakém místě. Nicméně rovnováha je důležitá pro návrh místa. Neposkytuje jen estetické dotyky, které jsou z vizuálního hlediska zajímavé. To také může pomoci uživatelům zjednodušit vstřebávání vizuálních informací na webu, což znamená ani zlepšit navigaci na webu. Návrháři se mohou snažit o lepší vyváženost ve svém webovém designu tím, že věnují mimořádnou pozornost harmonii, protizákonám a rovnocennosti. Konečný výsledek dobré bilance vyplácí nevýslovné dividendy pro vaše klienty a zkušenosti uživatelů.