Mörk färgdesign hänvisar till en stil och ett tillvägagångssätt för att skapa en visuell design som bygger på användningen av djupa, rika färgscheman, vanligtvis med en dominans av mörka nyanser. Denna designstil har blivit populär de senaste åren och kan användas inom en mängd olika områden, inklusive webbdesign, grafisk design, inredning och andra.

Dämpa ljuset, slappna av i ögonen och spara energi. Mörkt läge är ett av de mest populära designtrender, och världsklassmärken som WhatsApp, Instagram, Google, Facebook och Apple har redan gått ombord på designtåget för mörkt läge.

Låt oss ta en titt på vad dessa ledande varumärken gör och hur du kan lägga till ett mörkt läge UI till dina egna projekt. Du kommer att lära dig om för-och nackdelar Bästa metoder för utveckling av mörkt läge och grundläggande mörkt läge för att säkerställa att din webb- och appdesign ser ut och fungerar perfekt.

Tryckt marknadsföringsmaterial

Vad är mörkt läge? Design i mörka färger

Mörkt läge är ett användargränssnitt med svagt ljus (UI) som använder en mörk bakgrundsfärg som huvudfärg färg - vanligtvis svart eller nyans av grått. Detta är raka motsatsen till det vanliga vita användargränssnittet som designers har använt i årtionden. Som svar på vår ökade skärmtid har utvecklare funnit att mörka temagränssnitt hjälper till att minska ögonansträngningen, särskilt i svagt ljus eller på natten. Mindre ansträngda ögon innebar färre huvudvärk och en bättre arbetsupplevelse.

Instagram app design i mörkt läge Design i mörka färger

Instagram Dark Mode UI

 

WhatsApp på skrivbordsapplikationsdesign i mörkt läge Design i mörka färger

WhatsApp i mörkt skrivbordsläge UI via What's App

Appdesign för Google Fit mörkt läge

Användargränssnitt för Google Fit mörkt läge

 

Men mörkt läge är egentligen inget nytt.

Affischutveckling. 5 regler

Kommer du ihåg att den gröna datorkoden regnar ner på en svart bakgrund i The Matrix? Detta var en nick till det ursprungliga mörka läget: de gamla skolans monokroma monitorer från tidiga datorer.

Tidig hemdator med grön text på svart

Tidiga hemdatorer med grön text på svart var OG:s mörka läge.

 

Denna klassiska mörka look gick ur stil på 80-talet till förmån för svart text på en vit bakgrund, som simulerar bläck på papper. Design i mörka färger

Vad är videoreklam? Definition, typer och trender

Detta var normen i nästan tre decennier tills mörkt läge återvände i Windows Phone 7 2010. Efter att Google bekräftat att mörkt läge sparar batteri lade de till funktionen till deras Android OS 2018. Ett år senare följde Apple med mörkt läge på iOS och iPadOS.

Dark Mode och Light Mode i iOS 13 App Design

Mörkt läge i iOS 13

Fördelar med att använda mörkt läge. Design i mörka färger

Mörkt läge är inte bara enklare för ögonen (om det görs rätt), utan det sparar också batteritid och kan till och med vara hälsosammare. Låt oss titta på de praktiska fördelarna med mörkt läge framför ljust läge.

Minskar belastning på ögonen

Du ska inte känna dina ögon. Men alla som analyserar skärmdata under lång tid vet att man efter ett tag börjar göra detta. Computer Vision Syndrome (CVS) inkluderar ögonsmärta, dimsyn, dubbelseende, huvudvärk, nacke/ryggsmärtor med mera. När det kommer till diagram och grafer kan mörkt läge bokstavligen hjälpa till att minska smärtan.

Applikationsdesign i mörkt läge Design i mörka färger

Denna gröna logotyp passar bra med denna appdesign med mörkt tema.

 

Ökar synligheten i svagt ljus

Om du sover och någon tänder ett starkt ljus kommer du att få huvudvärk. Samma princip gäller för personer som arbetar framför en datorskärm sent på kvällen eller tidigt på morgonen. Mörkt läge minskar denna bländning och gör det lättare att se innehåll i svagt ljus.

Sparar batterikraft

Vissa digitala prylar med OLED-skärmar kan stänga av svarta pixlar när de inte används. Mörkt läge använder ett ökat antal svarta pixlar, vilket gör att enheten förbrukar mindre ström.

Ger en känslomässig boost

Många användare av mörkt läge UI väljer det av energi- och hälsoskäl snarare än estetiska skäl. Mörkt läge påminner dem om att de gör något hälsosammare, vilket ger dem en bra känsla – som den du får när du laddar upp din återanvändbara shoppingkasse eller en flaska vatten.

Förhindrar ADD. Design i mörka färger

Typ. Vitt ljus och färger tenderar att distrahera din uppmärksamhet, vilket gör det svårt att slutföra en uppgift. Ett gränssnitt för mörkt läge kan förbättra fokus genom att rikta din koncentration till innehållsområdena i ditt gränssnitt, så att innehållet kan dyka in och bakgrunden tona ut.

Nackdelar med att använda mörkt läge

Som allt annat har mörkt läge sina nackdelar. Låt oss ta en titt på anledningarna till varför ett mörkt tema kan vara en nackdel för dina syften.

Kan minska känslomässig anknytning. Design i mörka färger

ljust färger kan framkalla livliga känslor. Om det är detta dina tittare letar efter, kan mörkare färger skapa en mental barriär för dem. De kommer att ha svårare att skapa en känslomässig koppling till ett mörkt ämne. Om ditt varumärke är motiverande, inspirerande eller andligt till sin natur kan gränssnittet i mörkt läge vara en chansning. Medan ljusa färger kan framkalla starka känslor, kan det motsatta vara sant. Så vem är din publik? Bränn dem inte om de letar efter en hiss.

Komprimerar utrymme

Rum med mörka väggar kan kännas klaustrofobiska. På en enhet kan mörkt läge fungera på samma sätt. Om du försöker skapa en känsla av rymd kan ett mörkt gränssnitt få utrymmet att verka mindre.

Färger med låg kontrast kan vara svåra att läsa. Design i mörka färger

Om du inte förstår färger och kontraster rätt när webbutveckling eller appar med ett mörkt tema kan detta göra text svår att läsa, så tänk på detta när du designar din e-post, app eller webbplats i mörkt läge.

Hur man använder mörkt läge i design

Mörklägesdesign kan fungera var som helst. Från mobilappar till smartklockor och TV-gränssnitt, denna designtrend kan driva ditt varumärke framåt. Gör det rätt och mörkt läge kan fungera som gangbusters. Om du gör fel och din design kan stänga av användare omedelbart. Här är några grundläggande tips när du designar en mörk webbplats eller app-gränssnitt:

När ska man använda mörkt läge. Design i mörka färger

Välj dina märkesfärger

När den befintliga färgpalett varumärke redan kompatibel med mörkt läge, mörka lägesgudar ler mot dig.

Appdesign i mörkt läge

Appdesign i mörkt läge

 

Tänk två gånger på att gå mörkt om du känner att du behöver ändra ditt varumärke för att passa det estetiska. På samma sätt, om ditt varumärke behöver använda ett brett utbud av färger, överväg ett ljusare gränssnitt. Hela färgspektrat är svårt att läsa mot en mörk bakgrund.

Lyft fram din bransch. Design i mörka färger

Gränssnittet för mörkt läge är också användbart för att förbättra specifika branscher. Till exempel är varumärken som fokuserar på nattliv och underhållning idealiska för mörkt läge eftersom deras högenergiinnehåll ofta paras ihop med mörka bakgrunder i verkligheten.

Bli minimalistisk

Om din designestetik redan är minimalistisk med begränsat innehåll är din miljö lämplig för mörkt läge. I en situation där text är huvudinnehållet kan ett mörkt gränssnitt göra det svårt att läsa. Vanligtvis ökar mörkt läge den visuella röran, vilket gör en rörig skärm ännu mer kaotisk.

Framkalla känslor

Försöker du framkalla ett specifikt känslomässigt svar? Som mystik eller lite drama? Eftersom låg synlighet skapar nyfikenhet och ökar känslomässig spänning, kan mörkt läge vara det perfekta verktyget för ditt varumärke.

mörkt webbdesign tema Design i mörka färger

Mörk webbdesign

 

Status symbol. Design i mörka färger

Om du vill skapa en känsla av status kan gränssnittet för mörkt läge vara ett effektivt verktyg. Mörkare färger väcker känslor förknippade med lyx och rikedom. Om du vill uppmärksamma det fina arbetet, överväg ett mörkt läge UI.

Mörk tema Webbplatsdesign för ett lyxigt klockmärke

Elegant webbdesign av hög kvalitet med mörkt tema

 

Bästa metoder för design i mörkt läge

Det finns vissa processer som måste fungera korrekt när du skapar ett gränssnitt för mörkt läge. När allt kommer omkring vill du att din produkt ska vara fantastisk, eller hur? Låt oss markera alla rutor på vår checklista med bästa praxis för mörkt läge:

1. Gå inte för mörkt. Design i mörka färger

Bokförlagen använder inte rent vitt papper eftersom kontrasten med svart bläck är för hård. Detta får dig att kisa och kan orsaka huvudvärk. Det är samma sak med digitala enheter. Håll dig borta från rent svart. Det är svårt att titta på en skärm med hög kontrast. Bra mörka färger är nyanser av grått i kombination med omättade färger.

Design i mörka färger Design av en mobil digital tidning i Dark Mode-applikationen

Mörk appdesign

 

2. Ha rätt kontrast

Bakgrunden i mörkt läge måste vara tillräckligt mörk för att visa vit text. Ett förslag från Google Material Design är att använda en kontrastnivå mellan text och bakgrund på minst 15,8:1.

3. Avmätta färgerna. Design i mörka färger

Håll dig borta från helt mättade färger på en mörk bakgrund. På mörka ytor verkar nyanser ofta "vibrera". Använd istället omättade färger som pasteller och dämpade färger – nyanser med tillsatta grått och vitt.

Dessutom kan du överväga att ändra ditt varumärkes färgpalett. Ditt företags blå färg kan se annorlunda ut på svart än på vitt. Färgerna i mörkt läge måste ofta justeras för att ge samma respons som i ljust läge.

4. Använd rätt färger "på"

Vilken färg? Den som visas ovanpå element och nyckelytor. "På"-färger används vanligtvis för bokstäver. Standardfärgen för mörkt läges gränssnitt är rent vit (#FFFFFF). Använd inte detta. #FFFFFF verkar vibrera när den ses mot en mörk bakgrund. Välj en ljusgrå färg.

5. Vänd inte bara. Design i mörka färger

Om du byter till mörkt läge från standardläget finns det sannolikt värdefulla visuella signaler i det ursprungliga temat. Invertera inte bara färgerna för att få ett mörkt tema. Du kanske förvandlar färger som har ett psykologiskt syfte till meningslösa dämpade färger. Välj färg medvetet.

6. Dyk djupare

Ju högre lagret är, desto ljusare ska det vara. Detta kommer att skapa visuell hierarki i mörkt läge, som går från de mest använda elementen på din skärm till de minst använda.

Visuell hierarki av mörkt läge

Ljusare färger på toppen skapar visuell hierarki

 

7. Upplev och erbjuda frihet. Design i mörka färger

Testa både mörka och ljusa versioner av din design. Experimentera med varje stil och gör ändringar baserat på feedback från användare. När allt kommer omkring kan människors preferenser vara oförutsägbara, så lägg inte bördan på dina användare. Låt dem byta display från ljust läge till mörkt läge. Detta ger användarna kontroll över sin upplevelse och får dem att känna sig mer personliga.

 

Din assistent i företagsreklam och tryckeri "АЗБУКА«