Idag ska vi undersöka en av de mest grundläggande principerna i design: anpassning. Detta bedrägligt enkla ämne är faktiskt ganska komplext och är bland de mest bristfälliga kompetenserna hos designers idag.
En stark förståelse för hur och när du ska använda vissa anpassningar kommer omedelbart att göra dig till en bättre designer och kommer att förbli ett grundbyggande block för allt du skapar under resten av din karriär.
Introduktion till anpassning
För många kan en diskussion om anpassning låta som en godtycklig övning. Sådan grundläggande designteori är säkerligen endast för individer som aldrig har utformat något i sitt liv, inte för det professionella samhället som besöker webbplatser som dessa. Höger?
Jag själv skulle vidareutveckla argumentet att en sådan diskussion är för nybörjare genom att säga att ett solidt grepp om visuell anpassning är en oslagbar grund för alla typer av design. Det är den typen av kunskap som, när du förstår, kommer att använda på varje layout som du skapar som designer.
Men trots att idén om att dessa begrepp ligger i själva kärnan i vad vi som designers verkar, verkar anpassning vara en primär källa till det mesta av den dåliga designen jag ser på webben idag.
Självutbildade designers har ofta ett intuitivt grepp om hur man använder justeringar men det kan och misslyckas utan tydlig kunskap för att säkerhetskopiera den.
Foder saker upp
Den väsentliga tanken på anpassning är sinnet numbingly enkelt: att ordna saker upp. Utanför organisk design, som helt och hållet är ett annat ämne, bör varje element som du placerar på en sida åtföljas av en logisk tankeprocess om positioneringen.
Återigen är det här grundläggande grejer? Alla gör redan detta? höger? Fel. Tänk på följande webbplats som nyligen skickades till vårt CSS-galleri. Jag använder detta inte som ett medelhäftat exempel, men ett undervisningsinstrument. Designern är en fantastisk kille som bara börjar. Han förbättrar sin kompetens dagligen och är ivrig att lära sig.
Detta exempel är extremt typiskt och är exakt den typ av sak vi ser varje dag i våra galleriinslag. Det estetiska värdet här är inte dåligt. De ljusa färgerna och intressanta texturerna tar upp din uppmärksamhet ganska bra. Men justeringen här missade verkligen märket.
Problemen här kan vara svåra för många att upptäcka. Av denna anledning rekommenderar jag alltid att förenkla en design för att undersöka de grundläggande formerna. Du får se mig göra det i flera av de artiklar jag skriver om design och du borde definitivt prova på några av dina egna mönster.
Nu när vi ser de grafiska objekten i ett förenklat tillstånd kan vi bättre analysera volymen av utrymme som de upptar och ta itu med eventuella anpassningsfrågor.
Observera att elementen plötsligt verkar spridda på sidan. Huvudinnehållet längst ner ligger inte ihop med antingen den hängande banan längst upp till vänster eller de spridda elementen längst upp till höger. Vidare verkar Facebook-logotypen liten och strängad av sig själv, och rubriken är skjutd bort från kanten på navigeringen, som är skjuten bort från innehållskanten.
Även om denna design kände sig ganska anständig när vi bara kände det, ser vi nu att det skulle kunna använda en hel del omstrukturering. Härifrån finns det två viktiga saker som du behöver ta itu med: Justering och negativt utrymme.
Dessa begrepp är extremt nära knutna till varandra. Att arbeta med det negativa utrymmet har mycket att göra med att fokusera på luckorna och tillämpa grundläggande symmetri. För mer om rätt handlingsåtgärd angående det negativa rymden, läs min guide till negativ rymd över vid sex revisioner.
I den här artikeln kommer vi att fortsätta genom att fokusera mer på hur du använder de grundläggande anpassningarna du känner till i komplexa layouter.
Centrallinjering
Centrerade layouter är valmetoden för nästan alla människor på planeten? utom designers. Av någon anledning, att centrera objekt på sidan verkar bara som vad du ska göra. Visst är en designers huvuduppgift att helt enkelt centrera saker!
Jag stötte på det här problemet för några år sedan när jag lämnade en design som jag hade skapat för att en utvecklare skulle koda. När han visade mig den färdiga versionen hade allt flyttats från vänster inriktad till mittlinjen! Han förklarade helt enkelt att han alltid föredrog att centrera inriktningen allt så det ser bra ut.?
Verkligheten är att centrera varje objekt är det svagaste anpassningsalternativet du kan göra.
Det finns inga hårda kanter att följa så dina ögon måste göra mycket mer arbete för att både ta in den övergripande layouten och absorbera det specifika innehållet.
När ska du använda
Det här är inte alls att säga att centruminriktningen alltid bör undvikas. Jag har själv använt dem på demo för den här sajten. Nyckeln är att veta när man ska använda dem.
Jag tycker att det bästa möjliga scenariot för en mittlinje är när det finns mycket lite på en sida. Ju mer komplicerade layouten, desto mindre centerinriktningar fungerar. Om en given sida inte har mycket på gång kan centruminriktningar göra ett kraftfullt uttalande.
Vänsterjustering
Vänsterjusteringar, men förmodligen tråkiga, är rockfasta och bör vara din standard, justering för mycket av det arbete du gör.
Vi är vana vid att se innehållet organiserat i vänsterriktat sätt. Spränga upp en bok eller tidning och du hittar massor av vänsterjusteringar. Bläddra igenom annonserna i ditt skräppost, igen, mycket vänsterjusteringar. Du får se dem på Facebook, Googles sökresultat, Twitter-flöden och alla andra stora webbplatser.
Vänsterjusteringar reglerar världen, eller åtminstone de samhällen som läser från vänster till höger. Du bör inte helt bero på en vänsterjustering för allt, bara veta att det är den säkra vägen.
När ska du använda
Använd i alla sorters situationer, men speciellt när det finns mycket text. Ta en titt på den sida du läser nu.Om detta var centrerat skulle det vara en mardröm.
Observera att, framförallt på webben, vänsterjustering betyder inte att du inte kan centrera det. Till exempel innehåller en HTML-div ofta ett gäng av vänsterjusterade stycken och bilder men centreras sedan på sidan med hjälp av CSS.
Rätt inriktning
Högerjusteringar är förmodligen det sällsynta. Eftersom vi läser från vänster till höger, känns det bara konstigt för något att hålla fast vid den högra kanten.
Det är dock en perfekt stark anpassning som kan användas noggrant i dina mönster, speciellt i tryck (det brukar vara ännu mer oväntat online).
När ska du använda
Ofta, men inte alltid, kommer en rättinriktning att ge en känsla av unikhet. Om du designar något som behöver sticka ut och känna sig annorlunda, är en rättinriktning ett bra ställe att börja.
Rättfärdiga anpassningar på webben
Justeringen vi släckte är uppenbarligen motiverad. Detta kommer in i spel starkt när du knyter en hel sida tillsammans som ett begreppsmässigt element.
Det intressanta med att designa för webben är att det ofta innebär en blandning av anpassningar. Du har nog hört designers föreslår att aldrig blanda justeringar, men det här rådet fungerar inte bara i den verkliga världen.
I stället måste du fatta beslut för både elementen inom en sida samt sidelementen som helhet. Lägg märke till hur jag startade den här diskussionen genom att titta på ett exempel på att se justeringen av en sida som helhet, men fortsatte sedan med att diskutera enskilda objektinriktningar.
När du har bestämt sig för en anpassning för texten och bilderna på din sida, innebär det att du lägger allt på sidan med allting på sidan till en motiverad anpassning. Även om du kan ha en trasig kant, rättfärdigar allt kan lägga till den avslutande städning som saknades i det ursprungliga exemplet.
Lägg märke till hur på sidan ovanför det finns en stark vänsterjustering, men allt på höger sida har också lagts upp för att skapa ett sammanhängande motiverat utseende. Den lilla inloggningsknappen räknar med webbläsarbilderna, som stämmer upp med den högra sidan av kalenderikonen.
Detta är ren, professionell design. Det kanske inte är lämpligt för alla projekt, men jag kan ofta se designers försöker nå det och misslyckas och jag ville ta itu med några av de troliga orsakerna.
Detta är ett av anledningarna till att nätsystemen är så populära. Att kasta allt på ett galler garanterar att dina anpassningar är fulla och lätta att följa.
Slutsats
Sammanfattningsvis använd starka anpassningar som gör det lätt för ögat att följa informationsflödet när det är möjligt. Centrallinjeringar är acceptabla, men blir svårare att genomföra korrekt eftersom innehållet på en sida ökar.
Kom ihåg att justering hänvisar till specifika objekt på en sida samt arrangemang av objekten som helhet. Tillbringade tid på varje design, se till att alla dina element stämmer ordentligt med allt på sidan. Detta gäller vertikalt och horisontellt längs alla kanter av designen.