Bästa praxis, tips & riktlinjer i webbdesign du bör veta

8 Min.
Metodtips för webbdesign

Vilka är de bästa metoderna i webbdesign? Hur implementerar du dem framgångsrikt i ditt nästa webbdesignprojekt? Och vad definierar vi som designstandard och bästa praxis inom webbdesign?

Vad menar vi egentligen med "bästa praxis"?

I webbutveckling finns fasta regler, som främst har att göra med kodens läsbarhet och renhet samt med säkerheten på en webbplats. I webbdesign är terminologin däremot lite mer och reglerna mer öppna för egna tolkningar.

Metodtips: Webbdesign är mer än estetik

Bästa praxis inom webbdesign är en blandning av visuell design, användarupplevelsedesign, tillgänglighet och innehållsskrivning – med fokus på SEO.

Bästa praxis inom webbdesign är en uppsättning regler att följa för att uppfylla användarnas allmänna förväntningar. Dessutom är de riktlinjer för större tydlighet och en bättre användarupplevelse.

I den här artikeln kommer jag att presentera dig de bästa metoderna för god webbdesign. För varje avsnitt ger jag dig tips om hur du får mer kunskap och presenterar verktyg och exempel som hjälper dig med ditt nästa projekt.

Även när det gäller bästa praxis på området WordPress Jag ska ta en kort titt på utvecklingen. Som ni vet är projektplanering och projektledning en viktig del av webbdesignen. I den här artikeln kommer jag att utelämna båda frågorna tills vidare, eftersom detta skulle gå utöver räckvidden här.

Metodtips: Visuell design

Vi börjar nu med de etablerade standarderna för visuell design: Vilka är de bästa metoderna inom visuell design? Och vilka faktorer ingår?

Igenkänningsfunktion och varumärke

Webbplatsen måste matcha resten av företagets webbplats och bör baseras på stilguiden. Kontrollera därför webbplatsen för följande frågor:

  • Är det tydligt vid första anblicken för vilket företag webbplatsen skapades?
  • Har stilguiden integrerats?
  • Är de visuella elementen igenkännliga av webbplatsoperatörerna?
  • Används de visuella objekten konsekvent?
  • Återspeglar språket som används på webbplatsen varumärke?

Google ligger i framkant när det gäller konsekvent varumärke. Direkt kan jag inte tänka mig ett annat märke som har så många olika produkter och ändå lyckas ge varje produkt företaget känner. Även om jag tittar på en tidigare okänd produkt från Google kan jag associera den direkt med varumärket.

Hur gör Google detta?

Bland annat genom konsekvent användning av Googles färger, typografi, distinkta blanksteg, konsekvent uppmaning till åtgärder och navigering. Logotyperna har också en viss konsistens som fungerar mellan företag och kategorier - även om den senare inte nödvändigtvis betyder att designen också orsakar tjänster.

Med konsekvens i varumärke analyserar du bara om webbplatsen optimalt återspeglar företaget och dess varumärke.

Webbdesignstandard och användbarhet

En annan "bästa praxis" definieras genom att integrera standarder. Detta inkluderar till exempel att placera logotypen i det övre vänstra hörnet, utseendet på knappar, länkar och så vidare. Dessa hjälper besökaren på din webbplats att hitta sin väg runt snabbt och enkelt. Därför är dessa standarder oumbärliga för att genomföra en framgångsrik användbarhet.

Andra resurser för användbarhet:

Varför ska du vara särskilt intresserad av användbarhet och användarupplevelse som webbdesigner? Mer omfattande metoder för användbarhet finns i den här artikeln och https://www.usability.gov/.

Vad definierar en webbdesignstandard?

Vi definierar allmänt använda designstandarder i webbdesign med hjälp av UI Design Patterns. Andy Crestodina förklarar hur standarder definieras i hans artikel om webbdesignstandarder.

Detta innebär att en designmetod måste användas på minst 80 procent av platserna för att räknas som standard. Allt annat är antingen en vana (50-79 procent) eller till och med ger inkonsekvens och förvirring (0-49 procent) till din webbplats.

Harmonisk design: den tredje regeln

Jag har redan rapporterat om ämnet harmonisk webbdesign.  Jag skulle vilja gå in lite mer i detalj den här gången om den tredje regeln.

Detta har använts i flera hundra år – främst inom konst och senare inom fotografi. Här, som visas i ritningen, är designen uppdelad i 9 lådor av samma storlek:

Interaktionsdesign
Källa: interaktionsdesign

När du skapar webbplatser hjälper den tredje regeln dig också att placera den viktigaste informationen på ett sådant sätt att besökaren kan uppfatta den direkt. 

Enkelt uttryckt bör ett visuellt objekt inte uppta mer än tre rutor och vara i en tredjedel av layouten. Noderna är också särskilt lämpliga för att placera viktiga meddelanden och call-to-actions.

I Photoshop kan du snabbt och enkelt granska och anpassa layouterna med inställningen Beskär verktyg och tredje regeln. För att illustrera den tredje regeln tittade jag närmare på Marqetas webbplats:

Metodtips

Produkten och dess budskap är väl fördelade över korsningarna. Här kan designen bli lite effektivare genom att flytta CTA lite. Men harmonin i designen skulle lida något:

Metodtips

Mobilvarianten visar tydligt att meddelandet fyller den nedre tredjedelen av layouten, medan produkten visas ganska centrerad. Här kan vi ompröva placeringen av CTA.

Så kallade "värmekartor" hjälper dig också att ta reda på var besökare på din webbplats främst tittar och klickar. Crazy Egg-verktyget erbjuder till exempel en (debiterbar) tjänst här.

Ett annat sätt att kontrollera din design är det så kallade Blur-testet. Du tar skärpan från din layout (till exempel med Photoshop och "Gaussian Blur" - 12 procent). När användare inte längre kan läsa innehållet blir det snabbt tydligt när de tittar på webbplatsen. Detta test är också väl lämpat för analys av CTA. Är det fortfarande igenkännligt som sådant?

Metodtips i webbdesign

Jag använde Marqetas hemsida igen. Särskilt framträdande är rätt CTA och produkten, följt av meddelandet och slutligen logotypen och den andra CTA:

Metodtips i webbdesign

Jag har desarmerat mobilversionen ännu mer för att testa vad som finns kvar. Här fångar produkten först ögat, följt av CTA och logotypen. Du kan göra detta test med hela sidan – helst fortfarande i designfasen. Här kan du snabbt och enkelt analysera vilka delar av din design som är framträdande och bestämma om detta önskas av dig.

Text och SEO

Naturligtvis innehåller skapandet av webbplatser också skriftligt innehåll. Det finns professionella copywriters som skriver meningsfullt innehåll för din webbplats med sikte på SEO, användbarhet och stilguide. Men det finns också några riktlinjer som du kan följa själv. 

Du bör fästa särskild vikt vid texternas längd och läsbarhet – ofta är texterna för omfattande och för kapslade. 

Även om målgruppen är van vid en viss teknisk jargong bör du alltid vara medveten om att vårt uppmärksamhetsintervall på en webbplats är mycket mindre än till exempel när du läser tekniska artiklar. Snarare har vi på viss information när vi surfar på webbplatser. Vi skannar innehållet, så att säga, snarare än att faktiskt ta oss tid att läsa det korrekt.

Det finns också minuspoäng från Google om meningarna på din sida är för långa och pluspoäng när de är anslutna med så kallade "övergångsord".

Intressanta bidrag till SEO är också:

Tillgänglighet

Tyvärr är webbtillgänglighet fortfarande ett marginellt ämne – och ignoreras alltför ofta. Även här finns det enkla sätt att tänka som vi kan överväga från den första designen. Använder du till exempel oftast färger för att markera information? 

Du kan enkelt testa detta genom att titta på din webbplats som en svartvit version:

Metodtips i webbdesign

För att göra detta analyserade jag samma webbplats igen. Även utan färger kommer budskapet fram tydligt. Den övre högra CTA kan bli problematisk när det gäller kontrast.

För att verifiera detta med säkerhet finns det "Kontrastkontroll". Standardkontrastförhållandet är minst 4,5:1 för normal text och 3:1 för stor text, till exempel rubriker:

Metodtips i webbdesign
Metodtips i webbdesign

Om jag ger de grå tonerna är CTA inte tillräckligt högkontrast, men tillräckligt i färgvarianten.

http://colorsafe.co/ är ett annat verktyg för att bestämma färger och deras kontrasterande styrka. Här kan du prova olika färgkombinationer direkt. Du kommer att få förhållandet direkt och du har möjlighet att välja teckensnitt med och även till vilken WCAG-standard du vill justera ditt val.

Användningen av färger för visuell representation av felhantering kan orsaka problem. Ta formelement, till exempel. Fel representeras ofta här genom att markera inmatningsrutan i färg. Detta kan leda till att någon med färgsvaghet inte upptäcker och därmed inte kan lösa dem. 

När du planerar bör du ta hänsyn till detta och därför alltid se till att det finns en annan representation av felet. Här hittar du mer intressanta fakta och resurser om tillgänglighet, samt värdefulla tips för att skapa en tillgänglig WP-sida.

Mer resurser

Upplösning och design över flera enheter

Det finns förmodligen ingen regel i webbdesign som behandlas – och ignoreras oftare – än " mobile first ".

Den här metoden skapar innehållet för mobila enheter och justerar det sedan i enlighet därmed för de större. Motsatsen är att justera designen till skrivbord och co. och sedan justera den i enlighet därmed för mindre enheter. 

Två andra tillvägagångssätt kommer att tänka på:

  • Skapa din egen webbplats för varje mobil och stationär enhet och hämta den sedan i enlighet därmed.
  • Visa webbplatsen som en skrivbordsversion på din mobiltelefon

Det förstnämnda kan vara rätt tillvägagångssätt, beroende på projektet, men det är inte särskilt utbrett eftersom det är mycket kostsamt och tidskrävande. Tyvärr ses det senare fortfarande alltför ofta på webben och måste därför snarast inkluderas i listan över "bästa praxis". Fler tips på mobiloptimering hittar du här.

Mobile first Det behöver inte nödvändigtvis alltid vara rätt sätt att göra detta: Undersökningar om målgruppen och deras Internetbeteende kan snabbt visa dig från vilka enheter din webbplats huvudsakligen nås. 

Det bakomliggande motivet här är inte bara att innehållet behandlas visuellt i enlighet därmed, utan framför allt att hänsyn också tas till de förändrade yttre förhållandena. Du kan också läsa mer i artikeln Mobile-First UX Design Is No Longer a Trend.

Följande tabell illustrerar tydligt vilka skärmar som används för att komma åt Internet oftare. Detta kan hjälpa dig att bestämma vilka skärmar du vill optimera dina webbplatser för. Men observera även här att en sådan generalisering endast kan betraktas som ett direktiv. En undersökning av dina målgrupper kan inte heller ersätta denna statistik.

Metodtips i webbdesign
Källa: https://www.hobo-web.co.uk/best-screen-size/

Metodtips för WordPress

WordPress Codex

WordPress erbjuder dig ett otroligt antal sätt att visa upp dina mönster på webben. Men även här finns det standarder och bästa praxis att anpassa sig till.

Den WordPress Codex

WordPress tillhandahåller en allmän kodex som kan hjälpa dig att lära känna mer om ämnet.

WordPress Plugins Och Themes

När du väljer rätt Plugins Och Themes fokusera inte bara på dess nuvarande funktionalitet. Det är också ett bra ställe att läsa recensioner och bekanta dig med hur ofta uppdateringar har erbjudits och undersöka om Plugin Eller. Theme kommer att fortsätta att utvecklas ytterligare i framtiden. WordPress Verktyg som regelbundet utvecklas har vanligtvis mer aktivt stöd. De är också mer benägna att förbli kompatibla med framtida versioner av din sida.

WordPress Uppdateringar och säkerhet

Din Themes Och Plugins regelbundet minskar sårbarheten för oönskade åtkomster. Buggar löses och dina webbplatser är anpassade till den ständigt föränderliga tekniska miljön. Säkerhet Plugins Hur WordFence hjälper också till att hålla reda på din webbplats och dess säkerhet och att svara på problem i tid. Ett SSL-certifikat bör integreras på varje webbplats. 

Metodtips i webbdesign: Dina frågor

Vilka frågor har du till Sonja? Vilka metodtips kan du rekommendera dig själv? Använd kommentarsfunktionen. Vill du ha fler tips på webbdesign och utveckling? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.