Den här guiden handlar om visuell identitet för SaaS-startups: vad den består av, i vilken ordning arbetet görs och hur den gör webbplatsen lättare att förstå.
Kort svar: En visuell identitet fungerar bäst när den bygger på tydlig positionering. Bestäm därför först vem produkten är till för, vad kunden annars skulle göra, varför bolaget finns och vad som skiljer det från alternativen. Låt sedan logotyp, färger, typografi och tonalitet uttrycka just det, och använd dem konsekvent. Identiteten säljer inte på egen hand, men den gör budskapet snabbare att förstå och lättare att lita på.
Vad är visuell identitet för ett SaaS-bolag?
Visuell identitet är de synliga delarna av ett varumärke: logotyp, färgpalett, typografi, bildspråk och riktlinjerna för hur de används. För ett SaaS-bolag syns identiteten på webbplatsen, i produkten, i pitchdecket, i säljmejl och i sociala kanaler.
En fungerande identitet gör tre saker. Den gör bolaget lätt att känna igen, får det att se trovärdigt ut och förstärker det bolaget vill säga. Den sista uppgiften är den som oftast saknas.
Varför ska positionering komma före den visuella identiteten?
Därför att identiteten ska uttrycka något. Utan beslut om målgrupp, alternativ och skillnad fattas designvalen på smak, och resultatet blir ofta likt resten av kategorin.
Skriv ner fyra saker innan du börjar med det visuella:
- Vem produkten är till för, beskrivet som en situation och inte som en bransch.
- Vad kunden gör i dag utan er, till exempel kalkylark, manuella rutiner eller ett annat verktyg.
- Varför bolaget finns, i en eller två meningar.
- De två eller tre skillnader som betyder mest för kunden.
Svaren ger dig något att pröva varje designval mot. Frågan "Känns det här lugnt och precist?" leder längre än "Gillar vi det här?".
Hur tar man fram en logotyp för ett SaaS-bolag?
Utgå från var logotypen faktiskt ska användas. Kraven i ett tidigt skede är praktiska:
- Den ska vara läsbar i små storlekar, som i en webbläsarflik, en appikon eller en profilbild.
- Den ska fungera i en färg, på både ljus och mörk bakgrund.
- Den ska ha en kvadratisk variant för ikoner.
- Den ska inte bygga på fina detaljer som försvinner när den skalas ner.
En tydlig ordbild, eventuellt med ett enkelt märke, räcker ofta. Igenkänning kommer av konsekvent användning, inte av att logotypen förklarar produkten. Ett enkelt test är att lägga logotypen bredvid fem konkurrenters i faviconstorlek. Om du inte hittar din direkt behöver den förenklas.
Hur väljer man färger för ett SaaS-varumärke?
Börja med att kartlägga kategorin. Lägg konkurrenternas primärfärger bredvid varandra. Om alla använder samma blå nyans är det en signal att välja annorlunda.
En palett i tidigt skede behöver:
- En primärfärg som bär varumärket och sticker ut i kategorin
- En mörk och en ljus neutral för text och bakgrunder
- En accentfärg som reserveras för knappar och viktiga element
- Funktionella färger för produkten: lyckat, varning och fel
Kontrollera kontrasten tidigt så att text och knappar uppfyller tillgänglighetskraven på de bakgrunder där de faktiskt hamnar. Bestäm också hur stor del av ytan varje färg ska ta, så att primärfärgen och accentfärgen behåller sin tyngd. En mestadels neutral identitet med en stark primärfärg upplevs ofta som mer självsäker än en där alla färger används lika mycket.
Hur väljer man typografi?
Typografin påverkar hur webbplats, produkt och dokument upplevs, ofta mer än logotypen gör. Ett eller två typsnitt räcker.
Det finns två vanliga upplägg:
- En familj i flera vikter. Det är enkelt, konsekvent och lätt att använda i både webb och produkt.
- Ett karaktärsfullt rubriksnitt med ett neutralt brödtextsnitt. Det ger personlighet i rubrikerna och god läsbarhet i längre texter.
Kontrollera att typsnitten är lättlästa på skärm i små storlekar, att licensen täcker webb, app och dokument, att det finns minst tre vikter och att de fungerar för svenska tecken som å, ä och ö. Definiera sedan en enkel typskala med fyra eller fem storlekar så att sidorna inte fylls av nästan likadana varianter.
Behöver ett SaaS-bolag en tonalitet?
Ja. Tonaliteten syns överallt: på startsidan, i onboardingen, i felmeddelanden och i säljmejl. Den går att formulera på en timme:
- Välj tre eller fyra egenskaper och skriv vad de betyder och inte betyder, till exempel tydlig, inte förenklad eller trygg, inte stel.
- Skriv om en verklig mening från webbplatsen eller produkten för varje egenskap, före och efter.
- Lägg till kärnbudskapen från positioneringen så att alla beskriver bolaget likadant.
- Lista ord att använda och undvika. Branschjargong och tomma ord som "sömlös" och "innovativ" hamnar ofta på den andra listan.
Vad betyder den visuella identiteten för webbplatsen?
Identiteten påverkar hur snabbt en besökare förstår erbjudandet och om hen litar på det. Det sker på tre sätt:
- Hierarki. Typografi och färg styr vad som syns först. Rätt hierarki lyfter problemet ni löser och ert starkaste bevis.
- Trovärdighet. En genomarbetad och konsekvent identitet signalerar att bolaget vet vad det gör, vilket gör det lättare för besökaren att ta nästa steg.
- Fokus. En accentfärg som bara används för det viktigaste nästa steget gör det tydligt var besökaren ska klicka.
Webbplatsen bör öppna med problemet, visa beviset nära huvudbudskapet och ge varje sida ett tydligt nästa steg.
Hur kan det se ut i praktiken?
Här är ett hypotetiskt exempel: ett SaaS-verktyg som hjälper små HR-team att ta emot nyanställda.
Utan positionering blir det en blå logotyp, ett standardtypsnitt och en startsida med rubriken "Allt-i-ett-plattformen för moderna HR-team" följd av sex likvärdiga funktionskort. Inget är fel, men inget skiljer bolaget från andra.
Med positionering är målgruppen små HR-team där en eller två personer sköter allt. Alternativet är kalkylark och påminnelser via mejl. Bolaget finns för att en första arbetsdag inte ska bero på att någon minns varje steg. Identiteten kan då uttrycka lugn och ordning med en varm och stabil palett, en tydlig rubrikstil och en vänlig, konkret tonalitet. Startsidan börjar med problemet och visar direkt hur verktyget löser det.
Produkten och funktionerna är desamma. Skillnaden är att identiteten nu förstärker ett budskap.
Vilka misstag är vanligast?
- Att börja med logotypen innan positioneringen är klar
- Att följa kategorin i stället för att skilja sig från den
- Att bygga för mycket för tidigt, som ett komplett designsystem före product-market fit
- Att bygga för lite, med standardtypsnitt och mallar som får bolaget att se mindre trovärdigt ut
- Att vara inkonsekvent mellan pitchdeck, produkt och webbplats
Vad kan vänta?
Eget illustrations- och ikonsystem, fullständigt rörelsespråk, undervarumärken, trycksaker och ett omfattande designsystem kan vänta. Lägg kraften på det kunder ser varje dag och bygg ut resten när behovet uppstår.
Checklista: visuell identitet för SaaS-bolag
- Positioneringen är nedskriven: målgrupp, alternativ, varför ni finns och viktigaste skillnader
- Logotypen fungerar i faviconstorlek, i en färg och i kvadratiskt format
- Paletten har primärfärg, två neutraler, accentfärg och funktionella färger, med kontrollerad kontrast
- Ett eller två licensierade typsnitt med definierad typskala
- Tonaliteten finns på en sida, med exempel och ord att undvika
- Webbplatsen börjar med problemet, visar beviset tidigt och har ett nästa steg per sida
- Det finns korta riktlinjer som hela teamet använder
- Pitchdeck, produkt och webbplats är kontrollerade för konsekvens
Vanliga frågor
Behöver man positionering innan visuell identitet?
Ja, i de flesta fall. Positioneringen avgör vad identiteten ska uttrycka. Utan den blir designvalen godtyckliga.
Vad är skillnaden mellan varumärke och visuell identitet?
Varumärket är helheten: hur bolaget uppfattas, vad det står för och hur det låter. Den visuella identiteten är den synliga delen av det.
Vad innebär positioneringsarbete för ett SaaS-bolag?
Det handlar om att bestämma bolagets målgrupp, vad kunden annars skulle göra, varför bolaget finns, vad som skiljer det från alternativen och vilka kärnbudskap det ska ha. Stegen i den här guiden går också att göra själv i teamet.
Hur många typsnitt och färger behöver ett SaaS-bolag?
I ett tidigt skede räcker ett eller två typsnitt och en palett med en primärfärg, två neutraler, en accentfärg och några funktionella färger.
Räcker en mall för en SaaS-webbplats i tidigt skede?
Tillfälligt kan den räcka, men mallen styr ofta vad som lyfts fram. En webbplats som byggs utifrån positioneringen visar tydligare varför produkten spelar roll.
