Bekende logo’s met kleurverloop: wat grote merken ons leren

Bekende logo’s met kleurverloop gingen halverwege de jaren 2010 van ongewoon naar overal, toen enkele van de meest gebruikte apps ter wereld overstapten op eenvoudige symbolen op kleurrijke kleurverlopen. Die verschuiving leerde ontwerpers een les die nog steeds geldt: als een logo als klein vierkantje tussen tientallen andere verschijnt, doet kleur meer van het herkenningswerk dan vorm. De beste identiteiten met kleurverloop combineren een heel eenvoudig beeldmerk met een kleurverloop dat vastligt, onderscheidend is en overal wordt gebruikt.

Dit artikel bekijkt drie goed gedocumenteerde redesigns en trekt er algemene lessen uit. Het beschrijft wat er publiekelijk veranderde, niet hoe of waarom de bedrijven daartoe besloten. Voor het vak van er zelf een maken, zie logo’s met kleurverloop: wanneer ze werken.

Waarom logo’s met kleurverloop de app-iconen overnamen

Het startscherm van de telefoon veranderde wat een logo moet doen. Elke app krijgt hetzelfde afgeronde vierkant op ongeveer dezelfde grootte, omringd door andere. Gedetailleerde illustraties vervagen op dat formaat, en één vlakke kleur deel je met tientallen andere apps. Een kleurverloop biedt iets ertussenin: een kleurhandtekening met meer combinaties dan vlakke kleur toelaat, herkenbaar zelfs als het symbool erop te klein is om goed te zien.

Instagram, 2016: het kleurverloop wordt het merk

In mei 2016 verving Instagram zijn gedetailleerde, retro camera-icoon door een eenvoudige witte cameracontour op een kleurverloop dat loopt van warm geel en oranje linksonder, via roze en magenta, naar paars rechtsboven. Bij de lancering presenteerde het bedrijf de kleuren als een evolutie van de regenboogstreep op het oude icoon. Het redesign riep eerst sterke reacties op, en het kleurverloop staat sindsdien centraal in het merk, in 2022 opgefrist samen met een nieuw lettertype.

• Het symbool werd eenvoudiger naarmate de kleur rijker werd. Een cameracontour laat ruimte voor het kleurverloop om het herkenbare deel te zijn.
• Bestaande herkenning werd meegenomen. De kleuren van het oude icoon werden opnieuw geïnterpreteerd in plaats van weggegooid.
• Een diagonaal pad van warm naar koel geeft het kleurverloop een richting die mensen kunnen onthouden, niet alleen een set kleuren.

Messenger, 2020: een kleurwissel die een productwissel aankondigde

In 2020 verving Messenger zijn effen blauwe logo door een kleurverloop van blauw, paars en roze. De wijziging kwam tegelijk met berichten tussen Instagram en Messenger. De vorm, een tekstballon met een bliksemschicht, bleef, zodat mensen hem nog konden vinden; alleen de kleur verschoof.

De les: een kleurverloop kan “er is iets veranderd” zeggen zonder herkenning te verliezen, zolang de vorm die mensen kennen blijft. Dat is een nuttig patroon voor elke rebranding: verander één sterk kenmerk tegelijk.

Firefox, 2019: één familie van kleurverlopen voor veel producten

In 2019 introduceerde Mozilla een nieuw merksysteem waarin Firefox een familienaam werd voor meerdere producten. Het browserlogo hield zijn vos, vereenvoudigd, en de familie deelde heldere kleurverlopen van geel, oranje, rood, roze en paars over de producticonen. Elk icoon had een eigen vorm, maar de gedeelde kleurverlopen maakten ze herkenbaar als familie.

Wat deze identiteiten met kleurverloop gemeen hebben

Vijf lessen voor je eigen logo met kleurverloop

1. 1

   Houd de vorm heel eenvoudig

   Het kleurverloop voert het woord, dus het beeldmerk erop moet leesbaar zijn op het formaat van een app-icoon of avatar.

2. 2

   Neem herkenbare kleur mee

   Heb je al een bekende kleur, bouw het kleurverloop daar dan omheen. Herkenning die je al verdiend hebt, is het bewaren waard.

3. 3

   Leg het kleurverloop exact vast

   Noteer elke stop, positie en hoek. Een kleurverloop dat op het oog wordt nagebouwd, verschuift, en de herkenning verschuift mee. Merkconsistentie legt uit waarom.

4. 4

   Heb altijd een vlakke versie

   Favicons, borduurwerk, drukwerk in één kleur en sommige interfaces kunnen geen kleurverloop tonen. Kies één vlakke kleur en een witte of zwarte versie van het symbool.

5. 5

   Gebruik het kleurverloop ook buiten het logo

   De sterkste voorbeelden herhalen hun kleurverloop in achtergronden, accenten en beweging, zodat het op zichzelf een onderscheidend merkelement wordt.

.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}

Een kleurverloop kan ook misgaan achter een logo in plaats van erin. Staat je logo op je eigen kleurverloop, lees dan een logo op een kleurverloop plaatsen, en voor het bouwen van een hele identiteit eromheen huisstijl met kleurverlopen.