Ny visuell identitet

Under hösten 2023 är VGR:s nya visuella identitet färdig att använda på externa webbplatser. Den nya visuella identiteten ska skapa förutsättningar för ett tillgängligt, pålitligt, tydligt och modernt gränssnitt.

VGR:s varumärkesmanual är en samlingsplats för VGR:s riktlinjer för varumärke och visuell identitet. Riktlinjerna i manualen ligger till grund för införandet av den visuella identiteten på VGR:s webbplatser. 

VGR:s varumärkesmanual

I oktober 2023 aktiveras mallar i den nya visuella identiteten i Optimizely och finns därefter valbara för externa webbplatser.

Stilmallen slås på per webbplats (startsida). Webbplatsansvarig ansvarar för att byta stilmall och när det ska göras.

Färgerna

Mallarna finns i fyra huvudfärger; grunden (grå), hälso- och sjukvård (blå), kultur (röd) och utbildning (grön). Huvudfärgen styrs av vilken verksamhet webbplatsen beskriver, huvudfärgen kallas webbplatsens primärfärg i Optimizely. Grunden för VGR kan användas av alla, men ska användas av samtliga som inte tillhör hälso-och sjukvård, kultur och utbildning.

Utöver huvudfärgerna kommer varje webbplats ha upp till två komplementfärger. De färgerna kan användas som bakgrundfärg bakom block på webbsidan eller som färg i vissa block. Komplementfärgerna kan väljas helt fritt från paletten och är inte beroende av vilken bransch verksamheten hör till.

Färgerna för webb är anpassade så de fungerar vad gäller tillgänglighet och kontrast.

En webbplats - ett utseende

Utseendet aktiveras på en webbplats startsida och ändringen påverkar alla undersidor. Alla sidor på webbplatsen har samma primärfärg och komplementfärger.

Att göra innan bytet

Inga ändringar behöver göras med innehållet innan byte av stilmall. Alla block och funktioner kommer fungera i det nya utseendet. Om riktlinjerna för hur block och funktioner ska användas följs på webbplatsen kommer det fungera och se bra ut.

Välj komplementfärger

Valet av komplementfärger ska utgå från hur verksamheten arbetar med färger i visuell kommunikation i andra kanaler. Kommunikationen via webbplatsen ska hänga samman med övrig kommunikation.

Utforska i stagemiljön

Kontrollera hur webbplatsen ser ut i den nya visuella identiteten i stagemiljön. Webbplatsen där är en kopia av den publicerade (kopia tagen mitten av september). Ändringar som görs i stage påverkar inte hur den publicerade webbplatsen ser ut, vilket betyder att du fritt kan testa olika funktioner och lösningar. Det nya utseendet finns valbart i stagemiljö från början av oktober.

Inloggning i stagemiljön Optimizely externwebb

Byt till det nya utseendet på startsidan i testmiljön. Under fliken "inställningar" finns valet "ändra CSS-tema på hela sajten". Byt till rätt primärfärg utifrån för din verksamhet.

Valen som finns är:

• Grunden
• Sjukvård
• Utbildning
• Kultur

Om du är tveksam över vilket css-tema och primärfärg som passar din webbplats kan du stämma av med varumarke@vgregion.se. 

På samma plats på startsidan väljer du upp till två komplementfärger att använda på webbplatsen. Det finns åtta komplementfärger ur den gemensamma paletten att välja mellan.

Se över webbplatsen

Titta särskilt på de komponenter som förändras mest i den nya visuella identiteten:

• Toppmenyn (aktiveras vid klick)
• Puffblock (får fast bildstorlek 16:9)
• Bildlänkar 1+2 (får en bild med länk och två textlänkar)

Utnyttja de nya möjligheterna

Ett antal block kommer att ha fler möjligheter. Det kommer också finnas möjlighet att jobba med bakgrundsfärg på varje webbsida. Sätt ramar för hur din webbplats ska utnyttja möjligheterna.

De nya möjligheter som finns är:

• Användning av primär- och komplementfärg på blockbakgrund (färg på webbsidan bakom block)
  • Användning av färg ställs in på respektive sidas innehållsareor (yta där block kan läggas). Vilka primär- och komplementfärger som ställts in för webbplatsen i helhet styr vilka färger som är valbara.
  • Varje sida har tre innehållsareor (ytor där block kan läggas). De olika ytorna kan använda olika färger.
  • Du kan välja att färgen påverkar hur bakgrunden ser ut, eller att färgen enbart kan påverka de block som läggs i ytan.
  • Innehållsarea ovanför ingressen kan inte ha bakgrundsfärg, däremot kan färg ställas in för att påverka block som läggs in i ytan.
• Användning av primär- och komplementfärg på block
  • Det block som kan utnyttja färgval är "puffblock" utan bild
  • Puffblock utan bild kan ha antingen en bakgrundsfärg eller en färgad "splash" bakom vald ikon
  • Vilken färg blocket kan använda styrs av innehållsareans inställning
  • Blockens anpassningsmöjligheter påverkas av om innehållsarean har en bakgrundsfärg eller inte
• Användning av webbikoner i block
  • De block som kan använda valfria webbikoner är:
    • puffblock
    • textblock
    • sidlistningsblocken
    • drop-downblock

Exempel: På en webbsida finns fyra puffblock, två med bild och två med ikon.

Du kan då välja att ha bildpuffarna i en innehållsarea med webbplatsens primärfärg som bakgrund (i exemplet grå). Du gör inställningen på webbsidan i innehållsarea ett där du väljer primärfärg som färg på innehållsarean samt kryssar i använd färgen som bakgrund på innehållsarean.

De övriga två blocken läggs i en innehållsarea längre ner med en av dina komplementfärger, men utan att bakgrunden är färgad. De två blocken justeras så de har komplementfärgens färg (i exemplet gul komplementfärg, ett block har en ljus nyans och ett block har en mörk nyans av komplementfärgen). Du gör inställningen på webbsidan i innehållsarea två där du väljer komplementfärg för innehållsarean, men inte kryssar i använd färgen som bakgrund på innehållsarean. Du gör också inställning i respektive block där du väljer bakgrundsfärg ljus eller mörk för blocket.

Gör bytet på den publicerade webbplatsen

Efter att ha kontrollerat webbplatsen i testmiljön kan bytet göras på den publicerade webbplatsen. Bedöm vilken kompletterande kommunikation som behöver göras i samband med nya utseendet. Du kan använda motsvarande nyhetstext som kommer publiceras på vgregion.se vid bytet. 

Ny visuell identitet på intranätet

Arbetet med att införa den nya visuella identiteten på intranätet påbörjas efter att mallarna för de externa webbplatserna är justerade.

Digital tillgänglighet

Förutom de visuella förändringarna har flera uppdateringar gjorts i komponenterna för att följa aktuell webbstandard och vara tillgängliga för personer med funktionsvariation.

Uppdatering av manualer i webbhandboken

Manualer och riktlinjer kommer att uppdateras.

Synpunkter

Har du synpunkter på VGR:s visuella identitet, kontakta varumarke@vgregion.se

Har du synpunkter på funktionerna i Optimizely, kontakta webb@vgregion.se 

---

Senast uppdaterad: 2023-09-18 15:59

Dela gärna denna sida via:

---