Mørk farvedesign refererer til en stil og tilgang til at skabe et visuelt design, der er afhængig af brugen af ​​dybe, rige farveskemaer, normalt med en overvægt af mørke nuancer. Denne designstil er blevet populær i de senere år og kan bruges inden for en række forskellige områder, herunder webdesign, grafisk design, indretning og andre.

Dæmp lyset, slap af i øjnene og spar energi. Mørk tilstand er en af ​​de mest populære design trends, og verdensklasse mærker som WhatsApp, Instagram, Google, Facebook og Apple er allerede gået ombord på dark mode design-toget.

Lad os tage et kig på, hvad disse topmærker laver, og hvordan du kan tilføje en mørk mode-brugergrænseflade til dine egne projekter. Du vil lære om fordele og ulemper bedste praksis for mørk tilstand og grundlæggende mørk tilstandsudvikling for at sikre, at dit websted og din app-design ser ud og fungerer perfekt.

Trykt markedsføringsmateriale

Hvad er mørk tilstand? Design i mørke farver

Mørk tilstand er en brugergrænseflade med lavt lys (UI), der bruger en mørk baggrundsfarve som hovedfarve farve - normalt sort eller gråtone. Dette er det fuldstændige modsatte af den standard hvide brugergrænseflade, som designere har brugt i årtier. Som svar på vores øgede skærmtid har udviklere fundet ud af, at mørke temagrænseflader hjælper med at reducere øjenbelastningen, især i svagt lys eller om natten. Mindre anstrengte øjne betød færre hovedpine og en bedre arbejdsoplevelse.

Instagram app design i mørk tilstand Design i mørke farver

Instagram Dark Mode UI

 

WhatsApp på desktop-applikationsdesign i mørk tilstand Design i mørke farver

WhatsApp i desktop dark mode UI via What's App

Google Fit mørk tilstand app design

Google Fit mørk tilstand brugergrænseflade

 

Men mørk tilstand er ikke rigtig noget nyt.

Udvikling af plakater. 5 regler

Kan du huske, at den grønne computerkode regner ned på en sort baggrund i The Matrix? Dette var et nik til den oprindelige mørke tilstand: old-school monokrome skærme fra tidlige computere.

Tidlig hjemmecomputer med grøn tekst på sort

Tidlige hjemmecomputere med grøn tekst på sort var OG mørk tilstand.

 

Dette klassiske mørke look gik ud af stil i 80'erne til fordel for sort tekst på en hvid baggrund, der simulerede blæk på papir. Design i mørke farver

Hvad er videoannoncering? Definition, typer og tendenser

Dette var normen i næsten tre årtier, indtil mørk tilstand vendte tilbage i Windows Phone 7 i 2010. Efter at Google bekræftede, at mørk tilstand sparer batteri, tilføjede de funktionen til deres Android OS i 2018. Et år senere fulgte Apple med mørk tilstand på iOS og iPadOS.

Dark Mode og Light Mode i iOS 13 App Design

Mørk tilstand i iOS 13

Fordele ved at bruge mørk tilstand. Design i mørke farver

Mørk tilstand er ikke kun nemmere for øjnene (hvis det gøres rigtigt), men det sparer også batterilevetid og kan endda være sundere. Lad os se på de praktiske fordele ved mørk tilstand frem for lys tilstand.

Reducerer øjenbelastning

Du skal ikke mærke dine øjne. Men enhver, der analyserer skærmdata i lang tid, ved, at man efter et stykke tid begynder at gøre dette. Computer Vision Syndrome (CVS) omfatter øjensmerter, sløret syn, dobbeltsyn, hovedpine, nakke/rygsmerter og meget mere. Når det kommer til diagrammer og grafer, kan mørk tilstand bogstaveligt talt hjælpe med at reducere smerten.

Applikationsdesign i mørk tilstand Design i mørke farver

Dette grønne logo passer godt sammen med dette mørke tema-appdesign.

 

Øger synlighed i svagt lys

Hvis du sover, og nogen tænder et stærkt lys, vil du få hovedpine. Det samme princip gælder for folk, der arbejder foran en computerskærm sent om aftenen eller tidligt om morgenen. Mørk tilstand reducerer denne blænding og gør det nemmere at se indhold under dårlige lysforhold.

Sparer batteristrøm

Nogle digitale gadgets med OLED-skærme kan slå sorte pixels fra, når de ikke er i brug. Mørk tilstand bruger et øget antal sorte pixels, hvilket får enheden til at bruge mindre strøm.

Giver et følelsesmæssigt boost

Mange dark mode UI-brugere vælger det af energi- og sundhedsmæssige årsager snarere end æstetiske årsager. Mørk tilstand minder dem om, at de gør noget sundere, hvilket giver dem en god følelse – som den du får, når du indlæser din genanvendelige indkøbspose eller en flaske vand.

Forhindrer ADD. Design i mørke farver

Tja... sådan set. Hvidt lys og farver har en tendens til at distrahere din opmærksomhed, hvilket gør det vanskeligt at udføre en opgave. En brugergrænseflade i mørk tilstand kan øge fokus ved at dirigere din koncentration til indholdsområderne på din grænseflade, så indholdet kan poppe ind og baggrunden fade ud.

Ulemper ved at bruge mørk tilstand

Som alt andet har mørk tilstand sine ulemper. Lad os tage et kig på årsagerne til, at et mørkt tema kan være en ulempe for dine formål.

Kan reducere følelsesmæssig forbindelse. Design i mørke farver

Bright farver kan fremkalde livlige følelser. Hvis det er det, dine seere leder efter, så kan mørklægning af farverne skabe en mental barriere for dem. De vil have sværere ved at skabe en følelsesmæssig forbindelse med et mørkt emne. Hvis dit brand er motiverende, inspirerende eller spirituelt af natur, kan brugergrænsefladen i mørk tilstand være et gamble. Mens lyse farver kan fremkalde stærke følelser, kan det modsatte være sandt. Så hvem er dit publikum? Brænd dem ikke, hvis de leder efter en elevator.

Komprimerer plads

Værelser med mørke vægge kan føles klaustrofobiske. På en enhed kan mørk tilstand fungere på samme måde. Hvis du forsøger at skabe en følelse af rum, kan en mørk grænseflade få rummet til at virke mindre.

Farver med lav kontrast kan være svære at læse. Design i mørke farver

Hvis du ikke forstår farver og kontraster korrekt hvornår udvikling af hjemmeside eller apps med et mørkt tema, kan dette gøre tekst svær at læse, så husk dette, når du designer din e-mail, app eller hjemmeside i mørk tilstand.

Sådan bruger du mørk tilstand i design

Dark mode design kan fungere hvor som helst. Fra mobilapps til smartwatches og tv-grænseflader, denne designtrend kan drive dit brand fremad. Få det rigtigt, og mørk tilstand kan fungere som gangbusters. Hvis det går galt, kan dit design slå brugerne fra med det samme. Her er nogle grundlæggende tips, når du designer et mørkt websted eller en app-grænseflade:

Hvornår skal du bruge mørk tilstand. Design i mørke farver

Vælg dine mærkefarver

Når den eksisterende farvepalet brand allerede kompatibel med mørk tilstand, smiler guderne for mørk tilstand til dig.

Dark mode app design

Dark mode app design

 

Tænk to gange på at gå i mørke, hvis du føler, at du skal ændre dit branding, så det passer til æstetikken. Ligeledes, hvis dit brand skal bruge en bred vifte af farver, skal du overveje en lettere grænseflade. Det fulde farvespektrum er svært at læse på en mørk baggrund.

Fremhæv din branche. Design i mørke farver

Brugergrænsefladen i mørk tilstand er også nyttig til at forbedre specifikke industrier. For eksempel er mærker med fokus på natteliv og underholdning ideelle til mørk tilstand, fordi deres højenergiindhold ofte er parret med mørke baggrunde i det virkelige liv.

Gå minimalistisk

Hvis din designæstetik allerede er minimalistisk med begrænset indhold, er dit miljø velegnet til mørk tilstand. I en situation, hvor tekst er hovedindholdet, kan en mørk grænseflade gøre det svært at læse. Mørk tilstand øger typisk visuel rod, hvilket gør en rodet skærm endnu mere kaotisk.

Fremkalde følelser

Forsøger du at fremkalde en bestemt følelsesmæssig reaktion? Ligesom mystik eller lidt drama? Da lav synlighed skaber nysgerrighed og øger følelsesmæssig spænding, kan mørk tilstand være det perfekte værktøj til dit brand.

mørkt webdesign tema Design i mørke farver

Mørkt webdesign

 

Status symbol. Design i mørke farver

Hvis du vil skabe en følelse af status, kan brugergrænsefladen i mørk tilstand være et effektivt værktøj. Mørkere farver fremkalder følelser forbundet med luksus og rigdom. Hvis du vil henlede opmærksomheden på det fine arbejde, så overvej en mørk mode UI.

Mørkt tema Websitedesign til et luksusurmærke

Elegant webstedsdesign af høj kvalitet med et mørkt tema

 

Bedste praksis for mørk tilstandsdesign

Der er visse processer, der skal fungere korrekt, når du opretter en brugergrænseflade i mørk tilstand. Når alt kommer til alt, vil du have, at dit produkt skal være fantastisk, ikke? Lad os markere alle felterne på vores tjekliste for bedste praksis i mørk tilstand:

1. Gå ikke for mørkt. Design i mørke farver

Bogforlag bruger ikke rent hvidt papir, fordi kontrasten med sort blæk er for hård. Dette får dig til at skele og kan forårsage hovedpine. Det er det samme med digitale enheder. Hold dig væk fra ren sort. Det er svært at se på en skærm med høj kontrast. Gode ​​mørkefarver er gråtoner kombineret med umættede farver.

Design i mørke farver Design af et mobilt digitalt magasin i Dark Mode-applikationen

Mørkt app-design

 

2. Hav den rigtige kontrast

Baggrunden i mørk tilstand skal være mørk nok til at vise hvid tekst. Et forslag fra Google Material Design er at bruge et kontrastniveau mellem tekst og baggrund på mindst 15,8:1.

3. Afmæt farverne. Design i mørke farver

Hold dig væk fra fuldt mættede farver på en mørk baggrund. På mørke overflader ser nuancer ofte ud til at "vibrere". Brug i stedet umættede farver som pasteller og dæmpede farver – nuancer tilsat grå og hvide.

Overvej desuden at ændre dit brands farvepalet. Din virksomheds blå farve kan læses anderledes på sort end på hvid. Farverne i mørk tilstand skal ofte justeres for at give samme respons som i lys tilstand.

4. Brug de rigtige farver "på"

Hvilken farve? Den, der vises oven på elementer og nøgleoverflader. "Til"-farver bruges typisk til bogstaver. Standardfarven på brugergrænsefladen i mørk tilstand er ren hvid (#FFFFFF). Brug ikke dette. #FFFFFF ser ud til at vibrere, når den ses på en mørk baggrund. Vælg en lysegrå farve.

5. Lad være med bare at vende. Design i mørke farver

Hvis du skifter til mørk tilstand fra standardtilstand, er der sandsynligvis værdifulde visuelle signaler i det originale tema. Vend ikke bare farverne om for at få et mørkt tema. Du gør måske farver, der har et psykologisk formål, til meningsløse afdæmpede farver. Vælg farve bevidst.

6. Dyk dybere

Jo højere laget er, jo lettere skal det være. Dette vil skabe visuelt hierarki i mørk tilstand, som går fra de mest brugte elementer på din skærm til de mindst brugte.

Visuelt hierarki af mørk tilstand

Lysere farver på toppen skaber visuelt hierarki

 

7. Oplev og byd frihed. Design i mørke farver

Test både mørke og lyse versioner af dit design. Eksperimenter med hver stil og foretag ændringer i overensstemmelse hermed baseret på brugerfeedback. Når alt kommer til alt, kan folks præferencer være uforudsigelige, så lad være med at lægge byrden på dine brugere. Lad dem skifte deres skærm fra lys tilstand til mørk tilstand. Dette giver brugerne kontrol over deres oplevelse og får dem til at føle sig mere personlige.

 

Din assistent i erhvervsreklame og trykkeri "АЗБУКА«