El disseny de color fosc es refereix a un estil i enfocament per crear un disseny visual que es basa en l'ús d'esquemes de colors profunds i rics, generalment amb un predomini de tons foscos. Aquest estil de disseny s'ha popularitzat en els últims anys i es pot utilitzar en una varietat de camps, com ara disseny web, disseny gràfic, disseny d'interiors i altres.
Atenua les llums, relaxa els ulls i estalvia energia. El mode fosc és un dels més populars tendències de disseny, i marques de classe mundial com WhatsApp, Instagram, Google, Facebook i Apple ja s'han pujat al tren de disseny en mode fosc.
Fem una ullada a què estan fent aquestes principals marques i com podeu afegir una interfície d'usuari en mode fosc als vostres projectes. Aprendràs sobre pros i contres El mode fosc i les pràctiques bàsiques de desenvolupament del mode fosc per garantir que els dissenys del vostre lloc web i de les vostres aplicacions es vegin i funcionin perfectament.
Què és el mode fosc? Disseny en colors foscos
El mode fosc és una interfície d'usuari (UI) amb poca llum que utilitza un color de fons fosc com a color principal color - generalment negre o to de gris. Això és tot el contrari de la interfície d'usuari blanca estàndard que els dissenyadors han utilitzat durant dècades. Com a resposta a l'augment del temps de pantalla, els desenvolupadors han descobert que les interfícies de tema fosc ajuden a reduir la fatiga visual, especialment en condicions de poca llum o de nit. Menys fatiga ocular significava menys mals de cap i una millor experiència laboral.
Interfície d'usuari del mode fosc d'Instagram
WhatsApp a la interfície d'usuari en mode fosc d'escriptori mitjançant What's App
Interfície d'usuari de Google Fit en mode fosc
Però el mode fosc no és realment cap novetat.
Elaboració de cartells. 5 regles
Recordeu el codi informàtic verd que plovia sobre un fons negre a The Matrix? Aquest va ser un cop d'ull al mode fosc original: els monitors monocroms de la vella escola dels primers ordinadors.
Els primers ordinadors domèstics amb text verd en negre eren el mode fosc OG.
Aquest aspecte fosc clàssic va passar de moda als anys 80 a favor del text negre sobre fons blanc, simulant tinta sobre paper. Disseny en colors foscos
Què és la publicitat de vídeo? Definició, tipus i tendències
Aquesta va ser la norma durant gairebé tres dècades fins que el mode fosc va tornar a Windows Phone 7 el 2010. Després que Google confirmés que el mode fosc estalvia bateria, van afegir la funció al seu sistema operatiu Android el 2018. Un any més tard, Apple va seguir amb el mode fosc a iOS i iPadOS.
Mode fosc a iOS 13
Avantatges d'utilitzar el mode fosc. Disseny en colors foscos
El mode fosc no només és més fàcil per als ulls (si es fa bé), sinó que també estalvia la durada de la bateria i fins i tot pot ser més saludable. Vegem els avantatges pràctics del mode fosc sobre el mode clar.
Redueix la fatiga ocular
No hauries de sentir els teus ulls. Però qualsevol que analitzi les dades de la pantalla durant molt de temps sap que després d'un temps comences a fer-ho. La síndrome de visió per ordinador (CVS) inclou dolor ocular, visió borrosa, visió doble, mal de cap, mal de coll/esquena i molt més. Quan es tracta de gràfics i gràfics, el mode fosc pot ajudar literalment a reduir el dolor.
Aquest logotip verd va bé amb aquest disseny d'aplicació de tema fosc.
Augmenta la visibilitat amb poca llum
Si estàs dormint i algú encén una llum brillant, tindràs mal de cap. El mateix principi s'aplica a les persones que treballen davant de la pantalla d'un ordinador a última hora de la nit o a primera hora del matí. El mode fosc redueix aquest resplendor i facilita la visualització del contingut en condicions de poca llum.
Estalvia energia de la bateria
Alguns aparells digitals amb pantalles OLED poden apagar els píxels negres quan no s'utilitzen. El mode fosc utilitza un nombre més gran de píxels negres, cosa que fa que el dispositiu consumeixi menys energia.
Dóna un impuls emocional
Molts usuaris d'interfície d'usuari en mode fosc el trien per motius energètics i de salut més que per motius estètics. El mode fosc els recorda que estan fent alguna cosa més saludable, cosa que els dóna una bona sensació, com la que obteniu quan carregueu el vostre material reutilitzable. bossa de la compra o una ampolla d'aigua.
Impedeix ADD. Disseny en colors foscos
Bé... una mica. La llum blanca i els colors tendeixen a distreure la vostra atenció, cosa que dificulta la realització d'una tasca. Una interfície d'usuari en mode fosc pot millorar el focus dirigint la vostra concentració a les àrees de contingut de la vostra interfície, permetent que aquest contingut aparegui i que el fons s'esvaeixi.
Contres d'utilitzar el mode fosc
Com tot, el mode fosc té els seus inconvenients. Fem una ullada a les raons per les quals un tema fosc pot ser un desavantatge per als vostres propòsits.
Pot reduir la connexió emocional. Disseny en colors foscos
brillant els colors poden provocar emocions vives. Si això és el que busquen els vostres espectadors, aleshores enfosquir els colors els pot crear una barrera mental. Els costarà més establir una connexió emocional amb un tema fosc. Si la vostra marca és de naturalesa motivadora, inspiradora o espiritual, la interfície d'usuari en mode fosc pot ser una aposta. Tot i que els colors brillants poden evocar emocions fortes, el contrari pot ser cert. Aleshores, qui és el teu públic? No els cremeu si busquen un ascensor.
Comprimeix l'espai
Les habitacions amb parets fosques poden sentir claustrofòbia. En un dispositiu, el mode fosc pot funcionar de la mateixa manera. Si esteu intentant crear una sensació d'espai, una interfície fosca pot fer que l'espai sembli més petit.
Els colors amb baix contrast poden ser difícils de llegir. Disseny en colors foscos
Si no entens correctament els colors i els contrastos quan desenvolupament de llocs web o aplicacions amb un tema fosc, això pot dificultar la lectura del text, així que tingueu-ho en compte quan dissenyeu el vostre correu electrònic, aplicació o lloc web en mode fosc.
Com utilitzar el mode fosc en el disseny
El disseny del mode fosc pot funcionar a qualsevol lloc. Des d'aplicacions mòbils fins a rellotges intel·ligents i interfícies de televisió, aquesta tendència de disseny pot impulsar la vostra marca cap endavant. Fes-ho bé i el mode fosc pot funcionar com els gangbusters. Fes-ho malament i el teu disseny podria desactivar els usuaris immediatament. Aquests són alguns consells bàsics per dissenyar un lloc web fosc o una interfície d'aplicació:
Quan utilitzar el mode fosc. Disseny en colors foscos
Trieu els colors de la vostra marca
Quan la paleta de colors existent marca ja compatible amb el mode fosc, els déus del mode fosc et somriuen.
Disseny de l'aplicació en mode fosc
Penseu-vos dues vegades a la foscor si creieu que necessiteu canviar la vostra marca perquè s'adapti a l'estètica. De la mateixa manera, si la vostra marca necessita utilitzar una àmplia gamma de colors, considereu una interfície més lleugera. L'espectre complet de color és difícil de llegir sobre un fons fosc.
Destaca el teu sector. Disseny en colors foscos
La interfície d'usuari en mode fosc també és útil per millorar indústries específiques. Per exemple, les marques centrades en la vida nocturna i l'entreteniment són ideals per al mode fosc perquè el seu contingut d'alta energia sovint es combina amb fons foscos a la vida real.
Anar minimalista
Si l'estètica del vostre disseny ja és minimalista amb contingut limitat, el vostre entorn és adequat per al mode fosc. En una situació en què el text és el contingut principal, una interfície fosca pot dificultar la lectura. Normalment, el mode fosc augmenta el desordre visual, fent que una pantalla desordenada sigui encara més caòtica.
Evocar emocions
Intenteu provocar una resposta emocional específica? T'agrada el misteri o un petit drama? Com que la poca visibilitat crea curiositat i augmenta la tensió emocional, el mode fosc pot ser l'eina perfecta per a la vostra marca.
Disseny web fosc
Símbol d'estat. Disseny en colors foscos
Si voleu crear una sensació d'estat, la interfície d'usuari en mode fosc pot ser una eina eficaç. Els colors més foscos evoquen emocions associades amb el luxe i la riquesa. Si voleu cridar l'atenció sobre el bon treball, considereu una interfície d'usuari en mode fosc.
Disseny web elegant i d'alta qualitat amb un tema fosc
Bones pràctiques per al disseny en mode fosc
Hi ha certs processos que han de funcionar correctament quan es crea una interfície d'usuari en mode fosc. Després de tot, voleu que el vostre producte sigui fantàstic, oi? Marquem totes les caselles de la nostra llista de pràctiques recomanades en mode fosc:
1. No et quedis massa fosc. Disseny en colors foscos
Els editors de llibres no utilitzen paper blanc pur perquè el contrast amb la tinta negra és massa dur. Això fa que entrebeix els ulls i pot causar mals de cap. Passa el mateix amb els dispositius digitals. Allunyeu-vos del negre pur. És difícil mirar una pantalla d'alt contrast. Els bons colors en mode fosc són tons de gris combinats amb colors desaturats.
Disseny d'aplicacions fosques
2. Tenir el contrast adequat
El fons en mode fosc ha de ser prou fosc per mostrar text blanc. Un suggeriment de Google Material Design és utilitzar un text al nivell de contrast de fons d'almenys 15,8:1.
3. Desaturar els colors. Disseny en colors foscos
Allunyeu-vos dels colors totalment saturats sobre un fons fosc. En superfícies fosques, les ombres sovint semblen "vibrar". En comptes d'això, utilitzeu colors desaturats, com ara pastels i colors apagats, matisos amb grisos i blancs afegits.
A més, considereu canviar la paleta de colors de la vostra marca. El color blau de la vostra empresa pot llegir-se de manera diferent en negre que en blanc. Els colors en mode fosc sovint s'han d'ajustar per produir la mateixa resposta que en mode clar.
4. Utilitzeu els colors adequats "activat"
Quin color? El que apareix a sobre d'elements i superfícies clau. Els colors "activats" s'utilitzen normalment per a les lletres. El color predeterminat de la interfície d'usuari en mode fosc és el blanc pur (#FFFFFF). No utilitzeu això. #FFFFFF sembla vibrar quan es veu sobre un fons fosc. Trieu un color gris clar.
5. No només voltes. Disseny en colors foscos
Si canvieu al mode fosc des del mode estàndard, és probable que hi hagi indicis visuals valuosos al tema original. No només invertiu els colors per obtenir un tema fosc. És possible que estigueu convertint colors que tenen un propòsit psicològic en colors apagats sense sentit. Trieu el color conscientment.
6. Submergeix-te més a fons
Com més alta sigui la capa, més lleugera hauria de ser. Això crearà jerarquia visual en mode fosc, que va des dels elements més utilitzats a la pantalla fins als menys utilitzats.
Els colors més clars a la part superior creen una jerarquia visual
7. Experimenta i ofereix llibertat. Disseny en colors foscos
Proveu les versions fosques i clares del vostre disseny. Experimenteu amb cada estil i feu canvis en conseqüència basant-vos en els comentaris dels usuaris. Al cap i a la fi, les preferències de la gent poden ser imprevisibles, així que no carregueu els vostres usuaris. Deixeu-los canviar la seva pantalla del mode clar al mode fosc. Això dóna als usuaris control sobre la seva experiència i els fa sentir més personalitzats.
Deixa un comentari