Dark Mode UI Course 1

[@ridwanhoquesrihan8862]

U r a blessing for me , I understand the fundamentals of ui design , but still bought ur ui course 2 and what a course it is !! Loving every bit of it , this course definitely gonna level up my designs more. Hope u keep bringing more courses like this for ui design. May be 1 where you explain design system more.

[@yojanselcuevas9829]

30 more minutes for the video, Can’t wait to see the tips or tricks and rules

[@MalewiczHype]

And the winner of this weeks giveaway is Kimberly González ! Please reach out to me via Twitter (or email) to claim your free ebook 🤗

[@kimberlygonzalez8040]

😍😍😍

[@henrythomas7112]

Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

[@timonschroth]

Yes, I think it always makes a good impression on users if an app provides a light and dark mode.

[@invisibArtz]

Its a short video and straight to the point..I could write a book just by watching this short video..Thanks mate..

[@MalewiczHype]

That was the point - to be brief and precise so it’s easier to remember 😎

[@NareshBabu]

Love these tips keep ‘em coming and I’ve applied on couple of my designs. It looks amazing

[@MalewiczHype]

Glad they're helpful - that's the whole point to be able to apply them in your own work and see a better result. Happy to hear it worked! :)

[@YTN3rd]

These videos are great. Cant wait for more.

[@MalewiczHype]

More to come!

[@nikhilmwarrier7948]

Great video! I'd also like to throw in the fact that slightly bolder and greyer text looks better in dark mode.

[@MalewiczHype]

Good call!

[@mafruhfaruqi]

Awesome! I almost all the time wait for your video’s

[@MalewiczHype]

Well this one is already out there :)

[@PhotoshoppersStop]

This is video gave me wayyyyy more value than the course I purchased from my total income of a month, GOD BLESS YOU😇

[@MalewiczHype]

Wonderful! Glad it helped :)

[@EsterShiraBarak]

Great video! Thanks!

[@BenRangel]

Desaturation and blending highlight colors into the black background was great tips. I've known how default blue feels bad on a black background but never knew how to phase it properly as in "it's too saturated"

[@MalewiczHype]

Happy to help! :)

[@Bells_Lodge]

Dark mode has a better contrast for readability, it helps those of us who struggle with contrast. Black on white ends up being harder to read. Tint the white to any other shade, and readability goes up immensely, but not a lot of apps allow just to tint the white to say, sepia. So dark mode it is. This is just my experience with struggling with the harsh contrast of black text on white backgrounds, and the relief dark mode provides.

[@MalewiczHype]

I plan to cover accessibility in the next dark mode video - including yellow on black as well 😎 Here I wanted to start with an overview, but good point 🙌

[@alaasallam4456]

Great Video, I liked that you covered almost everything, hope you're doing more and more like this

[@MalewiczHype]

That's my main goal for the channel :)

[@khaldounal-nuaimi3594]

Please keep doing those, this is amazing!

[@MalewiczHype]

Glad you think so! :) I hope this series helps a lot of people :)

[@lebeeg]

Waow.. pocket and deep.. the insight is wise, the advice deep and multipurpose, definitely a must know/must have here. Thank you sir. I follow you not for very long, and I don't regret it. Kudos !!

[@MalewiczHype]

Glad you think so, if more people like it I’ll definitely do more in the series 🙌

[@abinashmohanty]

Great tips! Thanks for making such an amazing video @Michal 🤘

[@MalewiczHype]

Glad it was helpful! There's a part 2 to this as well :)

[@archonicon]

Love what you do. Bought your book months ago and these last couple of weeks, was responsible for work's dark mode version. While I was familiar with MDS colour theory, iOS was new to me. The eco system is more constrained as far as establishing base colors and the greys were concerned but, still I used this video to help me figure shit out. So thanks bruv. Keep going

[@MalewiczHype]

Glad to hear that :-)

[@WildDawid]

Ahhh, that's the video quality! Awesome job!

[@MalewiczHype]

Glad you think so! Took forever to create all the visuals, and there aren't even that many 🤣

[@madebysinatra]

You are a blessing to me. Thank you for the tips

[@MalewiczHype]

You are so welcome! Comments like these mean a lot to me with my insecure approach to making videos :)

[@bhargavipilankar2311]

Why his videos dont have millions of views...he deserves it!

[@MalewiczHype]

The channel is pretty young, but if you like the video you can share it further so more people can see :-)

[@obeyme8496]

It was rly usefull, thank you

[@MalewiczHype]

Glad it was helpful!

[@BOSprodz]

Great great stuff thanks

[@NanSnowOfficial]

Dark mode does save battery and it's very noticeable. Besides, many other youtubers have already made battery tests for dark vs light mode.

[@MalewiczHype]

It does on oled screens, but with a risk of too high contrast (that leads to eye fatigue) and the ghosting effect. So there’s tradeoffs, and an easier on the eyes dark mode has to be a bit brighter, so anywhere above #000000 there’s no extra battery savings. It’s convoluted 😅

[@papeseydou1510]

Oh God, amazing job right there, thanks!

[@MalewiczHype]

Glad you like it! More to come!

[@SkArifHossain]

Love this video, was confused whether to use dark mode UI, thank you Michal. And as for counting tokens, the answer is "8" :)

[@MalewiczHype]

Hope it helps!

[@SkArifHossain]

@@MalewiczHype thank you

[@OneAndOnlyMe]

It's also easier on the eyes late at night under the duvet cover.

[@MalewiczHype]

Makes sense - I will cover a bit more about brightness and accessibility in the next episode

[@OneAndOnlyMe]

@@MalewiczHype Cool. I build dashboard for Network Operations Centers, and I often get feedback that the night shifts prefer dark mode too.

[@souradeep8273]

Darkmode is needed for products that is meant(or is wanted to) to be used by an user on daily basis. I sometime like dark mode, and yes it is easy on eyes and doesn't excite me

[@farshadamirshoghi9323]

Amazing one

[@doctorbrad]

Good video, you got a new sub here

[@MalewiczHype]

Awesome, thank you!

[@abdoo3301]

Once again great video Michal 😻👍 yes, more such videos would help a lot.

[@MalewiczHype]

More to come :)

[@Aragubas]

Great Tips! I'll use them on my Tauri Apps, and I want them to react to user's color preference so I'll need adaptative color schemes x3

[@thedeziner]

We always need a dark mode, to improve accessibiiity.

[@helenchinweike8080]

This is so helpful.. thanks 😊

[@MalewiczHype]

Glad it was helpful! Working on the next episode already

[@dev.duccini]

When is a color considered saturated, above 200? How to add a hint of blue in the shade of gray?

[@MalewiczHype]

If Saturation (the S in HSL and HSB) is above 80 then it's too saturated (there are exceptions but the more senior you are the more you kind of get to know them - for beginners under 80 is good). Hint of blue means it's a blue with very low saturation, (5-20) which makes it "mostly gray"

[@ohmyumbrella]

dark mode saves me from eye pain. I'm currently working on my first project and I started with a light mode but because of eye pain I made it all dark. And I ended up making wireframes dark too. Not that I'm happy about limiting myself like that. Gotta do something about it. And instead of using white on black I chose a dark bluish gray for screen which looks a bit matte and the texts are the blue of the youtube's Join button.

[@jefferygilbert1878]

Good day, You talk about adding a hint of a brand's color to black, is there any took l that helps to mix colors together? Because I have no idea of how to mix colors together

[@darah3830]

I love this video thank you! Would you suggest -20% B on HSL or HSB?

[@MalewiczHype]

I think I used HSB in this, on L the number should be a bit different.

[@SzabatDesign]

Mój mentor :) Jak uczyć się to od najlepszych. Świetny materiał jak zawsze! Pozdrawiam

[@MalewiczHype]

Bardzo mi miło :) Motywujące!

[@victornunes9875]

Cool cool cool!

[@MalewiczHype]

Thank you :)

[@theloneranger1404]

if developers use the product, we need dark mode. Dark mode is like coffee for devs

[@MalewiczHype]

Our CTO actually often codes on a white background in VSC 😎

[@DarioFKV]

Woudn't be wrong if i have 2 different brand accent colors? (2 different blues for same app)

[@theloneranger1404]

How do you do this cool animations in your vids?

[@MalewiczHype]

I create a lot of images and then animate them right within Final Cut Pro, no fancy external software.

[@dumebinzedu]

How do you desaturate the colors please?

[@MalewiczHype]

Switch from HEX to something like HSB or HSL and the S stands for saturation - simply decrease the number :)

[@Brad_Smith_Media]

So good!

[@MalewiczHype]

😀

[@tammam8776]

I don't only ❤ your content but I also ❤ your soothing voice. 🤣🤣🤣

[@MalewiczHype]

Oh stop ;)

[@rosieway5811]

Yeah, thanks Michal for this awesome vid! Just got a new client project that is based on dark mode UI, how coincident !!! (that really shows how popular it is :D)

[@MalewiczHype]

That's awesome! You'll do great though :)

[@rosieway5811]

@@MalewiczHype aw thanks Michal

[@harenhallharfoot]

What can we trade in all these tokens for? 😂 helpful seeing this info from your book in video format, thank you!

[@MalewiczHype]

They were tradeable back then for some course discounts and one person winning a course for free, but I quit doing those anymore ;)

[@shiprasah6500]

Very helpful video 💚💙. I wanna know what you mean by reducing saturation by 20 to 30%. Did you add gray, white, or black to the main color or did you reduce the opacity of the color?

[@MalewiczHype]

In HSL or HSB color modes the S stands for saturation - so simply open the color picker, change the mode to one of those and decrease the number under S :-)

[@considercaption]

“When it comes to digital interfaces, we humans are pretty weird creatures.” Yeah cause we have them lol

[@magicmjk]

Dzięki Michał 🔥

[@MalewiczHype]

🔥

[@pjonesg]

How do you desaturate a color exactly?

[@MalewiczHype]

The S value is for saturation, so simply make that value smaller.

[@pjonesg]

@@MalewiczHype How do I do that in Figma?

[@ДмитрийМосковский-ч7ж]

Good tips

[@MalewiczHype]

Glad it was helpful!

[@dividendstream]

"to the next level"

[@letstalk3528]

some people on linked in jus copy pasting your work and not even giving credits to you man!! it really hurt me how good content creator are getting robbed by this type of people your student

[@MalewiczHype]

I know - big “creators” steal my stuff too. Impossible to fix people’s bad morality but you can write them a comment about it 🫡

[@letstalk3528]

@@MalewiczHype Sensei

[@mohammedshamil3976]

love this video +1

[@MalewiczHype]

love this comment +1 :)

[@kin7751]

haha I'm watching the video and holding my phone directly in front of my face 😅😅 nice to know what I look like now 🤣

[@MalewiczHype]

haha! That is rare though!

[@kimberlygonzalez8040]

8 tokens

[@MalewiczHype]

Congratulations, you won! :)

[@adirmugrabi]

So sad that I will be available exactly 1 hour too late😧

[@MalewiczHype]

It will be there the next day too :)

[@adirmugrabi]

@@MalewiczHype yes. unless youtube dies

[@adirmugrabi]

the real question is: does your app need a light mode? for which the answer is 100% NO!

[@MalewiczHype]

I think having a choice is good :) + Light mode works well if there's a lot of sun outside.