En omfattande guide till att designa bakgrunder 2024

Om du prenumererar på en tjänst från en länk på den här sidan kan Reeves and Sons Limited tjäna en provision. Se vår etik uttalande.

När den en gång är den viktigaste delen av webbdesign kan en webbplats användas på många sätt för att skapa en bättre användarupplevelse.

Idag är det svårare att skapa bakgrunder på rätt sätt än det en gång var, och det innebär en del nya utmaningar, samtidigt som det begränsar en del av potentialen som bakgrunder till andrawise skulle ha.

Till exempel kunde bakgrunden i tidigare tider faktiskt användas som en praktisk del av designen. Du kan till exempel sätta pilar på den för att rikta tittarens uppmärksamhet mot något viktigt.

Varför saker och ting har förändrats beror på behovet av responsive design och mångfalden av olika skärmstorlekar och skärmtyper som människor kan använda.

Som ett resultat har bakgrunden blivit ett mindre viktigt element i webbplatsdesign idag, och en hel del webbplatser har ingen officiell bakgrund alls.

Är bakgrunder verkligen viktiga? För att ta reda på det, inspekterade vi de 30 bästa rankade webbplatserna (inte inklusive upprepningar) och resultaten är mycket intressanta.

Som du kan se från bilden ovan bryr sig de högst rankade webbplatserna inte alls med bakgrunder, och det verkar inte ha gjort dem den minsta skada när det gäller användaracceptans.

Detta går emot konventionella tankar om webbdesign, men det är svårt att argumentera med kalla fakta. Otroligt nog kommer den första webbplatsen på listan med bakgrund inte in förrän du når nummer 10, vilket är Twitter, och den bakgrunden är bara synlig om du inte är inloggad.

På de 30 bästa webbplatserna för 2017 var de enda webbplatserna med korrekt bakgrund:

  • Twitter, med fotografisk bakgrund (rankad som 10: e)
  • Live (Outlook), med en färg i bakgrunden (rankad som 12: e)
  • NetFlix, med en collagebakgrund (rankad 21)
  • WordPress, med solid färgbakgrund (rankad 26)th)
  • Bing, med fotografisk bakgrund (rankad 29)th)
  • Tumblr, med fotografisk bakgrund (rankad 30)th)

Så bara 20 procent av de 30 bästa webbplatserna hade bakgrunder, och de som gjorde det låg nere på listan.

Den enda fördelen med en webbplatsbakgrund är att den hjälper till att upprätthålla en känsla av webbplatsidentitet över flera sidor, men eftersom det finns andra element som kan uppnå detta mål lika bra och kanske bättre, är det egentligen ingen stor fördel.

Nackdelarna är många. Bakgrunder introducerar extra utmaningar när det kommer till webbplatsen responsiveoch kan kräva frekventa uppdateringar för att undvika att bli inaktuella.

En annan utmaning för den moderna designern är att det förutom statiska bakgrunder nu också är möjligt att skapa videobakgrunder. Om du väljer det senare är det viktigt att veta vad du gör, eftersom många användare kommer att hitta en dålig upptäckt videobakgrund som är irriterande.

Med så många anledningar till att inte använda bakgrunder kan du bestämma dig för att följa i fotspåren på de topprankade webbplatserna och släppa hela bakgrundsidén en gång för alla. Men om beskrivningen insisterar på att webbplatsen måste ha en bakgrund, vad kan du göra? Det är vad vi ska försöka lösa i resten av den här artikeln.

Bakgrunder bör finnas

Innehållet måste alltid ligga på ett lager ovanför sidans bakgrund. Om du inte delar upp dina sidelement i olika lager kan det skapa problem för dig när något behöver ändras.

Det är bäst att använda denna lagerseparation så mycket som möjligt. Behöver till exempel webbplatsens logotyp integreras direkt i bakgrunden? Oftast skulle det vara mer förnuftigt att ha logotypen i ett separat lager. På så sätt om logotypen måste uppdateras, kan den uppdateras oberoende av hela bakgrunden.

Att använda lager på detta sätt innebär mer arbete för dig på skapelsidan av saker, men mindre arbete på underhållssidan. Det ger dig också maximal kontroll, eftersom du kan dölja saker, flytta dem eller få dem att bete sig annorlunda beroende på dina behov när som helst.

Den här bilden visar den perfekta strukturen för en mall för bakgrundsdesign:

Inom varje lager (utom basskiktet) finns det utrymme att skapa ytterligare lager för ännu större grad av separering om du skulle behöva dem.

Ju fler grader av separation du skapar, desto mer kontroll kan du få. Du kanske känner att det inte är viktigt för dig just nu, men det händer ofta att det blir en faktor senare.

Det viktigaste att förstå är att ”bakgrunden” är allt som inte är innehåll. Så text eller bilder som är tänkta att vara på sidan men inte som innehåll räknas som en del av bakgrunden, men inte alla kommer att klassificera dem på det sättet.

Inramning

Tillbaka i webbdesignens tidiga dagar var inramning bara en enkel fråga om att ta reda på var ditt innehåll skulle vara i förhållande till bakgrunden. I denna dag av responsive design, men det är vanligtvis mer komplicerat än så.

Med responsive design har du bara två val att ta itu med inramningsfrågan. Det första alternativet är att skala innehållet och bakgrundsbilden i förhållande till den tillgängliga skärmstorleken. Detta är optimalt när designintegriteten är den viktigaste faktorn, även om detta kommer att vara en ganska sällsynt situation.

Det andra alternativet är att fasa ut delar av bakgrunden, eller till och med hela bakgrunden, i den vanligare situationen där innehållets läsbarhet är viktigare än designintegritet.

Denna fråga om "designintegritet" betyder förresten helt enkelt att designen alltid ser likadan ut, oavsett vilken typ av skärm den visas på. Motsatsen är att innehållet alltid ser ut (mer eller mindre) detsamma oavsett vilken typ av skärm det visas på.

Använder skalning för responsiveNess

När du använder skalning för att hålla en enhetlig inramning över olika enhetstyper och orienteringar bibehåller det integriteten i din design, men resultatet kanske fortfarande inte alltid blir vad du förväntar dig eller ens önskar, särskilt om du använder en fotografisk bakgrund.

Låt oss kolla in ett exempel på denna teknik i aktion. Börjar med Samsung Galaxy S5 i stående läge (observera att dessa bilder är skalade för att passa i artikeln, så texten du kan se där är faktiskt läsbar på själva enheten).

Så här ser det ut i liggande läge (det är nästan alltid bättre att hålla en telefon i liggande riktning för allt utom att ringa telefonsamtal, men folk insisterar fortfarande på att hålla sina telefoner i stående riktning.

Som ni ser är layouten helt fin när den skalas, även om du bara har 640 x 360 pixlar att arbeta med. Nästa upp har vi iPad i porträttorientering.

Och landskap.

Det du kommer att märka när skalning används är att det finns liten variation mellan olika enheter och upplösningar, förutom att det kan finnas mycket bortkastat vertikalt utrymme på porträttvyn.

Det skulle faktiskt vara bättre att använda olika metoder på bakgrunds- och innehållsdelarna, så att menyalternativen skulle slås in i ett 2 × 2-rutnät istället för att alltid förbli i 1 × 4-layout, men anledningen till att det inte görs på det sättet är att det är omöjligt att förutsäga hur mycket vertikalt utrymme som kommer att finnas tillgängligt.

Fördelen med skalning är alltså när du vill se till att en del alltid finns kvar, oavsett omständigheterna kan vara.

Använder fasad gömma och avslöja responsiveNess

Ett mer praktiskt scenario, och det som de flesta designers kommer att vilja använda för det mesta, är en design där bakgrunden (eller delar av den) helt enkelt kan fasas ut om det inte finns tillräckligt med utrymme för att visa det, så att webbplatsens innehåll alltid får maximal uppmärksamhet.

Här är ett exempel på skillnaden när du använder den här metoden. Vi kommer att använda samma enheter och orienteringar för att illustrera. Först är Samsung Galaxy S5 porträtt.

Samsung Galaxy S5 landskap.

iPad-porträtt.

iPad-landskap.

Här kan du se en avsevärd skillnad mellan enheter. Den lilla skärmen på Samsung Galaxy S5 tillåter inte att bakgrunden visas, oavsett om enheten hålls i stående eller liggande riktning, och det som visas justeras för att passa det tillgängliga utrymmet.

När samma webbplats visas på iPad visas bakgrunden alltid oberoende av orientering, men det finns en viss skillnad i vad som ses.

Bästa koncept för bakgrundsdesign (i ordning)

1. Fast färg (eller ingen färg)

2. Fotografisk (utsträckt)

3. Liten kakel (perfekt sömlös)

4. Stor kakel (perfekt sömlös)

Det du bör undvika är plattsättning av fotografiska bakgrunder om det inte kan göras på ett sådant sätt att det inte märks. Stretching är normalt bäst för fotografiska bakgrunder, eller för att begränsa dem inom ett fördefinierat utrymme.

Eran med den stora stänkiga bakgrunden är i stort sett död utom för specialistsidor som endast är avsedda för visning på en desktop. De flesta bakgrunder designade för desktops kommer inte att se bra ut när den visas på telefoner.

En lösning du kan göra är att ställa in ett stort antal brytpunkter i din CSS-fil och utformadividubbla bakgrunder för varje brytpunkt, men som vanligt har du utmaningen att det vertikala tillgängliga utrymmet aldrig kan beräknas, inte ens när enhetstypen är känd.

header image med tillstånd av

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.

Kommentarer 0 Responses

Kommentera uppropet

E-postadressen publiceras inte. Obligatoriska fält är markerade *

Betyg *

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.