Design = känslor + användbarhet
Medan konst är ett subjektivt område, är grafisk design mer formell i sina grundämnen. En effektiv design ska få människor att känna sig på ett visst sätt och ta en viss åtgärd . I den här artikeln skulle jag vilja dela med dig av Gravity Switch webbdesign principer och vårt tänkande bakom dem.
Dessa regler är: definiera mål först; fokusera på andra användare; design för känslor; följa reglerna för visuell design; bygga en tydlig, visuell hierarki var konsekvent; bryta reglerna (vid behov); inte överanvända gimmicks; och slutligen testa, mäta och förbättra.
1. Definiera mål först
Jag slår vad om att du trodde att jag skulle säga "fokusera på användarna först", det är vad mestmänniskorsäga. Glöm det, låt oss börja med dina mål. Börja varje webbdesignprojekt med en brainstorming som beskriver tydliga, realistiska webbsidor som förstärker dina affärsmål .
För att bättre illustrera detta låt oss titta på Amazon. Deras mål är att maximera produktförsäljningen. Genom "upselling" och "cross-selling" kan de maximera köpkraften för varje användare, men för att lyckas med detta saktar de köpprocessen långsammare . Till skillnad från många av sina konkurrenter har Amazon inte en "buy now" -knapp i sina sökresultat. Användare måste besöka en sida (med potentiella upsells) innan de köper. Detta är ett perfekt exempel på hur en webbdesign kan uppfylla tydliga affärsmål.
De flesta moderna e-handelswebbplatser har tagit bort "Köp nu" -knappen från deras sökresultat, även om vissa murar och murbruk har det fortfarande.
2. Fokusera på andra användare
Med dina klara mål uppifrån måste du definiera och prioritera användare . Var så specifik som möjligt. Några exempel på frågor att fråga är:
- Man vs Vuxenfördelning?
- Utbildningsnivå?
- Platser i landet?
- Relaterade hobbies?
- Inkomst fäste?
- Vem driver unga produktköp? Barn? Föräldrar? Farföräldrar?
Kärnpunkten är att designers bör vara medvetna om användarna så att de kan se till att deras mönster inte blockerar nyckelanvändningsbanor.
3. Design för känslor
Var säker på att du förstår vilka känslor ditt varumärke skulle innebära. Brainstorm. Fråga frågor. Få överenskommelse. Och möjligen viktigast, fokusera på dessa känslor när du presenterar tillbaka till dina kunder. Fråga aldrig om din klient "gillar" en design. När du levererar mönster ska du istället ställa frågor som "Vilken av dessa får dig att känna dig mest professionell?" Eller "När du jämför dessa två mönster ser du att den här är modernare, medan den här är mer dynamisk. Det var båda känslor som var viktiga för dig, nu när du ser dem visuellt, vilket tycker du är den viktigaste känslan för dig att presentera för din målgrupp? "
Vilka av dessa organisationer är roliga? Avkopplande? Innovativ? Upptagen? Verklig? (Design av @JessicaShiner och Christine Mark)
4. Följ reglerna för visuell design
Det finns många små element som webbplatsanvändare medvetet och undermedvetet använder för att bestämma om de ska lita på en webbplats. De viktigaste är:
- Beskärning: att välja foton är bara hälften av slaget, beskärning av bilder är vad som gör eller bryter en sidlayout.
- Negativt utrymme: noggrann uppmärksamhet på marginaler, vadderingar och linjens höjd är skillnaden mellan att se ut som New York Times vs ett högskolans nyhetsbrev.
- Teckensnitt: alla älskar att välja typsnitt, men en bra formgivare kan snabbt upptäcka ett professionellt teckensnitt och har restriktioner för att hålla antalet teckensnitt på hemsidan till 1-2 (inte räknar med logotypen som ofta är sitt eget teckensnitt).
- Färger: färger är ett av de svåraste sakerna för designers att använda effektivt. Det finns så många regler att välja en bra färgpalett, och medan det är frestande att använda online färgpalettgeneratorer , spendera tid att designa din egen färgpalett.
- Layout: skapa bra visuell sida "flöde" så att användarens ögon går där du vill att de ska gå på sidan utan att andra element visuellt misslyckar dina mål.
5. Bygg en klar, visuell hierarki
Webbplats besökare skumma. De läser inte. Ta tag i deras uppmärksamhet och få dem till den viktigaste informationen med en tydligt definierad, genomtänkt visuell hierarki . En genomtänkt design - sida> sida> sektion - leder användaren genom sidan som du vill. Användare ska kunna titta på din sida och förstå det i en delad sekund.
Titta på följande exempel på en artikel och märka hur det är svårt för ögat att berätta vad sidan handlar om eller var artikeln börjar!
Nedan är en mockup som jag gjorde genom att ändra om ett dussin rader av CSS för att skapa en tydligare visuell hierarki på denna sida på följande sätt:
- Artikelrubriken ska vara det mest framträdande elementet på sidan. Det är för närvarande en mindre teckenstorlek än rubriken längre ner på sidan! Så jag ökade artikelrubrikens storlek och minskade storleken på rubrikerna.
- Rubriken längre ner på sidan kopplades också bort från innehållet som det var en rubrik för visuellt, så jag stramade också upp avståndet under rubriken medan du lämnade utrymmet ovanför rubriken för att låta användarna veta att det är en rubrik för stycket nedan .
- Jag flyttade också den lilla bilden till höger om titeln istället för vänster så att när en användare skannar ner på vänstra sidan av sidan för att orientera sig är artikeltiteln i sin vision.
- Jag tog bort gränsen och bakgrundsklasserna på den blå bluren så det konkurrerar inte längre med rubriken och tar bort toppmarginalen. Det fanns redan en klass på plats för att göra den grå, vilket fungerar bra i det här fallet.
- Jag tog också bort den distraherande texten och bilden som framhäver att det här är en reprintartikel samt några tomma stycken och
taggar.
Jag lämnade avsiktligt alla annonser som de ursprungligen kodades, förutsatt att det är en viktig del av den här sidan.
6. Var konsekvent
Förvirra inte dina användare. Länkar ska vara konsekventa och tydliga. Om du väljer att använda ikoner, bilder och illustrationer, se till att de ser ut som de hör hemma som en sammanhängande uppsättning. Inkonsekvenser kommer att distrahera din användare och dölja ditt meddelande. Använd inte mer än 3 typsnitt - det är bäst om de är alla i samma familj. Begränsa dig till 5-6 färger (Obs: logotyp kan vara ett annat teckensnitt, och det borde ofta vara).
7. Bryt reglerna (vid behov)
Om det finns något särskilt unikt eller viktigt som du behöver markera, kan du behöva "bryta reglerna." Du kan använda en eller två kontrasterande färger för att hjälpa elementet att sticka ut. Till exempel understryker den brittiska webbplatsen nedan skattesatsen genom att göra detta till ett större element med en pop färg.
När folk besöker informationssidan om Momsskatt, designerna av GOV.UK såg till att informationen de flesta behöver är främre och centrala.
8. Överanvänd inte gimmicks
Gör din design rolig, men se till att de här elementen stöder det du försöker åstadkomma på webbplatsen. Till exempel Inze platsen är vacker att titta på och underbart på mobilen men när jag besökte den på min stationära dator var jag vilse. Det visar sig att navigeringen är dold tills du börjar bläddra vilket tyvärr tog mitt öga till botten av sidan. Till följd av detta märkte jag inte ens den subtila navigeringen som uppstod längst upp. Jag rullade mest av vägen till botten innan jag ens insåg att det var (äntligen) en navigering på toppen. Den "dolda" navigeringen är en snygg effekt, men "designen" hindrade mig från att vidta önskad åtgärd. I slutändan förmedlar den en förvirrande, slarvig bild.
Jämför Inze till vad som händer rätt i den här artikeln här Web Designer Depot när du rullar över en länk på din stationära dator. Vi har en snygg effekt men det skapar inte ett "hinder" för användare för en gimmicks skull. Det bryts också graciöst så det kommer inte att bryta på mobila eller äldre webbläsare.
9. Test. Mäta. Förbättra
Webbplatser utvecklas. Design för flexibilitet och anpassningsförmåga. Att samla in och analysera pågående testdata kommer att driva konstant förbättring. Kom ihåg att det handlar om att skapa en design som uppfyller dina mål.
Genom att noggrant mäta resultaten av en serie mindre ändringar i designen till den ursprungliga målsidan (vänster) kom vi fram till en ny design (höger) som ökade registreringsprocenten med 60%!
Kom ihåg
Effektiv grafisk design behöver emotionellt koppla användaren till varumärket samtidigt som man får dem att göra vad du vill. Det kan göras.
Håller du med dessa regler för design? Skulle du lägga till mer? Låt oss veta dina åsikter i kommentarerna.
Utvalda bild / miniatyrbild, känslomässig bild via Shutterstock.