Grafiska riktlinjer FÖR WEBB OCH WEBBUTBILDNING

Relevanta dokument
Grafisk manual

Att göra-lappar för digital tillgänglighet

aloq.se Loxysoft AB Post: Box 153, Bräcke Besök: Öneslingan 11, Frösön Tel: Fax:

Grafisk profil för digitala gränssnitt MAJ 2019

Inledning. Innehåll. Inledning

GRAFISK MANUAL

Sociala medier för företag

Grafisk profil. Den grafiska profilen är som ett regelverk över hur all Thomitas informationsmaterial ska se ut för att ge ett enhetligt intryck.

Direktonline. GRAFISK MANUAL

Behöver ni hjälp med lokala versioner av loggor mm kan det beställas via Designateljén. För dig som önskar hjälp med formgivning.

Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande

Logotyp och Grafisk profil för UT Transport i Norr AB

Våra visuella riktlinjer

DIGITAL MANUAL BILAGA 1 TILL GRAFISK PROFIL KK 13/167

En enhetlig profil är viktig för alla organisationer

GRAFISK PROFIL VERSION 1 APRIL

Grafisk manual Inkl sociala media

1.2 Logotypens färgsättning

small phones for big people Grafisk manual Innehåll Förutsättningar small phones for big people En enhetlig grafisk profil 1 Logotyp

Grundläggande grafisk profilmanual för SKR. Georgia Pro Black italic. Georgia Bold italic. Typografi. Rubriker. Georgia Pro light italic 16 pkt

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Inviatech Grafisk Profil V kreativ & engagerad samhällsbyggare

Sjukfrånvaro parternas arbete inom privat sektor

Grafisk profil. Förlagsmaterial

Varumärket - föreningens hjärta Logotyp Logotypens frizon Deviselement Profilfärger Primära färger...

Allt är Tobbes fel. Grafisk profil för förbundet. Ung Pirat

Den grafiska profilieringen för roar

Grafisk manual Version 1.0

Grafisk manual Sörmlandsstugan 2.0

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Grafisk profil för Charlott Zsoldos. Holistic Health Coach

GRAFISK PROFIL HJÄLPREDA FÖR GRAFISK PRODUKTION

ORDLISTA WEBBDESIGN 100P

Stockholms universitet

Grafisk Manual. Version 1.0

Innehållsförteckning

Grafi sk profi l 1 Eslövs kommun 2011

Grafisk manual KORTVERSION 2015

Lampladan City. Grafisk manual

Bilaga Digital profilmanual

Läsa med stöd av talsyntes

GRAFISKA RIKTLINJER 1

GRAFISK MANUAL

Bilaga Digital profilmanual

Det ska synas att det är vi. Vår gra ska pro l

INLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar

PLÅT & VENTFÖRETAGEN Grafisk manual

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

INNEHÅLL. Förord Festivalen Logotyp Färger Typografi Trycksaker

Visuell identitet JUNI 2018

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Huvudlogotyp Finns med texten Moderaterna och utan. Observera att de äldre loggorna i färgen PMS 2915 ej längre ska användas.

VARUMÄRKESPLATTFORM OCH GRAFISK MANUAL

Instruktioner för Articulate Storyline 2

Varumärkesplattform och grafisk manual

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

GRAFISK MANUAL VERSION 2.0 SEPTEMBER 2019

Webbsida i Wordpress. Existens på webben och bli sökbar

CITY I SAMVERKAN PRESENTATION

Innehållsförteckning. Inledning 4 Vår logotyp 5 Våra färger 9 Vår typografi 11 Dekorelement 14 Bildspråk 18

Grafisk manual Version 1.0 CTIVE

GRAFISKA RIKTLINJER EQUMENIA

Kommunikation med medlemmarna

Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Reglemente för Medicinska Föreningens visuella identitet

Teknisk tillgänglighet

1. STANDARDLOGOTYP. Läs mer om Flexit LOGOTYP INLEDNING. LOGOTYP FÖR POSITIONERING Ljusblå: 100% C Mörkblå: C 100%, M 89%, Y 27%, K 10% Svart/vit

Brand Guidelines 2019

1 Detta fält hämtar värdet från den primära adressen på webbplatsen. Kontrollera att den primära adressen stämmer under "Webbplatsinställningar".

Frågor och svar Gränssnittsdesign/Webbutveckling

Manual för webbredaktörer. Februari 2018

GRAFISKA RIKTLINJER Svenska Ridsportförbundet maj Svenska Ridsportförbundet Grafiska riktlinjer 1

Visuell profil. Framtagen av kommunikatör Anna karlsson: juli 2017

Riktlinjer för grafik och sociala medier

F15 Tillgänglighet/Accessibility Dagens agenda

Dokument i klassens aktivitet

Lathund skapa och redigera sidor en projektwebb

Grafisk manual Vårdsamverkan Skaraborg

SIF GUIDELINES 1 GUIDELINES 2017

Användarmanual för Content tool version 7.5

Program för grafisk profil Ks/ 2018:140. kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning. Fastställt av kommunfullmäktige

Klimatrådet Grafiskt manér

grafisk manual 2.0 / 201 7

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

Grafisk manual. 1.0 Index. Om logotypen... 2 DOTTERBOLAG... 3 DOTTERBOLAG 2 RADER... 4 VARIATIONER... 6 EXEMPEL PÅ EJ TILLÅTEN ANVÄNDNING...

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD

GRAFISK PROFIL och en liten guide i hur du använder den. valrörelse 2018 och framåt

Lathund Bygga mallar. Senselogic AB Version 2.3

Publiceringsverktyget

Varumärket. Vi bygger varumärket Folkhögskola.nu tillsammans

GRAFISK MANUAL & RIKTLINJER

Kommunikationspolicy

Riksteatern Grafisk manual

Nordjobbs grafiska manual

Förord. Innehåll. Logotyp 3 Typsnitt 4 Färger 5 Profilelement 6 Profilmallar 7-9

Grafisk profil ÖLANDS KOMMUNALFÖRBUND

Nya sundbyberg.se. Webbkoncept. v1.0, Sundbyberg där staden är som bäst

Gränsöverskridande samverkan

Transkript:

Grafiska riktlinjer FÖR WEBB OCH WEBBUTBILDNING

Innehåll Om riktlinjerna Typografi Färger Bilder och bildmått Ikoner/piktogram Tillgänglighet Exempel, webbutbildning Exempel, webbverktyg Exempel, webbverktyg med test 2

Om riktlinjerna Typografin och färgerna har en central roll i webbarnas och webbutbildningarnas grafiska form och det är därför viktigt att ta god hänsyn till det. De grafiska riktlinjerna är indelade i två steg, först med generella regler kring typografi och färg sedan visas exempelsidor. 3

Typografi Generellt används Frutiger som typsnitt på prevent.se. I längre artiklar används en seriff (Georgia) för bättre läsbarhet. Frutiger 45 light (minst 18px) Frutiger 65 bold (minst 14px) Om Frutiger inte kan användas är Istok Web ett snarlikt typsnitt som finns här https://fonts.google.com/ (gratis) Georgia regular (exempel brödtext 18/27px) 4

Färger (min text regular 18 px or min text bold 14 px) RGB 149/193/26 HEX #76a100 Tips: testa kontrasten på https://contrast-ratio.com Utöver vitt och svart används Prevents profilfärger. Den mörkgröna är reserverad som huvudfärg på prevent.se och ska inte användas som huvudfärg i andra webbprodukter eller webbutbildningar. (small text ok) (min text regular 18 px or min text bold 14 px) RGB 0/62/110 HEX #003e6e RGB 67/152/186 HEX #4398ba (small text ok) (small text ok) RGB 200/75/20 HEX #be5014 RGB 59/59/59 HEX #3b3b3b (small text ok) RGB 0/131/50 HEX #008332 (small text ok) RGB 251/185/0 HEX #fbb900 (small text ok) RGB 240/240/240 HEX #f0f0f0 5 (small text ok) RGB 108/88/97 HEX #6c5861 (small text ok) RGB 211/211/211 HEX #d3d3d3

Bilder generellt Prevent gillar människor. Vi använder svartvita bilder tagna på människor i olika arbetsmiljöer eller stilleben i färg för att skildra mer övergripande områden/ämnen/branscher. Svartvita bilder på människor och stilleben används bland annat på bransch- och ämnessidor på prevent.se. Bildmått prevent.se: 620 x 308 pixlar 6

Bilder i webbutbildning & webbverktyg Bilderna ska vara i färg Fotografier ska skildra verkliga miljöer och människor som ser ut att höra hemma där Illustrationer och animationer använd Prevents profilfärger om det är möjligt Ha koll på bild- och filmrättigheter och se till att de även gäller marknadsföring. 7

Bilder i e-handeln Böcker, omslag, färgbild mått 300 x 426 pixlar Webbverktyg, utsnitt från verktyget, färgbild. Mått 300 x 426 pixlar Webbutbildning och utbildning har antingen svartvita bilder på människor eller stilleben i färg. Mått 300 x 426 pixlar och 940 x 313 pixlar. 8

Bildmått Vanlig webbsida prevent.se: 620 x 308 pixlar E-handeln (liten bild samlingssidan): 300 x 426 pixlar E-handeln (utbildning): 940 x 313 pixlar LMS startsida: 1140x200 pixlar Webbverktyg och webbutbildningar kan ha andra bildmått. 9

Ikoner (använd i valfri av Prevents färger, i vissa författarverktyg är ikonerna fasta) Buller Checkruta Dokument Ergonomi Fallolycka Film Gilla Hjärta Kemiska risker Köp Kundberättelse Ladda ner Ljud OSA Paragraftecken Paus Paus 15 min Paus 30 min Paus 45 min Paus 60 min Pil höger Pil ner Pil upp Pil vänster Rapportera fel Samtal Skriv ut Språk Tipsa en vän Trafik 10 Facebook LinkedIn Twitter YouTube Sök Borrning Brand Damm (andningsmask) El Maskinsäkerhet (lås)

Exempel på knappar Checklistorna Hover-effekt E-handeln 12

Webbtillgänglighet 1. Skriv enkla texter testa läsbarheten i en LIX-räknare 2. Använd tillräcklig kontrast framförallt mellan text och bakgrund. testa kontrast med color contrast checker 3. Skriv tydliga länktexter förklara vad länken leder till, länken ska ha en avvikande färg samt bli understruken när man för över musen. Mer om tydliga länkar 4. Gör tillgängliga formulär ange både i koden och i texten vilket innehåll som användaren förväntas fylla i. Mer om uppmärkning av formulär 14

Webbtillgänglighet 5. Lägg till alt-texter till bilder erbjud också textning av film. Beskriv endast om bilden eller filmen är meningsbärande. Mer om texta inspelad rörlig media 6. Det ska gå att surfa med tangentbordet det ska vara logisk tabbordning. Mer om hantera med enbart tangentbordet 7. Märk upp rubrikerna på rätt sätt html-taggarna h1 för huvudrubrik. Läs mer om att skapa rubrik med h-element 8. Det ska gå att förstora mer om förstoring på webbriktlinjer.se 9. Koda med ARIA-attribut mer om ARIA 15

Exempel

Webbutbildning 17 Exempel ebam, Att arbeta säkert med höga tryck, Ny i industrin Tänk på att: Använd Prevents färger, typsnitt, ikoner, knappar Använd Prevent-loggan med underryckare i övre högra hörnet Undvik skuggor på knappar etc Se till att läsbarheten är god, ej för långa rader, för liten text eller för dålig kontrast. Tillgänglighet texta filmer och instruktioner, ha uppläsningsfunktion Mobilanpassning glöm inte att testa i mobilen

Webbverktyg T ex OSA-enkäten, Introduktionsguiden, Forma kontoret. Dessa mallar är flexibla och kan användas på många olika sätt. 18

Webbverktyg med test T ex Hälsofrämjande ledarskap, Hat och hot journalister. Dessa mallar passar inte om man har långa texter. Den är utformad för att presentera enkla och lite längre metoder. 19

Undrar du något? Kontakta: Linda Johansson linda.johansson@prevent.se eller Malin Drougge malin.drougge@prevent.se 20