Bilder

Bilder har i uppdrag att leverera en känsla av något slag. Vi vill att det ska kännas välkomnande, lite premium, inkluderande och trovärdigt när man möter SCA i digitala sammanhang.

Bilder för det digitala ska följa SCAs generella grafiska riktlinjer och bildtonalitet, med tillägg för bildkategorin "Stämningsbilder": bilder som har i uppdrag att skapa en känsla. T ex en bild på ett barn som plockar blåbär snarare än en bild på en motorsåg.

Bilder i heroytor

Bilder i heroytor kan presenteras i antingen helbredd eller halvbredd (desktop). I helbredd läggs rubrik och eventuella etiketter och CTA-knapp/länk ovanpå bilden. I halvbredd läggs rubrik, ingress och eventuella etiketter och CTA-knapp/länk på en färgplatta i anslutning till bilden (till vänster om bilden på desktop, ovanför i mobil).

Desktop

Mobil

Bilder i block och sektioner

I desktop presenteras bilder i block eller sektioner i helbredd, halvbredd eller max tredjedelsbredd. I mobil presenteras alla bilder i helbredd och block och sektion er staplas ovanpå varandra.

Bilder i block och sektioner presenteras övervägande i liggande/stående fyrkantiga format, men för call-to-actions samt kontaktpersoner finns det också runda bildformat.

Flera olika exempel av hur bilder kan användas på SCAs webbplats, i runda format till vänster om text, eller i rektangulärt format i olika storlekar.

Bilder i brödtext

Bilder i brödtext kan läggas till i följande format:

Normal, tar upp hela kolumnbredden
Rund bild i textflödet på höger sida
Vänster sida av textflödet (för vertikala bilder)
Höger sida av textflödet (för vertikala bilder)
För logotyper och liknande:
- Liten mellan stycken (för kvadratiska och horisontella bilder)
- Medelstor mellan stycken (t.ex. för små vertikala bilder)
- Liten innanför vänstermarginalen (främst för kvadratiska bilder)

Normal

Flygbild tagen över en svensk skog, med en å som löper från det nedre högra hörnet av bilden upp längs med skogen. Låga moln hovrar över sjön.

Rund bild i textflödet på höger sida

För att denna ska se bra ut behöver det finnas såpass mycket text att det helts flödar från bildens översta till nedersta del.

Text med rund bild

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Vänster/höger sida av textflödet (för vertikala bilder)

För att stående bilder till vänster/höger om texten ska se bra ut behöver det även här finnas såpass mycket text att det helts flödar från bildens översta till nedersta del.

Text med stående bild till vänster innehållande bildtext

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text med stående bild till höger

För logotyper och liknande

Liten mellan stycken (för kvadratiska och horisontella bilder)

Möjlighet att lägga in en liten bild som lägger sig mellan stycken. Texten kommer alltså inte att flöda runt bilden.

Exempel på hur en liten bild blir bredare om formatet är horisontellt:

Medelstor mellan stycken (t.ex. för små vertikala bilder)

Möjlighet att lägga in en lite större bild som lägger sig mellan stycken. Texten kommer alltså inte att flöda runt bilden.

Exempel på hur en mellanstor bild blir bredare om formatet är horisontellt:

Liten innanför vänstermarginalen (främst för kvadratiska bilder)

Möjlighet att lägga in en liten bild med text som flödar runt bilden.Det går att lägga flera små bilder på rad. Rekommenderas framför allt för kvadratiska och nästan kvadratiska bilder. Se exempel nedan.

Text med liten flytande bild som är linjerad med vänstermarginalen:

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Text med flera liten flytande bild som är linjerad med vänstermarginalen:

Bilder och tillgänglighet

SCA har som mål att följa tillgänglighetsstandarden WCAG, där bland annat bilder med text på ska vara läsbara med hög kontrast. Var därför noga med att texten har hög kontrast mot bilden. Försök att justera bilderna så att de blir mörkare, ljusare eller beskär dem annorlunda för att uppnå en bättre läsbar text.