Hur man använder balans i webbdesign
Att uppnå balans i webbdesign tar lite tänkande, ansträngning och skicklighet, men det är absolut värt det. Det stora med balans, som kan tillämpas på den bredare kategorin av design som helhet, är att den håller det du skapar från att vara en överdriven, överbelastad röra som misslyckas med att betjäna användarupplevelsen. Med andra ord, balans i webbdesign ser till att du som designer bara slår den söta platsen med måttlighet. Inte för mycket, men inte för lite. Inte för högljudd, men inte för subtil. Det håller hela din design i harmoni samtidigt som du klarar alla användbarhetsmål för dina kunder. Nu är det en färdighet att definitivt sätta i din designers verktygslåda! I den här artikeln ska vi titta på hur du kan integrera bra balans på dina kunders webbplatser.
Symmetrisk balans
Ett av de vanligaste exemplen på balans som du stöter på när du surfar på webbplatser är symmetri, men du kanske inte inser det eftersom det är så smidigt presenterat. Symmetri är behagligt för ögat och skapar en design som är estetiskt välorganiserad och harmonisk. Symmetriskt balans definieras genom att placera element lika på vardera sidan av en horisontell eller vertikal centralaxel. Med andra ord, båda sidor av en imaginär dykningslinje över mitten av sidan är i huvudsak spegelbilder av varandra. Medan vissa kritiker kan skriva ut denna typ av balans som tråkigt eller förutsägbart, har det ändå stått tidstestet och är fortfarande ett av de bästa sätten att visa balans i webbdesign.
Cisco s webbplats har valt att gå för det här testade, testade och sanna sättet att designa. Observera hur webbplatsen är perfekt balanserad över sin vertikala axel. Om du tog en imaginär linje och delade den direkt ner på Cisco: s hemsida så märker du följande:
- Samma antal element i navigeringsfältet (inklusive sökikonen) på båda sidor
- Rubrik och rubrik är lika långa på båda sidor
- Call-to-Action-knappen är perfekt centrerad
- Samma antal element under rubriken "Snabba uppgifter" på båda sidor
Även om webbplatsen kanske inte är den mest hemskt spännande platsen någonsin, behöver det inte vara eftersom företaget säljer nätverksutrustning. Dessutom är webbplatsen användbar och funktionell, båda attribut som kunderna kan uppskatta. Låt oss titta på två andra exempel på symmetri:
IWC Schaffhausen , den schweiziska urmakaren, har en webbplats som har horisontell symmetrisk balans. Om vi delar sidan över en central axel i mitten, har båda sidorna symmetri.
Samma sak gäller för Beanstalk App webbplats . Med en enkel minimal design går dess centrala axel ner på mitten av hemsidan, vilket lämnar sidans två halvor med horisontell symmetrisk balans.
Asymmetrisk balans
Den polära motsatsen till symmetri, asymmetrisk balans är också möjligt. Låt dig inte lura av det faktum att asymmetri betyder brist på ekvivalens mellan delar! Som du snart ser, uppnår asymmetrisk balans ett system av motvikter i design också ... bara inte på sätt som du kan förvänta dig. Asymmetri kan representeras på ett antal sätt på en webbsida. Exempelvis kan den ena halvan av skärmen vertikalt eller horisontellt skryta med ett mer intensivt element medan den andra hälften skulle kunna ha subtilare element. Trots denna ojämlikhet, både i styrka och tal, skapas balans genom att de motsägande elementen sätts ihop. På så sätt kan asymmetri vara riktigt vacker, kanske mer än enklare symmetri, eftersom den spelar på begreppet olikhet för att skapa balans. Det är en designparadox, men en som fungerar så bra på vilken plats som helst. Asymmetrisk balans är därför mer intressant och tankeväckande än förutsägbar symmetri. Det framkallar teman av modernism, energi och underverk. Designers bör dock notera att att skapa asymmetri på en sida kräver mer arbete än vanlig symmetri. Trots allt måste du representera relationer mellan designelement som är mer komplicerade.
Honda ger oss ett kristallklart exempel på asymmetri i webbdesign. Nedanför vikten, på sin hemsida, använder företaget en kortbaserad design, men detta ger en något oorganiserad look som, samtidigt visuellt tilltalande och färgstark, skapar brist på jämlikhet på vardera sidan av en vertikal eller horisontell centralaxel. För en sak är korten själva alltid olika längder, horisontellt och misslyckas med att alltid staplas i någon enhetlig kolumn eller rad. Detta skapar stor asymmetri som är väldigt intressant att titta på. Det är nästan som en liten labyrint på bilföretagets hemsida! Det finns också andra intressanta exempel:
Typographisme är ett perfekt bildfall av asymmetri i webbdesign. Dess webbplats har två element som är lutade. Både TG-logotypen och den gröna stämpeln i höger övre hörnet skapar asymmetri.
Duplos "Asymmetri är starkare. På webbplatsen finns en design med flytande element som inte stämmer överens med den andra halvan, om centralaxeln är vertikal eller horisontell. Sammantaget ger det ett iögonfallande utseende som är intressant att ta in.
Radial balans
Radial balans är ganska enkelt. Som namnet antyder uppträder radial balans när alla designelementen på en sida utgår i ekvivalenta punkter från en förenande centralpunkt. Så om du skulle dela sidan antingen vertikalt eller horisontellt längs en central axel, skulle båda sidornas element vara lika långt eller nära från centralpunkten. Några av de mest grundläggande exemplen på radial balans är saker som strålar av solljus som kommer från en central punkt eller en damm som har en massa krusningar på dess yta. Vad som gör denna form av balans mer speciell är att strålningseffekten går båda vägarna: Precis som uppmärksamheten leder bort från centralpunkten leder det också tillbaka till det på grund av det gemensamma centrumet. På grund av detta är det enkelt att hålla en kontaktpunkt.
Det bästa exemplet på radial balans - vilket är ganska ovanligt på webbplatser, särskilt hemsidor - är vlog . Det är uttryck för radiell balans, eftersom allt strålar utåt från den centrala punkten i den vita typen av "Vlog.it".
Alla sorters balans
Vid det här laget bör det vara ganska uppenbart att alla typer av balans har några vanliga obligationer. Det finns likformiga faktorer som konsekvent förekommer i någon form som har ett attraktivt och intressant balans. Balansen i webbdesign är runt omkring dig. Chansen är att du har försummat att uppskatta det på alla olika webbplatser du någonsin har bläddrat under hela ditt liv men det är bara för att balans inte är det första du tänker på när du navigerar på någon webbplats. Ändå är balansen viktig för platsdesign. Det ger inte bara estetiska detaljer som är intressanta ur visuell synvinkel. Det kan också hjälpa användarupplevelsen genom att göra den visuella informationen på en webbplats lättare att absorbera, det vill säga inget att förbättra sidnavigering också. Designers kan sträva efter att få bättre balans i sin webbdesign genom att ägna särskild uppmärksamhet åt harmoni, motvikter och jämvikt. Slutresultatet av bra balans betalar utdelade utdelningar för dina kunder och användarupplevelsen.