Hur känner du dig om asymmetrisk design? Den enkla frågan kan ibland gnida mycket debatt bland designers. Asymmetrisk design kan vara en av de mer komplicerade teknikerna för att dra av, men när den är klar resulterar det bra i vackra och iögonfallande mönster.
Medan definitionen av asymmetri är bristen på symmetri eller jämlikhet mellan två halvor; Det är ingen brist på balans som vissa felaktigt antar. Designers kan använda asymmetri för att skapa balans och harmoni trots att två sidor av konstruktionen inte speglar varandra. Så här börjar du.
Varför Asymmetri?
Asymmetri kan vara en av de mest effektiva koncepten i din designverktyg. Det är en uppmärksammande teknik som är intressant och tankeväckande.
Det kan vara svårt att använda, varför vissa designers håller sig borta från helt asymmetriska projekt. Men du behöver inte. Använda asymmetri är något som varje designer kan göra; det tar bara planering.
Det bästa stället att börja är att blanda och matcha symmetriska och asymmetriska koncept inom ett designprojekt. Om du bryter mot designen i mindre sektioner kommer det att finnas delar som innehåller olika typer av balans. (Tänk på paneler i parallaxrullningsställen eller utformningen av en bild i duken.)
Tänk på varför du använder asymmetri också. Att veta vad du vill uppnå med bilderna kommer att hjälpa dig att bestämma hur man bäst kan använda tekniker för att uppnå det. Asymmetri är aktiv och griper uppmärksamhet; det kan vara tungt men naturligt. Och när du har något på duken, lita på din tarm. Ser det rätt ut eller känns det?
Att uppnå balans är det magiska däremellan. Bra asymmetrisk design innehåller balans så att ingen del av projektet är för tung för resten. Du kan skapa balans genom att kompensera element med utrymme, skapa betoning med rörelse, förstå vikt, lägga fokus med färg och använda ett rutnät för anpassning och organisation.
Använda rymden
En av platserna asymmetri börjar verkligen blomstra i minimalismens design trend. Med designers med så mycket utrymme är det enkelt att balansera ett enkelt objekt eller en bild mot en större vit eller mörk bakgrund.
Balanseringen mellan vitt eller negativt utrymme och element i designen bör skapa kontrast. Detta kommer att leda ögonrörelsen över designen.
Exempel: Ike Kligerman Barkley använder högbalansbalans för att dra in användarna. Bildriktningen i bildens nedre hörn mot namnet och navigeringen i det motsatta hörnet drar ögat mellan element, nästan vågat att du inte ska se. Bilden ger dig en uppfattning om varför du har hittat webbplatsen och det minimala ramverket uppmuntrar att klicka på länkarna.
Betonar rörelse
Tänk på ett däck som rullar nerför en kulle. Du kan genast känna rörelsen. Samma händer när du utformar denna rörelse på ett asymmetriskt sätt.
- Ögonen kommer naturligtvis att flyttas från den större, tyngre delen av skärmen till den lättare delen.
- Ögat kommer att följa riktlinjer som en pil eller form som tycks peka i en viss riktning.
- Ögat kommer att följa ögonväg i skärmbilden, så att en användare ser i samma riktning och personen i designen.
- Riktningsflödet skar åt vänster åt höger, om inte det finns ett kraftfullt drag mot en annan riktning.
Exempel: Leen Heyne Fine Jewelry använder rörelse för att dra in ögat i den presenterade produkten. Geometriska former pekar bokstavligen på ögat i rätt riktning, samtidigt som man får en känsla av att armbandet (eller ringen) bara kan naturligt rulla över duken. Denna riktning påverkar också något annat - det pekar användningen till navigationspilarna för att flytta till nästa sida.
Lägg till fokus med färg
Asymmetriska färgmönster är vanligtvis höga kontraster och färgkombinationer. Tänk ljusa nyanser mot svart eller ett tonat fotografi som har djärv vit typografi på toppen. Hög färgkontrast kommer att fokusera och synvikt på specifika delar av konstruktionen.
Asymmetriska färgkombinationer kan skapas med hjälp av färghjulet. Välj färgparationer och kombinationer som faller utanför traditionella färgregler för en känsla av asymmetri. Tänk på färger som sällan används för påverkan. Använd färg för att markera och betona andra element i den asymmetriska konturen. Färgen fungerar väldigt bra med element som geometriska former, typografi eller till och med i bakgrunden för att fungera som sekundär kontaktpunkt för att uppnå balans.
Exempel: HLK Agency använder färg för att ta en design som är nästan symmetrisk och får dig att tänka igen. Den blå undermenyn och knappen skapar ett enkelt fokus med asymmetri som balanserar mot den subtila hamburgermenyn och brandingikonen i de övre hörnen.
Glöm inte gallret
Medan du inte använder ett galler för att skapa spegelbilder, är det fortfarande en viktig del av designprocessen. Att använda ett nät för att skapa asymmetri hjälper dig att uppnå balans och organisation.
Tänk på varje element på nätet som du skulle med något annat projekt. Räcker sakerna på ett visst sätt horisontellt och vertikalt? Finns det motvikt på vardera sidan av duken - från vänster till höger och uppifrån och ner.
Tänk på gallret som en skala - för varje element du lägger till på ena sidan måste något på andra sidan kompensera det. För att skapa omedelbar asymmetri, överväga ett kolumngrid med ett udda antal kolumner; på ena sidan av gallret skapa element som är lika med en kolumnbredd, å andra sidan dubbla den.
Exempel: BrightByte Studio använder ett skapa kolumnärnät som håller elementen inriktade och organiserad i en blandning av symmetriska och asymmetriska element. (Men den första du ser är sannolikt den vänsterjusterade texten mitt på skärmen. Denna användning av ett rutnät skapar en inbördes balans mellan element.Observera hur nedsidans navigering och topplänkarna faller i linje, såväl som det utrymme som upptas av huvudtexten och navigeringselementen.
Skapa vikt
Asymmetri är förankrad i tanken att något är så? Tungt? att du kommer att dras till det först. Bestäm vilken del av din bild som ska bära den visuella vikten. Det kan vara en bild eller typografi eller till och med blankutrymme.
Balansera det tunga elementet med kontrast - ett lättare element, något som tar användarens uppmärksamhet på ett annat sätt. Vikt fungerar bäst i kombination med andra tekniker ovan, så att det viktiga objektet inte överbelastar designen och tar dig igenom den.
Exempel: Kranar i Cambridge använder ett engagerande foto som vikt? av designen. Den balanseras av två delar - en som du kanske inte ens märker först. Den lättare texten och logotypen är signifikant? Lättare? än folket i bilden, så att du ser från folket till texten (även efter deras implicita rörelse). Det kompenseras också av en tänkbar kolumnnavigering som hjälper dig att dra dig över skärmen.
Slutsats
Asymmetri kan vara en vacker och harmonisk designteknik. Trots att designtrenderna nyligen har fokuserat på en hel del symmetri, är det troligt att det kommer att vara ett skifte tillbaka mot något av detta? Obalanserat? balanserad design. Det är visuellt intressant och hjälper direkt användare genom en design med subtilitet.
Asymmetri har också inverkan och fungerar särskilt bra som ett koncept som används med symmetri inom ramen för ett komplett projekt. Experimentera med asymmetri och bli kär i denna dynamiska designteknik.