Mørk fargedesign refererer til en stil og tilnærming til å skape et visuelt design som er avhengig av bruk av dype, rike fargevalg, vanligvis med en overvekt av mørke nyanser. Denne designstilen har blitt populær de siste årene og kan brukes på en rekke felt, inkludert webdesign, grafisk design, interiørdesign og andre.

Demp lysene, slapp av i øynene og spar energi. Mørk modus er en av de mest populære designtrender, og merkevarer i verdensklasse som WhatsApp, Instagram, Google, Facebook og Apple har allerede gått om bord på designtoget i mørk modus.

La oss ta en titt på hva disse toppmerkene gjør og hvordan du kan legge til et mørkt modus-grensesnitt til dine egne prosjekter. Du vil lære om fordeler og ulemper beste fremgangsmåter for utvikling av mørk modus og grunnleggende mørk modus for å sikre at nettstedet og appdesignene dine ser og fungerer perfekt.

Trykt markedsføringsmateriell

Hva er mørk modus? Design i mørke farger

Mørk modus er et brukergrensesnitt med lite lys (UI) som bruker en mørk bakgrunnsfarge som hovedfarge farge - vanligvis svart eller gråtone. Dette er det motsatte av det standard hvite brukergrensesnittet som designere har brukt i flere tiår. Som svar på vår økte skjermtid har utviklere funnet ut at mørke temagrensesnitt bidrar til å redusere belastningen på øynene, spesielt under dårlige lysforhold eller om natten. Mindre belastning på øynene betydde mindre hodepine og bedre arbeidsopplevelse.

Instagram-appdesign i mørk modus Design i mørke farger

Instagram Dark Mode UI

 

WhatsApp på skrivebordsapplikasjonsdesign i mørk modus Design i mørke farger

WhatsApp i skrivebords mørk modus UI via What's App

Google Fit mørk modus-appdesign

Google Fit mørk modus brukergrensesnitt

 

Men mørk modus er egentlig ikke noe nytt.

Plakatutvikling. 5 regler

Husker du den grønne datakoden som regner ned på en svart bakgrunn i The Matrix? Dette var et nikk til den originale mørke modusen: de gamle monokrome skjermene på tidlige datamaskiner.

Tidlig hjemmedatamaskin med grønn tekst på svart

Tidlige hjemmedatamaskiner med grønn tekst på svart var OG mørk modus.

 

Denne klassiske mørke looken gikk ut av stilen på 80-tallet til fordel for svart tekst på hvit bakgrunn, som simulerer blekk på papir. Design i mørke farger

Hva er videoannonsering? Definisjon, typer og trender

Dette var normen i nesten tre tiår til mørk modus kom tilbake i Windows Phone 7 i 2010. Etter at Google bekreftet at mørk modus sparer batteri, la de funksjonen til Android OS i 2018. Et år senere fulgte Apple med mørk modus på iOS og iPadOS.

Dark Mode og Light Mode i iOS 13 App Design

Mørk modus i iOS 13

Fordeler med å bruke mørk modus. Design i mørke farger

Mørk modus er ikke bare lettere for øynene (hvis det gjøres riktig), men det sparer også batterilevetid og kan til og med være sunnere. La oss se på de praktiske fordelene med mørk modus fremfor lys modus.

Reduserer belastningen på øynene

Du skal ikke føle øynene dine. Men alle som analyserer skjermdata over lengre tid vet at etter en stund begynner man å gjøre dette. Computer Vision Syndrome (CVS) inkluderer øyesmerter, tåkesyn, dobbeltsyn, hodepine, nakke/ryggsmerter og mer. Når det gjelder diagrammer og grafer, kan mørk modus bokstavelig talt bidra til å redusere smerten.

Applikasjonsdesign i mørk modus Design i mørke farger

Denne grønne logoen passer godt med denne appdesignen med mørkt tema.

 

Øker synligheten i lite lys

Hvis du sover og noen tenner et sterkt lys, vil du få hodepine. Det samme prinsippet gjelder for personer som jobber foran en dataskjerm sent på kvelden eller tidlig om morgenen. Mørk modus reduserer dette gjenskinnet og gjør det lettere å se innhold i dårlige lysforhold.

Sparer batteristrøm

Noen digitale dingser med OLED-skjermer kan slå av svarte piksler når de ikke er i bruk. Mørk modus bruker et økt antall svarte piksler, noe som fører til at enheten bruker mindre strøm.

Gir et følelsesmessig løft

Mange brukere av mørk modus bruker det av energi- og helsemessige årsaker i stedet for estetiske årsaker. Mørk modus minner dem om at de gjør noe sunnere, noe som gir dem en god følelse – som den du får når du laster opp gjenbruksenheten handlepose eller en flaske vann.

Forhindrer ADD. Design i mørke farger

Vel... liksom. Hvitt lys og farger har en tendens til å distrahere oppmerksomheten din, noe som gjør det vanskelig å fullføre en oppgave. Et brukergrensesnitt i mørk modus kan forbedre fokuset ved å rette konsentrasjonen mot innholdsområdene i grensesnittet, slik at innholdet kan komme inn og bakgrunnen forsvinne.

Ulemper med å bruke mørk modus

Som alt har mørk modus sine ulemper. La oss ta en titt på årsakene til at et mørkt tema kan være en ulempe for dine formål.

Kan redusere følelsesmessig tilknytning. Design i mørke farger

Bright farger kan fremkalle livlige følelser. Hvis det er dette seerne ser etter, kan mørkere fargene skape en mental barriere for dem. De vil ha vanskeligere for å få en følelsesmessig forbindelse med et mørkt tema. Hvis merkevaren din er motiverende, inspirerende eller åndelig, kan brukergrensesnittet i mørk modus være et gamble. Mens lyse farger kan fremkalle sterke følelser, kan det motsatte være sant. Så hvem er publikummet ditt? Ikke brenn dem hvis de leter etter en heis.

Komprimerer plass

Rom med mørke vegger kan føles klaustrofobiske. På en enhet kan mørk modus fungere på samme måte. Hvis du prøver å skape en følelse av plass, kan et mørkt grensesnitt få plassen til å virke mindre.

Farger med lav kontrast kan være vanskelig å lese. Design i mørke farger

Hvis du ikke forstår farger og kontraster riktig når utvikling av nettsider eller apper med et mørkt tema, kan dette gjøre tekst vanskelig å lese, så husk dette når du designer e-post, app eller nettside i mørk modus.

Hvordan bruke mørk modus i design

Mørk modusdesign kan fungere hvor som helst. Fra mobilapper til smartklokker og TV-grensesnitt, denne designtrenden kan drive merkevaren din fremover. Få det riktig og mørk modus kan fungere som gangbustere. Gjør det feil, og designet kan slå av brukere umiddelbart. Her er noen grunnleggende tips når du designer et mørkt nettsted eller app-grensesnitt:

Når du skal bruke mørk modus. Design i mørke farger

Velg dine merkefarger

Når den eksisterende fargepaletten merkevare allerede kompatibel med mørk modus, smiler mørkemodusgudene til deg.

Appdesign i mørk modus

Appdesign i mørk modus

 

Tenk to ganger på å gå mørkt hvis du føler at du må endre merkevaren din for å passe til estetikken. På samme måte, hvis merkevaren din trenger å bruke et bredt spekter av farger, bør du vurdere et lettere grensesnitt. Fullfargespekteret er vanskelig å lese mot en mørk bakgrunn.

Fremhev din bransje. Design i mørke farger

Mørkmodus-grensesnittet er også nyttig for å forbedre spesifikke bransjer. Merker som fokuserer på natteliv og underholdning er for eksempel ideelle for mørk modus fordi deres høyenergiinnhold ofte er sammenkoblet med mørk bakgrunn i det virkelige liv.

Gå minimalistisk

Hvis designestetikken din allerede er minimalistisk med begrenset innhold, er miljøet ditt egnet for mørk modus. I en situasjon der tekst er hovedinnholdet, kan et mørkt grensesnitt gjøre det vanskelig å lese. Vanligvis øker mørk modus det visuelle rotet, noe som gjør en rotete skjerm enda mer kaotisk.

Fremkalle følelser

Prøver du å fremkalle en spesifikk følelsesmessig respons? Som mystikk eller litt drama? Siden lav synlighet skaper nysgjerrighet og øker følelsesmessig spenning, kan mørk modus være det perfekte verktøyet for merkevaren din.

mørkt webdesign tema Design i mørke farger

Mørk webdesign

 

Statussymbol. Design i mørke farger

Hvis du vil skape en følelse av status, kan brukergrensesnittet i mørk modus være et effektivt verktøy. Mørkere farger fremkaller følelser knyttet til luksus og rikdom. Hvis du vil trekke oppmerksomheten til det fine arbeidet, bør du vurdere et brukergrensesnitt i mørk modus.

Mørkt tema Nettsteddesign for et luksuriøst klokkemerke

Elegant nettsteddesign av høy kvalitet med mørkt tema

 

Beste praksis for mørk modusdesign

Det er visse prosesser som må fungere riktig når du oppretter et brukergrensesnitt i mørk modus. Tross alt vil du at produktet ditt skal være fantastisk, ikke sant? La oss merke av alle boksene på vår sjekkliste for beste fremgangsmåter for mørk modus:

1. Ikke gå for mørkt. Design i mørke farger

Bokforlag bruker ikke rent hvitt papir fordi kontrasten med svart blekk er for hard. Dette får deg til å myse og kan forårsake hodepine. Det er det samme med digitale enheter. Hold deg unna rent svart. Det er vanskelig å se på en skjerm med høy kontrast. Gode ​​mørk modus farger er nyanser av grått kombinert med desaturated farger.

Design i mørke farger Design av et mobilt digitalt magasin i Dark Mode-applikasjonen

Mørk appdesign

 

2. Ha riktig kontrast

Bakgrunnen i mørk modus må være mørk nok til å vise hvit tekst. Et forslag fra Google Material Design er å bruke et kontrastnivå mellom tekst og bakgrunn på minst 15,8:1.

3. Avmette fargene. Design i mørke farger

Hold deg unna fullt mettede farger på en mørk bakgrunn. På mørke overflater ser nyanser ofte ut til å "vibrere". Bruk heller umettede farger som pasteller og dempede farger – nyanser med tilsatt grått og hvitt.

Vurder i tillegg å endre merkevarens fargepalett. Bedriftens blåfarge kan leses annerledes på svart enn på hvitt. Fargene i mørk modus må ofte justeres for å gi samme respons som i lys modus.

4. Bruk de riktige fargene "på"

Hvilken farge? Den som vises på toppen av elementer og nøkkelflater. "På"-farger brukes vanligvis for bokstaver. Standard grensesnittfarge for mørk modus er ren hvit (#FFFFFF). Ikke bruk dette. #FFFFFF ser ut til å vibrere når den ses mot en mørk bakgrunn. Velg en lys grå farge.

5. Ikke bare snu. Design i mørke farger

Hvis du bytter til mørk modus fra standardmodus, er det sannsynligvis verdifulle visuelle signaler i det originale temaet. Ikke bare inverter fargene for å få et mørkt tema. Du gjør kanskje farger som har en psykologisk hensikt til meningsløse dempede farger. Velg farge bevisst.

6. Dykk dypere

Jo høyere laget er, jo lettere skal det være. Dette vil skape visuelt hierarki i mørk modus, som går fra de mest brukte elementene på skjermen til de minst brukte.

Visuelt hierarki av mørk modus

Lysere farger på toppen skaper visuelt hierarki

 

7. Opplev og tilby frihet. Design i mørke farger

Test både mørke og lyse versjoner av designet ditt. Eksperimenter med hver stil og gjør endringer deretter basert på tilbakemeldinger fra brukere. Tross alt kan folks preferanser være uforutsigbare, så ikke legg byrden på brukerne dine. La dem bytte skjermen fra lys modus til mørk modus. Dette gir brukerne kontroll over opplevelsen og får dem til å føle seg mer personlig.

 

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