Gradientdesign: 25 idéer för inlägg, presentationer och varumärken

Gradientdesign är att använda färgövergångar som en strukturell del av en layout, inte bara som bakgrundsfyllning. Idéerna nedan ger var och en gradienten ett uppdrag: att peka, att skilja åt, att sätta en stämning eller att bli igenkänd. De är sorterade efter var du ska använda dem, inlägg, presentationer, varumärken och webben, och var och en kommer med layouten eller koden att prova den med.

Om du behöver färger först, börja med gradientfärgkombinationer och kom sedan tillbaka för att bestämma vad du ska göra med dem.

Gradientdesignidéer för inlägg i sociala medier

1. Strålkastarrubrik. En kort rad satt på det ljusaste området av en radiell glöd. Ljuset talar om för folk var de ska läsa.
2. Enordsaffisch. Ett enda stort ord på ett rikt fält. Det fungerar bara om ordet förtjänar utrymmet, så välj ett verb eller ett namn.
3. Delat fält. Två gradienter som möts i en hård kant, en för rubriken och en för detaljerna. Kanten blir en layoutlinje.
4. Statistikkort. Ett stort tal på en lugn gradient med en förklaring på en rad. Håll fältet stilla så att siffran dominerar.

1. Frågeinlägg. En fråga som rubrik, med svaret utlovat i bildtexten. Gradienter passar för detta eftersom de känns öppna snarare än färdiga.
2. Citat på ett mjukt fält. Ett kort citat på en gradient med låg kontrast, källan liten. Mjukhet läses som genomtänkt; hård färg kämpar mot orden.
3. Nedräkningsserie. Samma gradient, förskjuten några grader varmare varje dag fram till lanseringen. Serien ser planerad ut och förändringen bygger förväntan.
4. Duoton-foto. Ett foto mappat till gradientens två ändfärger, så att fotografi och bakgrund hör ihop. Se duoton.

Gradientdesignidéer för presentationer

1. Titelbild med horisont. En mörk topp som tonar till ett upplyst band nära botten, med titeln strax ovanför. Den läses som en soluppgång och ger föredraget en början.
2. Avsnittsavdelare i följd. Varje avsnittsavdelare tar nästa steg på en nyansresa. Folk vet hur långt in i bildspelet de är utan en förloppsindikator.
3. Stillsamma databilder. Innehålls- och diagrambilder använder en nästan platt version av samma gradient, så att datan bär färgen. Presentationsbakgrunder tar upp kontrast för text.
4. Speglad avslutningsbild. Sista bilden vänder titelbildens gradient, uppifrån och ner. Den sluter cirkeln visuellt.
5. Ljust till mörkt. Börja ljust och sluta mörkt, eller tvärtom, om ditt föredrag går från problem till svar. Färgen stöder berättelsen i det tysta.
6. Ram, inte fyllning. En tunn gradientkant runt ett neutralt innehållsområde håller en tät bild läsbar och ändå i linje med varumärket.

Gradientdesignidéer för varumärken

1. En signaturgradient och en reserv. Välj en övergång och en platt färg ur den för favicons och enfärgstryck.
2. En familj för produktlinjer. Behåll strukturen och vinkeln, ge varje linje sin egen nyans. Familjen förblir igenkännbar medan varje produkt är särskild.
3. Gradient bara bakom logotypen. Använd gradienten på ett ställe, logotypuppställningen eller appikonen, och platt färg på andra ställen. Knapphet gör den minnesvärd.
4. Säsongsskiften. Flytta samma gradient lite varmare på sommaren och svalare på vintern, utan att ändra dess struktur.
5. Gradient som material. Lägg till korn, en sidenglans eller pappersstruktur så att gradienten känns som en yta. Textur är svårare att kopiera än färg.
6. Tryckta produkter. För gradienten vidare till kort, klistermärken och förpackningar, planerad för bläck. Trycka gradienter förklarar vad som ändras på papper.

Varumärkesidéerna fungerar bara med konsekvens: samma färger, vinkel och textur i varje format. Gradient i varumärket går in på hur du äger en i stället för att låna.

Gradientdesignidéer för webbplatser och rörelse

1. Hero-glöd. En mjuk radiell glöd bakom en produktskärmdump lyfter den från sidan utan en slagskugga.
2. Ett gradientord. Lägg en gradient på ett enda ord i en rubrik, aldrig på hela stycket. Se gradienttext.
3. Långsam drivande loop. En bakgrund som rör sig så långsamt att den märks först efter några sekunder. Den känns levande utan att konkurrera med orden.
4. Gradientkanter på kort. En gradientkant på 1 eller 2 pixlar runt annars platta kort ger en sida en signatur med nästan ingen visuell tyngd.
5. Färgskifte vid scrollning. Varje avsnitt på en lång sida ligger på nästa steg av en gradient, så att scrollningen känns som att röra sig genom ljus.

.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Så väljer du rätt idé

Välj idén som passar uppdraget och använd den sedan konsekvent en tid. En gradient som upprepas över tjugo inlägg gör mer än tjugo kvicka gradienter som används en gång. För branschspecifika paletter, se gradientidéer efter bransch.