# Kjente gradientlogoer: lær av velkjente identiteter

[Canonical HTML page](https://gradiently.design/nb/guide/famous-gradient-logos)

Noen få godt dokumenterte redesign gjorde gradienter fra en trend til en fast del av logodesign. Her er det som endret seg, og hva enhver merkevare kan lære av det.

## The short version

- Gradientlogoer ble vanlige midt på 2010-tallet, da store apper erstattet detaljerte eller flate ikoner med enkle symboler på fargerike gradienter.
- Redesignet av Instagram i 2016 erstattet et detaljert kameraikon med et enkelt kameraomriss på en varm til fiolett gradient, og gjorde farge til det viktigste gjenkjenningssignalet.
- Messenger gikk fra ensfarget blått til en blå, lilla og rosa gradient i 2020, samtidig som meldinger mellom Instagram og Messenger ble innført.
- Merkevaresystemet til Mozilla fra 2019 ga Firefox og tilhørende produkter en felles familie av sterke gradienter, og viste hvordan en gradient kan forene flere symboler.
- Lærdommen for enhver gradientlogo: hold formen enkel, ta med gjenkjennelige farger videre, fastsett gradienten nøyaktig og ha alltid en ensfarget versjon.

**Kjente gradientlogoer** gikk fra uvanlige til allestedsnærværende midt på 2010-tallet, da noen av verdens mest brukte apper gikk over til enkle symboler på fargerike gradienter. Skiftet lærte designere noe som fortsatt gjelder: når en logo vises som en liten firkant blant dusinvis av andre, gjør farge mer av gjenkjenningsarbeidet enn form. De beste gradientidentitetene kombinerer et svært enkelt symbol med en gradient som er fast, særegen og brukt overalt.

Denne artikkelen ser på tre godt dokumenterte redesign og trekker generell lærdom fra dem. Den beskriver hva som ble endret offentlig, ikke hvordan eller hvorfor selskapene tok beslutningen. For selve håndverket, se [gradientlogoer: når de fungerer](https://gradiently.design/nb/guide/gradient-logo).

## Hvorfor gradientlogoer tok over appikonene

Telefonens startskjerm endret hva en logo må gjøre. Hver app får den samme avrundede firkanten i omtrent samme størrelse, omgitt av andre. Detaljerte illustrasjoner blir uklare i den størrelsen, og én flat farge deles med dusinvis av andre apper. En gradient tilbyr noe imellom: en fargesignatur med flere kombinasjoner enn flate farger tillater, leselig selv når symbolet oppå er for lite til å sees tydelig.

- Flate farger: lette å dele: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- En gradient: vanskeligere å forveksle: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Flate merkevarefarger gjentas på en startskjerm. En bestemt gradient med flere stopp er en langt sjeldnere signatur.

## Instagram, 2016: gradienten blir merkevaren

I mai 2016 erstattet Instagram sitt detaljerte retrokameraikon med et enkelt hvitt kameraomriss på en gradient fra varmt gult og oransje nederst til venstre, gjennom rosa og magenta, til lilla øverst til høyre. Ved lansering presenterte selskapet fargene som en videreføring av regnbuestripen på det gamle ikonet. Redesignet vakte sterke reaksjoner først, og gradienten har siden stått sentralt i merkevaren, fornyet i 2022 sammen med en ny skrifttype.

Diagonal fra varmt til fiolett: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

En gradient i samme familie som ikonet fra 2016: varm i ett hjørne, kjølig i det motsatte. En tilnærming til studier, ikke en offisiell merkevarefarge.

- **Symbolet ble enklere mens fargen ble rikere.** Et kameraomriss gir gradienten rom til å være den gjenkjennelige delen.
- **Eksisterende gjenkjenning ble tatt videre.** Fargene fra det gamle ikonet ble tolket på nytt fremfor forkastet.
- **En diagonal bane fra varmt til kjølig** gir gradienten en retning folk kan huske, ikke bare et sett farger.

## Messenger, 2020: nye farger signaliserte et endret produkt

I 2020 erstattet Messenger den ensfargede blå logoen med en gradient i blått, lilla og rosa. Endringen kom samtidig med meldinger mellom Instagram og Messenger. Formen, en snakkeboble med et lyn, ble beholdt så folk fortsatt kunne finne den; bare fargen endret seg.

- Før: én ensfarget blå: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Etter: blått til lilla og rosa: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Tilnærminger til før og etter. Ved å beholde formen og endre fargen kan en kjent logo varsle noe nytt.

Lærdommen: en gradient kan si «dette har endret seg» uten å miste gjenkjenning, så lenge formen folk kjenner, blir værende. Det er et nyttig mønster ved enhver [merkevarefornying](https://gradiently.design/nb/guide/rebrand-checklist): endre ett sterkt signal om gangen.

## Firefox, 2019: én gradientfamilie for mange produkter

I 2019 innførte Mozilla et nytt merkevaresystem der Firefox ble et familienavn for flere produkter. Nettleserlogoen beholdt reven i forenklet form, og familien delte sterke gradienter i gult, oransje, rødt, rosa og lilla på tvers av produktikonene. Hvert ikon hadde sin egen form, men de felles gradientene fikk dem til å oppfattes som slektninger.

- Varm familiefargeskala: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Forskjøvet søskenfargeskala: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Kjøligere søsken: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Én måte en gradientfamilie fungerer på: flytt utsnittet langs en felles fargeskala, så hvert produkt får sin egen blanding, og alle fortsatt hører sammen.

## Hva disse gradientidentitetene har til felles

| Identitet | År | Hva som endret seg | Lærdom |
| --- | --- | --- | --- |
| Instagram | 2016 | Detaljert kamera til omrissymbol på en varm til fiolett gradient | Forenkle formen, la farge bære gjenkjenningen |
| Messenger | 2020 | Ensfarget blått til blå, lilla og rosa gradient | Behold formen, endre fargen for å signalisere noe nytt |
| Firefox | 2019 | Én nettleserlogo til en familie med felles gradienter | En gradientskala kan forene mange symboler |

Alle tre legger en enkel, kjent form oppå en gradient som er nøyaktig og gjentas overalt.

## Fem råd til din egen gradientlogo

1. **Hold formen svært enkel** Gradienten står for uttrykket, så symbolet oppå bør være leselig i størrelsen til et appikon eller en avatar.
2. **Ta gjenkjennelige farger videre** Har du allerede en kjent farge, bygg gradienten fra den. Gjenkjenning du allerede har opparbeidet, er verdt å beholde.
3. **Fastsett gradienten nøyaktig** Noter hvert stopp, hver posisjon og vinkel. En gradient gjenskapt på øyemål glir, og gjenkjenningen følger med. [Merkevarehelhet](https://gradiently.design/nb/guide/brand-consistency) forklarer hvorfor.
4. **Ha alltid en ensfarget versjon** Favikoner, broderi, enfarget trykk og noen grensesnitt kan ikke vise en gradient. Velg én flat farge og en hvit eller svart versjon av symbolet.
5. **Bruk gradienten utover logoen** De sterkeste eksemplene gjentar gradienten i bakgrunner, fremhevinger og bevegelse, slik at den blir et [særegent merkevareelement](https://gradiently.design/nb/guide/distinctive-brand-assets) i seg selv.

```css
.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;
}
```

En gradientflis med ensfarget bakgrunn angitt først. Å skrive ned stoppene er det som holder logoen identisk overalt.

En gradient kan også fungere dårlig bak en logo i stedet for inni den. Ligger logoen på din egen gradient, les [plasser en logo på en gradient](https://gradiently.design/nb/guide/logo-on-gradient-background), og for å bygge en hel identitet rundt den, [merkevarebygging med gradienter](https://gradiently.design/nb/guide/gradient-branding).

## FAQ

### Når gikk Instagram over til en gradientlogo?

I mai 2016, da det detaljerte kameraikonet ble erstattet med et enkelt kameraomriss på en gradient fra gult og oransje gjennom rosa til lilla.

### Hvorfor bruker så mange apper gradientlogoer?

Appikoner deler den samme lille avrundede firkanten, så farge gjør det meste av gjenkjenningsarbeidet. En bestemt gradient er mer særegen enn én flat farge.

### Fungerer gradientlogoer på trykk?

Ofte, med omtanke. Gradienter kan få fargebånd eller endre farge på trykk, så enhver gradientlogo bør også ha en flat fargeversjon og enfargede svarte og hvite versjoner.

### Hvordan lager jeg en gradientlogo som forblir gjenkjennelig?

Bruk en enkel form, fastsett nøyaktige stopp og vinkel, gjenta gradienten på tvers av merkevaren og behold et ensfarget alternativ for små eller begrensede bruksområder.