Det finns en gammal affärsmodell som många affärsstrateger bor vid 3 Cs. Det är en påminnelse att fokusera på företag, kunder och konkurrenter. Många småföretag och webbplatser använder också denna modell. Men för designers är de tre Csna lite annorlunda.
När du skapar användargränssnitt ska du fokusera på färg, kontrast och innehåll. Dessa tre element är grunden till bra design. Men varje är lite mer komplex än det kan tyckas från ytan. Så här tänker du på och integrerar de tre Cs-användargränssnitt i dina designprojekt.
Färg
Färg är ett av de mest uppenbara visuella elementen för de flesta användare. Designers och icke-designers kan prata om färg och om en viss nyans eller palett vädjar till dem.
Färg kan skapa helt distinkta känslomässiga kopplingar helt enkelt, utan andra effekter. Du kan leverera en färgpatch eller -chip till nästan alla och få en reaktion om vilken färg som helst. Det är också ett roligt designelement genom att personliga och designpreferenser tenderar att flytta över tiden nästan universellt.
Färg kan göra eller bryta en design av många orsaker, men i första hand gör det så många saker och ger så många visuella signaler till användaren samtidigt som du inte kan ignorera den.
Färgpåverkan:
- Användbarhet och läsbarhet
- Varumärkesigenkänning och medvetenhet
- Där användare ser och interagerar
- Organisation och användarflöde
- Övergripande framgång av designen
Använd färg för att skapa:
- Navigation som är tydlig och förståelig
- Intuitiva interaktioner
- Ett humör för projektet
- Skapa starka samtal till handling eller användbara element
- Upprätta en känsla av vad designen handlar om, till exempel verklighet kontra fantasi
Det här kan alla tyckas som en lång order för något så enkelt som en blandning av rött, grönt och blått.
Så, var börjar du? De viktigaste variablerna när det gäller färg skapar förmodligen en palett som engagerar användare och talar om vad designen handlar om (t.ex. branding och humör). Till exempel skulle en webbplats för Coca-Cola som använde blått som en dominerande färg i stället för rött skada användarna.
En solid färgpalett är förankrad i principerna om färgteori.En solid färgpalett är förankrad i principerna om färgteori. Du behöver inte mer än ett par färger för att få det att fungera. Två till tre färger och ett bra bibliotek med ljusare och mörkare variationer är nog. Mockplus rekommenderar regeln 6: 3: 1: välj tre färger för en palett, inklusive en dominerande färg som använder 60 procent av tiden, en sekundär färg som används 30 procent av tiden och en accentfärg som kan vara kvar 10 procent av designen. Regeln är förankrad i det guldliga förhållandet, en grundsten i designteori och kan vara en bra utgångspunkt.
Här är en enda regel för att skapa färgpaletter i användargränssnitt: Börja med svartvitt. Om designen är användbar utan färg, kommer det troligen att fungera när färgen läggs till. Den svarta och vita konturen ger dig också en bra bild av hur man väljer färger med tillräcklig kontrast (den andra C) för att förbättra användbarheten.
Kontrast
Kontrast skapar skillnad mellan element. Det bidrar till att skapa en visuell hierarki, skannbarhet och bidrar till hur lätt det är att förstå snabbt. Element med stark kontrast gör det enkelt för användaren att se från en sak till nästa, skapa ett naturligt visuellt mönster och användarflöde.
Anledningen till kontrast är så viktigt att användargränssnittet är att det är en del av allt du gör. Hur du skapar kontrast varierar beroende på vilken typ av inslag av visuell effekt som är inblandad.
Du kan skapa kontrast med:
- Färg
- Storlek
- Riktning
- Rymden
- Form
En viktig del av tillgänglighetsriktlinjerna är kontrast eftersom det säkerställer att användarna kan skilja ett element från en annan i designen. A11Y-projektet, som har som mål att göra webtillgängligheten enklare, har denna rekommendation: Börja med färgkontrast genom att använda färger från olika delar av färghjulet eller kontrasterande färger. Kom ihåg att komplementära färger - motsatser på färghjulet - ger maximal kontrast.
Samma begrepp gäller också för att skapa kontrast mellan andra element. Välj teckensnitt från olika familjer eller använd dramatiskt olika storlekar för att hjälpa användare att läsa ord snabbt.
Kort sagt är tanken bakom kontrast att motsatser lockar.Använd riktmärken, pilar eller bilder med rörelse för att tvinga användaren att se i en viss riktning och vrid sedan riktningskoden för ännu mer kontrast.
Skillnaden mellan snäva och öppna utrymmen skapar mycket kontrast. Om du vill se till att texten är lätt att se och läsa, ge den lite mer utrymme för att uppmärksamma den.
Kort sagt är tanken bakom kontrast att motsatser lockar. Element som är uppenbart annorlunda kan faktiskt arbeta tillsammans så att båda är lätta att se på ett ögonkast.
För att veta om kontrast fungerar på det sätt du tänker tänker på ett par faktorer när du tittar på elementen på skärmen:
- Läsbarhet: Är alla ord och bilder lätt att se och läsa?
- Tydlighet: Är det lätt att skilja ett element från en annan?
- Tillgänglighet: Fungerar det för så många människor som möjligt?
- Miljö: Kan användarna se och förstå designen på de platser där den ska användas?
Innehåll
Den sista av de tre Cs är innehåll. Användargränssnittet kan bara vara lika bra som informationen i den. Innehållet innehåller allt från bilder till text till illustrationer och ikoner till logotyper och varumärken. Innehållet innehåller också video och varje bit kopia från hela meddelandet eller berättelsen till blogginlägg till små bitar av mikrokopia.
Att bara ha innehåll är inte tillräckligt. Du måste ha stellärt innehåll.Alla dessa element kommer tillsammans för att berätta historien om vad som gör din design och användargränssnitt speciellt. Varför ska användare ge dig sin tid istället för att göra något annat?
Och bara att ha innehåll är inte tillräckligt. Du måste ha stellärt innehåll. Högupplöst innehåll. Högvärdesinnehåll. Ditt innehåll måste vara bättre / större / mer speciellt än liknande innehåll som konkurrerar för användarnas uppmärksamhet.
Det kan vara en lång order, men de flesta designers kan skapa innehållet genom att vara sant mot dem själva och deras varumärke och meddelanden. Håll dig till vad du är och vad du vet. Användare kommer att se denna äkthet och förhoppningsvis värdera det genom att spendera tid med din design.
Slutsats
Nu när du är beväpnad med de gamla tre Cs-företagen - företag, kunder och konkurrenter - och tre Cs av användargränssnittdesign - färg, kontrast och innehåll - har du verktyg och kunskap för att skapa ett designprojekt som inte är i världen Bra. (Eller åtminstone mycket användbar.)
Genom att arbeta båda strategierna i designprojekt, är du tvungen att tänka på hur man skapar något som kommer att gynna webbplatsägaren och användaren. Du skapar inte bara så att designen är vacker, men också så den är funktionell.
Obs! Alla exemplen i den här artikeln är från Design Shack Gallery. Se till att ta en titt Det är fullt av bra jobb och inspiration.