What is dark mode ui design? Should you use it for your site? The ‘dark mode vs light mode ‘competition is ongoing. In this video, we’ll tell you about the origins of the dark mode ui pattern, figure out why dark mode is much better for your eyes and if it’s true. And lastly, offer you awesome examples of sites where dark style works perfectly well. Looking for a ready-made dark style for your website? Check out 25 Dark WordPress Themes 2020 https://www.templatemonster.com/blog/dark-wordpress-themes/?utm_source=youtube&utm_medium=social
Timecodes:
00:06 – The origins of the dark mode UI pattern
00:33 – Why do we like dark mode a lot?
00:50 – What are the cons of utilizing dark mode?
01:39 – When does dark mode UI design work well?
01:08 – Fine examples of dark mode UI style usage
01:52 – When is using dark mode UI design a bad concept?
02:27 – How to make dark mode work for your website?
Contrast Tools referenced in the video:
Contrast – https://usecontrast.com/
Accessible Brand Colors – https://abc.useallfive.com/
Stark – https://www.getstark.co/
Google Material Design Guidelines – https://material.io/design
Credits:
shift push landing by MDS in Shift Nudge
https://dribbble.com/shots/8562259-shift-nudge-landing
Video Evaluation Screen by Bipin Balan for Stead
https://dribbble.com/shots/9895839-Video-Review-Screen
Admin Control panel light vs night mode by Sourabh Barua in Interaction
https://dribbble.com/shots/6470322
Dashboard Projects 04 by GUOHAO.W for New Beee
https://dribbble.com/shots/3585753-Dashboard-Projects-04
Financial App– Neumorphic Study by Sandro Tavartkiladze
https://dribbble.com/shots/9837741-Financial-App-Neumorphic-Study
Shift Dashboard – Dark Mode by Sergey Zolotnikov for Sigma in POS application
https://dribbble.com/shots/6437017-Shift-Dashboard-Dark-Mode
Facebook Messenger Redesign by Alex Banaga
https://dribbble.com/shots/8275108-Facebook-Messenger-Redesign
Music Player Development Animation (Dark Mode) by ALEX BENDER for GRAVITY
https://dribbble.com/shots/5983452-Music-Player-Progress-Animation-Dark-Mode
Daily UI” Super Dark Mode” by Giulio Cuscito
https://dribbble.com/shots/5978511-Daily-UI-Super-Dark-Mode
Light/ dark toggle switch – InVision Studio by Matthieu Souteyrand ▵
https://dribbble.com/shots/5846239-Light-dark-toggle-switch-InVision-Studio
~ ~ ~ ~.
References:.
https://uxmisfit.com/2019/08/20/ui-design-in-practice-dark-mode/.
https://www.toptal.com/designers/ui/dark-ui.
https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
https://www.fastcompany.com/90421232/dark-mode-is-everywhere-but-is-it-really-better.
https://www.netflix.com/.
https://www.apple.com/tv/.
https://store.steampowered.com/.
https://medium.com/@di_18234/what-is-dark-mode-and-why-is-it-a-web-design-trend-in-2020-c638b6f22e17.
If you liked this video, offer it a thumbs up!
Sound off in the comments below if you like/use dark mode style!
#TemplateMonster #DarkMode #WebDesign.
~ ~ ~ ~.
Subscribe to our channel to find out more about web design: https://www.youtube.com/user/TemplateMonsterCo/.
Follow us on social media:.
Facebook https://www.facebook.com/TemplateMonster/.
Twitter https://twitter.com/templatemonster.
Instagram https://www.instagram.com/template_monster/.
Pinterest https://www.pinterest.com/templatemonster/.
Dribble https://dribbble.com/TemplateMonster/.
in LinkedIn https://www.linkedin.com/company/templatemonster/.
Source