Tips som hjälper dig att ordentligt blanda text med bildspråk

Mönstret att använda text ovanpå bakgrundsbilder har varit populärt i flera år. Ursprungligt före webbdesign kan text på en bild ge en mer känslomässig engagerande och kontextuellt rik erfarenhet. Före dagens tider måste bilderna vara mycket mindre för att möjliggöra avsevärt långsammare bandbredd. Eftersom anslutningshastigheter och skärmdensiteter snabbt ökar öppnas vi upp för att använda mycket större bilder i våra konstruktioner.

Designbeslut relaterade till denna teknik är otroligt viktigt att överväga, och att utveckla bästa praxis för att styra denna praxis är absolut nödvändigt för att behålla högkvalitativ design. Man kan inte bara placera text över någon bild och förvänta sig att den ser rätt ut.

I den här artikeln kommer vi att diskutera fem olika aspekter av att placera text över bilder som hjälper dig att ordentligt blanda kopior och bilder.

Notera: I hela artikeln gäller samma principer vid val av video- och textkombinationer.

1. Kontrast genom färg och ljusstyrka

Att använda bilder som har signifikant kontrast till texten är absolut nödvändigt. Speciellt kan man använda mörkare bilder med lättare text eller mörkare bilder med filter eller överlagringselement, vilket kan vara ett effektivt sätt att se till att du använder tillräckligt med kontrast.

Några tips för att uppnå rätt färg och ljusstyrka kontrast:

Om du inte direkt kan se brevformerna är kontrasten avstängd.
Kontrast betyder inte alltid mörk mot ljus; Komplementära färger ger också naturlig kontrast.
Om bilden är komplex och helt i fokus, är det sannolikt det mest effektiva alternativet att använda en överlay eller redigering av bilden.

I det här exemplet använder vi WebKit-filter för att manipulera kontrast och ljusstyrka på en bild, som vi placerar och manipulerar med en extra

. Filtret, oprefixerat, ser ut som följande: filter: ljusstyrka (40%) kontrast (70%);

Svårt att läsa; ingen kontaktpunkt i text eller i bild

Mycket lättare att läsa; kräver CSS-filter

Kolla in demoen.

Fler exempel

https://ayr.com/

https://www.geckoboard.com/

http://anodpixels.com/

https://obakkifoundation.org/

2. Kontrast genom limning och positionering

Färg är inte det enda sättet att förbättra en bilds kontrast i förhållande till överlagrad text. Att välja textstorlek och position i förhållande till bildens fokuserade element är avgörande, eftersom det här gäller textens läsbarhet.

I det här exemplet har vi valt en bild med ett stort, relativt homogent himmelområde. Detta är ett perfekt område för att placera text. I motsats till detta skulle en mycket mindre läsbar positionering av texten vara direkt i mitten av bilden, där skylinen visas.

Dåligt exempel; Dålig kontrast, dålig placering.

Bra kontrast, bättre placering.

Kolla in demoen.

Ytterligare exempel

http://www.themostnorthernplace.com/

http://eup.volkswagen.no/

http://www.dtelepathy.com/

3. Läsbarhet genom djup

Välj en bild som använder skärpedjup. Detta kommer att möjliggöra en mjukare bakgrund för text, vilket ökar läsbarheten. Placera din text på bilden utanför bildfokusen och var säker på att textfärgen kontrasterar tillräckligt med den primära färgen på det out-of-focus-området.

Vi kan enkelt göra detta genom att placera text i områden med lägre fokus, som i det här exemplet.

Kolla in demoen.

Ytterligare exempel

http://une.ch/creation/home

http://www.gloriasrestaurants.com/

http://www.atelier-serge-thoraval.com/en/

http://purplerockscissors.com/

4. Bildämnesval

Text över bildspråk är bara lika effektivt som det härledda mötet från kombinationen. Välj till exempel inte generisk bildspråk om mer specifika bilder kommer att kommunicera bättre. När du väljer bilder, ta hänsyn till känslomässig framställning och bokstavlig kontext för bilden, särskilt när det gäller tonen i meddelandet som kopian är avsedd att förmedla.

Några tips:

Välj bilder som visar en fullständig mening; användaren ska tydligt se bildens ämne och förstå åtgärden som tas i bilden, om det finns några.
Välj inte bilder som har en svag fokuspunkt.
Tänk på betydelsen av tydlighet i bilden. Om bilden är mer eller mindre för att framkalla känslan och mindre om detaljerna, kan tunga överlagringar eller filter appliceras utan att förlora effektiviteten av bilden.

exempel

http://blood-and-water.animalplanet.com/

http://pixelgrade.com/demos/rosa/

http://formula1data.com/

5. 3-dimensionell medvetenhet

Tänk på var texten visas i förhållande till fokusnivån för de olika elementen i bilden. Tycks texten ligga bakom bilden eller kommer den till förgrunden? Sammanfattar texten eller håller den sin egen unika position i z-space? Hur hänför sig texten till de fokuserade elementen i bilden, mest specifikt?

En tumregel: ju mindre texten är, desto mer kommer texten att visas i z-mellanslag.

I det här exemplet använder vi förgrundstext som verkar vara mycket närmare oss än buskarna i bakgrunden. Trots den höga detaljnivån i bakgrunden identifierar våra ögon naturligtvis de längre raderna och större formerna av texten, tolkar texten mycket lättare än det dåliga exemplet. I det dåliga exemplet verkar teckenformen placera texten på ungefär samma z-position som bladen i bakgrunden.

Kolla in demoen.

Fler exempel

http://danielladraper.com/

http://www.lobagola.com/

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

Kommer snart

Tja, det bryter upp vår diskussion om estetik. I nästa artikel kommer vi att täcka olika sätt att kombinera dessa tekniker med hover-interaktioner och animeringar.

Webbdesign

Tips för att påskynda bildbehandlingsarbetet i Lightroom

Tips för att anpassa och optimera bloggens flöde