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

8 Min.
Metodtips för webbdesign

Vilka är de bästa metoderna inom webbdesign? Hur genomför du dem framgångsrikt på 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 har att göra främst med läsbarhet och renlighet av koden samt med säkerheten på en webbplats. Inom webbdesign däremot är terminologin lite vagare och reglerna mer öppna för egna tolkningar.

Bästa praxis: Webbdesign är mer än estetik

Bästa praxis inom webbdesign är en blandning av visuell design, användarupplevelse design, 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 ska jag presentera dig de bästa metoderna för bra webbdesign. För varje avsnitt ska jag ge dig tips om hur du skaffar dig mer kunskap och presenterar verktyg och exempel som hjälper dig med ditt nästa projekt.

Också på temat bästa praxis inom området WordPress Jag ska ta en kort titt på utvecklingen. Som ni vet är projektplanering och projektledning en viktig del av webbdesignen. I denna artikel kommer jag att lämna båda frågorna ute för tillfället, eftersom detta skulle gå utöver omfattningen här.

Bästa praxis: Visuell design

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

Igenkänningsfunktion och varumärkes-

Webbplatsen måste matcha resten av företagets hemsida 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?
  • Känns de visuella elementen igen av webbplatsoperatörerna?
  • Används de visuella objekten konsekvent?
  • Återspeglar det språk som används på webbplatsen branding?

Google ligger i framkant när det gäller konsekvent varumärkesmärka. Genast, Jag kan inte tänka på 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, särskiljande blanktecken, konsekvent uppmaning till åtgärder och navigering. Logotyperna har också en viss enhetlighet som fungerar över företag och kategorier – även om det senare inte nödvändigtvis innebär att designen också orsakar favör.

Med konsekvens i branding, du kommer bara analysera om webbplatsen optimalt återspeglar företaget och dess varumärke.

Web Design Standard och användbarhet

En annan "best practice" 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 normer oumbärliga i genomförandet av en framgångsrik användbarhet.

Andra resurser på användbarhet:

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

Vad definierar en Web Design Standard?

Vi definierar allmänt använda designstandarder i webbdesign genom att Designmönster för användargränssnitt. Andy Crestodina förklarar på ett mycket förståeligt sätt hur standarder definieras i hans artikel om Webbdesign standarder.

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

Harmonisk design: den tredje regeln

I ämnet harmonisk webbdesign Jag har rapporterat tidigare. 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 området för konst och senare inom fotografi. Här, som framgår av ritningen, är konstruktionen uppdelad i 9 lådor med lika stor storlek:

Design för interaktion
Källkod: interaktion-design

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 en visuell inte uppta mer än tre lådor och vara i en tredjedel av layouten. Noderna är också särskilt lämpliga för att placera viktiga meddelanden och uppmaningsanrop.

I Photoshop kan du snabbt och enkelt granska och anpassa dina layouter med hjälp av inställningen Beskärningsverktyg och Tredjedelsregel. För att illustrera den tredje regeln har jag inrättat webbplatsen för Marqeta lite närmare undersökt:

Bästa praxis

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

Bästa praxis

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

Så kallade "heatmaps" hjälper dig också att ta reda på var besökare på din webbplats huvudsakligen söker och klickar. Verktyget Crazy Ägg erbjuder en (betald) tjänst här, till exempel.

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

Bästa praxis-i-webbdesign

För att göra detta har jag återigen skickat hemsidan för Marqeta Används. Särskilt framträdande är rätt CTA och produkten, följt av meddelandet och slutligen logotypen och den andra CTA:

Bästa praxis-i-webbdesign

Jag har desarmerat den mobila versionen ännu längre för att testa vad som finns kvar. Här fångar produkten först ögat, följt av CTA och logotypen. Det här testet kan du göra 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 tanke på SEO, användbarhet och stil guide. Det finns dock också några riktlinjer som du själv kan följa. 

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år uppmärksamhet span på en webbplats är mycket mindre än till exempel när man läser tekniska artiklar. Snarare är vi av viss information när du surfar webbplatser. Vi skannar innehållet, så att säga, snarare än att faktiskt ta sig 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 orsakas av så kallade "Övergångsord" är kopplade till varandra.

Intressanta bidrag till SEO är också:

Tillgänglighet

Tyvärr är Web Accessibility fortfarande ett marginellt ämne—och ignoreras alltför ofta. Även här finns det enkla sätt att tänka som vi skulle kunna överväga från den första designen. Till exempel använder du mest färger för att markera information? 

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

Bästa praxis-i-webbdesign

För att göra detta analyserade jag samma hemsida igen. Även utan färger kommer budskapet fram tydligt. Den övre högra CTA kan bli problematisk i termer av kontrast.

För att med säkerhet kunna kontrollera detta 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:

Bästa praxis-i-webbdesign
Bästa praxis-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 typsnitt med och även enligt vilka WCAG-standard du vill justera ditt val.

Användning av färger för visuell representation av felhantering kan orsaka problem. Ta form element, till exempel. Fel representeras ofta här genom att inmatningsrutan markeras i färg. Detta kan orsaka någon med färgsvaghet att misslyckas med att upptäcka och därmed inte kunna 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.

Fler resurser

Upplösning och enhetsöverskridande design

Det finns förmodligen ingen regel i webbdesign som tas upp – och åsidosätts oftare – än "mobile first".

Detta tillvägagångssätt skapar innehållet för mobila enheter och justerar det sedan därefter för de större. Det motsatta är att anpassa designen till skrivbordet och co. och sedan justera den därefter 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 sedan hämta den därefter.
  • 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 därför måste det snarast tas upp i listan över "bästa praxis". För fler tips om mobiloptimering, se här.

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

Baktanken här är inte bara att innehållet behandlas visuellt i enlighet med detta, utan framför allt att man också tar hänsyn till de förändrade yttre förhållandena. Du kan också hitta fler detaljer i artikeln Mobile-First UX Design är inte längre en trend Läsa.

Följande tabell illustrerar tydligt vilka skärmar som används för att få tillgång till Internet oftare. Detta kan hjälpa dig att avgöra vilka screensizes du vill optimera dina webbplatser för. Observera dock även här att en sådan generalisering endast kan betraktas som ett direktiv. En undersökning av dina målgrupper kan inte ersätta denna statistik heller.

Bästa praxis-i-webbdesign
Källkod: https://www.hobo-web.co.uk/best-screen-size/

Bästa praxis för WordPress

WordPress Codex

WordPress erbjuder dig otroligt många 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.

Det är WordPress Codex

WordPress tillhandahåller en allmän codex 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 att undersöka om den 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 också bidra 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. 

Bästa praxis i webbdesign: Dina frågor

Vilka frågor har du till Sonja? Vilka bästa metoder kan du rekommendera själv? Använd kommentarsfunktionen. Du vill ha fler tips om webbdesign och utveckling? Följ oss sedan på TwitterFacebook eller via vår 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ändarnas motivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriv en kommentar

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