Bilaga Digital profilmanual

Transkript

1 Bilaga Digital profilmanual Version 3 December 2011

2 SID 2 Innehåll Inledning... 3 Logotyp... 4 Placering... 4 Alternativ placering... 5 Färger... 6 Färgpalett... 6 Färganvändning... 7 Färghierarki... 8 Text och logotypfärg... 9 Typsnitt Typsnitt för webbplatser Detaljerad specifikation Länkar Knappar Layout Detaljerad specifikation Citat Bildtexter Bakgrundsplattor Diagram och kartor Diagram Kartor Färganvändning Tabeller, listor och formulär Tabeller Listor Formulär Webbannonser Exempel Layout Felaktig användning Sidfot Sociala medier Bildmanér Riktlinjer Exempel... 34

3 INLEDNING SID 3 Tillväxtverkets varumärke på webbplatser. I denna bilaga redogör vi för hur Tillväxtverkets visuella identitet ser ut och används på webbplatser. Denna bilaga är ett tillägg till vår grafiska manual och ska underlätta arbetet med Tillväxtverkets visuella identitet på webbplatser. Det är viktigt att Tillväxtverkets visuella identitet känns igen i alla medier. För att stärka användarvänlighet och tydlighet på webbplatser krävs dock att vissa anpassningar görs. Det omfattar bland annat placering av logotyp, typsnitt och färganpassningar. Manualen omfattar även utseende av grafiska element så som knappar, diagram och formulär. Samt specifikationer av utseende i webbannonser, bildmanér och användning av vår identitet i sociala medier. Genom att följa dessa specifikationer säkrar vi kvalitet, igenkännedom och användarvänlighet av vårt varumärke även på webbplatser.

4 Logotyp placering SID 4 Logotypens placering i digitala medier För att skapa en tydlig och enhetlig avsändare på webbplatser placerar vi alltid logotypen i det övre vänstra hörnet. Vi följer på så sätt standardiserade placeringar av logotyp, artighetsnavigering och sökfält vilket underlättar navigationen för användaren. Logotypen har ofta funktionen av att länka till webbplatsens startsida Logotypens storlek kan komma att variera beroende på hur stor yta den är placerad på. Minsta marginal ska dock alltid vara logotypens frizon, som baseras på den största bokstaven T i ordet Tillväxt. Ordet Tillväxt ska vila på mittlinjen av ytan som logotypen är placerad i. Undantag för placering av logotypen finns i till exempel sidfot (se sida 30). Minsta tillåtna storlek Tillväxtverkets logotyp får inte återges mindre än 50x20px. 50px 20px

5 Logotyp Alternativ placering SID 5 Tillväxtverket som sekundär avsändare På kampanjwebbplatser och dylikt placerar vi Tillväxtverkets logotyp längst upp till höger. Övriga avsändare ligger brevid till vänster om logotypen.

6 FÄRGER FÄRGPALETT SID 6 Färgpalett Tillväxtverkets uttrycksfulla färgpalett ska återspeglas även i digitala medier. R: 40 / G: 174 / B: 214 # 28aed6 R: 229 / G: 118 / B: 58 # e5763a R: 248 / G: 195 / B: 56 # f8c338 Vi använder oss av en flexibel gråskala, det innebär att alla nyanser av svart mellan 75 och 10% går att använda. I färgboxarna anges både RGB-värdet och HEX-koden som ska användas för respektive färg. Notera att vi inte använder våra CYMKvärden av profilfärgerna. CMYK-värden ska endast användas för trycksaker då de ger en annorlunda och felaktig återgivning av färgerna på skärm. R: 13 / G: 94 / B: 120 # 0d5e78 R: 0 / G: 124 / B: 82 # 007c52 RGB används även för att ange de färger en datorskärm återger, och beskrivs med ett värde från för varje färg. HEX-värden används för webbsidor för att ange RGB-färger i HTML-kod. R: 0 / G: 0 / B: 0 # % 5%

7 FÄRGER Färganvänding SID 7 Avsändarfärg och färghierarki Primär avsändarfärg / huvudfärg För att skapa tydlig igenkänning använder vi oss i första hand av blå som avsändarfärg. R: 40 / G: 174 / B: 214 # 28aed6 Orange och gul är sekundära färger. En viktig grundregel är att det alltid finns en huvudfärg som dominerar webbplatsen. Detta är för att skapa en tydlig visuell hierarki när det gäller särskiljning av olika element, som till exempel sidhuvud och meny. Se hur färgerna kan varieras på sida 8. Sekundära färger R: 229 / G: 118 / B: 58 # e5763a R: 248 / G: 195 / B: 56 # f8c338 Accentfärger R: 13 / G: 94 / B: 120 # 0d5e78 R: 0 / G: 124 / B: 82 # 007c52 R: 0 / G: 0 / B: 0 # % 5%

8 FÄRGER Färghierarki SID 8 Variationer av färger De blå, orange och gula färgerna kan alla tre varieras och användas som huvudfärg. Att variera huvudfärgen på detta sätt kan bli aktuellt på till exempel kampanjwebbplatser som behöver utmärka sig och samtidigt behålla Tillväxtverkets visuella uttryck. Primär färghierarki Huvudfärg Sekundära färger Accent färger Sekundär färghierarki

9 Färger Text och logotypfärg SID 9 Användande av textfärg och logotyp på bakgrundsplattor För att kontrasten mellan text och bakgrund inte ska vara för otydlig anpassar vi textfärgen beroende på vilken färg bakgrundsplattan har. Samma färgkombinationer gäller även för logotyp. Vit textfärg Vit textfärg Svart textfärg Vit textfärg Vit textfärg Svart textfärg Om bakgrundsfärgen är 35% svart eller mindre använder vi svart textfärg. Annars används vit textfärg. Vit textfärg

10 TYPSNITT TYPSNITT på webbplatser SID 10 Typsnitt Typsnittet som vi använder i brödtext på webbplatser heter Lucida Grande. Ett humanistiskt och webbsäkert sanseriftypsnitt som är lätt att läsa på skärm. Om användaren mot förmodan inte skulle ha Lucida Grande installerat på sin dator använder vi typsnittet Arial Regular. I rubriker använder vi alltid Arial Bold. Brödtexter / löpande texter Lucida Grande Regular Lucida Grande Bold ABCDEFGHIJKLMNOPQ abcdefghijklmnopqrst [&$ %@*] Rubriker Arial Bold ABCDEFGHIJKLMNO abcdefghijklmnopqrs [&$ %@*]

11 TYPSNITT Detaljerad specifikation SID 11 Layout Här visas samtliga textstorlekar, typsnitt och radavstånd i brödtext. Rubrik: Arial Bold, 25px # Spärrning -15* Ingress: Lucida Grande Regular, 16 px # Spärrning -10* Brödtext: Lucida Grande Regular, 13 px # Spärrning -15* Punktlistor: Lucida Grande Regular, 13 px # Punkter: 17px Spärrning -15* Numrerade listor: Lucida Grande Regular, 13 px # Nummer: Lucida Grande Bold, 13 px Spärrning -15* *Spärrning av text är inte tillämpbart i alla webbläsare och kan anges i olika enheter i HTML-kod. Därför ska spärringen som är angiven endast ses som en visuell referens.

12 TYPSNITT Länkar SID 12 Länkar Det viktigt att användaren förstår vad som är klickbart på webbplatsen. Därför är det viktigt att klickbara text-länkar skiljer sig mycket från övrig text. LänkfÄrg R: 15 / G: 109 / B: 188 # 0f6dbc Tillväxtverkets webbplatser använder alltid blå och understrukna länkar. Besökta länkar särskiljs också genom en lila färg. Undantag för länkfärger och understruken text kan göras i till exempel menyer där den grafiska formgivningen på andra sätt tydliggör vad som är klickbart. Besökt LänkfÄrg R: 85 / G: 26 / B: 139 # 551a8b Typografi i länkar: Lucida Grande Regular, 13 px Understrukna Spärrning -15* *Spärrning av text är inte tillämpbart i alla webbläsare och kan anges i olika enheter i HTML-kod. Därför ska spärringen som är angiven endast ses som en visuell referens.

13 Knappar SID 13 Knappar För att tydliggöra vad som är klickbara knappar så bryter vi av vårt strikta och raka formspråk med avrundade knappar. Alla knappar har även en sober skugga och blänker något. Detta ger knapparna en tredimensionell känsla som särskiljer dem från övriga icke klickbara bakgrundsplattor. Normalläge Mouseover 20% vitt lager Aktivt läge Inverterad gradient utan skugga Alla knappar har tre lägen, normalläge, mouseover och nertryckt aktivt läge. Vår primära knappfärg är Tillväxtverkets mörkblå färg. Andra färgvarianter som kan tillämpas är orange, ljusblå och grön. För att undvika förvirring hos användaren är det dock viktigt att alla knappar har ett homogent utseende. Alternativa färger på knappar

14 Layout Layout av text och bild SID 14 Layout För att undvika långa och svårlästa rader när breda webbläsarfönster används rekommenderas att en maximal spaltbredd sätts. En lämplig spaltbredd är 70 tecken per rad inklusive mellanslag. För att höja läsbarheten ger vi gärna brödtexten mer luft genom att använda bilder och citat. Både helspalt och 2-spalt går att använda. Bild Citat Bild Om en höger resp. vänsterställd bild läggs för nära varandra blir texten svårläst.

15 Layout Detaljerad sepcifikation SID 15 Layout Här visas avstånd mellan bild, text, citat samt bild med bildtext.

16 Layout Citat SID 16 Citat Här visas hur citat i text ser ut. Vi använder främst våra tre primära färger: blå, orange och gul som bakgrundsplattor. Dessa färger kan dock varieras och kombineras utan inbördes ordning. Vi markerar tydligt citatets början och slut med två tydliga citationstecken. Typsnittet vi använder till citat är Lucida Grande Bold Italic. En lämplig textmängd är ungefär 160 tecken, inklusive mellanslag. Exempel: Vänsterställt citat Gul bakgrundsplatta Lucida Grande Bold Italic, 13 px Spärrning -15 Svart text Exempel: Högerställt citat Blå bakgrundsplatta Lucida Grande Bold Italic, 13 px Spärrning -15 Vit text Exempel: Fullspaltcitat Orange bakgrundsplatta Lucida Grande Bold Italic, 13 px Spärrning -15 Vit text

17 Layout Bildtexter SID 17 Bildtexter När vi använder bilder i brödtext förstärker vi om möjligt bilden med en bildtext enligt exemplet till höger. Bildtexten placeras under bilden och delas av från brödtexten genom en avskiljande linje. Vi använder även här Lucida Grande som typsnitt, dock i skärningen Bold. En lämplig textmängd är ungefär 130 tecken, inklusive mellanslag. Typografi i bildtexter: Lucida Grande Bold, 13 px Spärrning -15 Exempel: Bild som tar upp hela spaltbredden. Exempel: Bild som tar upp havla spaltbredden.

18 Layout Bakgrundsplattor SID 18 Bakgrundsplattor Bakgrundsplattor används för att lyfta upp särskild information och särskilja den från övrig text och innehåll på webbplatsen. Bakgrundsplattor kan innehålla enbart text eller både text och bild. Samtliga profilfärger kan användas som bakgrundsplattor. Detta är förutsatt att hänsyn till textfärg och färghierakri tas (se sida 8). För att ge liv åt de fyrkantiga bakgrundsplattorna avslutas och särskiljs de från varandra genom en vit ram och en subtil skugga i nederkant. Även den avskiljande linjen i bakgrundsplattorna har en subtil skugga som ger tredimensionell känsla. Undantagsfall Om tekniska begränsingar finns använder vi en förenklad bakgrundsplatta utan effekter. Lämplig höjd för bilder i bakgrundsplattor är mellan px höga.

19 Layout Bakgrundsplattor SID 19 Alternativt utseende för bakgrundsplattor Vi kan även använda ett mer subtilt utseende på bakgrundsplattor. Vilka bakgrundsplattor som vi väljer att använda avgörs utifrån information och utformning av webbplatsen. Alla Tillväxtverkets profilfärger kan användas som bakgrundsplatta till rubriker. För att behålla det subtila utseendet i bakrundsplattorna bör vi undvika att använda bakgrundsfärg till rubriker som är mer än en rad.

20 Layout Bakgrundplattor SID 20 Användande av bakgrundsplattor i layout Bakgrundsplattor placeras lämpligast till höger på webbplatsen. För att undvika obalans i layouten anpassar vi för varje sida antalet bakgrundsplattor efter mängden innehåll. Bild

21 Diagram och kartor Diagram SID 21 Diagram Våra diagram är enkla, tydliga och visas på ljusgrå bakgrundsplattor med tillhörande avskiljare. Här visas exempel på färganvändning och utformning av stapeldiagram och kartdiagram. Om tekniska begränsningar finns kan diagrammens utseende förenklas. Se sida 21 för exempel på linje- och cirkeldiagram. Se sida 23 för mer information om färganvändning i diagram och kartor. Liggande stapeldiagram Kartdiagram Stådende stapeldiagram

22 Diagram och kartor Diagram SID 22 Diagram Här visas exempel på färganvändning och utformning av linje och cirkeldiagram. Om tekniska begränsningar finns kan diagrammens utseende förenklas. Se sida 23 för mer information om färganvändning i diagram och kartor. Linjediagram Utökat linjediagram Cirkeldiagram

23 diagram och kartor Kartor SID 23 Kartor Tydliga kartor förenklar val av till exempel län, kommun eller linknande. Vi kan använda alla färger ur vår profil men skiljer på aktivt/valt område och mouseover med två olika färger. Se sida 23 för mer information om färganvändning i diagram och kartor.

24 diagram och kartor Färganvändning SID 24 Rekommenderad färganvändning i diagram och kartor I diagram är de färger som har bäst kontrastvärde gentemot vit och grå bakgrund att föredra. När flera olika diagram visas på samma sida rekommenderas även att olika färger används i de olika diagrammen. I diagram där det är lämpligt att använda toningar av en färg, till exempel i kartdiagram (se sidan 20), får vi använda antingen mörkblå och grön. Vi använder helst Rekommenderad nyanskillnad för toningar i enfärgade diagram Vi undviker

25 Tabeller SID 25 Tabeller Här visas exempel på utformning av tabeller. Vi använder olika grå toningar för att särskilja rader och kolumner. Den översta huvudraden är aldrig grå utan är alltid i en av Tillväxtverkets fem färger, alla kan användas så länge hänsyn till text och färghierarki tas. Sorterbar tabell

26 Listor SID 26 Listor Här visas exempel på utformning av tre olika listor. Om listor visas i en, två eller tre spalter kan varieras beroende på listans innehåll och webbplatsens utformning. I länklistor ökar vi radavståndet från 17 px till 19 px, samt att avståndet mellan listobjekten är 23 px. Alfabetiskt index I en alfabetisk lista använder vi oss av bokstavssymboler och förtydligar på så sätt indelningen. Översikt av innehåll Tunna linjer används för att visa en lista med översikt av innehåll, som till exempel en översikt av webbplatsens innehåll. Länklista - trespalt Exempel på utseende av en trespalts-lista där innehållet är uppdelat i kategorier.

27 Formulär SID 27 Formulär Alla formulär är tydliga och enkla att förstå. Ett homogent utseende och konsekvent placering av rubriker, inmatningsfält, knappar och förklarande texter ger ett bra stöd för användaren. Vi ger användaren direkt feedback om någonting går fel när formuläret fylls i. Detta underlättar inmatningsprocessen och ger användaren ett bra flöde. Om tekniska begränsningar finns kan forumlärens utseende förenklas men vi eftersträvar att kunna erbjuda besökaren aktiv feedback.

28 Webbannonser Exempel SID 28 Webbannonser Här visas exempel på webbannonser i olika format för annonsering på extern webbplats. För att skapa igenkänning använder vi oss främst av våra tre primära färger, blå, orange och gul. Då webbannonser ofta har möjlighet att använda inbäddade typsnitt använder vi oss av Tillväxtverkets typsnitt för trycksaker Myriad Pro. Plustecken kan användas i nedre delen av annonsen. Se sidan 29 för exempel på olämplig användning. Möjliga animeringar i webbannonser kan anpassas beroende på format och budskap. Alla animeringar ska dock alltid ge uttryck för det vi står för: kunskap, samverkan, enkelhet och handlingskraft. Detta innebär att vi inte använder oss av onödiga och komplicerade effekter. Mer om disposition och layout i webbannonser finns på sida 28. Exempel kvadratiska annonser Exempel stående annonser Exempel stående annonser Exempel liggande annonser

29 Webbannonser Layout SID 29 Disposition och layout i webbannonser Även i webbannonser tar vi hänsyn till vår färghierarki och använder oss av en huvudfärg som dominerar annonsen. Om vi använder bild i en annons så dominerar bilden annonsen. Logotypen placeras i det övre högra hörnet, naturligtvis med hänsyn till logotypens frizon. Text i webbannonser är alltid vänsterställd och använder sig av samma frizon som logotypen.

30 Webbannonser Felaktig användning SID 30 Felaktig användning av webbannonser Här visas felaktig layout och disposition i webbannonser. Exempel 1 - Stående annons För många plustecken används och dominerar annonsen på ett olämpligt sätt. Exempel 2 - Kvadratisk annons Texten i annonsen är centrerad istället för vänsterställd. Utformningen av annonsen har inte anpassats efter färghierarkin. Läs mer om färghierarki på sida 7. Exempel 3 - Liggande annons Bilden dominerar inte annonsen och hamnar ur fokus. Exempel 2 - Kvadratisk annons Exempel 1 - Stående annons Exempel 3 - Liggande annons

31 Sidfot Sidfot SID 31 Sidfot För att underlätta navigeringen för användaren har alla våra sidor sidfötter. Layout och innehåll i sidfoten kan variera beroende på webbplatsens innehåll. Följande element ska dock alltid finnas med i sidfoten: Huvudnavigation Kontaktuppgifter Information om webbplatsen, som till exempel sitemap, FAQ. länklistor, A-Ö index etc. Placering av logotype Logotypen placeras i det högra hörnet av sidfoten. Hänsyn till frizon måste tas. Länkar till sociala medier Högerställd logotype

32 Sociala medier Använding av varumärket SID 32 Användning av Tillväxtverkets varumärke i sociala medier För att skapa igenkänning använder vi alltid den blå färgen som avsändare. Vi använder alltid logotypen som profilbild och ser till att logotypen anpassas och återges på bästa sätt. Vi undviker att skapa profilbilder där logotypen beskärs och återger en märklig ordbild. För att undvika att logotypen beskärs olämpligt är det ofta säkrast att använda kvadratiska profilbilder. Hur beskärning och återgivning av profilbilder fungerar kan dock variera mycket i olika medier. När logotypen används som profilbild anpassar vi frizonen och använder den minsta bokstaven T i Tillväxtverket. Se mer om vår logotyp på sidan 4.

33 TILLVÄXTVERKETS Generella designprinciper för Tillväxtverkets externa webbplatser På externa webbplatser följer vi Tillväxtverkets grafiska riktlinjer men använder vi oss av den sekundära färghierarkin, vi använder alltså inte blå som primär färg (se sida 8). Avsändarens logotype ligger till vänster och Tillväxtverkets logotype till höger, samt som avsändare i footern. externa webbplatser Exempel SID 33

34 TILLVÄXTVERKETS Generella designprinciper för Tillväxtverkets nyhetsbrev Här visas exempel på Tillväxtverkets digitala nyhetsbrev. Avsändaren av nyhetsbrevet placeras alltid till vänster i sidhuvudet och Tillväxtverkets logotyp ligger placerad till höger, enligt de grafiska riktlinjerna. Layouten i nyhetsbreven kan anpassas beroende på budskap och varieras mellan hel och halvspalt där högerspalten är en fast puffyta. Vi kan använda alla Tillväxtverkets färger i nyhetsbreven men undviker att använda fler än tre färger i ett och samma brev. Digitala Nyhetsbrev Exempel SID 34