Bildmanér
SJs bildmanér ska kommunicera ett mänskligt och härligt SJ. Detta är genomgående för de olika bildkategorier som SJ behöver för att kunna uttrycka sig som ett konsumentvarumärke: produkt och personal, utsikter, destinationer och platser samt människor på resa.
SJs digitala närvaro är inte beroende av bilder, utan färg och typografi räcker i många fall för att skapa identitet. Däremot använder vi gärna bilder för att förstärka en känsla av resande, för att förklara eller beskriva exempelvis en tågkupé eller för att byta tempo från en funktionsdrivet och rationellt tonläge till ett mer emotionellt.
Rätt använt tillför bilder en hel del, men de bör aldrig användas på ett sätt så att syftet med bilden går förlorad. Blir bilderna för generella och enbart utsmyckning kommer de scrollas förbi. Om de täcks över är de mest brus. Fundera därför om och varför en bild behövs och välj sedan en lösning där bilden kommer till sin rätta.
En bra bild både inspirerar och informerar.
En bild är inte nödvändig för innehållet och därför undviker vi en generisk bild.
Använd gärna mot bilder om kontrastvärdet kan garanteras. mot bild fungerar bäst för rubriker och texten bör aldrig placeras eller vara av den omfattningen att den täcker det väsentliga i bilden. Om kontrastvärdet är för lågt kan antingen hela bilden justeras och göras mörkare, men oftast är det bättre att välja en annan bild eller en annan lösning.
Startsida
Använd gärna en bakgrundsbild för att sätta stämningen redan på startsidan. Bilden anpassas för att förstärka årstiden eller en händelse. Motivet bör kännas aktuellt, dvs vi dröjer inte kvar med en vintervy långt in på våren. Använd gärna en mix av SJs olika bildkategorier då enbart "utsiktsbilder" riskerar att kännas statiskt.
Oskärpa
För att skapa en levande och användbar bakgrundsbild för text, kan man addera oskärpa. Tänk på att göra bilden oskarp nog – bilden ska addera en känsla, inte förmedla detaljer.
Exempel på användande av bakgrundsbilder:
Välj lugna bilder som sätter känslan men inte stör innehållet.
Förstärk en rubrik genom att knyta den närmare en bild.
Använd bilder för att byta tempo och skapa mer emotionella sidor.
Använd en mix av SJs olika bildkategorier för startbild.
Använd en mix av SJs olika bildkategorier för startbild.
Hur ska man tänka kring kontrastvärden?
Kontrastvärdet mellan innehållet och bakgrunden är för lågt, därför uppfyller inte denna bild kraven.
Del av bilden mörkas kring det innehåll som behöver ha högre kontrastvärde. Kan göras via bildredigering eller kod.
Hela bilden görs mörkare för att nå rätt kontrastvärden.
Bilden beskärs så att innehållet hamnar mot ett parti som ger rätt kontrastvärden. Risk att bildens syfte & känsla går förlorad.
I vissa fall är det enklare att helt enkelt byta till en bild som klarar kontrastkraven.
Mät på rätt sätt:
Mät kontrasten mot ljusaste delen av bilden som innehållet ligger mot. Logotypen behöver inte klara kontrastkraven.
Undvik rubriker på för röriga bilder eller bilder med låg kontrast:
Om bilden är för ljus eller rörig är det bättre att lägga rubriken under bilden.
En för ljus bild ger för dåliga kontraster. Hitta en annan lösning eller bild.
Lägg inte tonplattor på bilder för att öka kontrasten.
Exempel på oskärpa:
Rätt mängd oskärpa skapar ett levande men ändå lugnt intryck.
Skärpan upplevs mer som en suddig dålig bild. För mycket detaljer gör bilden komplex.
Beskär bilderna på ett sådan sätt att de blir begripliga. En tätare skuren bild, eller flera bilder i kombination, kan bättre beskriva hur exempelvis en tåginteriör ser ut än en vid översiktsbild. Beskär bilden så att det finns ett tydligt fokus, det gör att bilden upplevs som lugnare. Undvik för plottriga bilder.
Vid responsiv omskalning eller beskärning av bilder bör man säkerställa att inte det väsentliga i bilden hamnar utanför enhetens viewport.
Bättre och sämre exempel på beskärning:
Beskuren närmare personerna ger en lugnare bild med bättre fokus.
Undvik bilder med för mycket detaljer om de inte är nödvändiga. Beskär hellre närmare för att skapa ett enklare och lugnare utsnitt.