Skip to main content

Så får du använda de sociala kanalernas logotyper

På de allra flesta webbplatser kan man se ikoner/logotyper som länkar till de olika sociala medierna. Och nästan alltid är de anpassade i utseende och färg för att passa webbplatsens design. Det många däremot inte vet är att det inte är tillåtet att göra så. Nu tror vi att dessa bolag är rätt nöjda med att företag länkar till deras plattformar och därmed är rätt förlåtande i detta. Men det kan vara bra för dig att känna till vad som faktiskt gäller. Så här har vi gjort en sammanställning från de största kanalerna där vi utgått från informationen de delar med sig av på sina egna webbplatser. Vi inser att vi själva inte fullt ut följer nedan regler och kommer göra justeringar framåt. Vi är måna om allas varumärke och har stor respekt för hur de vill att vi använder deras logotyper i våra kanaler.

Fortsätt läsa

PMS, CMYK, RGB och HEX – vad är skillnaden?

PMS, CMYK, RGB och HEX är alla olika färgsystem som används för att definiera och återge färger i olika sammanhang. När man pratar om färger i den grafiska profilen och logotypen kan det ibland vara lite svårt att hålla isär dem och veta vilken färgkod som kan användas vid vilket tillfälle. Här går vi igenom dem och som exempel kommer vi att använda en färg från en av våra kunders grafiska profil.

Varför behövs olika färgkoder?

Om vi ser det ur ett varumärkesbyggande perspektiv så är färgerna en viktig del i att skapa igenkänning. Därför vill vi så långt det är möjligt att färgerna alltid visas på ett enhetligt sätt, oavsett kanal. I de grafiska profiler vi skapar anger vi därför färgkoder som passar för olika användningsområden. Det är en utmaning att få detta enhetligt då många yttre faktorer kan påverka. När det gäller tryck påverkar vilken maskin som trycker, luftfuktigheten i rummet, valet av papper och till och med olika batcher av samma papper. Därför kan det bli en viss skillnad på samma folder som tryckts vid olika tillfällen och kanske även på olika tryckerier.

Digitalt är det olika typer av enheter (mobil, dator, läsplatta mfl.) och inställningar för ljus och färger på skärmar som gör det utmanande. Men vi har en del knep här som vi med åren anammat för att få till det på bästa möjliga vis. Så när du anlitar oss för att ta fram färger till en profil kommer du få det så likt det bara går. Men då blir det också olika färgsystem som används vid olika tillfällen.

Så se till att använda rätt färgkod för rätt ändamål och ha i åtanke att det kan bli skillnader i olika medier och vid olika tryck. Tryck gärna en större omgång direkt för att säkerställa att alla har exakt samma färg men gör ett provtryck innan. Det kan kosta en slant att få ett provtryck men kan vara väl värt det.

De olika färgsystemen och när de ska användas

PMS

PMS står för Pantone Matching System och är en universell standard när det kommer till färg inom tryckindustrin. Varje färg representeras av ett unikt namn och/eller nummer och det är en fast färg, det vill säga den har inga skiftningar och ser alltid likadan ut. Detta system är framtaget av företaget Pantone som varje år uppdaterar med fler färger. Färgkoderna kan se lite olika ut, vilket vi kan se i exemplet nedan med vår kund Ekovisas profilfärger.

 

Färgkoder angivna i PMS.

Ger du tryckeriet en PMS-färg för profilprodukter och skyltar kommer den alltid att se likadan ut oavsett tryckeri. Däremot kan valet av papper, om du trycker marknadsmaterial med PMS-färger, påverka utfallet. Obestruket eller bestruket papper påverkar exempelvis upplevelsen av färgen. När vi tar fram en grafisk profil gör vi alltid provtryck för att se resultatet.

 

Profilprodukter tryckta i färger som är angivna i PMS.

 

CMYK

CMYK är en förkortning av Cyan, Magenta, Yellow och Key color (svart). CMYK-färgerna används precis som PMS också för tryck men främst för marknadsmaterial på papper som visitkort, anteckningsblock, foldrar och affischer. Det trycks som små punkter som du kan se om du tittar på väldigt nära håll. Grundfärgerna fördelas enligt den CMYK-kod som har angetts, dvs hur stor del som ska vara cyan, magenta, yellow och svart. Värdet är någonstans mellan 0 och 100 och ju högre värde desto skarpare och klarare blir just den färgen. För Ekovisas beigea färg blir CMYK-angivelsen 6/11/18/0, dvs 6 % cyan, 11 % magenta, 18 % yellow och 0 % svart.

 

Trycksaker tryckta i färger som är angivna i CMYK.

 

RGB och HEX

När det kommer till färg som ska visas på skärmar finns det två typer av färgkoder som båda bygger på samma system, RGB och HEX (eller hexadecimal som det egentligen heter). RGB står för Red, Green och Blue. Precis som för CMYK anges det hur mycket av varje färg som behövs för att skapa en blandning och dessa värden kan anges mellan 0 och 255, där lägre värden ger mörka färger med mycket svärta i och högre värden blir ljusare. Den beige färgen blir i RGB 241/228/212. Den kan också översättas till en HEX-kod, de består alltid av sex siffror och börjar med ett #-tecken. De första två tecken representerar röd, de mittersta två representerar grön och de sista två blå. Varje par tecken kan ha ett värde mellan 00 och FF, där 00 är lägsta intensitet (inget av den färgen) och FF är högsta intensitet (full färg). HEX-koden #000000 blir svart och #ffffff blir vit.

RGB och HEX används för skärmbaserade medier, båda har liknande användningsområden men HEX-koden är lite mer vanligt förekommande vid webbdesign.

 

Datorskärm och mobil med färger som visas i RGB eller HEX-kod.

Hoppas detta hjälpte dig att förstå de olika färgsystemen lite mer och när de ska användas. Behöver ni hjälp med en ny grafisk profil är du välkommen att höra av dig. Här hittar du mer information och kan se hur vi hjälpt andra företag.

Webbrelaterade begrepp att ha koll på

Det finns många tekniska termer att ha koll på när det gäller en webbplats. Vi har här samlat ett gäng begrepp som kan vara bra att ha koll på.

Alt-text

En text som beskriver innehållet i en bild. Med den kan de som använder uppläsningsprogram få ta del av vad bilden föreställer. Även bra för sökmotorerna som inte kan se bilden att få mer information om vad det är på den.

API

Ett API, Application Programming Interface, är ett verktyg som gör att olika mjukvaror kan prata med varandra. Det gör det enkelt för olika system att utbyta information utan att behöva veta hur den andra sidan fungerar. Ett exempel på detta är Google Maps API där man kan använda data från deras kartfunktion på sin egen webbplats.

Backend

Backend är den del av en webbplats eller applikation som användaren inte ser. Det är där data lagras och bearbetas, och det hanterar funktioner som databaser, servrar och logik som stöder frontend, den synliga delen av webbplatsen eller applikationen som användaren interagerar med. Se även frontend.

Brödsmulor/Breadcrumbs

En navigering som hjälper till att hålla reda på var i webbplatsens sidstruktur man befinner sig och som man kan använda för att klicka sig tillbaka.

Breadcrumbs på en webbsida.

Bugg

Ett fel som uppstått och som kan göra att en viss funktion inte fungerar som den ska eller att innehållet visas på fel sätt.

Cache

En cache är ett tillfälligt lagringsutrymme där data sparas för snabbare åtkomst vid framtida behov. Det gör att program och webbplatser kan laddas snabbare genom att återanvända tidigare hämtad information.

CMS (Content Management System)

Plattformar som gör det möjligt att skapa och uppdatera en webbplats utan att behöva skriva kod. WordPress är ett exempel på detta.

Cookies

Information som lagras i webbläsaren för att antingen spåra användarens aktivitet eller för att t.ex. komma ihåg inloggningsuppgifter. Enligt GDPR-lagen måste användaren godkänna att cookies lagras, därför ser man ofta en pop-up med alternativ för cookies.

CSS

Ett kod-språk som används för att stilsätta webbplatsen. Här bestäms bl.a. vilka färger och typsnitt som ska användas och hur stora de olika elementen ska vara. Man särskiljer utseendet från innehållet med hjälp av CSS.

Call to Action

En uppmaning till besökaren om att göra något. Kan vara att köpa något eller prenumerera på ett nyhetsbrev. Det görs genom en uppmaning i text och att tydligt visa var man ska klicka.

Databas

Ett system som gör det möjligt att lagra, hantera och hämta information. Exempelvis läggs all information på en webbplats som byggts med WordPress i en databas. När besökaren går till en undersida hämtas innehållet i databasen och presenteras på webbplatsen.

Domän

En unik adress till en webbplats som även kan användas för e-post. Domänen är som webbplatsens gatuadress, vår är odd.se. Det går att använda åäö i domänerna men det går inte att ha en e-post på domäner med åäö i sig.

Drop-down-meny

En undermeny på webbplatsen som först är dold och visas när användaren för muspekaren över eller har klickat på ett alternativ i huvudmenyn.

Favicon

En ikon för webbplatsen som visas i webbläsarens flikar. Samma ikon visas också när användaren har sparat ett bokmärke i sin webbläsare.

Favicon för en webbplats.

Frontend

De delar av en webbplats som är synliga och som man kan interagera med. Se även backend.

Hamburgermeny

En navigeringsmeny (vanligtvis tre streck) som ligger dold och öppnas när man klickat på den. Används ofta på mobilen för att spara utrymme på den lilla skärmen men idag är det allt vanligare att det även används på stora skärmar.

En hamburgermeny i mobilversionen av en webbplats.

Hero

Den övre sektionen av webbplatsens startsida som besökaren ser allra först. Den används ofta till en presentation av företaget, en call-to-action eller viktig information.

Hovereffekt

Hur ett element ändrar utseende när man för muspekaren över det, som den här länken som ändrar färg. Det används för att visa användaren att ett element är klickbart.

HTML

Ett kod-språk som används för att bygga upp webbplatsens struktur och innehåll.

JavaScript

Ett programmeringsspråk som används för att skapa funktioner på webbplatsen.

Landningssida

En tillfällig eller alternativ startsida på webbplatsen som kan användas för att göra besökaren uppmärksam på något särskilt. Man kan länka till den från t.ex. en kampanj eller annons för att visa innehåll som är relevant för just det.

Nyckelord

Ord och fraser som har med branschen och företaget att göra och som folk skulle kunna söka efter. Genom att inkludera dem i texter på webbplatsen kan den hamna i fler sökresultat på t.ex. Google. Se även SEO.

Pop-up

Ett fönster som öppnas över webbsidan och kan användas för information, få fler mailprenumeranter, ge rabatter i en e-handel eller en call-to-action.

Responsiv design

Att webbplatsens design är anpassad för att kunna visas på olika skärmstorlekar.

SEO (Search Engine Optimization)

SEO, eller sökmotoroptimering, är processen att förbättra en webbplats för att öka dess synlighet i sökmotorernas organiska (icke-betalda) sökresultat. Det innebär att göra förändringar i innehåll och struktur för att göra webbplatsen mer attraktiv för sökmotorer som Google.

Sidfot

Sektionen längst ner på en webbplats. Ofta innehåller den kontaktuppgifter, länkar och information om upphovsrätt.

Tillgänglighet

Att utforma en webbplats på ett sätt så den kan användas av alla, oavsett funktionsnedsättningar.

URL

Den fullständiga webbadress som används för att hitta specifika sidor på webben, t.ex. https://www.odd.se/blogg/

Webbhotell

Där läggs webbplatsen rent fysiskt. Du hyr utrymme på en server för att placera webbplatsen och betalar en avgift för det. Det är ofta där där du även har domänen och er e-post.

 

Dags att se över webbplatsen?

Behöver du hjälp med att styra upp er webbplats? Läs mer här, eller hör av dig på hej@odd.se så ser vi tillsammans över hur vi kan vidareutveckla den.

”Vem” är ert varumärke? Ta fram en varumärkespersona

Det pratas ofta om vikten att skapa en persona (fiktiv person som liknar er målgrupp) utifrån de ni vill nå. I denna artikel vill jag vända på detta och istället be dig se ert varumärke som en person – vem är det? Och skapa en varumärkespersona. Om Volvo, Spotify eller Odd var personer – hur skulle de vara? Troligen rätt olika. Precis som vi människor är unika så är även företag och varumärken det.

En bra övning

När vi har en ny kund som vi ska hjälpa med en mer komplett grafisk profil så håller vi i en workshop först för att få fram allt vi behöver. För innan vi kommer till själva arbetet med det grafiska vill vi skapa en grund för varumärket, hur ska det kännas och upplevas? Här har vi ett par övningar vi kör och en av dem är att föreställa sig sitt varumärke som en person. Genom att svara på frågor som nedan blir det enklare att forma varumärket. Vi har ofta lättare för att beskriva en person än ett varumärke. Om vi tar Odd som exempel:

  • Hur ser Odd ut?
  • Hur låter Odd?
  • Vad tycker andra om Odd?
  • Vad vill vi att andra ska tycka om Odd?
  • Vad är viktigt för Odd när det gäller kunder, personal, arbetsmiljö, företagskultur, leveranser av våra produkter och tjänster osv?
  • Finns det något Odd tar tydlig ställning i vad gäller exempelvis miljö, politik, samhälle, ekonomi, rättigheter osv?
  • Hur skulle Odd hantera ett problem som uppstår?
  • Vilket konferensbord skulle Odd välja?

För mig som skapat Odd så vet jag svaren på ovan, och nej det är inte relaterat till bilden i denna artikel 😉

Det blir så mycket enklare att hantera val när man tänker på det här sättet och förstå vikten av att alltid ha sitt varumärke i åtanke. På vårt kontor är det exempelvis enbart möbler i svart eller ljusare trä. Stilen är industriell kombinerat med en skandinavisk touch men med några kreativa detaljer och möjligen något i ljusgrått eller knallgult. Så om vi ska köpa ett nytt konferensbord och vi har ett par vi väljer på, vilket skulle Odd välja? Knappast det rosa eller vita. Inte heller det med snirkliga smidesdetaljer. Valet blir då rätt lätt och det spelar ingen roll om vd:n eller en anställd gillar det rosa. Ska vi följa varumärket så är det Odd som bestämmer och då vet vi svaret. Genom att följa detta i allt, stort som litet så bygger vi vårt varumärke.

Nu är det din tur att testa

Om du reflekterar över ovan och sätter ert företagsnamn i dessa frågor och tänker igenom svaren. Är det lätt att svara på dem eller blir det rörigt? Om ni har ett tydligt varumärke kommer det bli rätt enkelt. Visst kan det kräva några tankeomgångar men med lite övning så kommer du se att det blir lättare och lättare. Titta sen på alla era kanaler som ni kommunicerar genom – skulle er ”varumärkespersona” säga eller skriva detta? Skulle hen vilja ändra på något?

När ni stöter på en utmaning i verksamheten kan ni lösa den genom att tänka; – Hur skulle ”varumärket” göra? Då vävs verksamhetens grundvärden in i beslutet vilket ofta gör det enklare.

Är detta något ni skulle vilja ha hjälp med?

Hör av dig om ni går i tankarna att göra om er grafiska profil eller se över ert varumärke. Kontakta mig på nina@odd.se eller använd vårt kontaktformulär.
Se hur vi hjälpt andra företag. Läs mer om grafisk profil och varumärkesdesign.

Nina Möller
Varumärkesdesigner 

Årets färg 2024 – varm och helande

Pantone* har släppt årets färg för 2024 och det är PANTONE 13–1023 Peach Fuzz. Det är en varm ton av persika som är sofistikerad och elegant, med ett djup som fångar längtan efter att få rå om oss själva och andra. Färgen representerar både en känsla av samhörighet och lugnet och stillheten som man kan uppleva i sin egen fristad. Enligt Pantone berikar färgen sinne, kropp och själ. Den kan hjälpa oss att finna ro och påverkar vårt välbefinnande från insidan. I en värld där produktivitet och prestation värdesätts allra mest kan Peach Fuzz få oss att minnas vikten av att ta hand om vårt inre.

Fortsätt läsa

Cookies på webbplatsen – vad är det som gäller och hur vet du om er webb använder cookies?⁠

Idag behövs det en bra tjänst som visar för era besökare om webbplatsen sparar information om dem. De behöver få veta vad som sparas och hur länge och de måste få bestämma själva om de är ok med detta eller inte. Informationen som sparas brukar läggas i en fil som kallas för en cookie. Denna cookie vill webbplatsen placera på besökarens dator eller mobil vid besöket.

Fortsätt läsa