Een gids voor webontwerper voor het selecteren van de perfecte achtergrondafbeelding

Achtergronden zijn lange tijd een belangrijk ingrediënt geweest voor een goed ontworpen website. Moderne designtrends hebben er nog meer nadruk op gelegd. Er wordt nu niet alleen verwacht dat de inhoud wordt ingekaderd, maar ook dat de verschillende secties binnen een pagina visueel worden gescheiden.

Bij het gebruik van afbeeldingen voor de achtergrond van uw website, is het het beste om zorgvuldig te kiezen. De verkeerde keuze kan je bericht echt afwerpen. Om nog maar te zwijgen van de mogelijke negatieve gevolgen voor de bereikbaarheid.

Laten we daarom enkele praktische tips voor het kiezen en implementeren van achtergrondafbeeldingen verkennen.

1. Toegankelijkheid komt als eerste

De eerste vraag die je jezelf zou moeten stellen bij het beschouwen van een achtergrondafbeelding, is: welk effect zal dit hebben op de leesbaarheid van inhoud? U moet ervoor zorgen dat tekst leesbaar is en dat, in combinatie met de achtergrond, een acceptabele contrastverhouding is ingesteld.

Als je niet helemaal zeker bent van de bovenstaande toegankelijkheidsproblemen, maar je houdt echt van een bepaald beeld, zijn er enkele dingen die je kunt doen om het te laten werken. U kunt fotobewerkingssoftware of zelfs CSS gebruiken om zaken als transparantie en contrast te wijzigen of om laagmaskers toe te voegen om inhoud leesbaarder te maken. Het is ook belangrijk om het juiste lettertype en lettertype voor de inhoud zelf te kiezen.

Tuinbloemen op hout

Waar het op neer komt, is dat je achtergrond nooit het vermogen van een gebruiker om je inhoud goed te bekijken, mag beïnvloeden.

Echte lichtstraal van onderwater

2. Foto's moeten relevant en overzichtelijk zijn

Foto-achtergronden zijn erg populair geworden op het internet en zijn een uitstekende keuze om grote gebieden te bedekken. Het is een goed idee om op de een of andere manier foto's te kiezen die relevant zijn voor uw website. Dat kan een foto van uw fysieke locatie, een product of een service betekenen. Maar u kunt ook op zoek gaan naar iets waarvan u denkt dat het de boodschap van uw inhoud zal overbrengen. Achtergrondafbeeldingen moeten worden beschouwd als onderdeel van uw algemene merkstrategie.

Batumi, Adjara, Georgië. Panorama, Luchtfoto Van Stedelijke Stadsgezicht

Je zult ook willen zoeken naar foto's die wat open ruimte hebben (denk aan een skyline of een grasveld). Een rommelige foto kan uw inhoud wegnemen, zelfs bij ondoorzichtigheid of kleurveranderingen. Dit betekent niet dat je geen actiefoto's of andere aantrekkelijke beelden kunt gebruiken. Het is meer een kwestie van het vermijden van beelden die te overweldigend zijn.

Waterval in Alaska

3. Gebruik texturen die subtiel en naadloos zijn

Texturen kunnen een vleugje klasse toevoegen aan het algehele uiterlijk van uw website. Of u nu voor een pagina-achtergrond of een specifiek inhoudsgebied gebruikt, zoek naar naadloze structuren, wat betekent dat ze een patroon op het scherm kunnen herhalen waardoor het eruit ziet als één grote afbeelding. Hoewel je soms wegkomt met het gebruik van een volledig gestructureerde afbeelding, werken vooral gedetailleerde afbeeldingen niet altijd goed op meerdere schermformaten. Bovendien kunnen afbeeldingen met een grote bestandsgrootte de laadtijd van de pagina negatief beïnvloeden.

Donkere patronen

Subtletie is ook een gewenste kwaliteit in een textuur (tenzij je voor een meer brutalistische look gaat). Nogmaals, het idee is om gebruikers niet te laten overweldigen met gedurfde patronen. Zoek naar afbeeldingen met zachtere lijnen en kleuren die goed contrasteren met de inhoud.

Geometrische minimale patronen

4. Overweeg meerdere schermen en apparaten

Het zichtbare gedeelte van een achtergrond kan drastisch veranderen op verschillende schermformaten. Dit kan vooral effect hebben op foto's. Wat er op een breedbeeldmonitor misschien gewoon prachtig uitziet, kan er ook verschrikkelijk uitzien op een telefoon. De belangrijkste delen van de afbeelding kunnen worden afgekapt en resulteren in iets dat de context verliest.

De uitdaging hier is de selectie van onderdelen en onderdeelcode. Zoek eerst naar afbeeldingen die passen bij de gewenste beeldverhouding (liggend, staand, vierkant) van de bovenliggende container. Ze schalen vaker voor kleinere schermen.

Telefoon Slimme telefoontechnologie Verbindingsconcept

U zult ook willen kijken hoe de CSS van uw website achtergrondafbeeldingen voor verschillende schermen verwerkt. Gebruik bijvoorbeeld de achtergrondformaat: omslag; CSS-eigenschap kan ervoor zorgen dat de volledige afbeelding zichtbaar is. Weet gewoon dat het de grootte van de container een beetje kan afwerpen. Hoogstwaarschijnlijk zullen aanpassingen nodig zijn om alles pixel-perfect te laten lijken op verschillende apparaten.

Diverse groep van mensen gemeenschap saamhorigheid Concept

5. Begin met afbeeldingen met hoge resolutie en vervolgens bijsnijden

Wanneer u afbeeldingen download die u voor uw achtergrond wilt gebruiken, kiest u de hoogst beschikbare resolutie. Hiermee kunt u de nodige bewerkingen uitvoeren en vervolgens de afbeelding verkleinen tot een meer geschikte grootte. U moet ervoor zorgen dat bewerkte versies als een afzonderlijk bestand worden opgeslagen.

Dark Textured Spotlight Backgrounds

Het bepalen van de juiste grootte is afhankelijk van de breedte van de container binnen uw site. Hoewel sommige afbeeldingen behoorlijk goed uitrekken of herhalen (een voordeel van het gebruik van naadloze structuren), kunnen andere vervormd lijken. In dat geval, snijd tot de breedste breedte die je nodig hebt. U kunt zelfs CSS Media Queries gebruiken om kleinere versies van een afbeelding voor andere schermformaten aan te roepen.

Vintage effecten voor foto's of ontwerpen

Achtergronden naar de voorgrond brengen

Het is begrijpelijk dat, met zoveel opwindende technologieën die het webontwerp beïnvloeden, we niet zo veel aandacht schenken aan achtergronden. Maar ze spelen een zeer belangrijke rol bij het vertellen van verhalen en helpen ons een aangename gebruikersinterface te maken. Achtergronden met een volledige pagina helpen om de toon te zetten voor een website, terwijl sectie-achtergronden onze inhoud enige ruimte bieden om te ademen.

Natuurlijk werkt het allemaal het beste als we afbeeldingen kiezen die aan onze behoeften voldoen. Afbeeldingen die het vermogen van een gebruiker om inhoud te consumeren verbeteren, niet hinderen. Maar we moeten ook rekening houden met details zoals grootte, beeldverhouding en geschiktheid voor mobiele apparaten. Vergeet niet dat details belangrijk zijn, zelfs als het gaat om items die op de achtergrond worden gebruikt.

handige links