Konsistens kommer att göra din design bättre, lättare att använda, och praktiskt taget osynlig. Det ger användaren gott om utrymme för att uppleva designen på det sätt du tänker.
Att utforma för konsistens är i vissa fall en no-brainer och lite svårare att förstå i andra. Helt enkelt är konsistensen den tråd som binder samman element i en enda design. Det knyter också samman mönster över en enda kampanj eller ett varumärke, och skapar en produkt som är särskiljbar, användbar och effektiv. Observera alla exemplen nedan, varje varumärke är ledande när det gäller konsekvent och användbar design.
1. Dominerande och sekundära färger och nyanser
Det finns en anledning att det finns så mycket information om att skapa bra färgpaletter. Färg kan vara en av de viktigaste visuella faktorerna som länkar ett varumärke till visuell behandling.
En särskild färgidentifierare kan berätta för användare vilka du är i en blick. Tänk bara på hur några av världens största varumärken - Coca-Cola, Facebook, T-Mobile - identifieras med en färg. Skulle du även erkänna dessa märken utan deras signaturfärg?
God färganvändning hjälper också användare att flytta igenom en webbplats och vet att de fortfarande är på rätt plats. Om varje klick tog dig till en sida med en ny färgpalett, skulle du ifrågasätta om du var på rätt ställe?
För att skapa en bra färgpalett, välj en dominerande färg och använd begrepp färgteori för att lägga till en sekundär färg eller två. Skriv sedan en snabb uppsättning stil och användningsregler för varje färg och hur den ska användas under hela designen. Håll dig till reglerna och du har färgkonsistens. (Bonus: Skapa en rolig sommarfärgspalett.)
2. Typografi Storlek, Spacing och Position
Precis som färg borde baseras på en palett med stilregler, behöver typografi samma behandling. Och lätt för dig är konceptet detsamma som med färg.
- Välj en dominerande typ och storlek.
- Välj sekundära tecken och storlekar.
Det kan vara lite mer komplicerat än för typografi på webben, men du får idén, eller hur? När det gäller webbstilar borde du associera specifika typer av behandlingar, storlek, avstånd och positionering med CSS så att varje tagg (som h1, h2, h3, kropp, etc.) kallar rätt typalternativ.
Ytterligare typ som används på en enda plats - som navigering - ska vara konsekvent i hela det här elementet. Användarna blir ganska förvirrade om varje navigeringselement använder en annan typsnitt. Denna konsistens gäller hela webbplatsen; Alla liknande artiklar ska använda samma textbehandlingar.
3. Storlek och relationer av element
Hur stora är elementen i din design? Är alla knapparna lika stora? Vad sägs om rubriker och foton?
Storleken på elementen bör dikteras av stil och förbli densamma för varje användning. (Tänk bara hur roligt din reglage kommer att se om du försöker lägga in bilder med olika former. Det kommer inte att fungera.)
Vanlig storlek och relationer mellan element hjälper användare att se mönster och skapa visuellt flöde. Dessa gemensamheter skapar harmoni och balans som gör det enkelt att smälta en design och hålla användarna engagerade.
4. Utrymme och hur det används
Precis lika viktigt som storleken på elementen är utrymmet mellan dem. Det finns inget mer distraherande än en design där element bara verkar dumpas på duken utan organisation eller regler - några bilder överlappar varandra medan andra kan ha gott om utrymme mellan dem.
Det bästa sättet att etablera - och hålla fast vid - gemensamma regler för avstånd är att använda ett nätsystem. Denna uppsättning osynliga linjer hjälper dig att bestämma var och hur man lägger in element så att mycket enkelt block, från text till knappar och bilder, faller i perfekt harmoni.
Medan du tänker på rymden, kom ihåg att kontrollera för jämn avstånd både vertikalt och horisontellt. Detta inkluderar att titta på förhållandet mellan liknande element och de som skiljer sig åt. (Det är bra att ha regler för avstånd för varje.)
5. Visuals That Cross Mediums
Märkesvisuella bilder, som bilder och illustrationer, borde ha med sig över olika medier. Oavsett om du utformar ett projekt för en webbplats eller broschyr, skylt eller sociala medier, bör varumärkets visuella identitet inte förändras.
Detta innebär ofta att man använder en gemensam bildsats. Vissa märken har detaljerade regler för hur visuella bilder används - från färgöverlagringar eller vattenstämplar på alla bilder till ett visst bildförhållande för alla bilder. Oavsett vad du vill ha din stil att vara, är det viktiga att använda är oavsett platsen.
För att göra detta mest effektivt är det viktigt att ha en bra visuell däck fylld med högkvalitativa högupplösta bilder som du kan använda och återanvända.
6. Användarmönster som fungerar naturligt
Din design behöver fungera som andra liknande mönster och följa accepterade användarmönster. Alltför ofta vill designers göra något annorlunda med hur sakerna fungerar; faller inte in i denna fälla.
Om en webbplats eller app eller ett skrivet element fungerar som användare förväntar sig, kan de enkelt interagera med det. De vet vad de ska göra och designen blir något osynlig eftersom användbarheten skiner igenom. (Detta är ditt verkliga mål som designer.)
Det finns fyra typer av allmänt accepterade mönster att tänka på:
- Innehållsmönster: Stil och ton av innehållet och ditt varumärke
- Markupmönster: HTML och CSS som du behöver designa över sidor och hela webbplatsen
- Designmönster: Utseendet på varje element i designen och alla relaterade stilar
- Användarmönster: Hur användare engagerar med designelement som knappar, menyer eller ikoner
7. Användargränssnitt som stämmer
Det här är inte klibbig navigering, men det är en liknande idé.
Varje interaktion och gränssnittselement ska uppträda på samma sätt.
- Länkar öppnas direkt eller i en ny flik (välj en för varje länk)
- Knappar har samma färg hela tiden
- Navigationen ligger på samma plats och innehåller samma alternativ
- Footers och sidobar ska hålla en viss plats och storlek (gör inte fotfoten stor på en sida och liten på nästa
- Ikoner är igenkännliga och gör vad användarna förväntar sig
- Klickbara element är alltid klickbara (till exempel bilder som länkar)
Listan om är ett springbräda som visar alla små detaljer du behöver tänka på när det gäller klibbighet och användbarhet. Kom ihåg att om du tillåter ett element att utföra en åtgärd, skulle det troligtvis vara universellt.
Slutsats
Designkonsistens skapar den struktur som användarna önskar. Det skapar också en ram som användarna förstår, vilket bidrar till övergripande användbarhet och engagemang.
Det börjar med en uppsättning regler och stilguide för varje projekt. Även om du arbetar ensam, skapa en lista med regler för hur ett projekt ska använda färg, typ, storlek, utrymme, användargränssnitt och interaktioner. Det kommer att påskynda designprocessen för dig och leda till en bättre och mer användbar design.