Accentsconagua

Tips for å hjelpe deg å blande tekst med bilder

Webdesign
Share

Mønsteret med å bruke tekst på bakgrunn av bakgrunnsbilder har vært populært i mange år. Originalt godt før webdesign, kan tekst på et bilde gi en mer følelsesmessig engasjerende og kontekstrikt rik opplevelse. Før dagens dag måtte bildene være mye mindre for å gi betydelig lavere båndbredde. Da tilkoblingshastigheter og skjermdensiteter øker raskt, åpnes vi opp for å bruke mye større bilder i våre design.

Designbeslutninger knyttet til denne teknikken er utrolig viktig å vurdere, og utvikling av beste praksis for å styre denne praksisen er viktig for å beholde design av høy kvalitet. Man kan ikke bare legge inn tekst over et bilde og forventer at det ser riktig ut.

I denne artikkelen vil vi diskutere fem forskjellige aspekter ved å plassere tekst over bilder som vil hjelpe deg med å blande kopi og bildebehandling riktig.

Merk: I hele artikkelen gjelder de samme prinsippene når du velger video- og tekstkombinasjoner.

1. Kontrast gjennom farge og lysstyrke

Bruk av bilder som har betydelig kontrast til teksten, er viktig. Spesielt kan bruk av mørkere bilder med lettere tekst eller mørkere bilder med filtre eller overleggselement være en effektiv måte å sikre at du bruker nok kontrast. 

Noen tips for å oppnå riktig farge og lysstyrkekontrast: 

  • Hvis du ikke umiddelbart kan se brevformene, er kontrasten din slått av.
  • Kontrast betyr ikke alltid mørkt mot lys; Komplementære farger gir også naturlig kontrast.
  • Hvis bildet er komplekst og fullt i fokus, vil det være det mest effektive alternativet å bruke et overlegg eller redigere bildet.

I dette eksemplet bruker vi WebKit-filtre til å manipulere kontrast og lysstyrke i et bilde, som vi plasserer og manipulerer ved hjelp av en ekstra 

. Filtret, ubegrenset, ser ut som følgende: filter: lysstyrke (40%) kontrast (70%);

Vanskelig å lese; Ingen fokuspunkt på tekst eller i bildeMye lettere å lese; krever CSS-filtre

Sjekk ut demoen.

Flere eksempler

https://ayr.com/https://www.geckoboard.com/http://anodpixels.com/https://obakkifoundation.org/

2. Kontrast gjennom dimensjonering og posisjonering

Farge er ikke den eneste måten å forbedre kontrasten til et bilde i forhold til overlaid tekst. Å velge tekststørrelse og posisjon i forhold til de fokuserte elementene i bildet er viktig, da dette gjelder lesbarheten av selve teksten.

I dette eksemplet har vi valgt et bilde med et stort, relativt homogent himmelområde. Dette er et perfekt område for å plassere tekst. I motsetning til dette ville en mye mindre lesbar posisjonering av teksten være direkte i midten av bildet, hvor skylinen kommer fram.

Dårlig eksempel; Dårlig kontrast, dårlig plassering.God kontrast, bedre plassering.

Sjekk ut demoen.

Ytterligere eksempler

http://www.themostnorthernplace.com/http://eup.volkswagen.no/http://www.dtelepathy.com/

3. Lesbarhet Gjennom Dybde

Velg et bilde som bruker dybdeskarphet. Dette vil tillate en jevnere bakteppe for tekst, noe som vil øke lesbarheten. Legg teksten på bildet utenfor bildefeltet, og vær sikker på at tekstfarge kontrasterer tilstrekkelig med den primære fargen til det utenfor fokusområdet.

Vi kan gjøre dette enkelt ved å plassere tekst i områder med lavere fokus, som i dette eksemplet.

Sjekk ut demoen.

Ytterligere eksempler

http://une.ch/creation/homehttp://www.gloriasrestaurants.com/http://www.atelier-serge-thoraval.com/en/http://purplerockscissors.com/

4. Bilde Emne Valg

Tekst over bilder er bare like effektiv som det avledede møtet fra kombinasjonen. For eksempel, ikke velg generisk bildeserie hvis mer spesifikt bilder kommer tilstrekkelig til å kommunisere. Når du velger bilder, bør du vurdere emosjonelle evokasjoner og bokstavelig kontekst av bildet, spesielt når det gjelder tonen i meldingen som kopien er ment å formidle.

Noen tips: 

  • Velg bilder som viser en full setning; Brukeren bør tydelig se emnet for bildet, og forstå handlingen som blir tatt i bildet, hvis det er noe. 
  • Ikke velg bilder som har et svakt fokuspunkt.
  • Husk betydningen av klarhet i bildet. Hvis bildet er mer eller mindre for å fremkalle følelsen og mindre om detaljene, kan tung overlegg eller filtre påføres uten å miste effektiviteten av bildet.

eksempler

http://blood-and-water.animalplanet.com/http://pixelgrade.com/demos/rosa/http://formula1data.com/

5. 3-dimensjonal bevissthet

Tenk på hvor teksten vises i forhold til fokusnivået på de ulike elementene i bildet. Ser teksten å ligge tilbake i bildet, eller kommer det til forgrunnen? Blir teksten blandet, eller holder den sin egen unike posisjon i z-plass? Hvordan relaterer teksten til de fokuserte elementene i bildet, mest spesifikt?

En tommelfingerregel: Jo mindre teksten, desto lengre vil teksten vises i z-plass.

I dette eksemplet bruker vi forgrunns tekst som ser ut til å være mye nærmere oss enn buskene i bakgrunnen. Til tross for det høye detaljnivået i bakgrunnen, identifiserer øynene våre naturligvis lengre linjer og større former av teksten, tolker teksten mye lettere enn det dårlige eksempelet. I det dårlige eksemplet ser tegnene til å plassere teksten på omtrent samme z-posisjon som bladene i bakgrunnen.

Sjekk ut demoen.

Flere eksempler

http://danielladraper.com/http://www.lobagola.com/http://vivaco.com/demo/ventcamp/index-photo.html

Kommer snart

Vel, det bryter opp vår diskusjon om estetikk. I neste artikkel vil vi dekke forskjellige måter å kombinere disse teknikkene med svingekoblinger og animasjon.

Webdesign
×