Medfit Designguide 2019

Transkript

1 Designguide 2019

2 1 Logotyp Logotypen är vårt främsta visuella kännetecken och ska därför alltid presenteras på bästa möjliga sätt. Det är inte tillåtet att göra justeringar i logotypen (exempelvis lägga till en skugga eller justera teckenavstånd). När logotypen används i online-material ska den alltid användas i sådan kvalité att den inte ser pixlig ut. Logotyp Logotypen kan också återges negativt, dvs på bakgrund med mörkare färg eller bild. Grafisk manual Logotyp 01

3 1.1 Logotyp, marginaler och användning Det är viktigt att vår logotyp alltid återges på ett konsekvent sätt. Följ nedan anvisningar för hur logotypen skall användas. Använd bokstaven M i logotypen som minsta avgränsning till all annan grafik i layout. Det är inte tillåtet att på något sätt förändra logotypens utseende, så som att ändra skeva, rotera eller ändra färg. Grafisk manual Logotyp 02

4 1.2 Logotypen i färg I layout används ofta färgade satsytor. Använd exemplen nedan som referens för vilken logotyp som skall användas till vilken bottenfärg. Grafisk manual Logotyp 03

5 2 Färg utgår primärt från 6 olika färger som ligger till grund för vår grafiska profil. Färgerna får kombineras fritt men rekommenderas att användas i kombination som ses nedan. Provtryck på CMYK ej gjord. Kombination 1 Mörkblå CMYK: 89, 62, 35, 54 RGB: 16, 46, 62 Grön CMYK: 66, 0, 41, 0 RGB: 126, 196, 168 Ljusblå CMYK: 26, 3, 4, 0 RGB: 226, 239, 250 Kombination 2 Grå CMYK: 0, 7, 93, 0 RGB: 247, 205, 57 Gul CMYK: 4, 0, 0, 78 RGB: 74, 74, 73 Ljusgrå CMYK: 4, 3, 6, 7 RGB: 244, 244, 244 Grafisk manual Färg 04

6 2.1 Färg för webb Färgpaletten för webb utgår från samma färgpallet men här har fler ljusare nyanser adderats. Kombination 1 #102E3E #4C626E #87969E #7EC4A8 #9ED3BE #BEE1D3 #E2EFFA #E9F3FB #F0F7FC Kombination 2 #4A4A49 # #A4A4A4 F7CD39 #F9DA6B #FBE69C F4F4F4 F7F7F7 F9F9F9 Grafisk manual Färg 05

7 3 Typografi s primära typsnitt är en sans serif som heter Avenir. Typsnittet används både i rubriker och i brödtext både på webben och i print. Vikten Roman är den som används i brödtext och Black används i rubriker. Aa Bb Avenir Roman AaBbCcDdEeFfGgHhIiJj KkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZzÅåÄäÖö (:; &%!?) Avenir Black AaBbCcDdEeFfGgHhIiJj KkLlMmNnOopQqRrSsTt UuVvWwXxYyZzÅåÄäÖö (:; &%!?) Grafisk manual Typografi 06

8 3.1 Typografiska regler Anvisningarna nedan visar hur Avenir skall användas i storleksrelation mellan rubrik, underrubrik och brödtext. Punktstorlek kan varieras beronde på satsyta, men se till att alltid öka/minska i relation till nedan anvisning. Rubrik, Avenir Black (30pt/Auto) Underrubrik, Avenir Black (15pt/25pt) Punktlista, Avenir Black (15pt/20pt) Punktlista, Avenir Black (15pt/20pt) Brödtext, Avenir Roman (13pt/Auto) 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. Grafisk manual Typografi 07

9 3.2 Typografiska exempel Exempel på hur typografi kan se ut i layout. Grafisk manual Typografi 08

10 4 Ikoner har ett omfattande ikon-system. Syftet med ikonerna är både identitetsbärande och informativt. Ikonernas användningsområde är brett, de kan användas var för sig eller grupperas ihop till en illustration. Grafisk manual Ikoner 09

11 4.1 Ikoner med fyllning Ikonerna kan också användas med fyllning. Fyllningen ligger bakom ikonen med ett litet misspass. Grafisk manual Ikoner 10

12 4.2 Ikoner som illustration Ikonerna kan också fogas samman för att bilda en illustration. Här kan man behöva justera i linjerna och öppna upp dem för att det ska bli just en illustration och inte en grupp ikoner. Träning Vård Grafisk manual Ikoner 11

13 4.3 Regler för framtagning av ikoner Anvisningarna nedan visar hur man ritar s ikoner. Det är viktigt att dessa regler följs när man ritar ikoner för att känslan alltid skall bli densamma för alla ikoner. Arbetsytan är 100x100 px. Linjetjockleken ska vara 3 px. Jobba med rundad ände och rundade hörn. Ikonen ska fylla ut hela ritytan antingen lodrätt / vågrätt eller båda delar. Men får inte gå utanför ritytan. En mellanrumsform får inte vara mindre än 3 px för att undvika att bli grötig. Radien på hörnen ska vara rundad. 3 5 px är att föredra. Försök tänka på symmetrin i ikonen och dess former. Det får inte bli naivt Arbeta så kvadratiskt som möjligt på ytan. Viktigt att alla ikoner optiskt har en känsla av att vara i samma storlek. Om man jobbar med linjer som har Align stroke to Center får illustrationens storlek vara max 97x97 px. Om man jobbar med Align stroke to Inside så får illustrationens maxstorlek vara 100x100 px. Detta beror på att när man slår ut ikonen så blir den totalt 100x100 px. Grafisk manual Ikoner 12

14 5 Bildmanér Man mår bra av att röra på kroppen. På är alla välkomna att träna, ung som gammal, nybörjare eller erfaren. Det är just vad vi vill förmedla med vårt bildmanér. Grafisk manual Bild 13

15 5.1 Bildmanér duotone Alla våra bilder finns i duotone med färgerna från vår färgpalett. De här bilderna kan man använda för att exempelvis förstärka uttrycket i en annons eller när satsytan är vit. Grafisk manual Bild 14

16