The answer to most questions is “it depends”

 

Hur den grafiska profilen påverkar företagets varumärke.

Sara Ekholm

Med en grafiska profilen styrs det hur den visuella identiteten ska upprätthållas. Den grafiska profilen beskriver företagets identitet, vision och värde till ett visuellt språk. Därmed blir det tydligt vad ett företag vill kommunicera och förmedla.

En grafisk profil utgör företagets varumärkesidentitet. Genom en medveten styrning av företagets visuella uttryck, i de begrepp som vi går igenom nedan, kan man påverka företagets identitet (Holger & Holmgren, 2002). En grafisk profil fungerar också som en manual där företag hänvisar och tydliggör vilka grafiska komponenter som används och hur de används. Där samlas alla de grafiska komponenter så man får möjlighet att läsa in sig på hur deras profil ska speglas. Det finns olika typer av grafiska profiler beroende på ifall produkterna exempelvis ska till tryck, visas digitalt eller visas upp på ett speciellt event – det som kommer vara fokus i denna text kommer vara den digitala grafiska profilen.

I en grafiska profil kan man exempelvis gå igenom riktlinjerna för hur man får och på vilket sätt man använder sig av logotypen. Några av de resterande riktlinjerna för Twitters digitala komponenter inom den grafiska profilen är typografin, färgschemat och hur tweets syns på andra sidor utöver twitters egna sajt. En grafisk profil är utformade just för att få en enhetlig känsla för företaget. Allt  ifrån att knappar och naviagtionstrukturen ska kännas sammanhängande (Neville, 2010). Genom en sammanhängande och enhetlig känsla för varumärket bildas samtidigt en varumärkesidentitet. Med en identitet och ett värde för varumärket har man byggt upp ett starkare varumärke vilket bland annat den grafiska profilen står till tjänst för – just för att den skapat en relation och ihågkommande intryck hos kunden¹.

Riktlinjerna för komponenterna i den grafiska profilen

Poängen med en grafiska profil är att man bibehåller en standard, samtidigt som man i den grafiska profilen medger att det finns utrymme för flexibilitet vid utformandet av den digitala designen. I en grafisk profil finns det förtydligande på hur de olika komponenter ska användas som förtydligas genom Do’s and don’ts direktiv (Podnar, 2016). Kort och gott så är Do’s and don’ts i en grafisk profil en slags checklista på vad som får göras och inte med tydliga visuella exempel.

Logotyp

I ett generellt perspektiv så kan man se att i USA är det mycket vanligt att företag använder sig av färgerna röd, blå och vit i deras logotyper. Det kan bland annat bero på att de vill framhäva den patriotiska känsla genom färgerna för att förtydliga stoltheten över deras nation. Färger har nämligen psykologisk effekt på oss. Hynes (2009) beskriver i sin studie att olika färger har olika påverkan på oss människor. Exempelvis är tillit, styrka och trofasthet den traditionella associationen till färgen blå – som Twitter dessutom har som sin preliminära färg.

Man får inte justera och ändra färgerna i logotypen hur som helst. Logotypen kanske exempelvis inte passar framför en speciell bakgrundsfärg, då är det inte alltid okej att man justerar logotypens färg, utan man får istället anpassa bakgrundsfärgen. Se exemplet nedan som visar att man där får anpassa med en vit bakgrund för American Red Cross-logotypen. Utan den vita rektangel bakom logotypen skulle typografin i logotypen försvunnit in i bakgrunden.

screen-shot-2016-11-07-at-10-37-57

Bild: American Red Cross logotyp

When using the logo to represent your presence on Twitter — either alone or alongside other social icons — you can use the logo in either blue or white, displayed at equal size and height to the other social media icons. When using the logo in white, the background color may be set in any color. It is prefered that our logo is represented free of a container but if a container works best for your needs, feel free to use either a circle, square, or square with rounded corners.

Vid användning av Twitters logotyp – antingen ifall logotypen är ensam eller tillsammans med andra sociala medie logotyper – kan man använda logotypen i antingen färgen blå eller i vit. Vid användning av logotypen i vit, kan bakgrundsfärgen ställas in i valfri färg – Vilket också rekommenderas av Twitter. Ifall fallet är att man skulle behöva en anna typ så finns det andra varianter på loggan där det är en cirkel eller fyrkan runt logotypen. Se bilden nedan.

screen-shot-2016-11-08-at-16-22-14

Variationen av logotyper är just för att det skall finns passande logotyper för alla ändamål. När Twitter logotypen visas med andra sociala medie logotyper skall alla symbolerna ha samma höjd och storlek så det bli en enhetlighet. Att företag gör fler versioner av en logga för att man ska kunna ha möjlighet och variera beroende på sammanhang. Med dessa tydliga direktiv försvinner problemet som företaget American Red Cross råkat utföra, som ni läste tidigare i texten. Med en tydlig beskrivning vet den som skall göra layouten, för exempelvis en banner, hur logotypen ska behandlas och placeras. Exempel på Don’ts för Twitters logotyp ser ni nedan.

screen-shot-2016-11-09-at-09-22-18

Typografi

Att ett företag begränsar sig till ett visst antal fonter och typsnitt storlekar skapar sammanhang och en bättre enhetlighet. För många teckensnitt skapar ett rörigt utseende (Bergström, 2012).

För en enhetlig känsla bör man använda sig av samma typsnitt på mobilappen som på webben. Twitter använder sig utav typsnitt som är internationella. Twitters typsnitt är fet, enkel, och universell – det är den röda tråden för varumärket som understryker det Twitter står för. För @användarnamn och #Hashtag, använder Twitter Helvetica Neue Pro 75 Bold. För Tweet:ens helhet (Tweet treatment) använder Twitter Helvetica Neue Pro 75 Fet på namnet, själva Tweeten och på tidsstämpeln. På @användarnanet som visas i tweeten används Helvetica Neue Pro 55 Roman.

screen-shot-2016-11-09-at-09-18-53

Färgpaletten

Färgpaletten i en grafisk profil är nästan som A och O. Färgpaletten är en av de mest betydelsefulla elementen som gör att ett företag får en egen identitet. Genom att ett företag håller sig till en egen färgpalett ger man ett enhetligt varumärkesintryck. Färg utgör en stor del av den grafiska profilen, eftersom den genomsyrar hela identiteten. Färger talar direkt till människors känslor och har en avgörande roll i hur konsumenter ser företaget (Bergström, 2012). Twitter har en primär färg och en sekundär färgpalett. Primära färgen har Twitter färgen blå som deras identitets färg. Se bild nedan.

screen-shot-2016-11-09-at-09-23-44

Gränssnitt

Balans är lätt att förstå i den fysiska världen, eftersom vi upplever den hela tiden. När något är obalanserat, då tenderar det att falla över. Den visuella balansen är jämförbar med den fysiska balansen. Den fysiska vikten ersätts helt enkelt mot den visuella vikten. En obalanserad sammansättning kan kännas obekväm för betraktaren (Bradly, 2015).

screen-shot-2016-11-07-at-10-40-27

Bild: Balans VS obalans

Ett av de viktigaste delarna i ett gränssnitt är det vita utrymmet mellan elementen. Om du inte är bekant med begreppet white space står det för utrymmet mellan två element – oavsett om det är en knapp, navigeringsfält, artikeltext eller en rubrik. Nedan ser ni exempel på hur man har använt sig utav gränssnittet vid placering av logotypen.

UI komponenter

Kortfattat så är user interface (UI) sättet som användare interagerar och uppfattar olika funktioner och element på en webbsida (Cronin, 2009). När man designar måste fokus ligga på användarvänlighet för att användarupplevelsen ska vara så strukturerad och förståelig som möjligt – utan att skapa frågetecken för användaren vid användning av webbsidan. Enkelheten är viktig inom UI design. Ju mer element som finns på skärmen desto mer tid behöver användare lägga på att lista ut hur användargränssnittet ska användas. När det finns färre valmöjligheter blir själva användargränssnittet för användaren mer användarvänlig och lätt att läsa av. Att simplifiera ett användargränssnitt är ingen enkelt uppgift – definitivt inte enkelt ifall du inte vill minimer funktionerna i designen (Fadeyev, 2009).

I en grafisk profil finns det färdigdesignade UI komponenter. Anledningen till det är för att skapa enhetligheten samt att användaren ska känna igen UI komponenternas funktioner. UI komponenter på en sajt kan exempelvis vara navigationsbaren och CTA(call to action)-knappar. Knapparna har olika färger för att skapa möjlighet till variation. Nedan ser ni Twitters CTA-knappar.

screen-shot-2016-11-09-at-09-34-21

Varför har man en grafisk profil?

Ett  företag med en grafisk profil effektiviserar arbetet för den byrån som skall arbeta för företaget. Samt att arbetet effektiviseras då de som skall fortsätta/ta över uppdraget i exempelvis byrån har tydliga riktlinjer för designen redan (Neville, 2010). Företaget får dessutom en mer enhetlighet som representerar företagets varumärke genom att de har en standard för deras grafisk profil.

Dessa riktlinjer i en grafisk profil är till för att säkerställa att det finns en konsekvent identitet och en stark varumärkesidentitet. Finns det ingen standard och direktiv för hur den visuella identiteten ska upprätthållas och hur företag vill kommunicera grafiskt kan det lätt uppstå problem. Från det ena uppdraget till det andra blir det lätt för många kockar i samma soppa som gör att exempelvis layouten och designen ganska snart får en spretigt och oprofessionellt intryck. Med ett slarvigt visuellt kommunikationssätt blir varumärket också lidande.

För att lyckas med varumärket kommunikation behöver alla vara medvetna om vilka regler som varumärket ska följa. Med alla så inkluderas dem som ska ta hand om den digitala visuella kommunikationen på något vis. Med hjälp utav den grafiska profilen så följs en röd tråd för varumärket som skapar en högre grad av igenkänning, både för de som skall jobba med materialet samt kunden.

Hur påverkar den grafiska profilen varumärket?

Den grafiska profilen påverkar företagets varumärke genom att den tydliggör mål och visioner både internt och externt. Externt skapar sig varumärket en identitet och en känsla hos konsumenterna. Något som skulle kunna skada varumärket skulle kunna vara ifall företaget kommunicerar på ett splittrat vis med olika uttryck och riktlinjer. Det är viktigt att företaget interagerar med samma typ utav identitets struktur – vilken man gör genom att hänvisar till den grafiska profilenen hjälpande hand.

En stark varumärkesidentitet innebär att ett varumärke är igenkännbart och enhetligt, samt att man skapat någon slags relation till konsumenterna. Genom den grafiska profilen kan man endast med små medel skapa ett intryck hos konsumenten. Genom de visuella komponenterna tyder konsumenten genom de intryck hen får. Varför Twitter har valt färgen blå exempelvis är just för att signalera de känslor som uppstår när en konsument ser färgen blå. Enligt studier, som skrev om tidigare i texten, uttrycker färgen blå tillit, styrka och trofasthet.

Det enda som den grafiska profilen påverkar varumärket med är genom visuella uttryck, såsom färg och form. Med de visuella uttrycken och komponenterna skapas en enkel uppfattning hos mottagaren. Exempelvis med Twitter som har en stilren grafisk profil Tack vare deras riktlinjer med gränssnittet som beskrivs det hur man ska förhålla sig till white space, bildas ett stilrent utseende. Den stilrena känslan har Twitter också fångat med hjälp utav deras färgpalett som har några få utvalda färger för att inte skapa en rörig och splittrande helhet. Ett starkare varumärke grundar i en igenkänd profil.

Räckvidden får man genom marknadsföring. Första intrycket som företaget får med genom räckvidden kan vara något grafisk – då spelar den grafiska profilen en viktig roll. Att man skapar ett gott intryck är avgörande för företaget skall få en god relation till sina kunder.


Workshop:

Du får en brief från ett företag. Företaget vill uppdatera deras startsida på deras hemsida. De vill då att du skall göra en mockup i photoshop och följa deras brief och grafiska profil. Fokus ligger på att du ska framställa en snygg och tilltalande framsida och vara kreativ – därför ligger det inget fokus på att ifrågasätta och diskutera kundens brief, vilket man i verkligheten skulle gjort.

Kundens Brief:

Logotype AB är ett speciellt designföretag för vi säljer endast logotyper. Vi behöver hjälp med att uppdatera vår startsida. Vi vill ha en bra CTA på hemsidan och en tydlig och enkelt navigation.

Målgrupp: Potentiella köpare

Budget:  10 000

Deadline: 1,5 vecka

Företagets grafiska profil

Färgen lila står för: Kreativt, Påhittigt & Ambitiöst

Logotyp

logotyp


Typografi

Logotype Ironmark

Size: 20

Calibri Bold
Logotype Word Mark

Size: 30

Kering: 140

Calibri Bold
H1

Size: 60

CAMBRIA REGULAR
H2

Size: 32

Line height: 41

Crambia medium
Body

Size: 18

Line height: 27

Calibri regular

Färgpalett

fa%cc%88rgpalett


Responsivt gränssnitt

gra%cc%88nssnitt

Photoshop/View/New Guide Layout


UI komponenter

cta


Källhänvisningar

Twitter brand guideline:

https://brand.twitter.com/content/dam/brand-twitter/asset-download-zip-files/Twitter_Brand_Guidelines.pdf

Muntlig källa:

  1. Ellinor Torsein Föreläsare Högskolan Väst, Föreläsning 2 Februari 2016.

Bok:

  1. Heskett, John. (2006). Design: En introduktion. Stockholm: Raster
  2. Bergström, Bo. (2012). Effektiv visuell kommunikation.  8 uppl. Stockholm: Carlsson bokförlag AB
  3. Holger, Lena; Holmgren, Ingalill. (2002). Identitet: om varumärket, tecken och symboler. Emmaboda: Raster.

Artiklar:

  1. Bradley, Steven (2015). Design Principles: Compositional Balance, Symmetry And Asymmetry. [Elektronisk] Tillgänlig: https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/ [2016-10-17]
  2. Cronin, Matt (2009). Crucial UI Features of Social Media and Networking Sites. [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2009/06/9-crucial-ui-features-of-social-media-and-networking-sites/ [2016-10-17]
  3. Fadeyev, Dmitry (2009). 10 Useful Web Application Interface Techniques. [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2009/01/10-useful-web-application-interface-techniques/
  4. Neville, Kay (2010). Designing Style Guidelines For Brands And Websites. [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/ [2016-10-17]
  5. Podnar Kristina (2016) Keeping Your Business And Clients Safe With Digital Policies [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2016/07/keeping-your-business-and-clients-safe-with-digital-policies/  

Vetenskaplig artikel:

  1. Hynes, N. (2009). Colour and meaning in corporate logos: An empirical study. Journal of Brand Management, 16(8), 545-555.