Bakgrunnen til nettstedet ser ut som å puste. De er en del av vårt daglige liv, men vi legger aldri nok oppmerksomhet til dem med mindre det er en åpenbar feil. Og som hvert eneste åndedrag er nettsidebakgrunnen en integrert del av suksessen og livet til nettstedet ditt; de får alle andre deler av nettstedet til å fungere bedre.
Hva er bakgrunnen til nettstedet?
Nettsidebakgrunner er bilder, sprut farge eller design, som fyller skjermen på nettstedet ditt. Det er også ofte det første inntrykket en besøkende vil gjøre på nettstedet ditt. merkevare og virksomhet, så det er viktig at du får det til. Den perfekte bakgrunnen vil formidle din merkevarehistorie, mens feil kan kaste bort meldingen din. Nettstedet ditt er som klærne du skal ha på deg til et jobbintervju eller første date. Går du for en morsom og tilgjengelig look eller noe sofistikert og eksklusivt?
Faktisk er det mye mer ved dette tilsynelatende grunnleggende aspektet ved webdesign enn du kanskje tror. Det er ikke nok at nettstedets bakgrunn bare ser bra ut. Akkurat som når du drar på en første date eller et jobbintervju, må du sørge for å fortelle historien din, bekrefte at stedet du møter er tilgjengelig, og sørge for at den andre personen nyter opplevelsen med deg. På samme måte forventes nettsidebakgrunn å gi en god brukeropplevelse (UX) og være lesbar for publikum.
Grunnleggende om nettstedet
Før vi kommer inn på tipsene, er det viktig å få det grunnleggende ut av veien.
Møt to typer nettsidebakgrunner
Kroppsbakgrunn
Kroppsbakgrunnen er området som dekker det meste av skjermen. Her finner du bakgrunner som består av illustrasjoner, teksturer, hele bilder eller fargegradienter. Ofte er det bare hvitt.
Bakgrunnsinnhold. Bakgrunn for nettstedet
Innholdsbakgrunnen dekker ikke hele skjermen, men omgir snarere et område rundt andre deler, for eksempel et bilde eller tekst. Dette gir struktur og bidrar til å fremheve og skille de ulike delene av nettstedet.
Lyst ølmerke
Interessant innhold
Bruk overskrifter for ekstra popularitet
Overskriften din er toppen av siden din og er en viktig måte å vise frem nettstedets personlighet. Dette er et flott sted å bruke iøynefallende elementer som illustrasjoner eller en fargeklatt fordi det sannsynligvis ikke vil distrahere fra det underliggende innholdet.
Attraktiv nettsideoverskrift
Legg merke til kontrasten
Pass på at du tar hensyn til fargekontrast. Feil kontrast kan gjøre innholdet på nettstedet ditt vanskelig å lese, noe som gjør det utilgjengelig for besøkende, så sørg for å sjekke kontrastforholdet ditt.
Gå til grafikk. Bakgrunn for nettstedet
Bruk av grafiske elementer gir nettstedet ditt et særegent utseende og forteller en historie med kun visuelle elementer. Men sørg for at stilen for bruk av grafiske elementer samsvarer med den generelle stilen på nettstedet ditt, slik at du gir brukerne en konsistent opplevelse.
Stilig nettsidebakgrunn med grafiske elementer
Forbedre bakgrunnen din
Hvit nettsidebakgrunn er et enkelt og tidløst valg. Men helkroppsbakgrunner i webdesign (som bruk av en gradient, et fullstendig bilde eller en solid fargeblokk) kan ha stor innvirkning når de utføres riktig. Pass på at bildet ikke er for lyst eller har mørke flekker, slik at det ikke distraherer fra innholdet ditt. Du vil at brukerne dine enkelt og umiddelbart skal kunne lese hva du har virksomhet.
Hele teksten til nettstedet
Si hei til høydepunktene
Høydepunkter (svært tynne linjer som består av forskjellige farger for individuelle deler av nettstedet ditt) hjelper til med å bryte opp monokromatiske blokker og forbedre lesbarheten.
8 tips for å lage den perfekte nettsidebakgrunnen
-
1. Bruk et smart fargegrensesnitt
Det er viktig å velge farger og fargekombinasjoner når det kommer til webdesignbakgrunner, siden de bidrar til hvordan brukerne vil lese nettstedet ditt. Farger i webdesign kan bidra til å tiltrekke oppmerksomhet, vekke følelser, skape lyst, tiltrekke oppmerksomhet og få brukerlojalitet.
Rød nettsidebakgrunn
2. Gjør bakgrunnsbildet ditt superlesbart. Bakgrunn for nettstedet
Bakgrunnsbilde av cidernettsted med lettlest skrift fra gotza
3. Gi en solid bakgrunnsfarge
Passer ikke bildet for nettstedet ditt? Hvorfor ikke prøve å bruke én solid farge for bakgrunnen til nettstedet ditt. Dette er vanligvis en fin måte å sikre at nettstedet ditt er lesbart så lenge kontrasten er riktig. Bare sørg for at fargen matcher merket ditt. bransje og inntrykk av virksomheten din. For eksempel har varme farger som rødt og rosa en energisk effekt på brukeren og kan være nyttig for treningsmerker, mens kule farger som grønt og blått har en tendens til å ha en beroligende effekt og faktisk er de vanligste fargene som brukes på nettsider.
Vegansk mat. Solid bakgrunnsfarge på nettstedet
4. Unngå travle og rotete bilder
Dette er spesielt viktig når du legger til tekst på toppen av et bilde. Selv om du ønsker å velge et slående bilde for nettstedet ditt, bør det ikke distrahere fra budskapet og historien du ønsker å fortelle. For eksempel kan landskap skape utmerket bakgrunnsbilder for nettsteder siden de er attraktive og ikke rotete.
Ren nettsidebakgrunn
5. Gjør det moteriktig
En nettsidebakgrunn som pleier å gjøre din utforming moderne og nytt. Prøv å bruke noen av de største trendene innen webdesign, geometriske former, oppslukende 3D-elementer, glødende, glødende fargevalg, mørk modus eller bruk Pantone farger år i utformingen. Bare husk at å bruke noe trendy i en tidløs design kan bety at du må oppdatere bakgrunnen din før heller enn senere.
Kjedelig mørk nettsidebakgrunn
6. Lag en animasjon. Bakgrunn for nettstedet
En animert nettsidebakgrunn er en veldig god måte å bringe nettstedet ditt til live. Bare pass på at animasjonen er subtil slik at den ikke distraherer fra hovedbildet eller meldingene eller går utover forgrunnen til designet. Siden animasjon har et så energisk preg, er det en god idé å inkludere en subtil fargepalett.
7. Gå med en gradient. Bakgrunn for nettstedet
Ja, trendene fra 90-tallet er tilbake, inkludert den som tok designverdenen med storm: gradienter. Også kjent som fargeoverganger, gradienter er den gradvise blandingen av en farge til en annen. De er visuelt tiltalende og kan brukes som en frittstående bakgrunn eller lagvis over et bilde for å virkelig få nettstedet ditt til å vises.
Gradient nettside bakgrunn
8. Gjør den mobil. Bakgrunn for nettstedet
Vi er i 2020. Selv om du utvikler nettstedet ditt på en stasjonær datamaskin, er sannheten at det meste av nettinnhold blir konsumert gjennom mobile enheter. Sørg for at du vurderer følgende nettstedsbud for å gjøre nettstedet ditt mobilvennlig:
- Gjør nettstedet ditt responsivt.
- Gjør informasjonen folk leter etter enklere å finne.
- Ikke bruk Flash.
- Inkluder viewport-metakoden.
- Aktiver autofyll for skjemaer.
- Gjør knappestørrelsene dine store nok til å fungere komfortabelt på en mobiltelefon.
- Bruk stor størrelse font.
- Komprimer bildene dine og CSS.
Når du velger et bakgrunnsbilde for nettstedet, sørg for at du velger et bilde som vil skaleres godt for mindre skjermer. For eksempel kan det hende at et virkelig bredt bilde ikke fungerer på en bærbar enhet.
Mobilvennlig nettsidebakgrunn
Hvordan få bakgrunnen til drømmene dine på nettstedet. Bakgrunn for nettstedet
-
Å velge riktig bakgrunn kan ta nettstedet ditt fra middelmådig til flott. Husk at brukeropplevelse er alt, så velg farger og bilder som taler til de besøkende, og sørg for at når du velger et bakgrunnsbilde for nettstedet, kan du enkelt lese teksten på toppen av det.
Vurder solide bakgrunnsfarger, unngå rotete bilder for enhver pris, og vurder å inkludere en trend som en gradient eller geometrisk form for å holde deg moderne og moderne. Prøv deg frem med animasjon hvis du virkelig vil skille deg ut fra mengden, og velg alltid en bakgrunn som skaleres godt for mindre skjermer.
Viktigst av alt, husk at det ikke er noen klare regler i design. Faktisk følger de beste designene ofte ingen regler i det hele tatt. Det som betyr mest er brukeropplevelsen din. Bruk disse tipsene som utgangspunkt og ikke vær redd for å stole på dine kunstneriske reflekser.
FAQ. Bakgrunn for nettstedet.
1. Hvorfor er nettstedets bakgrunn viktig?
Bakgrunnen til nettstedet er viktig fordi:
- Skaper et førsteinntrykk: Bakgrunnen er det første en besøkende ser og setter tonen for hele nettstedet.
- Påvirker oppfatningen av innhold: Bakgrunn bidrar til å fremheve hovedinnholdet og forbedrer lesbarheten.
- Reflekterer merkenavn: En bakgrunn kan formidle et merkes verdier og stil, og skape en sammenhengende visuell identitet.
2. Hvilke typer bakgrunner kan brukes på nettstedet?
Det finnes ulike typer bakgrunner:
- Solide farger: Enkel og minimalistisk, egnet for de fleste nettsteder.
- Gradienter: Overganger mellom farger gir dybde og dynamikk.
- Изображения: Fotografier eller illustrasjoner som kan forsterke den visuelle effekten.
- Video: Dynamisk bakgrunn som kan vekke oppmerksomhet og skape et unikt inntrykk.
- Teksturer og mønstre: Legg til interesse og kan forbedre visuell persepsjon.
3. Hvordan velge en passende bakgrunn for en nettside?
Når du velger bakgrunn, bør du vurdere:
- Nettstedsmål: Bestem hva slags atmosfære du vil skape og hvordan bakgrunnen kan støtte det.
- Целевая аудитория: Vurder publikums preferanser og forventninger.
- Lesbarhet: Sørg for at bakgrunnsteksten er lett å lese.
- Merkeoverholdelse: Bakgrunnen bør samsvare med merkevarens stil og verdier.
- Nedlastningshastighet: Pass på at bakgrunnen ikke bremser nedlastingen av nettstedet.
4. Hvordan gjøre bakgrunnen lesbar?
For å forbedre lesbarheten:
- Bruk kontrasterende farger: Velg tekst og bakgrunnsfarger med nok kontrast.
- Legg til et overlegg: Semi-transparente overlegg på toppen av bilder kan forbedre lesbarheten til tekst.
- Velg enkle bakgrunner: Komplekse og travle bakgrunner kan distrahere oppmerksomheten fra hovedinnholdet.
5. Hvilke verktøy kan du bruke for å lage en bakgrunn?
Populære verktøy inkluderer:
- Adobe Photoshop og Illustrator: For å lage og redigere bilder og grafikk.
- Lerret: Online verktøy for å lage grafikk, nybegynnervennlig.
- Figma og Sketch: Programmer for grensesnittdesign som lar deg lage bakgrunner og oppsett.
- CSS: For å lage gradienter og andre bakgrunnseffekter ved hjelp av kode.
6. Hvordan optimalisere bilder for bakgrunner?
For å optimalisere bilder:
- Komprimer filer: Bruk tapsfrie komprimeringsverktøy som TinyPNG eller ImageOptim.
- Velg riktig format: JPEG for bilder, PNG for bilder med gjennomsiktighet, SVG for vektorgrafikk.
- Tilpass størrelser: Sørg for at bildene passer til skjermstørrelsen for å unngå unødvendig lasting.
7. Hvordan bruke video som bakgrunn?
Slik bruker du videoen:
- Velg korte og enkle videoer: Videoer bør ikke redusere lasting av nettstedet.
- Slå av lyden: Videoer med bakgrunn vises vanligvis uten lyd for å unngå å distrahere brukere.
- Legg til et overlegg: Et halvt gjennomsiktig overlegg kan forbedre synligheten til tekst i en video.
8. Hvordan gjøre bakgrunnen adaptiv?
For en responsiv bakgrunn:
- Bruk mediesøk: CSS-mediespørringer vil hjelpe deg med å tilpasse bakgrunnen din for forskjellige skjermer og enheter.
- Bruk proporsjonale størrelser: Sørg for at bakgrunnsbilder og videoer er skalert for å passe skjermstørrelsen din.
- Test på forskjellige enheter: Sjekk hvordan bakgrunnen ser ut på mobile enheter, nettbrett og datamaskiner.
9. Hvilke feil bør du unngå når du velger bakgrunn?
Unngå følgende feil:
- Bakgrunnen er for kompleks: Kan distrahere oppmerksomheten fra hovedinnholdet.
- Utilstrekkelig kontrast: Tekst kan være vanskelig å lese mot en bakgrunn med lav kontrast.
- Store filer: Kan redusere lasting av nettsteder og påvirke brukeropplevelsen negativt.
- Inkonsekvens med merkevaren: Bakgrunnen skal være i harmoni med den generelle stilen og budskapet til merkevaren din.
10. Hvordan teste bakgrunnen på forskjellige enheter og nettlesere?
For testing:
- Bruk utviklerverktøy: Nettlesere har innebygde verktøy for å teste respons og kompatibilitet på tvers av nettlesere.
- Test på ekte enheter: Se nettstedet på en rekke mobile enheter, nettbrett og datamaskiner.
- Bruk emulatorer og simulatorer: Verktøy som BrowserStack eller Sauce Labs lar deg teste nettstedet ditt på forskjellige enheter og nettlesere.
