kreativ & engagerad samhällsbyggare€¦ · kreativ & engagerad samhällsbyggare. Inviatech Grafisk Profil V. 1.0 S. 8 Logotyp Marginaler Inviatechs grafiska språk är enkelt och

kreativ & engagerad samhällsbyggare

Inviatech Grafisk Profil V. 1.0


S. 2

Grafisk profil

Allt vi på Inviatech kommunicerar påverkar omgivningens bild av oss. För att underlätta arbetet med att spridavårt budskap och våra värderingar har vi en tagit fram en grafisk profil. Den hjälper oss att kommunicera på ettenhetligt och konsekvent sätt. Målet med vår grafiska profil är att omgivningen enkelt ska kunna känna igen informa-tion som kommer från Inviatech.

Ladda ner fler grafiska produkter på:http://www.inviatech.se/grafisk-profil/

Kontakt: Komini [email protected]


S. 3

Innehåll

Grafisk profil Kontakt

Introduktion Fyra byggstenar

Logotyp Vår logotyp Marginaler Användning

Typografi Typsnitt Viktklasser Storlekar Användning

23

45

6789

1011121314

Grafiska element Färger Typografisk indelning Avdelare Ikoner Övertoning

Bilder Bilder Användning Bildbank

151617181920

21222324

Introduktion



S. 5

Introduktion

Bilder

Logotyp

Fyra byggstenar

Inviatechs grafiska profil bygger på fyra olika element som vi kallar grafiska byggstenar. Tillsammans utgör de fundamenten i den grafiska profilen och bidrar till att skapa intern samhörighet och extern igenkänning. Byggstenarna är vår logotyp, typogra-fi, grafiska element och bilder.

Kreativ och engageradsamhällsbyggareHelhetstänkande konsult i skärningspunkten därsamhällsbyggnad, människor och affär möts.

Grafiska element

Typografi

Logotyp1/4



S. 7

Logotyp

Vår logotyp

Logotypen är Inviatechs tydligaste kännetecken. Tillsammans med vår typografi, grafiska element och bilder förstärker den bilden av Inviatech. Logotypen består av tre element: vårt namn, vår slogan och symbol. På sida 9 beskrivs hur logotypen bör använ-das i olika sammanhang. Generellt kan man emellertid säga att ju mer plats och ju större marginaler desto fler element kan användas.

kreativ & engagerad samhällsbyggare


S. 8

Logotyp

Marginaler

Inviatechs grafiska språk är enkelt och minimalistiskt. Vi undviker i största mån plotter och att ge saker och ting andrum är viktigt. Detta gäller natur-ligtvis även vår logotyp.

Se till att logotypen får luft. Använd symbolen som marginal till kanten. I vissa fall kan 1/2 av symbolen an-vändas som mått. Exempelvis för en profilbild på Facebook eller sidhuvud på hemsidan.


S. 9

Logotyp

Användning

Kontraster är viktigt. Se till att logoty-pen syns tydligt oavsett bakgrund. Till höger ser du några exempel på hur den kan användas mot olika bakgrun-der.

Inviatechs logotyp finns i två färgpa-letter: Orginal (Inviatech Grå/Inviatech Gul) och vit. Läs mer om färger på sida 16.

Vit/ljus

Färg

Bild

Typografi2/4


Source Sans Pro

HejInviatech Grafisk Profil V. 1.0

S. 11

Typografi

Typsnitt

Inviatechs typsnitt är Source Sans Pro av Paul D. Hunt.

Om Source Sans Pro:”Source® Sans Pro, Adobe’s first open source typeface family, was desig-ned by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.” (Google Fonts)


S. 12

Typografi

Viktklasser

Inviatech använder tre viktklasser av Source Sans Pro. Läs mer om när olika viktklasser bör användas under kapitlet Grafiska element.

Lorem ipsum 123

Lorem ipsum 123

Lorem ipsum 123

Light

Regular

Bold

Brödtext

Rubrik/ingress + navigering

Rubrik


S. 13

Typografi

12 pkt14 pkt

16 pkt

18 pkt

20 pkt

24 pkt

30 pkt

36 pkt

48 pkt

72 pkt

96 pkt

Storlekar

Inviatech använder följande storle-kar. Läs mer under kapitlet Grafiska element.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeefffffffffffffffffffffffffffffffffffffffffffffffffffffffggggggggggggggggggggggggghhhhhhhhhhhhhhhhhhh

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

jjjjjjjjjjjjjjjjjjjjj

kkkkkkk


S. 14

Typografi

Bold 36 pkt

Regular 24 pkt

Regular 12 pkt

Regular 24 pkt

Regular 24 pktLight 18 pkt

Regular 12 pkt

Light 14 pkt

Light 12 pktAnvändning

Till höger finner du en skärmdump från Inviatechs hemsida samt exem-pel på hur olika viktklasser och storle-kar av Source Sans Pro kan användas.

Se inte den här manualen som en lag-bok, utan snarast som en inspiration. Var kreativ och lite på ditt eget omdö-me. Inviatechs varumärke utvecklas hela tiden och som användare av den här manualen är du med och bidrar till den processen.

Grafiska element3/4



S. 16

Grafiska element

Mörkgrå#333333R51 B51 G51C70 M61 Y57 K65

Inviatech Gul#dedc00R222 B220 G0C20 M2 Y95 K0

Vit alternativ#f2f2f2R242 B242 G242C6 M4 Y5 K0

Ljusgrå#999999R153 B153 G153C41 M32 Y33 K10

Svart#191919R25 B25 G25C78 M70 Y63 K82

Inviatech Grå#595959R89 B89 G89C60 M50 Y48 K38

Grå#666666R102 B102 G102C57 M46 Y45 K31

Färger

Vit#ffffffR255 B255 G255C0 M0 Y0 K0


S. 17

Grafiska element

Typografisk indelning

Olika viktklasser, storlekar och färger används för olika ändamål. Till höger finner du Inviatechs sex generella typografiska indelningar. Utgå från dessa och studera hemsidan vid be-hov av andra alternativ.

Lorem ipsum 123

Lorem ipsum 123

Lorem ipsum 123

Lorem ipsum 123

Lorem ipsum 123

Rubrik

Segment

Rubrik/Ingress

Brödtext

Navigering

Bold / 36-96pkt / Vit

Bold / 48-72pkt / Vit

Regular / 20-30pkt / Mörkgrå-Vit

Light / 12-18pkt / Grå-Ljusgrå-Vit

Regular / 12pkt / Mörkgrå-Vit


S. 18

Grafiska element

Avdelare

Inviatech har avdelare för olika typer av segement och kapitel. Segment-delare 1 används vid mer distinkta avdelningar och syftar till att elegant föra betraktaren från en punkt till en annan. Segment-delare 2 används för att dela upp angräns-ande segment under ett gemensamt kapitel. Kapitel-delare används för att dela upp olika kapitel. Detta kan vara olika undersidor av en hemsida eller olika kapitel i en publikation (se sidorna 4, 6, 10, 15, 20).

Segment 1

Segment 2

Kapitel

-45°

0,5-1,5pkt

2,5-5pkt

Font Awesome


S. 19

Grafiska element

Ikoner

Inviatechs ikoner kommer från Font Awesome, en av de mest populära och raffinerade ikonsamlingarna på marknaden. Ikoner används exempel-vis i listor, som på skärmdumpen till höger.

Läs mer:https://fontawesome.com/


S. 20

Grafiska element

Övertoning

I vissa fall används övertoningar på bilder som innehåller mindre text-stycken, exempelvis en enskild rubrik.

Skapa övertoning i Photoshop:1. Importera ett nytt bildlager.2. Skapa en linjär övertoning (0°).3. Gör båda färgstegen svarta.4. Flytta höger opacitetssteg till 75% och justera opaciteten till 75%.5. Klicka på OK och justera opaciteten för övertoningsfyllningen till 75.6. Skapa en ny övertoning och repe-tera processen, men ändra färgstegen till HEX-koden #dec00 (Inviatech Gul).

Exempel

Toningar

Bilder4/4



S. 22

Bilder

Resultat Ansvar Enkelhet Glädje

Bilder som visar på hur Inviatech förändrar samhället och människors vardag.

Bilder som visar på hur vi tar ansvar. Ett starkt ethos är viktigt.

Enkla, rena bilder. Undvik plotter. Bilder som förmedlar glädje och optimism.


S. 23

Bilder

Användning

Till höger finner du två exempel på hur Inviatech arbetar med bild och text. Om texten placeras i bilden är det viktigt att ta hänsyn till kontrast-skillnader. Vid behov kan en svart ruta – ett så kallat asklager – med låg opacitet (1-25%) läggas över bilden. Att placera texten bredvid bilden ger större frihet över bildens innehåll, motivets placering och intensitet.

Text i bild

Bild + textRubrik

Evelenimus, eum digeniscit molessimin

eossequiae. Et quid earunt miliquistiat eos

voluptate corrum nonecto doluptatur.

Kreativ och engageradsamhällsbyggareHelhetstänkande konsult i skärningspunkten därsamhällsbyggnad, människor och affär möts.


S. 24

Bilder

Bildbank

Som ett komplement till Inviatechs grafiska manual har vi tagit fram en bildbank. Samlingen går att ladda ner på Inviatechs hemsida. Där finner du både inspiration såväl som bilder att använda direkt.

Ladda ner via:http://www.inviatech.se/grafisk-pro-fil/


Inviatech AB © 2018

Kontakt: Komini [email protected]

Documents

kreativ & engagerad samhällsbyggare€¦ · kreativ & engagerad samhällsbyggare. Inviatech Grafisk Profil V. 1.0 S. 8 Logotyp Marginaler Inviatechs grafiska språk är enkelt och