Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Reklam

Begreppet att använda dämpade färger i designen är verkligen inte nytt. När man jämför det med den livliga färgtrenden som vi har nästan överallt verkar det säkert vara något nytt.

Alla moderna UX-designers vet att den minimalistiska, platta trenden har tagit fart under de senaste åren.

Det finns företag från bland annat Microsoft, Apple och Twitter, och de drar alla nytta av den här framväxande stilen när de utformar sina digitala produkter.

Den platta designen går hand i hand med det minimalistiska tillvägagångssättet.

Den platta designen kommer att eliminera djup genom att inte använda skuggning och lutning, och gynnar endimensionell geometri.

FireShot-Capture-1789-BO Dämpade färger: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Att göra saker och ting för enkla har faktiskt haft motsatt effekt till vad som krävdes, och användarna tycker att det är svårare att lista ut var de kan klicka och varför.

Tacksamt nog finns det en tredje trend som kan hjälpa till med detta. Dämpade färger har också fått en viss uppgång.

exploration-pastel-color-2- Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

exploration-pastel-color-2- Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Dämpade färgscheman finns överallt i tryckt reklam. I en tryckt kampanj behöver du dock inte en minimalistisk design eller en platt effekt, eftersom användaren inte interagerar med ett papper utan bara behöver titta.

Den dämpade färgpaletten har dock faktiskt fått en ny roll vid sidan av sin primära roll i de funktionella UX-praktikerna.

FireShot-Capture-1776-Air Muted Colors: Definition och hur man använder dem på webbplatser och appar

Om du försöker hitta en definition av dämpade färger kommer du att upptäcka att det bästa svaret på frågan ”Vad är dämpade färger?” ligger i det faktum att dessa färger representerar det moderna, effektivitet och progressivitet.

De förmedlar till betraktaren att det ämne de tittar på är relevant och inte föråldrat. Till exempel kan du se dämpade färger i Drakes video om ”Hotline Bling”.

FireShot-Capture-1778-Rot Muted Colors: Definition och hur man använder dem på webbplatser och i appar

Dessa färger och dämpade pastellfärger var mycket avsiktliga, och de talar till den moderna kulturen och massorna. De betecknar också något av det aktuella ögonblicket. De är mycket lättare att titta på än hårda, skarpa färger och är också mycket konceptuellt moderiktiga.

FireShot-Capture-1780-Vic Dämpade färger: Definition och hur man använder dem på webbplatser och appar

Anvisning

Nuförtiden bör UX-designers veta att deras färgval faktiskt är deras designval, och att färg kan indikera mycket, precis som flöde, innehåll, användbarhet och funktion.

Att välja mellan en livlig grön färg eller dämpade gröna toner kan göra skillnaden mellan att användaren stannar kvar på webbplatsen och att han eller hon lämnar den direkt. Precis som ett klumpigt användargränssnitt kan verka lite analogt kan de ljusa, livfulla färgerna se ut som en explosion från det förflutna.

Dämpade färger ser ut som de gör på grund av:

  1. Lägre värde
  2. Lägre mättnad
  3. Blandning med intilliggande färger
  4. Kombination av något av ovanstående

Det finns varianter av den platta färgpaletten som du har sett tusentals gånger, och ofta passar de helt enkelt inte ihop med den designestetik du strävar efter. Även när allt annat tilltalar det.

Det är här ett dämpat färgalternativ kan göra underverk, för när du använder det med en platt estetik är det ett klassiskt, polerat utseende som är tillräckligt annorlunda för att det ska sticka ut från alla andra platta projekt.

animal-800-x-600-large-1 Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

animal-800-x-600-large-1 Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Men vad är en dämpad färgpalett?

För den här konversationen är det varje nyans som är starkt mättad och som man lägger till en ton, nyans eller skugga för att göra den dämpad och mindre ljus. Du får ofta en mjukare, lugnare färg som resultat som är lättare att arbeta med och som passar in i den övergripande designen.

FireShot-Capture-1784-AMA Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

”Färg” är faktiskt en mycket oprecis term som vi använder dagligen. Den består av tre huvudkomponenter, nämligen färgton, mättnad och värde.

Om du har en ballong där ekvatorn är nyansen på 360 grader, den vertikala axeln är värdet och den horisontella är mättnaden, kan färgerna visualiseras på den inre volymen.

FireShot-Capture-1785-Des dämpade färgerna: Definition och hur man använder dem på webbplatser och i appar

Det finns några andra begrepp som kan hjälpa till med den här frågan, till exempel ”shading” och ”tinting”. Att till exempel blanda vilken färg som helst med svart kallas ”shading” och resulterar i en lite mer dämpad färg.

Och om man lägger till vitt till en färg kallas det för ”tinting” och resulterar i en ljusare färg. Alla färger kan dock inte bli ljusa eller mörka, som till exempel gult. Om man gör den mörkare blir den brun.

Toningar i dämpade färger

FireShot-Capture-1783-Tim Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Om man lägger till vitt till en färg, eller tonar, får man en färg som är betydligt ljusare än originalet, och brukar kallas pastellfärg. De kan vara allt från nästan vita till lite ljusare än den fullt mättade färgen.

FireShot-Capture-1786-Kve Mutade färger: Definition och hur man använder dem på webbplatser och i appar

De känns lättare, mjukare och ger en mer lugnande estetik jämfört med de djärvare, ljusare alternativen.

De är mycket populära med illustrationer och gör också underverk på foton. De faller bort från huvudestetiken och de används oftast när du har en annan fokuspunkt i motsats till huvudestetiken.

Nyanser i dämpade färger

FireShot-Capture-1787-Céd Muted Colors: Definition och hur man använder dem på webbplatser och i appar

Shades, å andra sidan, får färgen att verka tyngre för ögat och sträcker sig från en nästan svart färg till en aning mörkare än den ursprungliga färgen. De fungerar bra i en mängd olika miljöer, särskilt när de används med mindre svart.

story-app-exploration-large Dämpade färger: Definition och hur man använder dem på webbplatser och appar

Det finns projekt som är riktigt mörka och har mycket svart som kommer med läsbarhetsproblem om du inte utför dem exceptionellt bra. Folk antar ofta felaktigt att nyanser måste se svarta ut, men när du utvecklar en av de traditionella färgerna för plattdesignscheman är detta inte fallet.

Toner i dämpade färger

FireShot-Capture-1782-Wha Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Kombinera svart och vitt med en färg för att få den att verka mjukare ger dig toner. De flesta färger görs faktiskt med hjälp av toner, eftersom de är komplexa färger med ett nästan universellt tilltal.

Detta beror på att de hämtar från några olika delar av färgspektrumet, och det är därför som toner är konstnärers och designers förstahandsval för de flesta av sina projekt.

unsplash-app-exploration-la Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

unsplash-app-exploration-la Dämpade färger: Definition och hur man använder dem på webbplatser och i appar

Sluttande tankar om dämpade färger

Oavsett om du vill bryta dig loss från traditionella färger i platt design eller inte, är det inte det enda valet att välja en av färgteknikerna ovan. Du kan kombinera nyanser, toningar och toner för att skapa något som är annorlunda och absolut engagerande.

Lärdomen med dessa enkla studier är att du inte kan fastna i att behöva använda en trend ”enligt boken”. Använd en annan typ av teknik för att skapa din egen trend. Färgpaletten och att ändra den kan vara underbart, och du kan fortfarande få en platt design.

Om du gillade den här artikeln om dämpade färger bör du kolla in dessa också:

  • Fotografi Webbplats: Design, idéer, hur man skapar en
  • Sportwebbplatser Design: Tips, inspiration och bästa praxis
  • Restaurangwebbplatser: Design: Tips, inspiration och bästa praxis

Obegränsade nedladdningar: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Lämna ett svar

Din e-postadress kommer inte publiceras.