Hvad forårsager det store uoverensstemmelse mellem hvad nogle WordPress-udviklere opkræver i forhold til andre? Besvarelse af dette spørgsmål kræver overvejelse om grunden til, hvorfor du ønsker et websted i første omgang.

Nogle udviklere fokuserer på det bogstavelige slutprodukt: kombinationen af kode, der resulterer i et behageligt nok webdesign.

Men udviklere med kyndige marketing beskæftiger sig med mere end bare at bygge noget, der ser pænt ud. De fungerer som konsulenter for kunder, der søger at nå specifikke mål med deres websteder.

Webdesign er strengt forbundet med dine forretningsmæssige mål

Webdesign er strengt forbundet med dine forretningsmæssige mål

Med dette i tankerne er det et rødt flag at ansætte nogen til at oprette et websted, der ikke synes at være interesseret i / ikke stille spørgsmål til dine slutmål. Det er vigtigt at kalde det faktum, at selv det smukkeste webdesign muligvis ikke er ideelt, når det kommer til at få besøgende til at konvertere til kunder.

Når det er sagt, bedømmer 94% af mennesker din troværdighed baseret på dit websteds design.

Så i stedet skal du fokusere på at bruge dit design for at tilbyde den ideelle brugeroplevelse. Du skal gøre det let for besøgende at finde de oplysninger, de søgte ved at besøge dit websted i første omgang, mens du leder dem mod målkonverterings-aktiviteter.

Disse bedste praksis for webdesign fokuserer på skæringspunktet mellem at oprette et smukt websted og et, der tjener din virksomhed.

Hvad definerer webdesigns bedste praksis?

For at være sikker, har alle og deres mor meninger om, hvad der udgør et godt designet websted.

Webdesign handler ikke kun om æstetik. Det er en meget mere kompliceret verden, hvor UX, tilgængelighed og forretningsmæssige mål alle skal forbinde. Se disse bedste praksis for webdesign! ✍️🔝Click to Tweet

Men lad os holde igen med alles mening, ved at udsætte os for eksperternes.

I henhold til Orbit Media kan du gruppere bedste design af webdesign i disse tre grundlæggende kategorier af standarder:

Lad os se på, hvordan vi udvikler webdesign praksis baseret på hver af disse standarder:

Brand standarder

Websteder, der mangler ensartet branding, kan være stressende at interagere med og forårsage forvirring. Som sådan burde det ikke komme som nogen overraskelse, at ca. 38% af besøgende har sagt, at de vil stoppe med at engagere med et websted, hvis indholdet eller layoutet ikke er attraktivt.

Husk på, at udseende ikke er alt, her er nogle grundlæggende designprincipper, du skal overveje til at oprette et websted, som folk vil bruge:

Balance

Balance er designprincippet, der foreskriver, hvordan man effektivt distribuerer visuelle elementer. Generelt ser et afbalanceret design rent og naturligt ud og har god symmetri (selvom det ikke nødvendigvis er en betingelse for balance).

Du kan integrere balance i webdesign med hensyn til sidelayout.

Centrering af tekst eller andre elementer på tværs af siden er en nem måde at gøre det på. Generelt er websider bygget på et gittersystem, der skaber en form for balance. Du kan bruge CSS float-egenskaben til at placere elementer og balancere dem på tværs af siden.

Balance kan opnås på tre måder:

1. Symmetrisk design

Eksempel på symmetrisk design

Eksempel på symmetrisk design

Arranger elementer på en jævn måde på tværs af websiden. For eksempel, hvis du har et tungt element til venstre, skal du have et tungt element til højre. Som nævnt er centrering den nemmeste måde at opnå symmetri på, men det kan undertiden komme på tværs som fladt eller kedeligt.

For at undgå, at siden ser monoton ud, kan du skabe balance ved hjælp af forskellige elementer, f.eks. at balancere et stort billede med en tekstblok. Der er også en type symmetrisk balance kaldet radial balance, hvor objekter udstråler fra et centralt punkt.

2. Asymmetrisk design

Eksempel på asymmetrisk design

Eksempel på asymmetrisk design

Asymmetrisk design gør det mere udfordrende at gøre det godt, og involverer ujævn fordeling af elementer på en side. For eksempel kan du have et stort element i midten, som er afbalanceret med et mindre et længere væk.

Du kan bruge andre elementer i design, såsom farve eller tekstur, til at afbalancere et asymmetrisk design.

3. Ubalance

Eksempel på design uden balance

Eksempel på design uden balance

Disse typer design antyder bevægelse og handling, som kan gøre folk ubehagelige. Hvis dit websted har til hensigt at få folk til at tænke, er et design uden balance balance for dig.

Sammensætning

Udtrykket sammensætning henviser til placering og organisering af designelementer.

Sammensætning

Sammensætning

Trådens regel bruges ofte til at skabe en afbalanceret komposition, især med fotos.

Afstand

Elementerne skal være jævnt fordelt, så brugerne kan differentiere sektioner eller blokke.

Afstandens rolle i webdesign

Afstandens rolle i webdesign

Du skal også introducere negativt rum eller afstanden mellem- og omkring motivet til et billede. Negativt rum kan reducere visuel støj, øge læsbarheden og skabe balance.

Du kan introducere negativ plads ved at tilføje marginer og polstring omkring dine designelementer.

Fokuspunkt

Vær opmærksom på ét element

Vær opmærksom på ét element

Opret et fokusområde, hvor du vil henlede opmærksomheden. Det skal være den vigtigste del af din side, og ideelt set bør hver side fokusere på kun et større fokuspunkt.

Farve

Farve er et vigtigt designelement, når det kommer til branding. Ideelt set kommer du ind i webdesignprocessen med en forståelse af de farver, du vil tilknytte dit brand.

Til webdesign specifikt hjælper det med at starte med et moodboard for dit brand.

Eksempel på Kinstas farvepalet

Eksempel på Kinstas farvepalet

Vælg en primær og sekundær farve (den sekundære farve kan komplementere eller kontrastere den primære farve), og en lysere og mørkere farvetone for hver. Begræns din brug af farve, så forskellige accenter ikke blir et blikfang.

Adobe Color leverer et fremragende gratis værktøj til at teste forskellige kombinationer af farver for at skabe en arbejdspalette til webstedselementer.

Når der træffes beslutning om farve, er det vigtigt at overveje dem, der er farveblinde, som inkluderer op til 4,5% af verdens befolkning.

Eksempel på, hvordan et almindeligt design ser ud for farveblinde brugere

Eksempel på, hvordan et almindeligt design ser ud for farveblinde brugere

Der er tre typer farveblindhed (total farveblindhed, to-farvesyn og mangelfuld farvesyn), så sørg for, at dit design stadig kan bruges i betragtning af dem, der muligvis ikke er i stand til at differentiere farver.

Kontrast

Når du vælger farve, er det vigtigt at være opmærksom på farveforhold og kontrast.

Farvekontrast henviser til forskellen i lys mellem forgrund og baggrund. Brug af tilstrækkeligt kontrasterende farver gør det let at skelne mellem synligheden af websitet. Generelt skal du bruge farveindstillinger med høj kontrast – som sort tekst på en hvid baggrund – for at gøre dit websted læsbart.

Dårlig kontrast kan være problematisk

Dårlig kontrast kan være problematisk

Kontrastforholdet er den numeriske værdi, der er tildelt forskellen i kontrast mellem sideelementer.

World Content Accessibility Guidelines (WCAG) 2.0 anbefaler et kontrastforhold på 4,5:1 til normal tekst. WebAIM deler et par forudbestemte kombinationer, der passer til det ideelle kontrastforhold for at hjælpe dig med at visualisere denne webdesigns bedste praksis.

For at hjælpe med at navigere ved hjælp af dette forhold skal du sørge for, at når du designer dit websted, du forestiller dig alle målgrupper (inklusive dem med tilgængelighedsproblemer). Det er lettere at gøre dette kontra planlægning af disse problemer efter det faktum.

Overvej alle aspekter af webstedet, som folk vil interagere med, herunder headers, footers, menuer – som alle skal være synlige for at være brugbare.

Nogle værktøjer, du kan bruge til at kontrollere forholdene mellem farvekontrast inkluderer:

Typografi

Site typografi er en anden vigtig overvejelse til branding.

Selvom der er mange forskellige kilder til at finde mulige skrifttyper, der skal bruges på dit websted, vil du først overveje de muligheder, der vises konsekvent uanset hvilke skrifttyper slutbrugeren har installeret på deres computer.

Google Fonts tilbyder en lang række gratis, websikre fonte, som du kan stole på for at det vises korrekt, uanset brugerens installerede skrifttyper / programmer. Sørg for at medtage skrifttyper i dit moodboard for at se, om de matcher din farve æstetiske.

Hvis du har problemer med at komme med kombinationer, kan Google Fonts foreslå populære parringer. Du kan også bruge et websted som FontPair til at få forslag.

Forsøg at begrænse den font vægt, du bruger, da det at skulle indlæse for mange filer kan bidrage til langsom sidehastighed. På den note skal du overveje at hoste Google Fonts lokalt for at introducere yderligere ydelsesfordele.

Dårlig typografi vs ideel typografi

Dårlig typografi vs ideel typografi

Brug sans-serif fonts til headings og serif-skrifttyper til indhold, når det kommer til valg af typografiske elementer baseret på bedste praksis for webdesign. Brug som minimum ikke dekorative skrifttyper til body content, da det vil være vanskeligt at læse.

Bliv ikke fristet til at bruge en lang række forskellige skrifttyper på dit websted. En god tommelfingerregel er at bruge en skrifttype til dit logo, en anden til dine menuer / overskrifter og en mere til body content. På den note skal du prøve at parre skrifttyper, der supplerer hinanden, f.eks. dem fra den samme font-familie.

Element hierarki

Hierarki henviser til arrangementet af designelementer, der viser relativ betydning. Dette opnås ved at manipulere elementer som visuel kontrast, størrelse og placeringer for at skabe opmærksomhed.

Eksempel på element hierarki

Eksempel på element hierarki

For eksempel skal indholdet opdeles i logiske blokke, så brugerne kan skelne sektioner fra hinanden.

Du kan gøre dette ved hjælp af content headers, som ikke kun gør det nemt for brugerne at springe til de dele, de vil læse, men også dele store mængder tekst i læsbare bunker, så skærmlæsere er i stand til at bestemme konteksten af hvert afsnit.

Hvis du leder efter nogle nyttige visuelle illustrationer af disse designkoncepter og mere, dækker bloggen Tilda Publishing nogle af de mest almindelige fejl i webdesign, og hvordan de løses.

Web Bedste design / formatering praksis

Ifølge undersøgelser fra Orbit Media er der nogle almindelige webdesign standarder, der er observeret på de top 50 marketing websteder.

Webdesign standarder

Webdesign standarder

Med ‘standarder’ mener de, at 80% af webstederne bruger en lignende designtilgang:

Her er nogle af de bedste praksis for webdesign til almindelige websteds elementer:

Billeder

Webdesign bedste praksis til brug af billeder kunne inspirere til mange mængder rådgivning, men lad os fokusere på det blotte minimum i denne diskussion af bedste design til webdesign:

Webstedsnavigation

Brugere forventer at være i stand til let at finde det indhold, de søger på et websted. Derfor er det vigtigt, at websteds navigation er enkel og ligetil.

Websteds navigation er et generelt udtryk, der refererer til den interne linkarkitektur på et websted. Glem ikke, at hovedformålet med navigationen er at hjælpe brugerne med let at finde relevant indhold på dit websted.

Dit websteds interne linkarkitektur danner grundlaget for dit sitemap, som hjælper søgemaskiner med at få adgang til dit indhold lettere. Det har vist sig, at det at have et veldesignet websted, hvor indhold er let at finde, påvirker den webstedstrafik, du får fra søgemaskiner (sammen med en større chance for at få Google sitelinks).

Menu Navigation

Der er flere aspekter, der udgør navigation på websitet, men din øverste / primær menu skal være et primært fokus, da det vil være en af ​​de første ting, som brugerne interagerer med, når de besøger dit websted.

Der er forskellige webstedsmenu design-heuristikk, men de mest populære inkluderer:

Navigationsmenu

Det er ideelt placeret foran og midt på et websted. Dette kan involvere brug af en dropdown-menu, hvis der er flere kategorier. Men dropdown-menuer anbefales ikke, især når det kommer til teknisk SEO (de er sværere at gennemgå). Derudover har det vist sig, at de fleste mennesker ikke kan lide dropdown-menuer.

Dette skyldes, at det menneskelige øje fungerer hurtigere end hånden, og derfor synes folk det er irriterende, når de allerede har besluttet, hvad de skal klikke på, og noget andet falder ned – hvilket kan føre til et fald i besøg på sider.

Hamburger menu

Primært brugt til et mobiloptimeret design er en hamburgermenu normalt placeret øverst til venstre eller højre på siden. Det vises som en firkant med tre linjer, der kan udvides med et klik. Imidlertid foragter mange designere hamburgermenuen, der har inspireret webudviklere til at overveje nye måder at gøre mobilweb navigation sjov og funktionel.

Træt af at opleve problemer med dit WordPress site? Få den bedste og hurtigste hostingsupport med Kinsta! Check vores planer

Her er et par tip til design af navigation baseret på bedste design til webdesign:

For et mere praktisk format er her en praktisk infographic:

Webdesign bedste praksis til menunavigation

Webdesign bedste praksis til menunavigation

Kodningsstandarder

Med så mange websteder, der er oprettet og forbrugt globalt, er der bestemt behov for et standardiseret sæt kodningsprincipper. Nogle aspekter af disse webstandarder inkluderer:

SEO

SEO kan bruges til at øge antallet af besøgende på dit websted organisk (uden brug af annoncer). Da det er for kompliceret at tilstrækkelig grave ned i SEO i et lille underafsnit af en artikel, kan du se vores SEO-tjekliste og vores tip til de bedste SEO-plugins til WordPress for at gøre dig bekendt med dette aspekt af bedste design til webdesign.

Bemærk, at følgende kodning standards tips fungerer hånd i hånd med SEO.

Responsivt til mobil

Responsivt design handler om at skabe en god brugeroplevelse, uanset hvilken enhed eller browser der bruges til at få adgang til dit websted.

Det er i dag vigtigere end nogensinde at designe dit websted, så det kan reagere, da mere end 60% af internetbrugerne får adgang til internettet via deres mobiltelefoner, og halvdelen af ​​e-handelstransaktioner udføres via mobile platforme. Derudover prioriterer Googles nye søgealgoritme også mobilvenlige websteder.

Eksempel på responsivt design

Eksempel på responsivt design

At have et responsivt site hjælper ikke kun brugerne med at navigere på dit websted, men bidrager også til øget engagement og konvertering. Brugere anbefaler brands, som de har en positiv, mobil responsivt web oplevelse, og omvendt ville de ikke kun stoppe med at købe fra brands med en dårlig oplevelse med web på mobilen, men vil også aktivt afskrække andre fra at gøre det.

På trods af efterspørgslen efter et responsivt sted har skønsmæssigt 91% af små virksomheder ikke et. De skal – da design af et mobilt responsivt websted bestemt lønner sig. 62% af virksomhederne har rapporteret en stigning i salget efter design af et mobilvenligt websted.

Læs Kinstas ressource om, hvordan du gør dit websted mere mobilvenligt, som indeholder en liste over de bedste WordPress-mobile plugins, der kan downloades, og sørg for at tjekke denne kuraterede liste over de bedste WordPress-temaer, hvor du kan gennemse masser af responsive temaer.

Google tilbyder også nogle tip til, hvordan man designer et responsivt websted.

Website sikkerhed

En anden vigtig kodningspraksis? Oprettelse af sikre programmer og websteder, som brugerne kan stole på med deres følsomme personlige oplysninger. I modsætning til hvad man tror, ​​søger hackere ikke aktivt specifikke websteder, der skal hackes, og derfor er selv små websteder sårbare overfor angreb.

Info

Kinsta tilbyder en sikkerhedsgaranti med hver plan, og i tilfælde af, at der sker noget dårligt, vil sikkerhedsspecialister rette dit websted.

Som helhed er WordPress generelt sikkert, men det hjælper med at tage ekstra forholdsregler for at holde dit websted sikkert mod angreb.

Her er nogle af de bedste sikkerhedsrutiner for websteder:

For mere information om WordPress-sikkerhed, se vores omfattende ressource om, hvordan du holder dit WordPress-sted sikkert.

Sidehastighed

Cirka halvdelen af ​​brugerne forventer, at et websted indlæses på 2 sekunder eller mindre, og hvis det tager længere tid end det, tøver 40% af folk ikke med at hoppe fra siden, (sandsynligvis) for så aldrig at vende tilbage.

Udover webstedbesøg er sidehastighed vigtig, da det også påvirker konvertering og indtægter. For hvert sekund med tilføjet sidehastighed, falder salget med op til 27%. Forøgelse af websted hastigheden kan forhindre tab af 7% af mulige konverteringer.

Her er nogle måder at få dine websider til at indlæse hurtigere:

Tjek vores omfattende ressource til optimering af website speed optimization.

Tilgængelighedsstandarder

Internettet var designet til at arbejde for alle mennesker, uanset den specifikke hardware, software, sprog de bruger, deres evne eller placering. Dog ofrer mange tilgængeligheden fremfor et smukt design.

Tilgængelighed er nøglen til hvert websted

Tilgængelighed er nøglen til hvert websted

Tilgængelighed henviser til den praksis at gøre dit websted brugbart af alle.

Udover handicappede, der påvirker adgang, siger W3, at tilgængelighed på websitet også er fordelagtig for:

Tilgængelighed skal være alles bekymring, da vi alle er berørt af det på en eller anden måde.

Årsager til at gøre dit websted tilgængeligt

Stadig ikke sikker på, om det er værd at bruge din tid på tilgængelighed i denne diskussion om bedste praksis for webdesign?

Overvej disse grunde:

 

Sådan gør du dit websted mere tilgængeligt

En nem måde at gøre dit websted mere tilgængeligt er at installere WP Accessibility plugin, som tilføjer tilgængelighedsfunktioner, herunder:

Et par ekstra skridt at tage:

Afsluttende tanker: Webdesign bedste praksis til dit næste website-projekt

Gode ​​websteder skal ikke defineres ved objektivt godt design. Lige så vigtigt er brugervenligheden, brugervenligheden og tilgængeligheden. Bevæbnet med disse bedste praksis for webdesign har du alt hvad du har brug for for at skabe noget, der ser ud og fungerer godt.

Webdesign handler ikke kun om æstetik. Det er en meget mere kompliceret verden, hvor UX, tilgængelighed og forretningsmæssige mål alle skal forbindes. Se disse bedste praksis for webdesign! ✍️🔝Click to Tweet

Bare husk, at dette er designs bedste praksis. Det er sandsynligt, at du ikke vil være i stand til at følge hver enkelt punkt nøjagtigt, afhængigt af arten af ​​dit websted. Men før du kan bryde reglerne, hjælper det med i det mindste at være opmærksom på, hvorfor de findes.

Gik vi glip af noget vigtigt? Del din bedste praksis for webdesign i kommentarerne herunder!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer