Grafisk profil för digitala gränssnitt MAJ 2019

Transkript

1 Grafisk profil för digitala gränssnitt MAJ 2019

2 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT Inledning Den här grafiska profilen för digitala gränssnitt innehåller riktlinjer för hur Umeå kommuns e-tjänster ska se ut. Den omfattar designsystem i form av grids för olika skärmstorlekar och komponenter som sidhuvud/sidfot, färg, typografi och ikoner. Den grafiska profilens uppgift är att se till att användarupplevelsen i Umeå kommuns e-tjänsters grafik är konsekvent och följer Umeå kommuns grafiska profil. Innehållsförteckning Grid på olika skärmstorlekar... 3 Sidhuvud och sidfot... 7 Färger Typografi Funktionsikoner

3 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / GRID PÅ OLIKA SKÄRMSTORLEKAR Grid på olika skärmstorlekar För att underlätta arbetet med att utveckla e-tjänster har vi tagit fram en grid. Den anger hur webbsidan ska struktureras. Gridden tydliggör även hur komponenterna i guiden ska anpassa sig för olika skärmstorlekar. Umeå kommuns grid för e-tjänster består av 6 kolumner för mobiltelefoner och 12 kolumner för desktop och tablet. 3

4 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / GRID PÅ OLIKA SKÄRMSTORLEKAR / MOBIL Mobil På mobil anpassar sig kolumnernas bredd till den totala skärmstorleken, med viss marginal till skärmens kanter. Mobilgridden har 6 kolumner till skillnad från de övriga i den här guiden som har 12 kolumner. Grid för stående mobil: Spaltmellanrum: 10 px Marginal: 20 px MARGINAL: 20PX SPALTMELLANRUM: 10PX Grid för liggande mobil: Spaltmellanrum: 10 px Marginal: 30 px MARGINAL: 30PX SPALTMELLANRUM: 10PX 4

5 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / GRID PÅ OLIKA SKÄRMSTORLEKAR / TABLET Tablet På tablet (platta) anger vi inte en maxbredd. Istället anpassar sig kolumnernas bredd till den totala ytan, med bestämd marginal till skärmens kanter. Grid för stående tablet: Spaltmellanrum: 20 px Marginal: 30 px Grid för liggande tablet: Spaltmellanrum: 20 px Marginal: 30 px MARGINAL: 30 PX SPALTMELLANRUM: 20 PX MARGINAL: 30 PX SPALTMELLANRUM: 20 PX 5

6 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / GRID PÅ OLIKA SKÄRMSTORLEKAR / DESKTOP Desktop På desktop (datorskärm) anger vi en maxbredd på gridden. Detta för att desktop kan spänna mellan mindre laptopskärmar och större fristående skärmar. Med en maxbredd på gridden ser vi till att sajten inte blir för bred på en stor skärm. Grid för desktop: Totalbredd: 1200 px Spaltmellanrum: 20 px Spaltbredd: 82 px SPALTBREDD: 82 PX SPALTMELLANRUM: 20 PX TOTALBREDD: 1200 PX 6

7 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / SIDHUVUD OCH SIDFOT Sidhuvud och sidfot På följande sidor visas hur sidhuvud och sidfot anpassar sig responsivt till olika skärmar. 7

8 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / SIDHUVUD OCH SIDFOT / MOBIL Sidhuvud och sidfot för mobil Sidhuvud: På mobil mäter den vita ytan i sidhuvudet 120 px i höjd. Namn och rubrik är vänsterjusterad mot gridden och centrerad på den vita ytan. Texten kan utnyttja alla kolumner. Sidfot: I sidfoten ligger logotyp samt en textrad vänsterjusterad och centrerad på den gröna ytan. 40 PX 120 PX Grid för stående mobil: Spaltmellanrum: 10 px Marginal: 20 px Grid för liggande mobil: Spaltmellanrum: 10 px Marginal: 30 px 40 PX 120 PX 150 PX 150 PX 8

9 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / SIDHUVUD OCH SIDFOT / TABLET Sidhuvud och sidfot för tablet Sidhuvud: På tablet mäter den vita ytan i sidhuvudet 110 px i höjd. Namn och rubrik är vänsterjusterad mot gridden och centrerad på den vita ytan. Texten kan utnyttja alla kolumner. 110 PX Sidfot: I sidfoten ligger logotyp vänsterjusterad och textraden är högerjusterad. Båda är centrerad på den gröna ytan. Grid för stående tablet: Spaltmellanrum: 20 px Marginal: 30 px 40 PX 110 PX 40 PX Grid för liggande tablet: Spaltmellanrum: 20 px Marginal: 30 px 110 PX 110 PX 9

10 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / SIDHUVUD OCH SIDFOT / DESKTOP Sidhuvud och sidfot för desktop Sidhuvud: På desktop mäter den vita ytan i sidhuvudet 110 px i höjd. Namn och rubrik är vänsterjusterad mot gridden och centrerad på den vita ytan. Texten kan utnyttja alla kolumner. Sidfot: I sidfoten ligger logotyp vänsterjusterad och textraden är högerjusterad. Båda är centrerad på den gröna ytan. 40 PX 110 PX Grid för desktop: Totalbredd: 1200 px Spaltmellanrum: 20 px Spaltbredd: 82 px 110 PX 10

11 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / FÄRGER Färger Umeå kommuns grafiska profil har två huvudfärger: björk och bris. Det är två ljusa färger. För att webben ska vara tillgänglig är det viktigt att det finns en skillnad i ljusintensitet mellan förgrund och bakgrund, detta enligt WCAG:s riktlinjer. Därför använder vi den mörkaste av de gröna komplementfärgerna, här kallad mörkgrön, på webben. 11

12 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / FÄRGER Färger Till de flesta texterna används en gråsvart färg. Den har en god läsbarhet och neutral känsla, utan att vara så skarp som en ren svart kan bli. MÖRKGRÖN RGB: 0, 110, 30 HEX: #006E1E GRÅSVART RGB: 85, 85, 85 HEX: # VIT RGB: 255, 255, 255 HEX: #FFFFFF BRIS RGB: 209, 232, 255 HEX: #D1E8FF För texterna i den mörkgröna sidfoten använder vi vit. ROSA RGB: 228, 177, 194 HEX: #E4B1C2 12

13 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / TYPOGRAFI CALIBRI BOLD A B C D E F G H I J K Typografi Umeå kommuns profiltypsnitt är Calibri. Det är en modern sans-serif med hög läsbarhet på skärm. Vi använder Calibri för alla slags texter rubrik, brödtext, ingress, länkar etc. För att skapa variation i texterna använder vi olika skärningar för olika ändamål. På webb använder vi skärningarna Regular, Bold och Italic. Hur de ska användas förklaras på nästa sida. L M N O P Q R S T U V W X Y Z Å Ä Ö a b c d e f g h i j k l m n o p q r s t u v w x y z å ä ö # & = + -,. : ; CALIBRI REGULAR A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Å Ä Ö a b c d e f g h i j k l m n o p q r s t u v w x y z å ä ö # & = + -,. : ; 13

14 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / TYPOGRAFI Typografi Löptext och rubriker är satta i gråsvart. Alla länkar är i mörkgrön med underline som tydligt visar att texten är klickbar. Text i sidfot är satt i vit. Typografin utgår från The type system. BODY 1 H1 BODY 1 H2 BODY 1 H1 BODY 1 H3 BODY 1 BODY 2 SUBTITLE 1 H2 H3 BODY 1 BODY 2 SUBTITLE 1 SUBTITLE 2 SUBTITLE 2 14

15 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / FUNKTIONSIKONER STARTSIDA HAMBURGERMENY MINA SIDOR LYSSNA CHAT DELA INSTÄLLNINGAR MEJL 15

16 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT / FUNKTIONSIKONER / ANVÄNDNING Ikoner För ikoner använder vi biblioteket Sharp från Google Material Design. Startsida kan ligga i brödsmulor och visa var i hierarkin man befinner sig. Mina sidor här når du allt som rör dig. På bilden till höger syns inloggat läge, då är Logga in utbytt till ditt förnamn och efternamn. Hamburgermeny När man klickar på den här fälls hela menyn ut så man kan navigera på sajten. Lyssna ska finnas med på alla sidor och ligga högt upp på sidan. Mejl kan finnas på flera ställen, här ligger den ihop med andra användbara funktioner direkt under ingressen på sidan. Dela kan också ligga ihop med de andra ikonerna så man lätt kan dela en sida. Chat är framtagen för framtida behov. Inställningar bör finnas i inloggat läge. 16

17 17