Bedste praksis, tips & retningslinjer i webdesign du bør vide

8 Min.
Bedste fremgangsmåder for webdesign

Hvad er de bedste fremgangsmåder inden for webdesign? Hvordan implementerer du dem med succes på dit næste webdesignprojekt? Og hvad definerer vi som designstandard og bedste praksis inden for webdesign?

Hvad mener vi egentlig med "bedste praksis"?

I webudvikling er der faste regler, som hovedsageligt har at gøre med læsbarheden og renheden af koden såvel som med sikkerheden på et websted. I webdesign, på den anden side, terminologien er lidt mere og reglerne mere åbne for ens egne fortolkninger.

Bedste fremgangsmåder: Webdesign er mere end æstetik

Bedste praksis inden for webdesign er en blanding af visuelt design, brugeroplevelsesdesign, tilgængelighed og indholdsskrivning – med fokus på SEO.

Bedste praksis inden for webdesign er et sæt regler, der skal følges for at imødekomme brugernes generelle forventninger. Derudover er de retningslinjer for større klarhed og en bedre brugeroplevelse.

I denne artikel vil jeg præsentere dig den bedste praksis for god webdesign. For hvert afsnit giver jeg dig tip til, hvordan du får mere viden og præsenterer værktøjer og eksempler til at hjælpe dig med dit næste projekt.

Også om bedste praksis inden for WordPress Jeg vil tage et kort kig på udviklingen. Som du ved, er projektplanlægning og projektledelse en vigtig del af webdesign. I denne artikel vil jeg for øjeblikket udelade begge spørgsmål, da dette ville gå ud over anvendelsesområdet her.

Bedste fremgangsmåder: Visuelt design

Vi starter nu med de etablerede standarder for visuelt design: Hvad er den bedste praksis inden for visuelt design? Og hvilke faktorer er inkluderet?

Genkendelsesfunktion og branding

Hjemmesiden skal matche resten af virksomhedens hjemmeside og bør være baseret på stil guide. Tjek derfor hjemmesiden for følgende spørgsmål:

  • Er det klart ved første øjekast for hvilket selskab hjemmesiden blev oprettet?
  • Er stilguiden blevet integreret?
  • Er de visuelle elementer genkendelige af hjemmesiden operatører?
  • Bruges det visuelle konsekvent?
  • Afspejler det sprog, der bruges på hjemmesiden, branding?

Google er på forkant med konsekvent branding. Med det samme kan jeg ikke tænke på et andet mærke, der har så mange forskellige produkter og alligevel formår at give hvert produkt virksomheden føler. Selv hvis jeg ser på et hidtil ukendt produkt fra Google, kan jeg knytte det direkte til mærket.

Hvordan gør Google dette?

Blandt andet gennem konsekvent brug af Google-farver, typografi, særprægede mellemrum, konsekvent opfordring til handlinger og navigation. Logoerne har også en vis konsistens, der fungerer på tværs af virksomheder og kategorier - selvom sidstnævnte ikke nødvendigvis betyder, at designet også forårsager favoriserer.

Med konsistens i branding analyserer du kun, om webstedet optimalt afspejler virksomheden og dens branding.

Webdesignstandard og brugervenlighed

En anden "bedste praksis" defineres ved at integrere standarder. Dette omfatter f.eks. placering af logoet i øverste venstre hjørne, udseendet af knapper, links osv. Disse hjælper den besøgende på dit websted til at finde vej rundt hurtigt og nemt. Derfor er disse standarder uundværlige i gennemførelsen af en vellykket brugervenlighed.

Andre ressourcer på brugervenlighed:

Hvorfor skal du være særligt interesseret i brugervenlighed og brugeroplevelse som webdesigner? Mere omfattende tilgange til brugervenlighed findes i denne artikel og https://www.usability.gov/.

Hvad definerer en webdesignstandard?

Vi definerer udbredte designstandarder i webdesign ved hjælp af UI Design Patterns. Andy Crestodina forklarer, hvordan standarder er defineret i hans artikel om webdesign standarder.

Det betyder, at der skal bruges en designtilgang på mindst 80 procent af webstederne for at tælle som standard. Alt andet er enten en vane (50-79 procent) eller endda bringer inkonsekvens og forvirring (0-49 procent) til dit websted.

Harmonisk design: den tredje regel

Jeg har allerede rapporteret om emnet harmonisk webdesign.  Jeg vil gerne denne gang gå lidt mere i detaljer med den tredje regel.

Dette har været brugt i flere hundrede år - primært inden for kunst og senere i fotografering. Her, som vist på tegningen, er designet opdelt i 9 kasser af samme størrelse:

Interaktionsdesign
Kilde: interaktion-design

Når du opretter websteder, hjælper den tredje regel dig også med at placere de vigtigste oplysninger på en sådan måde, at den besøgende kan opfatte det direkte. 

Kort sagt, en visuel bør ikke besætte mere end tre kasser og være i en tredjedel af layoutet. Noderne er også særligt velegnede til at placere vigtige meddelelser og opfordringer til handling.

I Photoshop kan du hurtigt og nemt gennemse og tilpasse layoutene ved hjælp af indstillingen Beskæringsværktøj og Regler for tredjedele. For at illustrere den tredje regel, tog jeg et nærmere kig på Marqeta's hjemmeside:

Bedste fremgangsmåder

Produktet og dets budskab er godt fordelt på tværs af vejkryds. Her kunne designet blive lidt mere effektivt ved at flytte TCL lidt. Men harmonien i designet ville lide noget:

Bedste fremgangsmåder

Den mobile variant viser tydeligt, at meddelelsen fylder den nederste tredjedel af layoutet, mens produktet vises ret centreret. Her kunne vi genoverveje placeringen af TCL.

Såkaldte "heatmaps" hjælper dig også med at finde ud af, hvor besøgende på dit websted hovedsageligt søger og klikker. Crazy Egg-værktøjet tilbyder for eksempel en (fakturerbar) service her.

En anden måde at kontrollere dit design på er den såkaldte Blur-test. Du tager skarpheden fra dit layout (for eksempel ved hjælp af Photoshop og "Gaussian Blur" - 12 procent). Når brugerne ikke længere kan læse indholdet, bliver det hurtigt klart, når de ser webstedet. Denne test er også velegnet til analyse af TCL. Er det stadig genkendeligt som sådan?

Bedste fremgangsmåder i webdesign

Jeg brugte Marqeta hjemmeside igen. Særligt fremtrædende er den rigtige TCL og produktet, efterfulgt af budskabet og endelig logoet og den anden TCL:

Bedste fremgangsmåder i webdesign

Jeg har desarmeret den mobile version endnu mere for at teste, hvad der er tilbage. Her fanger produktet først øjet efterfulgt af TCL og logoet. Du kan udføre denne test med hele siden – helst stadig i designfasen. Her kan du hurtigt og nemt analysere, hvilke elementer i dit design der er fremtrædende, og beslutte, om dette ønskes af dig.

Tekst og SEO

Selvfølgelig omfatter oprettelsen af websteder også skriftligt indhold. Der er professionelle tekstforfattere, der skriver meningsfuldt indhold til dit websted med henblik på SEO, brugervenlighed og stil guide. Der er dog også et par retningslinjer, som du selv kan følge. 

Du bør lægge særlig vægt på teksternes længde og læsbarhed – ofte er teksterne for omfattende og for indlejrede. 

Selvom målgruppen er vant til en bestemt teknisk jargon, skal du altid være opmærksom på, at vores opmærksomhedsspændvidde på et websted er meget mindre end for eksempel ved læsning af tekniske artikler. Vi er snarere ude af visse oplysninger, når vi gennemser websteder. Vi scanner indholdet, så at sige, snarere end rent faktisk tager sig tid til at læse det korrekt.

Der er også minuspoint fra Google, hvis sætningerne på din side er for lange og plus point, når de er forbundet med såkaldte "overgangsord".

Interessante bidrag til SEO er også:

Tilgængelighed

Desværre er Webtilgængelighed stadig et marginalt emne – og ignoreres alt for ofte. Også her er der enkle måder at tænke på, som vi kunne overveje fra det første design. Bruger du f.eks. mest farver til at fremhæve oplysninger? 

Du kan nemt teste dette ved at se på din hjemmeside som en sort og hvid version:

Bedste fremgangsmåder i webdesign

For at gøre dette analyserede jeg det samme websted igen. Selv uden farver kommer budskabet klart frem. TCL øverst til højre kan blive problematisk med hensyn til kontrast.

For at kontrollere dette med sikkerhed er der "Kontrastkontrol". Standardkontrastforholdet er mindst 4,5:1 for normal tekst og 3:1 for stor tekst, f.eks.

Bedste fremgangsmåder i webdesign
Bedste fremgangsmåder i webdesign

Hvis jeg giver de grå toner, TCL er ikke høj kontrast nok, men tilstrækkelig i farven variant.

http://colorsafe.co/ er et andet værktøj til bestemmelse af farver og deres kontrasterende styrke. Her kan du prøve forskellige farvekombinationer direkte. Du får forholdet direkte, og du har mulighed for at vælge skrifttyper med og også til hvilken WCAG-standard du vil justere dit valg.

Brugen af farver til visuel repræsentation af fejlhåndtering kan forårsage problemer. Tag f.eks. Fejl repræsenteres ofte her ved at fremhæve inputboksen i farver. Dette kan medføre, at en person med farvesvaghed undlader at opdage og dermed ikke være i stand til at løse dem. 

Når du planlægger, skal du tage højde for dette og derfor altid sørge for, at der er en anden repræsentation af fejlen. Her finder du mere interessante fakta og ressourcer om tilgængelighed, samt værdifulde tips til at skabe en tilgængelig WP side.

Flere ressourcer

Opløsning og design på tværs af enheder

Der er sandsynligvis ingen regel i webdesign, der er rettet - og ignoreret oftere - end " mobile first ".

Denne tilgang skaber indholdet til mobile enheder og justerer det derefter i overensstemmelse hermed for de større. Det modsatte er at justere designet til desktop og co. og derefter justere det i overensstemmelse hermed for mindre enheder. 

To andre tilgange kommer til at tænke på:

  • Opret dit eget websted for hver mobil- og desktopenhed, og hent det derefter i overensstemmelse hermed.
  • Se webstedet som en desktopversion på din mobiltelefon

Førstnævnte kan være den rigtige tilgang, afhængigt af projektet, men det er ikke særlig udbredt, da det er meget dyrt og tidskrævende. Desværre ses sidstnævnte stadig alt for ofte på nettet og skal derfor hurtigst muligt medtages på listen over "bedste praksis". Flere tips om mobiloptimering kan findes her.

Mobile first Det behøver ikke nødvendigvis altid at være den rigtige måde at gøre dette på: Undersøgelser af målgruppen og deres internetadfærd kan hurtigt vise dig, fra hvilke enheder dit websted hovedsageligt er tilgængeligt. 

Bagtanken her er ikke kun, at indholdet behandles visuelt i overensstemmelse hermed, men frem for alt at der også tages hensyn til de ændrede eksterne forhold. Du kan også læse mere i artiklen Mobile-First UX Design er ikke længere en trend.

Nedenstående tabel illustrerer tydeligt, hvilke skærme der bruges til at få adgang til internettet oftere. Dette kan hjælpe dig med at beslutte, hvilke skærme du vil optimere dine websteder til. Bemærk dog også her, at en sådan generalisering kun kan betragtes som et direktiv. En undersøgelse af dine målgrupper kan heller ikke erstatte disse statistikker.

Bedste fremgangsmåder i webdesign
Kilde: https://www.hobo-web.co.uk/best-screen-size/

Bedste fremgangsmåder for WordPress

WordPress Codex

WordPress tilbyder dig utrolig mange måder at fremvise dine designs på nettet. Men også her er der standarder og bedste praksis at tilpasse sig.

Den WordPress Codex

WordPress indeholder et generelt codex, der kan hjælpe dig med at få mere at vide om emnet.

WordPress Plugins Og Themes

Når du vælger den rigtige Plugins Og Themes fokusere ikke kun på dens nuværende funktionalitet. Det er også et godt sted at læse anmeldelser og sætte dig ind i, hvor ofte der er blevet tilbudt opdateringer, og at undersøge, om Plugin Eller. Theme , vil fortsat blive videreudviklet i fremtiden. WordPress Værktøjer, der udvikles regelmæssigt, understøttes typisk mere aktivt. De er også mere tilbøjelige til at forblive kompatible med fremtidige versioner af din side.

WordPress Opdateringer og sikkerhed

Din Themes Og Plugins reducerer sårbarheden over for uønskede adgange. Fejl løses, og dine websteder er tilpasset det stadigt skiftende tekniske miljø. Sikkerhed Plugins Hvordan WordFence også bidrage til at holde styr på dit websted og dets sikkerhed og til at reagere på problemer i tide. Et SSL-certifikat skal integreres på alle websteder. 

Bedste fremgangsmåder i webdesign: Dine spørgsmål

Hvilke spørgsmål har du til Sonja? Hvilke bedste fremgangsmåder kan du anbefale dig selv? Brug kommentarfunktionen. Vil du have flere tips om webdesign og udvikling? Følg os derefter på Twitter, Facebook eller via vores nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.