Kortversionen
- SaaS-varumärke är ett litet system, en ordbild, en palett, typografi, en bakgrundslook och en handfull layouter, som används på samma sätt i produkten, dokumentationen och varje socialt inlägg.
- En SaaS-palett måste fungera som gränssnittsfärg lika väl som marknadsföringsfärg, så välj en varumärkesaccent som också klarar kontrast som knapp.
- Varje offentlig sida i en SaaS-produkt bör ha en egen Open Graph-bild på 1200×630, eftersom länkar delas i Slack, X och LinkedIn hela tiden.
- Inlägg i ändringsloggen är den vanligaste grafiken ett SaaS-team gör, så de förtjänar en fast mall mer än lanseringsgrafiken.
- Rekryteringsinlägg är varumärkesinlägg, och de ska se ut som resten av företaget, inte som en rekryterares mall.
På den här sidan
Starkt SaaS-varumärke handlar mindre om en avtäckning på lanseringsdagen och mer om ett litet system du kan använda på hundratals saker: en ordbild, en palett som fungerar i gränssnittet lika bra som i sociala medier, ett eller två typsnitt, en bakgrundslook och några fasta layouter för lanseringar, ändringsloggar, länkförhandsvisningar och rekryteringsinlägg. Mjukvaruföretag släpper varje vecka, så varumärket måste hänga med utan att en designer ritar om allt. Bygg systemet en gång så blir varje inlägg efteråt ett fyll-i-luckorna-jobb.
Ett SaaS-varumärkessystem i fem delar
- 1
Ordbild
Ditt namn väl satt i ett typsnitt, plus en liten kvadratisk symbol för favicons och appikoner. Hoppa över den abstrakta symbolen tills du vet att du behöver en.
- 2
Palett
En neutral skala för gränssnittet, en varumärkesaccent och statusfärger för lyckat, varning och fel.
- 3
Typografi
Ett sans serif-typsnitt för gränssnitt och marknadsföring, eventuellt ett displaytypsnitt för stora rubriker och ett monospace för kod.
- 4
Bakgrundslook
En gradient eller ett material bakom marknadsföringsgrafik, aldrig inne i produktens arbetsvyer.
- 5
Layouter
Fasta mallar för lanseringsinlägg, ändringsloggsinlägg, Open Graph-bilder, bloggbanderoller och rekryteringsinlägg.
Skriv ner dem som designtokens så att produkten och marknadsföringssajten delar samma värden. Varumärke för startups tar upp namngivning och positionering; den här artikeln handlar om vad du gör när de är avgjorda.
SaaS-färger för produkten och marknadsföringen
En SaaS-accentfärg lever två liv: på knappar och länkar i appen, och som signatur på all marknadsföringsgrafik. Det utesluter många moderna färger, eftersom en knapp måste bära vit eller mörk text med läsbar kontrast. Välj accenten för gränssnittet först och bygg sedan marknadsföringsbakgrunden kring den.
Indigo, violett och elektriskt blått är extremt vanliga i SaaS, så om du väljer en av dem, låt bakgrundslooken bära särprägeln. Färgschema för webbplatser tar upp gränssnittssidan, inklusive ett mörkt tema.
Lanseringsgrafik för SaaS
På lanseringsdagen behöver du ett budskap i flera former: ett liggande inlägg för X och Bluesky, ett stående inlägg för LinkedIn, en länkbild för tillkännagivandet och en hero för sajten. Säg vad produkten gör på en enda rad, inte vad den heter.
Lanseringsinlägget för X och Bluesky: vad den gör först, namnet sedan.
Samma budskap som ett stående LinkedIn-inlägg.
Grafik för lanseringsdagen har en fullständig checklista över material och tidpunkter.
Open Graph-bilder för varje sida
SaaS-länkar delas hela tiden i Slack, Teams, X och LinkedIn, och en saknad förhandsbild får en länk att se trasig ut. Ge varje offentlig sida, inklusive dokumentation, priser, blogginlägg och poster i ändringsloggen, en egen bild på 1200×630 med sidans titel på din bakgrund.
<meta property="og:title" content="Automatic payment reminders" />
<meta property="og:description" content="Ledgerly chases late invoices politely, on your schedule." />
<meta property="og:image" content="https://ledgerly.app/og/payment-reminders.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />Med många sidor bör du generera dessa från en mall i stället för för hand. Dynamiska OG-bilder visar hur, och Open Graph-taggar går igenom varje tagg och hur varje plattform läser dem.
Ändringslogg och funktionsinlägg
Ändringsloggar är det ett SaaS-team publicerar oftast, och det bästa beviset på att produkten lever. Ge dem en egen, lugnare layout än lanseringarna, så att en veckouppdatering inte skriker som en lansering och en riktig lansering ändå sticker ut.
Ett ändringsloggskort i länkförhandsvisningens storlek: huvudfunktionen stor, resten på en rad.
- En funktion per kort. Börja med ändringen som flest märker.
- En enhetlig etikett som ”Ändringslogg” och ett vecko- eller versionsnummer.
- En skärmdump eller ett kort klipp på nästa karusellbild eller i själva inlägget, inte nedpressad i kortet.
- Samma layout varje vecka, så att vanliga användare känner igen uppdateringar direkt.
Rekryteringsinlägg som ser ut som företaget
Kandidater bedömer ett företag efter dess jobbannonser, och många SaaS-team lämnar dem till en generisk mall. Använd din egen bakgrund, typografi och röst, namnge rollen rakt och säg vad personen faktiskt ska arbeta med. Design för arbetsgivarvarumärke går längre.
Roll, plats och det verkliga arbetet, på samma bakgrund som lanseringen.
Håll dokumentation, app och sociala medier enhetliga
Glider isär
- Dokumentation i ett standardtema med en annan accent
- Varje utvecklare gör sin egen ändringsloggsbild
- Bloggbanderoller från en arkivmall
- Den gamla loggan kvar på OG-bilden
Håller ihop
- Dokumentation, app och sajt delar en tokenfil
- En ändringsloggsmall som vem som helst kan fylla i
- Bloggbanderoller på 1200×600 på varumärkets bakgrund
- OG-bilder genererade från det aktuella varumärket
Gradiently passar SaaS-team som lever i sin AI-assistent. Det fungerar i ChatGPT, Claude och varje assistent som stöder fjärr-MCP-servrar, så du kan be om veckans ändringsloggskort i samma chatt där du skrev versionsanteckningarna, och designen öppnas i Studio i ditt varumärke för att kontrolleras och exporteras. Koppla en AI-assistent förklarar hur du ställer in det.
Vanliga frågor
Vad gör ett bra SaaS-varumärke?
Ett litet, enhetligt system: en ordbild, en palett som fungerar i gränssnittet och marknadsföringen, ett eller två typsnitt, en bakgrundslook och fasta layouter för återkommande inlägg.
Vilken storlek ska en Open Graph-bild för SaaS ha?
1200×630 pixlar. Ge varje offentlig sida en egen bild och använd en absolut URL i og:image-taggen.
Vilka färger ska ett SaaS-varumärke använda?
En neutral gränssnittsskala, en varumärkesaccent som klarar kontrast som knappfärg och tydliga statusfärger för lyckat, varning och fel.
Hur ska ett SaaS-företag designa inlägg i ändringsloggen?
Använd en lugn, fast mall med en tydlig etikett och ett versions- eller veckonummer, och börja med den enskilda ändring användarna märker mest.
Behöver SaaS-startups en logotypsymbol?
Inte från början. En väl satt ordbild plus en enkel kvadratisk symbol för favicons och appikoner räcker för de flesta tidiga produkter.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil