Vi rangerer forhandlere baseret på strenge tests og research, tager også højde for din feedback og vores kommercielle aftaler med udbydere. Denne side indeholder affiliate links. Marketings Offentliggørelse
  1. Website Planet
  2. >
  3. Blog
  4. >
  5. Sådan Designer du en Hjemmeside i 2024

Sådan Designer du en Hjemmeside i 2024

Emma Ayres Emma AyresWebsideudviklingsekspert
Tror du du kan klare dig uden en hjemmeside? Tro om igen. Kunder forventer ikke bare at du har en hjemmeside, men de vil også have en brugervenlig hjemmeside med alle de informationer de har brug for, for at kunne træffe en informeret beslutning om et eventuelt køb. Din hjemmeside bærer ansvaret for at give et godt førstehåndsindtryk, så du skal ramme plet.

Men bare rolig – du behøver ikke have et kæmpe budget til en professionel web designer. Selvom det selvfølgelig altid er en mulighed at arbejde med en professionel, så er det ikke nødvendigt i dette tilfælde. Takket være fremkomsten af DIY website builders, har det aldrig været lettere at designe en smuk og glimrende hjemmeside.

Når det er sagt, er web design ikke så nemt som bare at vælge et tema på en website builder, og udfylde et par tekstbokse og klikke “udgiv” når du er færdig. Selvfølgelig gør prædefinerede templates det let at designe din hjemmeside, men der er meget mere du bør overveje før du frigiver din hjemmeside til verdens skue.

Efter at have brugt tusindvis af timer, og arbejdet på hundreder af hjemmesider på tværs af forskellige nicher, har vi lært hvad det kræver at designe en smuk men funktionel hjemmeside. Så læs dig til rette, og lær hvordan du kan gøre det selv, uden hjælp fra dyre professionelle designere.

Definer Dit Mål

Ligesom du også ville gøre det i enhver anden del af din virksomhed, har du brug for at vide præcis, hvorfor du overhovedet laver en hjemmeside til at begynde med.

Når man brækker virksomheds hjemmesider ned i deres mest simple formater, er der tre overordnede typer: porteføljer, online butikker, og hjemmesider til professionelle tjenester. De er alle temmelig selvforklarende, men lad os skære det endnu mere ud.

Wix Food Photographer template
Portefølje hjemmesider fokuserer på hvad der adskiller virksomheden fra dets konkurrenter, uden direkte at sælge et produkt eller en ydelse.
Porteføljer fremviser noget vigtigt omkring dit brand, uden direkte at sælge et produkt eller en tjeneste. Disse kan være simple enkelt siders CV’er, en fotografs online galleri, eller endda en virksomheds hjemmeside der ikke fungerer som en webshop. Typisk går alt på en portefølje hjemmeside ud på, at overbevise brugere om at kontakte eller besøge virksomheden. Disse hjemmesider sælger ikke produkter eller ydelser.

Wix Sportswear Store template
Online butikker fokuserer mere på Opmærksomhed > Overvejelse > Beslutning salgs pipelinen
Online butikker driver brugere hen imod at købe et produkt. Selvfølgelig vil de også gerne beskrive, hvad der adskiller virksomheden, men det er ikke det primære. Det primære fokus er at sikre salget, så de er typisk designet ud fra denne sales funnel. Disse hjemmesider er lidt mere komplekse end portefølje hjemmesiderne, grundet deres webshops natur.

Wix template
Hvor alle tre hjemmeside “typer” bruger lignende layouts, har de hver især et separat fokus
Hjemmesider til professionelle ydelser er designet til at få brugere til at booke disse ydelser. Afhængig af hvilke ydelser der tilbydes, behøver hjemmesiden ikke nødvendigvis kunne håndtere køb, hvilket er grunden til at disse hjemmesider har deres egen kategori. De vil ikke nødvendigvis have e-handels funktionalitet, men måske et bookingsystem i stedet.

Der er selvfølgelig undtagelser til denne “regel”. Eksempelvis vil selvstændige professionelle ofte have en kombination af et portefølje og en professionel ydelses hjemmeside. Nogle online butikker tilbyder måske også professionelle ydelser. Jeg vil egentlig blot illustrere over for dig, at din virksomheds fokusområde vil definere din hjemmesides design.

Top Tip: Bruger ResearchDu bør også overveje, hvad dine brugere gerne vil opnå på din hjemmeside.

Dette kan være så simpelt som at de ønsker at købe et produkt (hvilket gør livet lettere for online butikker!). Dog kan det også være så komplekst som at ville føle sig sikre på at de ydelser de booker, vil være deres tid og penge værd. Når man ved hvad brugeren ønsker at opnå, kan du kortlægge hvilke elementer der skal være i din hjemmesides design senere hen.

Vælg en Platform til Din Hjemmeside

Det er på tide at vælge et nyt hjem til din hjemmeside. Du kan bruge to ruter: Brug en hjemmeside builder, eller host din egen hjemmeside. Hjemmeside builders er glimrende hvis du vil have en alt-i-en, begyndervenlig løsning. Når det er sagt, kan du ikke altid uden problemer migrere din hjemmeside hvis du stopper med at bruge builderens ydelser. Hvis du vil bruge denne metode, så anbefaler jeg disse platforme.

Wix Japanese Restaurant template
Wix’s templates er fuldt konfigurarbare, så vær ikke bange for at vælge én udenfor din normale niche
Hjemmeside Builders har ofte et ry for at tilbyde de samme standard templates, og bare ændre på lidt farver og billeder hist og her, og herefter hævde det er et komplet andet template. Ikke Wix Wix’s 850+ templates er unikke, og giver dig masser af inspiration og et glimrende sted at begynde din branding.

Du får også fuld frihed til at konfigurere hvert template. Hvor andre hjemmeside builders tvinger dig til at snappe ting til et gitter, kan du placere hvert element præcis hvor du vil have det. Dette kommer dog med én ulempe.

Selvom dine templates er mobil-responsive, så betyder den mængde af konfigurerbarhed du får, at nogle ting kan komme til at stå forkert på mobile enheder. Så du vil være nødt til at redigere din hjemmesides mobilversioner separat, for at sikre at alt virker. Dette er dog heldigvis ikke et problem med wix’s intuitive drag-and-drop editor.

wix logo alt 2

Wix koster nu kun $11.00 pr. måned!

Gå ikke glip af det helt fantastiske tilbud!

7334 brugere anvendte denne kupon

Funktioner

  • AI drevet design. Hvis du ikke ved hvor du skal begynde med din branding, så lad Wix hjælpe dig. Fortæl Wix’s Artificial Design Intelligence (ADI) om din virksomhed, mål og hvordan du gerne vil have din hjemmeside til at se ud, og den vil generere et custom (og konfigurerbart!) template til dig på få minutter.
  • Indbygget SEO værktøj. Søgemaskineoptimering (SEO) er en livsnødvendig del af hjemmesidedesign, og det er svært for dine brugere at finde dig uden. Heldigvis simplificerer Wix denne del af dit design, med et indbygget værktøj der giver dig en tjekliste for at optimere enhver side til søgemaskinerne.
  • Prædefinerede indholds layouts. Udover Wix’s hundredvis af templates, tilbyder den også mange prædefinerede layouts. Dette gør det lettere at designe en professionel hjemmeside, uden at kende til avancerede designprincipper.
  • Glimrende gratis abonnement. Wix’s gratis abonnement er temmelig generøst, og det begrænser dig ikke i forhold til konfigurerbarhed eller design funktioner.
Se hvordan du kan designe en glimrende hjemmeside med Wix i vores ekspert anmeldelse.

Templates 870+
Editor på Dansk
Mobile responsivt design
Andre design funktioner
  • Wix ADI
  • Intuitiv drag-and-drop editor
  • Prædefinerede layouts
  • Yderligere funktioner tilgængelig i app store
Startpris $16.00

2. Squarespace: Smukke Prædefinerede Designs

Squarespace Hales template
Squarespace’s mobil-responsive templates følger alle moderne web design principper
At bygge en hjemmeside med Squarespace minder meget om at have en professionel web builder ved din side, og sikrer at hvert element stemmer overens med moderne design principper, og giver dig en exceptionel brugeroplevelse. Du får ikke frit lejde over dit hjemmeside design, men det falder ud til din fordel. Du vil ikke blive overvældet af valg, og vil ikke ende med en hjemmeside der ligner eBay’s hjemmeside fra 90’erne.

For at komme i gang, kan du bruge et prædefineret template, lave dit eget, eller betale en Squarespace designer for at lave ét til dig. Heldigvis er alle 140+ Squarespace templates moderne, mobil-responsive og konfigurerbare. Der er virkelig ingen grund til at betale mere end det standard månedlige abonnement, for at opsætte en fuldt fungerende hjemmeside.

squarespace logo alt 2 1 1

Spar op til $30.00 på dit abonnement hos SquareSpace i dag!

Få et gratis domæne i et år oveni hatten!

1088 brugere anvendte denne kupon

Funktioner

  • Masser af integrationer. Udover de indholds blokke der er præ-indlæst i drag-and-drop builderen, tilbyder Squarespace mange flere der kan passe til flere forskellige niche krav. Disse inkluderer blokke til bordreservationer, turné datoer, lydfiler, interaktive Google Maps blokke, og mere.
  • Stock foto bibliotek. Spar tid under designprocessen ved at gennemse stock fotos direkte i Squarespace editoren. Du kan endda købe premium billeder uden at forlade app’en.
  • Glimrende support. Udover Squarespace’s hjælpsomme og responsive team der er tilgængelig både via e-mail og live-chat, vil du også have adgang til et community forum. Det er en glimrende kilde til designinspiration, og til at få feedback fra andre designere.
  • Gratis logo designer. Squarespace’s logo designer er relativt simpel, men når man husker på at det er et gratis værktøj, er det temmelig effektivt. Det er bestemt brugbart, hvis du har et lavt branding budget.
Læs vores dybdegående Squarespace anmeldelse for at se dets andre fantastiske funktioner.

Templates 140+
Mobil-responsive designs
Andre design funktioner
  • Nichespecifikke indholds blokke
  • Custom templates Squarespace designere
  • Gratis logo designer
  • Andre funktioner tilgængelig i app store
Starting Price $16.00

3. SITE123: Designs til Begyndere Uden Problemer

SITE123 INFINITEA template
SITE123’s templates er designet til virksomheder der ønsker et minimalistisk hjemmeside design uden tingeltangel
Hvis du er tilbøjelig til at lide af analyse lammelse (bare rolig, det er jeg også), så bør du tjekke SITE123. SITE123’s templates kan måske se skrabede ud, men det er hele pointen. Uden visuelt rod kan du designe en simpel lige-til-sagen hjemmeside, der med et flot design.

Selvom alle templates er konfigurerbare, de bruger det samme overordnede design. Hvis du leder efter et komplet unikt design, så er det nok ikke SITE123 du skal bruge. Dog er det glimrende for folk der er nye til webdesign, som vil lære det basale før de dykker ned i mere avancerede design principper.

site123 logo alt 2

Obtenez $40.00 de RÉDUCTION chez SITE123

Spar $40.00, når du tilmelder dig SITE123s årlige plan

99 brugere anvendte denne kupon

Funktioner

  • Mobil-responsiv. Uanset hvor meget du konfigurerer dit template, ser dit SITE123 design se lige så godt ud på mobilen som det gør på desktop.
  • Tusindvis af apps. Du kan tilslutte præ-definerede integrationer for at udvide din hjemmesides funktionalitet. Fra kalender blokke til ydelsesbaserede virksomheder, til prissammenlignings tabeller, vil du have alt hvad du har brug for, for at kunne optimere dit webdesign til at passe til dine mål.
  • Intuitiv editor. Du behøver ikke være nervøs hvis du er ny når der kommer til hjemmeside design. SITE123’s editor er intuitiv og brugervenlig, og gør det nemt for dig at komme i gang uden tidligere erfaring.
  • 24/7 support. Hjælpen er nær hvis du oplever problemer. Du kan kontakte SITE123 via dets 24/7 live chat, sende en e-mail eller bruge dets glimrende Support Center for at få gode råd.
Læs vores omfattende SITE123 anmeldelse for mere information.

Templates 270+
Mobile-responsive design
Other design features
  • Niche-specific content blocks
  • Additional features available in the app store
Starting Price $12.80

4. Shopify: Moderne Designs Optimeret til Salg

Shopify Shapes template
Shopify’s betalte temaer er ikke billige, men de er smukke
Shopify er det ideelle valg til online butikker og serviceudbydere. Udover at tilbyde de fleste e-commerce funktioner, der kan understøtte disse virksomheder, vil dets konfigurerings muligheder lade dig bygge en (næsten) komplet unik online butik. Jeg siger næsten, for selvom din hjemmeside konfigurerbarhed er lige så god som de andre muligheder på listen her, så er dine produktsider fastsat af dit tema.

Og når vi taler om temaer, så har du masser af muligheder med Shopify. Der er over 120, men kun 12 af dem er gratis. Hvis der ikke er nogle af dem der fungerer for dig, kan du også importere én af de tusinder af Shopify temaer der er tilgængelige online. Derudover giver Shopify dig gratis adgang til din hjemmesides kildekode, så du kan endda tilføje din egen kode for at opbygge din forretnings tema til dine præferencer.

shopify logo alt 1

Spar op til $25.00 på dit Shopify-abonnement!

Tidsbegrænset tilbud - gå ikke glip!

315 brugere anvendte denne kupon

Funktioner

  • Mobil-responsiv. Udover at ethvert Shopify hjemmeside design er mobilvenligt, kan du redigere din sides design på din mobile enhed. Du kan sikre dig at dit design ser ud præcis som du ønsker på mindre skærme.
  • 3D produkter. Giv dine besøgende et grundigt blik på dine produkter, takket være Shopify’s understøttelse af 3D produkt modeller.
  • Tusindvis af apps. Tilføj specialbyggede gallerier, anmeldelses bokse, søgebjælker og mere til din hjemmeside, med dusinvis af muligheder for design funktioner, ned til de simple som “køb knapper”, vil du med garanti finde den perfekte løsning til din virksomhed.
  • Quickstart tjekliste. Hvis dette er første gang du designer en hjemmeside, vil Shopify guide dig med en tjekliste skræddersyet til din virksomheds mål.
Se hvordan du kan bygge en flot online forretning i vores ekspert Shopify anmeldelse.

Templates 120+
Editor på dansk
Mobil-responsiv design
Other design features
  • 3D produkt modeller
  • Branchespecifikke indholdsblokke
  • Yderligere funktioner tilgængelig i app store
Support på dansk
  • Hjælpecenter
  • E-mail
Starting Price $29.00

Top Tip: Hjemmeside Builders

Mens de fire muligheder jeg har nævnt ovenfor, efter vores mening er de bedste hjemmeside builders markedet har at byde på, er der mange flere muligheder hvis du ikke bryder dig om de ovenstående, kan du tjekke vores liste over top 10 hjemmeside builders i 2024. Vi opdaterer denne jævnligt, så du kan med garanti finde en mulighed dér, der passer til din virksomhed.

WordPress Er Et Glimrende Alternativ

Hjemmeside builders er ikke din eneste mulighed. At hoste din hjemmeside selv, er et godt alternativ fordi det giver dig mere fleksibilitet i forhold til design og performance. Dog er dette ikke en løsning jeg vil anbefale for begyndere, da det kræver lidt mere teknisk viden at få sat tingene op. Vores komplette guide til at hoste din hjemmeside selv, kan hjælpe dig med at forstå om dette er den bedste løsning til dig.

WordPress er min bedste anbefaling til selv-hostede hjemmesider. Det er et open-source content management system (CMS) der bruges på 43% af alle hjemmesider, hvilket gør det til én af de mest populære platforme. Da det er så populær en hjemmeside løsning, tilbyder den over 20.000 temaer, og yderligere tusindvis er tilgængelige via tredjeparts tema biblioteker. Herudover kan editoren vises på dansk. Du har også fuld adgang til din hjemmesides kildekode, så du kan justere det du har brug for.

Selvom WordPress i sig selv er gratis, skal du betale for hosting. Heldigvis er hosting ikke så dyrt som du måske tror. Vores mest anbefalede hosting udbyder, Hostinger, starter på en meget lav pris per måned for 100 GB lagerplads og ubegrænset båndbredde på op til 100 WordPress hjemmesider. Du får også et gratis domænenavn i et år, og et SSL certifikat i hele din abonnementsperiode.

Top Tip: SSL Certifikater

Et SSL certifikat er en digital signatur der fortæller en web browser, at din hjemmeside bruger Secure Socket Layer protokollen til at kryptere data mellem en webserver og din browser. Din hjemmeside skal have et gyldigt SSL certifikat. Det forhindrer et dyrt databrud og beskytter dit navn og rygte. Heldigvis tilbyder de fleste hjemmeside builders og hosting udbydere et gratis SSL certifikat, da det er en del af industri standarden.

Skab Sider til Din Hjemmeside

Hvis du har besluttet dig for at multi-page layout til din hjemmeside, skal du tilføje nogle standard sider som brugere forventer at se. Det betyder ikke at onepagere ikke skal indeholde de samme informationer som disse sider indeholder, de vil bare gøre det på en anden måde. Lad os se hvordan disse sider virker, i et eksempel fra Wix’s template bibliotek.

Hjemmeside

Din startside er uden tvivl den vigtigste side på din hjemmeside. Når alt kommer til alt, får du kun én chance for at lave et godt førstehåndsindtryk, og det er din startsides job.

Copy of Copy for Translation_ How To Design a Website __IMAGES__
Din startside bør udelukkende fokusere på hvad din virksomhed tilbyder

Denne side behøver som sådan ikke indeholde nogle specifikke informationer, men bør vise dit logo og firmanavn. De bedste startside designs fortæller brugeren præcis hvad virksomheden gør over folden (eller før brugere skal scrolle ned). Du kan også inkludere korte elementer under dette, som eksempelvis kundeudtalelser, et link til dit galleri eller en kort tekst omkring hvem du er. Nøglen er at holde alle informationer på din startside korte og præcise.

Om

Din Om side er hvor du beskriver din forretning og hvad der adskiller dig fra dine konkurrenter. Det er en mulighed for dig at kunne gå mere i detaljer omkring hvorfor du gør hvad du gør, så du kan gøre dit brand mere menneskeligt, og connecte med dine besøgende.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (1)
Din Om side behøver ikke være lang, men den skal beskrive dit “hvorfor” overfor brugerne
En Om side opbygger tillid. Den sikrer dine besøgende at der er et menneske (eller flere!) bag brandet, og at du ikke bare er endnu en ansigtsløs enhed. Afhængig af din branche og industri, vil dette sandsynligvis være den første side de besøgende besøger fra din landingsside.

Kontakt

Slutteligt bør du tilbyde brugerne en måde de kan kontakte dig på. Din Kontakt side bør være fokuseret på udelukkende at give brugerne en måde at kontakte dig. Inkluder ikke virksomhedsinformationer her, medmindre det er ting som en anslået svartid, åbningstider eller et link til din FAQ.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (2)
Din Kontakt side bør være fri fra enhver form for irrelevant virksomheds information
Som minimum bør du tilbyde en sikker kontaktformular. Disse kan konfigureres til dine krav, og du kan vælge obligatoriske felter, hvilket betyder at kunder kun kan indsende formularen når de har givet alle de oplysninger du har brug for, for at kunne besvare deres spørgsmål.

Valgfri Sider

Din virksomhed har sandsynligvis brug for flere sider udover disse. Eksempel-hjemmesiden ovenfor har sider til foredragsholdernes online kurser, foredrags pakker, andre oplevelser, en blog og et brugerområde. Online forretninger vil have et produktkatalog med individuelle produktsider, hvor portefølje hjemmesider vil have et galleri, eller en side der nævner virksomhedens tidligere arbejde.

Der er ingen grænser for de sider du kan tilføje til din hjemmeside, og jeg kan ikke give dig én fastlagt måde hvorpå du kan finde det endelige mål. Jeg anbefaler at du kigger på dine konkurrenters hjemmesider, for at se deres sider og hvilke informationer de tilbyder.

Top Tip: Flad Menu

Et vigtigt design princip at huske på, er en flad navigation. Det betyder at alle sider på din hjemmeside kan nås på under tre klik fra din startside. Jo færre klik brugerne skal bruge på at komme et sted hen, jo hurtigere kan de finde de informationer de leder efter. Hvis du har brug for mange sider, kan det være umagen værd at tilføje elementer som søgebjælker eller dropdown menuer, til at hjælpe brugerne med at navigere rundt på din hjemmeside.

Design Individuelle Hjemmeside Elementer

Okay, lad os komme i gang. Det er på tide at vi rent faktisk gør brug af det branding dokument, og alt hvad vi har lært indtil videre. Så her er nogle vigtige elementer du skal kende til, og hvordan du optimerer deres design.

Header og Footer

Din header og footer er, som du måske havde regnet ud, de stykker i toppen og bunden af hver side. Hvor disse elementer måske ser simple ud, bør du ikke lade dette snyde dig. Brugere forventer, at din header og footer ser ud på en bestemt måde. Du kan være mere eventyrlysten med dit design andre steder, men det er bedst at holde dig til standarden her.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (3)
Hvis du bruger Wix’s gratis abonnement (som jeg gør), vil din footer vise at det er Wix der har lavet din hjemmeside
På samme måde bør din header og footer være nogle af de mest simple elementer på din hjemmeside. Besøgende vil ikke have fancy grafik eller tingeltangel; de vil finde de sider de leder efter, med minimalt besvær. 88% af brugere vil ikke vende tilbage til en hjemmeside, efter bare én dårlig oplevelse, så tag ikke nogle chancer her.

Med det i mente, så lad os fokusere på din hjemmesides menu.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (4)
Når jeg siger “unødvendige,” så mener jeg sider som dine brugere ikke leder efter lige med det samme
Når du sætter din menu op, så tænk på Marie Kondo. Udover at brugerne forventer en række sider i din menu, så ønsker de heller ikke at se alle undersider på din hjemmeside dér. Brug undermenuer (såsom dropdown menuer) til at gruppere dine sider, og få alt til at se ordentligt ud.

Scroll Effekter og Bevægelse

Dette er en form for en slags “enten elsker du det, eller også hader du hjemmesider med disse designelementer”, men bær lige over med mig. Når de bruges sparsomt, kan animerede elementer fungere virkelig godt, men de kan også give tilgængelighedsproblemer. Jeg uddyber dette lige om lidt.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (5)
Scroll effekter er ikke tilgængelige på alle indholds blokke, men du vil alligevel ikke overstimulere dine brugere
Den mest populære scroll effekt til moderne hjemmesider, hedder parallax scrolling. Med denne animation scroller baggrunden på din hjemmeside langsommere end forgrunds teksten, hvilket giver dybde til indholdsblokken. Det er en god måde at skabe opmærksomhed om din tekst, og tilføje lidt visuel flair til din hjemmeside. Når det er sagt, er det ikke altid den bedste måde at tilføje bevægelse til din hjemmeside. Du kunne også bruge video, korte loopende animationer, eller endda mere komplekse scroll effekter, afhængig af hvad du forsøger at opnå.

Tekst, Billeder og Lyd

Disse tre ting vil udgøre størstedelen af din hjemmesides indhold. I de fleste tilfælde vil det ikke være nødvendigt at bruge lyd, men jeg har taget det med her, da det er livsnødvendigt for nogle virksomheder. Bare sørg for at der ikke er noget lyd der er sat til automatisk afspilning, okay? Enhver millennial kender til skrækscenariet med auto-afspillende lyd, så hvis du vil have os til at blive på din hjemmeside, så hold den lyd låst inde bag en play knap.

Copy of Copy for Translation_ How To Design a Website __IMAGES__ (6)
Præ-genererede tekst ideer er glimrende, men husk at redigere dem så de passer til dit brand!
For at holde en god balance, så undgå omfattende tekst, fordi for meget af det kan overvælde og forvirre brugerne. Prøv i stedet at supplere teksterne med billeder og masser af white space. Det er dermed ikke sagt at du ikke kan præsentere større blokke af tekst, på informations-tunge sider, men du skal brække disse op, så besøgende føler de får plads til at trække vejret.

Top Tip: Loading Hastigheder

Ifølge Google, så stiger chancen for at en bruger bouncer (eller forlader din hjemmeside) til 32% hvis din loading hastighed stiger fra ét til tre sekunder. Jo længere din hjemmeside er om at blive loadet, jo færre besøgende vil der være tilbage til at se hvad din virksomhed handler om. Vær opmærksom på den mængde indhold du tilføjer til hver side, da det direkte påvirker loading hastigheden.

Overvej Tilgængeligheden Nøje

På dette tidspunkt kribler det nok i fingrene efter at få sat din hjemmeside op, og begynde at lege med farvepaletter, men bliv lige hos mig et kort øjeblik før du stikker af. Ét af de vigtigste designprincipper du skal følge, er tilgængelighed, som vil påvirke dit overordnede design.

Web Content Accessibility Guidelines (WCAG) er et internationalt initiativ ledet af World Wide Web Consortium (W3C). Det er et frivilligt (men nødvendigt) sæt af guidelines, der gør hjemmesider mere tilgængelige for handicappede brugere, som måske er nødt til at bruge assisterende teknologier til at browse på nettet.

Vi har ikke tid til at gennemgå alle WCAG 2 (den seneste version af disse guidelines), så jeg giver dig bare det vigtigste.

Alt Tekster, Undertekster og Transskriberinger

Når du uploader et billede til din hjemmeside, bør du gå ud fra at ikke alle brugere kan se hvad billedet viser. Alt text er en beskrivelse som skærmlæsere bruger til at fortælle brugere hvad der sker på et billede.

How to add alt text on Wix
Google bruger også alt tekster til at crawle din hjemmeside, så du bør også tilføje alt tekster i henhold til SEO
På samme måde er du nødt til at transskribere videoer og lyd til døve og hørehæmmede brugere. Videoer uden tale bør have en beskrivende transskription (lidt ligesom alt tekster).

Farve Kontrast

Visuelt hæmmede brugere kan have svært ved at skelne mellem farver. Det betyder at hvis der ikke er nok kontrast mellem din tekst og din baggrund, så vil nogle brugere ikke kunne se meget på din hjemmeside.

Adjusting color contrast on Wix
Tekst bør have så høj en kontrast som muligt, så det kan læses af alle
Heldigvis er Wix’s tilgængeligheds guide bygget med WCAG 2 guidelines i tankerne. Når du kører tilgængeligheds guiden, fortæller den dig hvor din farvekontrast skal forbedres.

Reducer Bevægelse

Animationer og scroll effekter kan gøre nogle brugere ubekvemme, specielt hvis de lider af svimmelhed eller transportsyge. Så ja, jeg ved godt jeg tidligere sagde at scroll effekter som parallax scrolling er populære, men husk alligevel at det ikke er et anbefalet design i henhold til tilgængelighed.

For at gøre din hjemmeside fuldt tilgængelig, anbefaler jeg at du undgår parallax scrolling, og bruger så få animationer og bevægelige funktioner som muligt. Hvis du vil tilføje lidt bevægelse, så er den bedste mulighed i henhold til tilgængelighed, at tilføje en video der kræver at brugeren klikker på den før den afspilles.

DOM

Document Object Model (DOM) dikterer den rækkefølge, hvori skærmlæsere og “tabbing” (hvor du bruger tab knappen til at navigere) vil bevæge sig igennem elementer. De fleste hjemmeside builders sætter automatisk DOM rækkefølgen på din hjemmeside, men det er værd at tjekke om den passer, før du trykker på “offentliggør” knappen.

Top Tip: Tilgængeligheds Apps og Ydelser

WCAG 2 er et kæmpe dokument. Og hvor der findes gratis tilgængeligheds tjek værktøjer, så tilbyder en tilgængeligheds app eller ydelse løbende rapporter, for at sikre at du ikke går glip af nogle nye ændringer. Vores største anbefaling er accessiBe, da dets AI-drevne app scanner efter tilgængelighedsproblemer, selv når du er ved at lægge sidste hånd på dit design.

Optimér til Mobilbrugere

Halvdelen af al internettrafik kommer fra mobile brugere. Det er derfor din hjemmeside skal se lige så godt ud på mobile enheder, som på din browser. Men du kan dog ikke gå ud fra at alle brugere vil besøge din hjemmeside fra en enhed med den samme skærmstørrelse. Din hjemmeside skal være responsiv (altså tilpasse sig automatisk til forskellige enheder).

Wix websites on different devices
Brug din browsers developer værktøjer for at få et glimt af din hjemmeside på forskellige enheder
De fleste hjemmeside builders har mobil responsivitet indbygget i deres standard design og templates. Nogle, ligesom Wix, kræver at du redigerer mobilversionen af din hjemmeside separat. På den anden side, ændrer Squarespace automatisk indholdets størrelse når nogen bruger deres smartphone eller tablet til at besøge din hjemmeside.

Det er ikke helt lige så simpelt, hvis du selv vil hoste din side. Selvom WordPress har mange responsive temaer, skal du være opmærksom på specialbyggede elementer. Hvis du inkluderer mere end et par stykker, bør du også tilføje CSS media queries (kode der tilfører designregler ud fra skærmstørrelse) for at få dem til at virke på mobile enheder.

Top Tip: Ansæt Web DesignereHvis

du selv vil hoste din hjemmeside, anbefaler jeg at ansætte en webdesigner for at sikre at din hjemmeside er fuldt mobil responsiv. Jeg ved det ikke er den mest budgetvenlige mulighed, men når man tænker på hvor mange brugere der vil besøge din side på en mobil enhed, så er det den ekstra pris værd for at sikre at de får en god oplevelse. Når det er sagt, så behøver det at hyre en freelance webdesigner ikke æde hele dit budget op. Tjek vores top 7 freelance hjemmesider i 2024 der tilbyder god værdi for pengene.

Offentliggør Din Hjemmeside Og Hold Den Opdateret!

Når du er tilfreds med dit design, er det på tide at klikke Offentliggør. Hurra!

Det betyder ikke at du kan tjekke din hjemmeside af din to-do-liste. Du skal holde din hjemmeside opdateret, og lytte til brugernes feedback. At have en hjemmeside er en løbende cyklus der aldrig ender.

At holde din hjemmeside frisk og spændende, er ikke bare den bedste måde at holde dine kunder engagerede på, det viser også søgemaskiner at din hjemmeside ikke er blevet forladt. Og ligesom ejerne af det lokale shoppingcenter, så er søgemaskinerne mere tilbøjelige til at fremvise butiksvinduer, der ser ud som om de i det mindste er blevet støvet af en gang imellem.

Top Tip: Hold Din Hjemmeside Opdateret

Én af de bedste måder at holde din hjemmeside frisk (og forbedre dine marketing indsatser samtidig!) er at køre din egen blog. Content marketing er et kraftfuldt men underudnyttet værktøj til at holde besøgende engageret, give nye informationer og forbedre salg. Herudover er det en god måde at vise dine kreative muskler på, og vise de dele af virksomheden der inspirerer dig. Stol på mig!

Design en Moderne Hjemmeside i 2024

At designe din egen hjemmeside er ikke så svært som du måske tror. Der er meget at tænke på, når man taler om branding guidelines, designprincipper og tilgængelighed. Men det er ikke dermed sagt at det er en umulig opgave. Takket være moderne hjemmeside-builders som Wix, der tilbyder prædefinerede moderne og mobil responsive temaer, behøver du ikke længere bruge hele dit budget på en webdesigner, for at få en smuk hjemmeside.

Når det er sagt, så betyder det ikke at det ikke er værd at overveje at hyre en web designer, bare fordi du ikke er tvunget til det. Hvis du vil hoste din hjemmeside selv, får du sandsynligvis brug for en professionel. Og hvis du ikke har nogen erfaring med design principper, som mobil responsivt og tilgængeligt design, så er det at hyre en freelance designer, en investering der vil give dig renters rente på længere sigt.

FAQ

Hvordan kan jeg designe min egen hjemmeside?

Den bedste måde at designe din egen hjemmeside, er ved at bruge en hjemmeside builder, eller hoste selv med WordPress. Begge muligheder vil hjælpe dig med at komme i gang med moderne, mobil-responsive templates. Hjemmeside builders er glimrende til begyndere, men hvis du har noget kode erfaring (eller bare vil have mere kontrol over din hjemmeside), så overvej selv at hoste din hjemmeside.

Hvad koster det at lave en hjemmeside?

Du kan begynde at designe din hjemmeside gratis! Wix tilbyder et glimrende abonnement der er gratis for evigt, der giver dig adgang til dets konfigurerings værktøjer. Hvis du hellere vil hoste selv, er WordPress i sig selv gratis. Du skal betale for hosting, men vores anbefalede hosting udbyder, Hostinger har en meget lav pris per måned, med en glimrende pengene-tilbage garanti hvis du ændrer mening.

Hvad er de 3 principper i et godt web design?

En godt designet hjemmeside skal være hurtig, responsiv, og tilgængelig. Hvis en side er for langsom til at loade, ikke virker ordentligt på mobile enheder, eller handicappede brugere ikke kan bruge den, vil brugerne forlade din hjemmeside.

Hvordan bør jeg organisere min hjemmeside?

En god hovedregel er at gøre så brugere kan tilgå alle sider, med maks tre klik fra din startside. Hvis du har mange sider på sin hjemmeside (som online butikker ofte har), så brug dropdown menuer og søgebjælker til at gøre din hjemmeside lettere at navigere i.

Bedøm denne artikel
4.7 Brugere som har 3 stemt
Du har allerede stemt! Fortryd
Dette felt skal udfyldes Maximal length of comment is equal 80000 chars Minimumslængde for kommentar er 10 tegn
Nogle kommentarer?
Svar
Se %s besvarelser
View %s reply
Relaterede indlæg
Vis flere relaterede indlæg
Vi gennemser alle brugerkommentarer inden for 48 timer for at sikre, at de er skrevet at rigtige mennesker som dig. Vi er glade for, at du fandt indlægget brugbart - og ville sætte pris på det, hvis du ville dele det med flere.
Popup final window
Del denne blog post med venner og kollegaer med det samme:

We check all comments within 48 hours to make sure they're from real users like you. In the meantime, you can share your comment with others to let more people know what you think.

En gang om måneden får du tilsendt interessante og indsigtsfulde tips, tricks og råd til at forbedre din hjemmesides præstation og dermed nå dine mål for digital marketing!

Så glad for, at du kunne lide det!

Del med dine venner!

eller anmeld os på

3108990
50
5000
64933911