När ett element använder asymmetriskt utrymme, står det ut mot andra omgivande element. Det kommer att verka mer levande, vilket är särskilt användbart om du designar områden på en sida där en länk / knapp kräver mer uppmärksamhet än andra.
Idag ska vi titta närmare på asymmetri uttryckt genom kontrast, avstånd och layout. Vi tänker på observerbar kontrast, och hur utrymme driver uppmärksamhet.
Asymmetri handlar inte alltid om externa relationer med marginaler, vadderingar eller rännor.
Asymmetri kan också vara inblandad i de interna relationerna som bildminnebilder eller textjustering. Till exempel kan ett bildgalleri visa upp 5 miniatyrbilder där mellantummen är något större än de andra, främst för att fånga uppmärksamhet. Asymmetri är utmärkt för att uppmärksamma ett visst område på sidan eller ett visst element på sidan.
Och som vi beskrivit i den fria e-boken Web UI Design för Human Eye, är ibland asymmetri användbar bara för asymmetriens skull.
Låt oss titta närmare på asymmetri uttryckt genom kontrast, avstånd och layout.
Observerbar kontrast
Genom att avlägsna distraktioner tvingar du användare att fokusera endast på det som är omedelbart synligt.
Du kan då tillämpa designeffekter på dessa områden som bakgrundsgradienter eller jQuery-animationer. Dessa effekter kan användas på ett eller två element för att få dem att sticka ut från de andra.
Ett av våra favorit exempel på denna effekt bor på hemsidan för Sketch by Bohemian Coding. Hemsidan blandar mörka och ljusa färger för att blanda kontrast till en enhetlig layout.
I rubrikrubriken kommer du märka att det finns två knappar: en för en kostnadsfri provning och den andra för att köpa programvaran. Båda knapparna är färgade blå och tar upp samma mängd utrymme. Den kostnadsfria provknappen använder emellertid en? Tom? bakgrund som vanligen kallas en spökknapp. Lagrad ovanför den mörka rubriken verkar den kostnadsfria provknappen falla utanför fokus i bakgrunden.
Eftersom inköpsknappen använder en ljusblå bakgrund och vit text, står den ut stark och högt mot den mörka bakgrunden. När du snabbt skannar dina ögon över rubriken är det ganska uppenbart att inköpsknappen drar uppmärksamheten nästan omedelbart. Detta orsakas av färgval men också från det vita utrymmet som läggs mellan elementen.
Vertikalt och horisontellt vitt utrymme används så att knapparna visas separerade från rubriktexten. Eftersom en knapp är ljusare än den andra, står den naturligt ut eftersom det finns gott om utrymme och inte mycket annat i vägen för att fånga uppmärksamhet.
Du kan se en liknande knappstil i sidfältet:
I det här fallet har användarna bara möjlighet att skicka in sina e-postmeddelanden eller hålla tillbaka informationen.
Eftersom Sketch vill att du skickar in ditt mail så fort som möjligt efter att du har skrivit in, är avståndet mycket tättare mellan ingångsfältet och Submit-knappen. Detta följer Fitts 'Law eftersom du sänker avståndet (och storleken förblir fast), påskyndar du tiden som krävs för att flytta mellan element.
Slutligen märker att den asymmetriska storleken på inmatningsformen jämfört med Submit-knappen också drar ögonen till den delen av sidan, vilket är exakt vad Sketch vill ha.
Använd det vita utrymmet till din fördel för att dra rörliga ögon på vissa sidelement. För att experimentera och upptäcka det som fungerar bäst, prova olika metoder för A / B-testning för olika värden av avstånd.
Här är några allmänna noteringar som kan hämtas från Sketchs hemsida:
- Kontrast hänvisar inte alltid till färg. Det kan också referera till kontrastelement i rymden, storleken och positionen i förhållande till andra element på sidan.
- Tomt utrymme kan vara uppenbart eller obetydligt beroende på kontext.
- Omgivande element spelar en stor roll i den naturliga synligheten av andra delar.
- Symmetri skapar minne och harmoni, medan asymmetri uppmärksammar. Balansera båda i enlighet därmed.
Space Drives Uppmärksamhet
Du hittar ett lite annorlunda exempel på hemsidan för Procreate, en digital ritning och målning verktyg för iPad. Genom att skumma på sidan märker du att hela layouten är mörk och har mycket stora sidelement.
Designen visar hur man kan rita fokus till singulära element på en mycket stor sida. Skärmdumpar, demo-målningar och funktioner innehåller alla sina egna sektioner.
Vitt utrymme skiljer text och visuellt innehåll. Designen är speciellt anmärkningsvärd vid användningen av textfärger för att skilja mellan rubriker (högre kontrast) och generell sidtext (lägre kontrast).
Genom att dela upp en sida i sektioner skapar du en naturlig hierarki för innehåll. Då delas dessa sektioner med unika stilar (fullskärmsbakgrunder, överdimensionerad typografi, appskärmbilder) blir divisionerna ännu mer uppenbara.
Tänk på att inte alla webbplatser kan dra nytta av stora indelningar av innehåll - men det verkar vara en mycket populär trend bland designers. Det ser fantastiskt ut när det körs korrekt.
Alternativlayouten
På ytan kan växlande innehåll tycka irriterande eftersom du tvingar läsarens blick att hoppa runt. Men eftersom innehållet är utspänt så bra är det mycket lättare att läsa en Z-mönster än vad du först kan tänka dig.
Mönstret tvingar också besökare att stanna på tårna, eftersom konstruktionen inte är skedad information. Naturligtvis är detta mönster bara möjligt eftersom det smakfulla vita utrymmet skär bort sökvägen.
Titta på sidan för Wunderlist, vi kan se detta asymmetriska mönster som kommer fram i det vita utrymmet. Den asymmetriska avståndet utförs noggrant så att det ser intressant ut utan att vara oroande.
Vi kan lära oss mycket av de designmönster som Wunderlists användning av avstånd visar:
- Asymmetri har sitt syfte när man försöker rita uppmärksamheten på vissa delar av sidan.
- Asymmetri i ett repeterande mönster blir symmetri.
- Mönster av mellanslag mellan text eller grafik visas också som ett större mönster.
- Vitt utrymme bör göra webbläsarens innehåll enklare och mer förutsägbart.
Vidare läsning
Du kan lära dig mer rörliga designtekniker i den kostnadsfria Web Design Trends 2016 eBook. 185 sidors guide förklarar 10 bästa praxis i detalj. Du hittar 165 analyserade exempel från dagens bästa företag.