Achtergronden ontwerpen voor websites

Zodra het belangrijkste onderdeel van een websiteontwerp is, kan de achtergrond van een site op veel manieren worden gebruikt om een ​​betere gebruikerservaring te creëren.

Tegenwoordig is het moeilijker om achtergronden te maken dan het ooit was, en biedt een aantal nieuwe uitdagingen, terwijl een deel van het potentieel dat de achtergrond anders zou hebben, wordt beperkt.

De achtergrond van voorgaande tijden kan bijvoorbeeld feitelijk als een praktisch onderdeel van het ontwerp worden gebruikt. Je zou er bijvoorbeeld pijlen op kunnen plaatsen om de aandacht van de kijker te vestigen op iets belangrijks.

Waarom dingen zijn veranderd, is vanwege de behoefte aan responsief ontwerp en de diversiteit van verschillende schermformaten en schermtypen die mensen misschien gebruiken.

Als gevolg hiervan is de achtergrond tegenwoordig een minder belangrijk element geworden in het ontwerpen van sites en hebben heel wat sites helemaal geen officiële achtergrond.

Zijn achtergronden echt belangrijk? Om dit te achterhalen, hebben we de top 30 gerangschikte websites geïnspecteerd (met uitzondering van herhalingen) en de resultaten zijn erg interessant.

Zoals je kunt zien aan de bovenstaande afbeelding, doen de websites met de hoogste rang helemaal geen moeite met achtergronden, en het lijkt ze geen enkel kwaad te hebben gedaan met betrekking tot gebruikersacceptatie.

Dit druist in tegen het conventionele denken over website-ontwerp, maar het is moeilijk om met harde feiten te debatteren. Verbazingwekkend genoeg komt de eerste website op de lijst met een achtergrond er niet in tot je nummer 10 bereikt, dat Twitter is, en die achtergrond is alleen zichtbaar als je niet bent ingelogd.

In de top 30-websites voor 2017 waren de enige sites met de juiste achtergronden:

  • Twitter, met een fotografische achtergrond (gerangschikt 10th)
  • Live (Outlook), met een effen achtergrond in kleur (gerangschikt 12th)
  • NetFlix, met een collage achtergrond (gerangschikt 21st)
  • WordPress, met een effen achtergrond in kleur (gerangschikt 26th)
  • Bing, met een fotografische achtergrond (gerangschikt 29th)
  • Tumblr, met een fotografische achtergrond (gerangschikt 30th)

Dus alleen 20-procent van de top 30-websites had achtergronden, en degenen die dat wel deden, stonden goed in de lijst.

Het enige voordeel van de achtergrond van een site is dat het helpt een gevoel van identiteit van de site op meerdere pagina's te behouden, maar omdat er andere elementen zijn die dit doel net zo goed en misschien beter kunnen bereiken, is dat niet echt een groot voordeel.

Nadelen zijn talrijk. Achtergronden brengen extra uitdagingen met zich mee als het gaat om het reactievermogen van sites en moeten mogelijk regelmatig worden bijgewerkt om te voorkomen dat ze oud worden.

Een andere uitdaging voor de moderne ontwerper is dat naast statische achtergronden, het nu ook mogelijk is om videobeelden te creëren. Als je voor het laatste kiest, is het van groot belang om te weten wat je doet, omdat veel gebruikers een slecht ontworpen videobeeld als irritant ervaren.

Met zoveel redenen om geen achtergronden te gebruiken, zou u kunnen besluiten om in de voetsporen te treden van die top-gerangschikte websites en voor eens en voor altijd het hele achtergrondidee te vergeten. Maar als in de brief staat dat de site een achtergrond moet hebben, wat kun je dan doen? Dat proberen we in de rest van dit artikel op te lossen.

Achtergronden moeten ingeperkt worden

Inhoud moet altijd op een laag boven de pagina-achtergrond staan. Als u uw pagina-elementen niet in verschillende lagen scheidt, kan dit problemen voor u opleveren wanneer iets moet worden gewijzigd.

Het is een goede gewoonte om deze laagscheiding zo veel mogelijk te gebruiken. Moet het logo van de site bijvoorbeeld echt rechtstreeks op de achtergrond worden opgenomen? Meestal zou het logischer zijn om het logo in een aparte laag te hebben. Op deze manier kan het logo worden bijgewerkt, onafhankelijk van de volledige achtergrond.

Het op deze manier gebruiken van lagen betekent meer werk voor u aan de scheppingskant van dingen, maar minder werk aan de onderhoudskant. Het geeft je ook maximale controle, omdat je dingen op elk moment kunt verbergen, verplaatsen of anderszins kunt laten werken.

Deze afbeelding toont de ideale structuur voor een achtergrondontwerpsjabloon:

Binnen elke laag (behalve de basislaag) is er ruimte om extra lagen te maken voor nog grotere mate van scheiding als u ze nodig zou hebben.

Hoe meer graden van scheiding u maakt, hoe meer controle u kunt krijgen. Je hebt misschien het gevoel dat dat nu niet belangrijk voor je is, maar het komt vaak voor dat het later een factor wordt.

Het allerbelangrijkste om te begrijpen is dat de "achtergrond" alles is wat niet inhoudelijk is. Dus tekst of afbeeldingen die bedoeld zijn om op de pagina te staan, maar niet als inhoud, gelden als deel van de achtergrond, maar niet iedereen zal ze op die manier classificeren.

Framing

In het begin van het webontwerp was framing gewoon een kwestie van uitzoeken waar uw inhoud in relatie tot de achtergrond zou moeten zijn. In deze dag van responsief ontwerp is het echter doorgaans ingewikkelder dan dat.

Met een responsief ontwerp hebt u slechts twee keuzes om het framingprobleem op te lossen. De eerste optie is om de inhoud en achtergrond in verhouding tot de beschikbare schermgrootte te schalen. Dit is optimaal wanneer de ontwerpintegriteit de belangrijkste factor is, hoewel dit een vrij zeldzame situatie zal zijn.

De tweede optie is om delen van de achtergrond, of zelfs de hele achtergrond geleidelijk af te schaffen in de meer algemene situatie waarin de leesbaarheid van inhoud belangrijker is dan ontwerpintegriteit.

Deze kwestie van 'ontwerpintegriteit' betekent trouwens gewoon dat het ontwerp er altijd hetzelfde uitziet, ongeacht het soort scherm waarop het wordt bekeken. Het tegenovergestelde is waar de inhoud er altijd (min of meer) hetzelfde uitziet, ongeacht het soort scherm waarop het wordt bekeken.

Schaling gebruiken voor reactievermogen

Wanneer u schaalbaarheid gebruikt om uniforme framing over verschillende apparaattypen en oriëntatie te behouden, behoudt het de integriteit van uw ontwerp, maar het resultaat is misschien nog niet altijd wat u zou verwachten of zelfs zou wensen, vooral als u een fotografische achtergrond gebruikt.

Laten we eens een voorbeeld van deze techniek in actie bekijken. Beginnend met de Samsung Galaxy S5 in staande modus (merk op dat deze afbeeldingen zijn geschaald om in het artikel te passen, zodat de tekst die u daar kunt zien, leesbaar is op het apparaat zelf).

Zo ziet het eruit in de liggende modus (het is bijna altijd beter om een ​​telefoon in liggende stand te houden voor alles behalve het maken van telefoongesprekken, maar toch blijven mensen erop staan ​​hun telefoon in de staande stand te houden.

Zoals u kunt zien, is de lay-out perfect wanneer geschaald, zelfs wanneer u alleen 640 x 360 pixels hebt om mee te werken. Vervolgens hebben we de iPad in staande richting.

En landschap.

Het ding dat je opvalt wanneer schaal wordt gebruikt, is dat er weinig variatie is tussen verschillende apparaten en resoluties, behalve dat er een hoop verspilde verticale ruimte in de portretweergave kan zijn.

Het zou eigenlijk beter zijn om verschillende methoden te gebruiken op de achtergrond- en inhoudsgedeelten, zodat de menu-items zich zouden nestelen in een 2 × 2-raster in plaats van altijd in de 1 × 4-lay-out te blijven, maar de reden waarom het niet op die manier wordt gedaan, is omdat het is onmogelijk om te voorspellen hoeveel verticale ruimte beschikbaar zal zijn.

Het voordeel van schaalverkleining is dus wanneer u ervoor wilt zorgen dat sommige componenten altijd zichtbaar blijven, ongeacht de omstandigheden.

Met behulp van gefaseerde hide & reveal-responsiviteit

Een meer praktisch scenario, en degene die de meeste ontwerpers het meeste willen gebruiken, is een ontwerp waarbij de achtergrond (of gedeelten ervan) eenvoudig kunnen worden uitgefaseerd als er niet genoeg ruimte is om het weer te geven, dus de inhoud van de site is altijd krijgt maximale aandacht.

Hier is een voorbeeld van het verschil bij het gebruik van deze methode. We zullen dezelfde apparaten en richtingen gebruiken om te illustreren. De eerste is Samsung Galaxy S5 portret.

Samsung Galaxy S5 landschap.

iPad portret.

iPad landschap.

Hier ziet u een aanzienlijk verschil tussen apparaten. Het kleine scherm van de Samsung Galaxy S5 staat niet toe dat de achtergrond wordt weergegeven, ongeacht of het apparaat staand of liggend wordt gehouden en wat wordt getoond, wordt aangepast aan de beschikbare ruimte.

Wanneer dezelfde site op de iPad wordt bekeken, wordt de achtergrond altijd weergegeven ongeacht de oriëntatie, maar er is een verschil in wat wordt gezien.

Beste concepten voor achtergrondontwerp (in volgorde)

1. Effen kleur (of geen kleur)

2. Fotografisch (uitgerekt)

3. Kleine tegel (perfect naadloos)

4. Grote tegel (perfect naadloos)

Wat je moet vermijden, is het betegelen van fotografische achtergronden, tenzij dat op zo'n manier kan worden gedaan dat het niet opvalt. Rekken is normaal gesproken het beste voor fotografische achtergronden, of om ze te beperken tot een vooraf gedefinieerde ruimte.

Het tijdperk van de grote spetterende achtergrond is vrijwel dood, behalve voor gespecialiseerde sites die alleen bedoeld zijn voor weergave op een desktop. De meeste achtergronden die zijn ontworpen voor desktops zien er niet goed uit als ze op telefoons worden bekeken.

Een workaround die je kunt doen, is om een ​​groot aantal breekpunten in je CSS-bestand in te stellen en individuele achtergronden voor elk breekpunt te ontwerpen, maar zoals altijd heb je de uitdaging dat de beschikbare verticale ruimte nooit kan worden berekend, zelfs als het apparaattype bekend is .

header afbeelding met dank aan

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.