Asymetrická rovnováha ve webovém designu
Když jsem se poprvé zabýval myšlenkou symetrické vzory návrhu zde na Webdesigner Depot jsem neměl v úmyslu vykopávat pojem asymetrického designu.
Nicméně, čím více jsem o tom přemýšlel, tím víc jsem se cítil přinucen k tomu, abych se zabýval tématem, abych kontrastoval s některými myšlenkami, které se točily kolem symetrických návrhových vzorů.
V asymetrickém designu nalezneme návrhy, které obsahují prvky, které nevytvářejí zrcadlový obraz. Nejčastěji jsou tyto asymetrické návrhy ve skutečnosti vyvážené, ale ne přes dokonale podobné poloviny.
Tento druh designu je mnohem snazší, protože většina obsahu se nedá dokonalou symetrii.
Vezměme v úvahu celou řadu stránek, které dávají tomuto designu přístup k práci a možná objeví některé nápady, které mohou mít vliv na vlastní návrhářskou práci.
Úvod do použití asymetrie
Bully Entertainment
Jako úvod do pojmu asymetrického designu je tento dramatická konstrukce spíše příjemným výchozím bodem. Zatímco neexistuje žádný důvod, proč by tento design nemohl být znovu uspořádán tak, aby produkoval dokonalou symetrii, prostě by to nefungovalo téměř stejně dobře. Velké, bohatě ilustrované návrhy překrásně překonaly text domovské stránky. Jejich velikost zajišťuje, že jsou extrémně viditelné a představují hlavní vizuální sílu konstrukce. Tato přirozená rovnováha mezi jedním velkým prvkem a hustěji zabalenou alternativou je velmi běžným přístupem.
Jorge Rigabert
Toto uspořádání představuje poměrně standardní uspořádání webu. Malý postranní sloupec, který obsahuje klíčovou navigaci, spárovaný s mnohem větším sloupcem pro obsah stránek. To je možná jedna z mála standardních rozvržení, které používají denní designéři. Věřím, že většina procesu návrhu se v tomto případě děje automaticky. Vezměme v úvahu postranní panel, který asymetricky vyvažuje sloupec obsahu. Postranní panel má tmavší barvu, což mu pomáhá kompenzovat lehčí obsahový kanál. Bez tmavšího pozadí se postranní pruh pravděpodobně ztratil a nevypadá téměř tak dobře.
Obrázky pro vyvážení textu
Dalším poměrně standardním přístupem k návrhu webových stránek, který nakonec představuje asymetrický návrhový prvek, je párování textu s obrázky. Jak uvidíte ve vzorcích níže, každý z nich má velký obrázek. Tento obrázek je spárován nějakým způsobem s blokem textu. Tato kombinace je velmi běžná.
Trik je docela zřejmý, jen zajistěte, aby se oba vzájemně vzájemně doplňovaly. Vzhledem k tomu, že tyto dva prvky obvykle vytvoří smyčku pro oči, je důležité, aby nějak spolupracovali. Nejvíce zřejmým přístupem je, aby obraz doslova ilustroval nebo ukázal, o čem text mluví. Další běžnou taktikou je, aby obraz rozšířil myšlenku prezentovanou v textu.
Zde jsou některé vzorky, které je třeba zvážit.
Cake Sweet Cake
Tento návrh je zcela jistě dobře vyvážený, ale pro dosažení tohoto cíle využívá několik asymetrických prvků. Všimněte si velkého obrazu dortu v kombinaci s textem. Obraz je poměrně zřejmý, ale zásadně důležitý. V tomto případě dort nejen informuje, že jde o cukrárnu, ale jaký konkrétní styl by mohly nabídnout. Zkombinujte to s vysvětlujícím textem, který je s tím spojen, a máte dost daleko jasné prodejní hřiště. To vše neznamená dokonce ani neuvěřitelně chutný design tohoto webu zabalený.
Více Soda
Tento příklad také využívá asymetrických návrhových prvků založených na velkém obrázku v kombinaci s blokem textu. V tomto případě není spojení téměř tak jasné. Neexistuje žádný zřejmý prodejní prvek. Namísto toho se obraz stává ozdobnějším a vytváří obecný smysl pro styl. Podle mého názoru je to trochu méně funkční, ale je opravdu těžké říct, aniž byste věděli přesně, jak efektivní je místo. Zdálo by se, že taková vizuální hra má jediný cíl, který vás láká k tomu, abyste vykopali trochu víc, abyste viděli, o co jde. Nějaký teaser, jestli chceš.
Adaptivní webový design
Jak jste si pravděpodobně již uvědomili, tento vzor je asi tak běžný jako barva modrá. Odvažoval bych se spekulovat, že téměř každá stránka skončí tím, že takový vizuální nástroj bude pracovat v určitém okamžiku. Myslím, že tato společná příroda dělá to téma, které stojí za to diskutovat. Často se mi najde nejvíce inspirace a čerstvých nápadů z přehodnocení věcí, které dělám znovu a znovu bez myšlenky.
Tato jednoduchá stránka propaguje knihu. A samozřejmě hlavní prvek, jakmile přistanete na něj, je velký obrázek knihy. Kombinujte to s velkým blokem textu a máte dobře vyváženou oblast, která obsahuje všechny kritické prvky. A co je nejdůležitější, je to dokončeno s okouzlujícím výzvou k akci. Kontinuita této oblasti je jednoduchá a na místě. Oči snadno protékají a spotřebovávají důležité informace. Není to zmatek, ani komplikovaný, ani chytrý ani složitý. Přístup je jednoduchý a jasný.
Popředí a prvky pozadí
Jedním novým přístupem k asymetrickému návrhu je využívání základních prvků, které asymetricky vyvažují prvky v popředí. Tento typ přístupu vytváří zajímavou dynamiku, kde pozadí slouží jako součást obsahu spíše funkční roli a přesto je stále součástí pozadí stránky. Nejčastěji se to děje prostřednictvím jednoduchých překryvů, které vytvářejí iluzi hloubky. Zde jsou některé vzorky, které je třeba zvážit.
Galerie Peter McLeavey
Webové stránky této galerie jsou dokonalou ukázkou této myšlenky. Zde element pozadí slouží mnoha rolím. Nejprve do bodu této části vytvoří asymetrickou rovnováhu s velkým šedým kruhem v popředí. Tato vizuální kombinace vytváří dvě oblasti, které způsobují, že se oči odrazí zpět a dozadu. To je podle mého názoru dobrá věc.
Prvek vlevo obsahuje hlavní značku a odkazy na obsah webu, zatímco prvek pozadí vás informuje o kontextu webu. Podíváte se na místo galerie a to se stává hojně zřejmým během několika sekund po přistání na webu. Miluji, že takový informativní prvek, jako je pozadí, může také hrát důležitou roli v designu a celkovém stylu webu. Zvláště když to odráží tak dokonale s kontextem produktu, který web nabízí. Takový jednoduchý přístup, ale velmi efektivní.
Aleksandar Grkinic
To je jednoduché o mně stránka také zahrnuje tento jednoduchý nápad, kdy element pozadí vyrovnává popředí asymetricky. V tomto případě však pozadí není zcela jasné. A to je to, co opravdu miluji. Iluze hloubky je úplně tam a bez jakéhokoli překrytí je skutečně těžké se rozhodnout, jaké je skutečné pozadí. Myslím, že bychom mohli tvrdit, že člověk není na pozadí vůbec v pozadí. Bez ohledu na to je asymetrická rovnováha jasná. A bez krásné kombinace různých prvků stránka nebude existovat. Návrh je v mnoha ohledech čistě založen na konceptu asymetrické rovnováhy. Často se zdá, že extrémně jednoduché návrhy mohou vypadat mimořádně s překrásnými kontrasty, jako je tento.
Robert Dabi
V tomto případě hraje zázemí zajímavou roli v návrhu, ale nevytváří asymetrické prvky, které jsme dosud viděli. Podle mého názoru je velkou vizuální konstrukcí jasným prvkem popředí. To, co mám rád, je, jak jemně rozostří tento řádek něčím tak jednoduchým jako stín pod obrazem. To efektivně spojuje to s pozadím a vytváří krásnou dynamiku. Je zřejmé, že velký obraz je asymetricky vyvážený s kopií vedle něj. Projděte stránky webu a příjemně zjistíte, že pozadí se změní a spojí s vizuálem velmi zajímavými způsoby. Ohromující design, který se cítí svěží, čistý a super hladký. Vypadá to jako dobrá prezentace pro mé portfolio.
Deset dalších návrhů
Níže jsem poskytl deset dalších návrhů, které využívají asymetrických prvků. Jak jsem již zmínil, mohu do této kategorie umístit mnoho webových stránek. Takže pro účely tohoto článku jsem pečlivě vybral návrhy, které mám pocit, že tento přístup využívám mírně atypickými a tvůrčími způsoby. Vezměte v úvahu každý design ve světle tohoto tématu a doufám, že získáte nějaké nové nápady, které by inspirovaly váš další design.
Greenluv
Andersson Wise
Předpověď
13 manželky
Instituce Raffles
Urban Svensson
Kolotoč
Purlize
Autobusy v pivovaru
Humaan
Závěr
Rovnováha je zásadní součástí procesu návrhu a použití asymetrických prvků je stejně zásadní. Vždy se mi líbí kopání zpět do základů designu, protože zjistím, že to vždycky chápu novým způsobem, který má vliv na práci, kterou dělám. Existuje spousta způsobů, jak se přiblížit k věcem a rozbíjení našich vzorů může často vést k čerstvým a novým designům, které omlazují naši vášeň pro naši práci.
Jaké jsou vaše oblíbené asymetrické návrhy webových stránek? Kdo dělá něco jiného s asymetrií? Dejte nám vědět v komentářích!