Om inget annat har 2017 varit ett år med färg i webbdesign. Färgtrenderna har dominerat konversationen om design, med ljusare, djärvare nyanser som en stor del av landskapet.
Det finns en ny färgutveckling som kombinerar många av de ljusa alternativen till större färgpaletter som du nu kan förvänta dig - regnbågens färgmönster. Det är rätt, fler designers tar en förändring med mycket färg och införlivar levande regnbåge, gradientfärger i designprojekt. Och det är ganska coolt!
Här är en titt på trenden och några idéer för hur man använder levande färg som inte är galen.
Rainbow Animation for Engagement
Nästan, eftersom Spotify kom fram till scenen, har det skapat designtrender och skjuter gränserna för vilken cool design som ser ut. Musikplatsen uppdaterar ständigt och ändrar sin design och använder microsites för att markera specifika genrer och artister.
London Grammar Moodmix webbdesign använder en studsande färgblomma för att fånga användarens uppmärksamhet. Animeringen är intressant och gör att du nästan vill nå ut och röra den. Och det är målet med denna regnbågefärgade animering. Observera att uppmaningen till handling är rätt i mitten av all den färgen.
Resultatet är en enkel design med en intressant animering som leder användarna rätt till målet med designen. Animationen fungerar med mycket färg på grund av rörelsen. Blombben skulle inte vara så intressant i en enda färg.
Färg Vs. Mörk
Regnbågsfärger kan vara svåra att använda på grund av oro över kontrast. Att sätta ljusa regnbågstil nyanser på en mörk bakgrund kan lösa de flesta av dessa problem.
Ljusa färger kommer nästan att hoppa av en mörk bakgrund.
Ett annat välkänt namn i webbdesign och utveckling, Github, använder regnbågens färger för att främja sin konferens i år. Den enkla webbplatsen använder en rolig logotyperlogo och knappar till handlingsknappar för biljettförsäljning. Vad som är annorlunda med denna design från många andra regnbågs estetik är att designen är ganska platt och det går inte att använda en gradient för färger. Varje rad i logotypen är en annan färg, liksom bokstäverna. En gradient används endast för CTA-knappen.
Savee går i en annan riktning med regnbågens färg på en mörk bakgrund, med massor av högfärgsbilder för att skapa en mosaik med en regnbåge känsla. Medan de flesta användningarna av regnbågens färg ger en examen från rött till gult till grönt till blått, så är det inte alltid fallet. Regnbågens färgpaletter kan vara allt med en omfattande färgtonanvändning.
Subtil Färg
Ibland hoppar de bästa användningarna av regnbågstyp inte direkt av skärmen. Southwest använder en subtilare palett med regnbågstoner i bakgrunden.
Det intressanta valet täcker nästan många av årets andra färgtrender och resultatet är uppfriskande. Du tittar på designen nästan på grund av att den är så annorlunda än många andra webbdesigner ute där just nu.
Även med en mer dämpad regnbågens färgpalett lägger man tonvikten på kontrast mellan bakgrund och förgrundselement för att se till att varje element är lätt att se och läsa. Detta är det vanligaste problemet med regnbågstilstilar - inte tillräckligt med kontrast och utmanande läsbarhet.
Rainbow Logo
Överväg att använda regnbågens färger för en enkel logotyp. Detta är sannolikt den svåraste användningen av regnbågens färg, men kan ha en slående effekt.
Det är utmanande på grund av alla platser - och sätt - en logotyp kan användas. Att välja regnbågsfärger kan fungera bäst för små märken som inte använder logotypen i många applikationer. Du kommer definitivt vill ha ett sekundärt alternativ också för när mycket färg bara inte fungerar.
Richard Gazdik använder en regnbågslogo för sin portfölj - och efterföljande navigering. Det fungerar nästan perfekt tack vare sina initialer - RGB - och förhållandet till de valda färgerna. Inte alla kommer att få denna tur, men det visar hur en högfärgslogotyp kan vara effektiv i en enkel designutformning.
Färg som en kontaktpunkt
Rainbow färg kan vara det som drar användarna till en design med ett starkt första intryck.
Men det finns en tunn linje mellan regnbågens färg som engagerar och regnbågens färg som kan göra användarna borta. Kom ihåg några av webbdesignerna från slutet av 1990-talet och början av 2000-talet när nästan varje webbplats hade ljusa färger stänk överallt (och blinkande)? Den typen av regnbågsfärgbehandling kan vara katastrofal och göra användarna borta.
Lonsdale gör motsatsen med en loopingvideo av regnbågsvätska som är fascinerande att titta på. Rörelserna och färgförändringarna är djärva och gör att du vill titta på. Regnbågens bakgrund kompenseras av vittyp och navigationselement för att driva användare men resten av designen, som klickar på att färga i bilder på en vit bakgrund.
Färgkoden tar ett annat tillvägagångssätt med mycket ljus färg i hela konstruktionen. Färg används för att dra visuell fokusering på produkten på skärmen - telefoner och klockor som visar appar.
Skapa en engagerande bakgrund
Regnbubblor kan nästan vara en egen färgutveckling - flytande animationer, bläckstil, rörliga färgbubblor. Som bakgrundsdel kan regnbågens färg hjälpa till att ställa in tonen för ett projekt och driva användarengagemang. (Tänk bara på hur mycket mer dras till färg du är än en enda beige bakgrund.)
Medan många av dessa bakgrundselement har viss rörelse i form av en animering eller video, behöver de inte. Det som är vanligt bland webbplatser med regnbågebakgrund är att de ofta finns på hemsidan eller ovan-scroll-designen och resten av webbplatsen är mindre upptagen.
Det är en bra teknik när det gäller engagemang. Det finns något direkt för användarna att ansluta till, vilket leder dem till innehåll som de kan dyka in lite djupare.
Mer Gradient Techniques
Regnbågsfärger kan vara en förlängning av en annan färgutveckling från det här året - gradientens återkomst.
Prova en övergångsöverlagring med en regnbåge att känna till det. Gå till en fullskalig färgförändring från röd till blå, till exempel SpicyWeb eller gå till färger som är lite mer trendiga som Talkd.
Hur som helst, med en lutning kan det vara ett roligt sätt att lägga till färg utan att känna sig överväldigande. Det fungerar fullskärms eller i mindre element. En gradient kan också hjälpa dig att integrera varumärkeskalor i ett regnbågsstilfärgschema utan en heltäckande webbdesign.
Markera något annat
Använd regnbågens färgutveckling för att markera något ovanligt eller annorlunda i din design. Eftersom regnbågsfärger är så uppmärksamma kan de hjälpa användarna med ett okonventionellt användarmönster, dra ögat till en viss del av innehållet eller en del av skärmen eller bidra till att skapa klick och konverteringar.
Jony Guedj använder färg för navigering. Menyelementen är inte sammansatta på vanligt sätt, längst ned på skärmen och fungerar bara med rullningsåtgärder för att visa olika videoklipp. Medan denna typ av design normalt inte skulle rekommenderas fungerar den här. Regnbågens färger drar användarna att engagera sig med dem och hjälpa människor att förstå hur man använder webbplatsen.
Slutsats
Regnbågens färgutveckling är mycket roligt.
Det kan vara utmanande att använda om färg intimiderar dig lite. Men börja små med ett regnbågsfärgelement för att se hur det fungerar. De flesta designers konverterar inte hela webbplatser till regnbåge design; de använder regnbågens färg för att skapa effektiva visuella bilder som drabbar användarna. Det är troligt varför trenden har uppstått.