Kortversionen
- En gradientlogotyp fungerar bäst på skärmar, i medelstora och stora storlekar och med en enkel, kraftig form.
- Varje gradientlogotyp behöver en platt enfärgsversion för små storlekar, enfärgstryck, broderi, gravyr och stämplar.
- Logotypgradienter läses bäst som korta övergångar mellan angränsande nyanser med liknande ljushet, som förblir levande när de är små.
- Designa logotypen i massivt svart först; om formen inte fungerar platt räddar inte en gradient den.
- Många varumärken håller logotypen platt och lägger gradienten i sina bakgrunder i stället, vilket ger samma energi med färre felkällor.
På den här sidan
En gradientlogotyp fungerar när logotypen mest lever på skärmar, syns i medelstora eller stora storlekar och har en kraftig, enkel form som fortfarande läses i en enda platt färg. Den har det svårt i pyttesmå storlekar, i enfärgstryck, på broderi och överallt där färgen är begränsad. Regeln är alltså enkel: en gradientlogotyp går bra som huvudversion, men du måste alltid ha en platt version, och formen måste fungera utan gradienten först.
Gradientloggor blev vanliga när varumärken började designa för telefoner först, där färg glöder och skärmar återger övergångar bra. Vår genomgång av kända gradientloggor tar upp de välkända exemplen. Den här guiden handlar om att avgöra om din logotyp ska vara en, och göra det bra om så är fallet.
När en gradientlogotyp fungerar
En gradient förtjänar sin plats i en logotyp när den tillför något en platt färg inte kan: en känsla av ljus, av rörelse eller av flera saker som kommer samman. Den fungerar bäst under de här förhållandena.
- Skärmar först. Appikoner, webbplatser, avatarer i sociala medier och video, där färgen är bakgrundsbelyst och övergångar renderas jämnt.
- Medelstora och stora storlekar. En övergång behöver utrymme; på några millimeters bredd läses den som en enda grumlig färg.
- Enkla, massiva former. En cirkel, en kraftig bokstav eller en tjock symbol ger gradienten en yta att färdas över. Tunna linjer ger den ingenstans att ta vägen.
- Två eller tre närliggande färger. Korta övergångar mellan angränsande nyanser förblir levande. Långa resor över färghjulet blir grå i mitten.
- Ett varumärke som redan använder gradienter. Logotypen upprepar då resten av identitetens språk i stället för att vara den enda övergången i sikte.
Där gradientloggor går sönder
De flesta ställen där en logotyp syns är inte en telefonskärm. Innan du bestämmer dig, lista var din logotyp faktiskt ska hamna och kontrollera var och en mot den här tabellen.
| Var | Vad som händer med en gradient | Använd i stället |
|---|---|---|
| Ikon i webbläsarfliken | För liten för att se övergången; läses som en fläck | Platt symbol i en färg |
| Enfärgstryck, stämplar, kvitton | Kan inte tryckas alls | Massivt svart eller ett bläck |
| Broderi och vävda etiketter | Tråd kan inte blandas jämnt | Platt version i en eller två trådfärger |
| Lasergravyr, prägling | Ingen färg alls | Bara formen |
| Litet tryck (visitkort, etiketter) | Övergångar kan få band eller se fläckiga ut | Platt färg, eller en kort gradient testad i tryck |
| På en gradientbakgrund | Två övergångar kämpar mot varandra | Enfärgad vit eller mörk version |
Tryck är inte omöjligt, bara krävande. Trycka gradienter tar upp hur du får jämna övergångar på papper. Och för sista raden, se logotyp på en gradientbakgrund.
Så designar du en gradientlogotyp som klarar sig
- 1
Designa formen i massivt svart
Varje logotyp ska fungera som en siluett först. Om den inte går att känna igen i svart på vitt i liten storlek döljer en gradient bara problemet.
- 2
Välj en kort övergång
Välj två eller tre angränsande nyanser med liknande ljushet. Testa mittpunkten: om den ser grå eller brun ut, flytta en färg eller lägg till ett mellanstopp.
- 3
Bestäm riktningen med avsikt
Diagonala övergångar från övre vänstra till nedre högra hörnet är de vanligaste. En riktning som matchar formen, till exempel nerifrån och upp för något som stiger, ger gradienten en anledning att finnas där.
- 4
Välj den platta reservfärgen
Välj en solid färg ur övergången, ofta nära mittpunkten, som folk läser som samma varumärke. Det är färgen för små storlekar och enfärgsanvändning.
- 5
Gör hela uppsättningen
Gradient, platt färg, enfärgad vit och enfärgad svart. Testa var och en i avatarstorlek, på mörka och ljusa bakgrunder och i tryck.
- 6
Skriv ner reglerna
Anteckna de exakta stoppen, vinkeln och reserven i din varumärkesstilguide så att ingen bygger om gradienten på känn.
Gradientlogotyp eller gradientbakgrund
Många varumärken får nyttan av en gradient utan att lägga den i logotypen alls. Logotypen förblir platt och skarp, och gradienten lever i bakgrunderna på inlägg, förpackningar och webbplatsen. Logotypen behöver aldrig kämpa mot små storlekar eller tryckbegränsningar, medan gradienten ändå blir en del av hur folk känner igen dig. Gradient i varumärket går djupare in på det tillvägagångssättet.
En platt vit ordlogotyp med gradienten bakom: skarp i vilken storlek som helst, och färgen gör ändå varumärkets jobb.
Samma par i ett brett sidhuvud. Logotypen ändras aldrig; gradienten renderas för formen.
Bygga en gradientlogotyp i SVG
På webben bör en gradientlogotyp vara en SVG med gradienten definierad inuti, så att den förblir skarp i varje storlek. SVG-gradienter tar upp alternativen i sin helhet.
<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
<defs>
<linearGradient id="northlight-logo" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#7c3aed" />
<stop offset="1" stop-color="#db2777" />
</linearGradient>
</defs>
<circle cx="60" cy="60" r="52" fill="url(#northlight-logo)" />
</svg>Vanliga frågor
Är gradientloggor en bra idé?
De kan vara det, för varumärken som mest lever på skärmar och har en kraftig, enkel logotypform. De behöver en platt enfärgsversion för små storlekar och tryck.
Hur gör jag en platt version av en gradientlogotyp?
Välj en solid färg ur övergången, oftast nära mittpunkten, som folk läser som samma varumärke, och gör också enfärgade vita och svarta versioner.
Går det att trycka en gradientlogotyp?
Ja, i fyrfärgstryck i rimlig storlek, men inte i enfärgstryck, broderi eller gravyr. Testa små tryckta storlekar för bandning innan du bestämmer dig.
Vilka färger ger en bra gradientlogotyp?
Två eller tre angränsande nyanser med liknande ljushet, som bärnsten till korall eller turkos till blått. Motsatta färger tenderar att bli grå i mitten.
Ska min logotyp vara en gradient om mitt varumärke använder gradienter?
Inte nödvändigtvis. Många varumärken behåller en platt logotyp och lägger gradienten i sina bakgrunder, vilket ger samma igenkänning med färre problem i små storlekar.
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
