Idag tar vi platt design till nästa nivå. Inte alla projekt fungerar med några av de djärva, ljusa färgvalen som vanligtvis är kopplade till platt design.
Så fastna inte med dem. Kick upp ditt platta designschema med en mer dämpad färgpalett. Den subtila förändringen kan hjälpa till att ge din webbplats en trendig översyn och hjälpa den att sticka ut i den platta designmassan. Här kommer vi att plocka ut några webbplatser som använder denna stil exceptionellt bra för att hjälpa dig att skapa en webbplats med platt design och en dämpad färgpalett.
Muted Color Primer
Du har förmodligen sett variationer av paletten med plana färger tusentals gånger, och ibland passar dessa färger inte bara den designaestetik du ska gå för. Även när allting om platt design appellerar till det.
Det är då dämpade färgalternativ kan fungera underbart. Att använda en dämpad färgpalett med en platt estetik är klassisk, polerad och bara annorlunda för att få det att stå ut från alla andra platta projekt där ute.
Men vad är en dämpad färgpalett? I samband med denna konversation är det en mycket mättad nyans (som t.ex. från Flat UI Colors) och lägger till en nyans, ton eller nyans för att göra den mindre ljus och mer dämpad. Resultatet är ofta en mjukare, lugnare färg som kan vara lättare att arbeta med och matcha den övergripande designen.
Du kan se från bilderna nedan hur samma färger från Flat UI Colors kan se annorlunda ut med ändringar i den vita eller svarta som används med dem. Och det är helt enkelt det som en dämpad färgpalett handlar om. Resten av designestetiken kan följa så nära (eller löst) principerna för platt design som du vill.
nyanser
Tints skapas när du lägger till vit till en färg för att lätta den. Denna färg är ofta signifikant lättare än den ursprungliga färgen och brukar kallas en pastell. Tints kan sträcka sig för nästan vit till bara några beröringare än en helt mättad färg. De har ofta en ljusare, mjukare känsla och skapar en lugnare estetik än djärvare och ljusare alternativ.
Tints fungerar bra med foton och är populära på webbplatser med illustrationer. Dessa ljusare färger faller ofta bort från de viktigaste estetiska och passar bäst för designändamål när annat innehåll, som bilder eller ord, verkligen behöver vara fokus.
Jack Horner använder tonade färger i hela siddesignen för att kontrastera starkt med svarta accenter. Den gula på hemsidan är så lätt att det kan vara svårt att se om inte för ljusare accent. Webbplatsen använder också en tonad grön för samtal till handling och viktig information genom hela designen för att hålla användarna engagerade.
Cake Lärare använder en liknande ljusgul och grön färgpalett men med olika färgtoner. Gula är lite ljusare och gröna är lite ljusare än färgerna på Jack Horner-webbplatsen. Den subtila nyanserade paletten hjälper användarna att fokusera på tårfoton i mitten av skärmen, särskilt de med ljusare färgalternativ. Kontrasten mellan ljus och ljus hjälper till att skapa ett fokusfokus för designen.
Shades
Nyanser är färgar resultatet med tillsats av svart. Detta kommer att göra en färg mörkare och tyngre mot ögat. Sortimentet för att lägga till svart är allt från nästan svart med en hint av färg till bara en sned mörkare än den ursprungliga nyansen.
Nyanser kan fungera bra i vissa typer av miljöer, ofta när de används med mindre svart. Projekt som är riktigt mörka och innehåller mycket svart kan leda till bekymmer om läsbarhet om de inte exekveras exceptionellt bra. En sak som många människor felaktigt antar är att nyanser måste se svart ut, men när det gäller att utveckla en färg från traditionella plattformssystem är det inte alls fallet.
Försäljnings popupen för återförsäljaren Ann Taylor använder en kombination av nyanser för en enkel grön promo som är lätt att läsa och tilltalande att titta på. Estetiken använder mycket av platta koncept och trendiga element som spökknappar och djärv typografi, men de skuggade nyanserna är något annat än? Traditionellt? platt. Kombinerad med den gula texten (tack vare en ton) är den dämpade plana paletten slående och modern.
Caf? Frida använder en uppsättning färger som inte alls är vanliga. De skuggade gyllene, gröna och till och med vita skapar en årgångsmöte. Färgerna är starka, men inte överväldigande. De är engagerande men inte riktigt spännande. Kombinationen ställer in scenen för caf ?, som exekveras väl genom rullning av hemsidan.
toner
Toner skapas genom att kombinera vit och svart med en färg för att få den att bli mjukare. De flesta färger skapas faktiskt med hjälp av toner. De är komplexa färger som har ett nästan universellt överklagande eftersom de drar från flera delar av färgspektret. Det är denna subtila kvalitet som gör toner till det första valet av designers och artister för de flesta projekt.
Toner fungerar i nästan alla design estetiska på grund av deras tilltalande natur.
Källträd använder en blek, nästan lugnande, grön hela platsen. Den kombineras med andra blinkar av tonad färg också för de andra projekten som visas. Vad som är trevligt med den här färgen är att toning ger webbplatsen en välkomnande känsla. Tänk dig hur annorlunda den här webbplatsen skulle se om den skulle använda Emerald från den platta paletten ovanför i alla ställen där den tonade färgen används. Färgen ger nästan rum till de mindre lådorna och animerade element, något som inte skulle hända med lika mycket visuell lätthet om färgen var väsentligt ljusare.
Institutet för tro, arbete och ekonomi använder kombinationer av komplexa färgtoner för att flytta användare från huvudbilden nedåt på sidan till uppmaningen till handling. Den mörkblå och gulaktiga kombinationen är lätt att läsa tack vare hög kontrast och visuellt intressant eftersom färgerna är din standard blå och gul parning.Färgerna används i hela konstruktionen för att skapa fokus över hela konstruktionen och leda användare till åtgärder och klick över hela webbplatsen.
Slutsats
När du förgrenar dig från några av de mer traditionella färgerna i plattform, behöver du inte välja någon av färgteknikerna ovan. Du kan kombinera toner, nyanser och toner för att skapa något som är helt engagerande och annorlunda.
Den verkliga lektionen i dessa enkla fallstudier är detta: Bli inte upptagen med att behöva använda en trend? Av boken.? Bryta med en annan typ av teknik för att göra trenden och användningen din. Dessa exempel visar hur underbar förändring endast färgpalett kan vara, samtidigt som man arbetar med design som är platta i naturen.