Hey all, just a little PSA: On September 14th, the PRELAUNCH of designcourse.com is here! Make sure to enter your email to be notified. I will also upload a video on the day of. It's been a year in the making!
Yeah agreed, and this would probably be a pain in the ass to implement - this one screen shown in the video alone has like 8 different hex codes, imagine that throughout an entire app or website. A basic but easy way to create shades is start off with your "base" colour, place a black fill on top of it, then reduce the opacity of the black fill down to 10%, then do this again at 20% and so on. Each time you do this it will create a new shade, gradually getting darker each time. You can also do this with white to create tints. Another way to do this is to take your base colour, change the colour palette tool on Figma from Hex to HSB, and play around with the saturation and brightness levels. For example my base colour might have a brightness of 60, then I'll reduce it to 55 and create a shade, reduce it again to 50 to create another shade etc
@Maryam Ashraf he meant that pick that color and switch mode from Hex to HSL or HSB, that change the H (hue) values of that particular color to get a variety of working colors. In my opinion, this technique doesn't always work but when it does, it works good!
I agree with @Goncalo. Hopefully we get either on YT or in upcoming course a more scientific approach to Color Palette Creating lesson-s. There is an in-depth course by The Futur - Color for Creatives but would like to see it in a web design course. For now, the palette apps and these videos do just fine.
The fact is that you show me we don't need multiple color to make UI beautiful. Just use one color and adjust the Tint and tone make show that it has contrast enough that would make your UI perfect.
Does your course go over creating the actual UI and layout? I will definitely check it out if it does. I’m pretty new to UI UX design and your vids are helping immensely.
Last time I saw one of your videos, your hair was almost not present,..all i see is hair. Keep it up Gary, always fun to see your videos. Have a great day :-)
Hi, I liked the technic and the output but did not understand the process fully. Can you please make a part 2 of this where you explain the process in little detail pls.
I'm not though. That's Figma. I use Figma for random stuff like animated presentations. I'm boycotting XD because they won't allow me to change the canvas background color.
I like your videos, but this video is misleading and may result in designs with too many shade variations to that can be consolidated into fewer options. Also might not be accessible to some color-blind users. This method is just not good. The best way is to create the pallet before implementing it in the design, and also better to check the contrast for accessibility. I really hope that for your paid content you to teach more then experiment.
![Color Crash Course for UI/UX Designers [By Example]](http://i.ytimg.com/vi/Ewj85eIda74/mqdefault.jpg)
Hey all, just a little PSA: On September 14th, the PRELAUNCH of designcourse.com is here! Make sure to enter your email to be notified. I will also upload a video on the day of. It's been a year in the making!
finally, we could get those normal videos
Hell yeah!
Would love to have seen a more systematic, mathematical approach to this, based on color theory.
Still great video though!
Yeah agreed, and this would probably be a pain in the ass to implement - this one screen shown in the video alone has like 8 different hex codes, imagine that throughout an entire app or website.
A basic but easy way to create shades is start off with your "base" colour, place a black fill on top of it, then reduce the opacity of the black fill down to 10%, then do this again at 20% and so on. Each time you do this it will create a new shade, gradually getting darker each time. You can also do this with white to create tints.
Another way to do this is to take your base colour, change the colour palette tool on Figma from Hex to HSB, and play around with the saturation and brightness levels. For example my base colour might have a brightness of 60, then I'll reduce it to 55 and create a shade, reduce it again to 50 to create another shade etc
I never knew about this technique before but I am happy you showed me how it's done. Thank you.
Save the first color palette in your color library, change the hue values of that library and you got yourself some quick variations.
@Maryam Ashraf he meant that pick that color and switch mode from Hex to HSL or HSB, that change the H (hue) values of that particular color to get a variety of working colors. In my opinion, this technique doesn't always work but when it does, it works good!
Best video for me to boost my confidence
me: sucks with every color I choose
gary: creating a cool design with RED & PINK
😂
By the end of this year you are definitely gonna reach 1M!!!
Back to old school 🖤🤍 .
Missed this vibe a lot!
LOVE your content
awesome ! i needed this video
Your thumbnails are quite dark, maybe they stand out against default TH-cam but they're easy to overlook in dark mode.
I'll look into it! Ty!
I use dark mode always
Next week's videos will have brighter thumbs!
Same - everything that can be dark mode, is
I also use dark mode . Haha
I agree with @Goncalo. Hopefully we get either on YT or in upcoming course a more scientific approach to Color Palette Creating lesson-s. There is an in-depth course by The Futur - Color for Creatives but would like to see it in a web design course. For now, the palette apps and these videos do just fine.
Thank you so much. Was at loggerheads with myself on getting colors right. At last I have one way of doing this.
7:48 You did not have to detach instance, there is section "selection colors", where you could change the color of the text much easier.
HAHAHAH the thumbnail is hilarious , well played xD
Thanks my guy. This is just what I wanted to know for a very long time😍😍😩
What is the shortcode to directly use the color picker?
Same here. I also use that technique
Great video. Much needed for the us backend devs. I used the Coolors website to select a color pattern for my website. Any thoughts on that?
I've done a video on that app awhile ago!
@@DesignCourse Awesome! I will check it out.
The fact is that you show me we don't need multiple color to make UI beautiful. Just use one color and adjust the Tint and tone make show that it has contrast enough that would make your UI perfect.
Leaving my comment here for future reference
Omg where's Jon Frok & the boja, i like it
Does your course go over creating the actual UI and layout? I will definitely check it out if it does. I’m pretty new to UI UX design and your vids are helping immensely.
yes it does
I need your help, Is there any free method to convert XD file to figma file? plz answer
Hey DesignCourse.
😮 Wow, Loved it, 🌈colors are not an easy thing, so great content, as always!!!
I just 💜loved it.
Thanks for sharing it!🙏
Last time I saw one of your videos, your hair was almost not present,..all i see is hair.
Keep it up Gary, always fun to see your videos. Have a great day :-)
At Scrimba, you don't just watch videos. No no no!
Hi, I liked the technic and the output but did not understand the process fully. Can you please make a part 2 of this where you explain the process in little detail pls.
Hey Gary , Love your content. Wanted to ask, any tips for Mild Deutan color blindness, also known as deuteranomaly color blindness?
Awesome Awesome Stuff😅
16 boja spies are amoung us, those dislikes...
where is Jon Frok??
He's going on vacation for awhile
@@DesignCourse ok dude✌
Love that you are using Adobe XD!!!
I'm not though. That's Figma. I use Figma for random stuff like animated presentations. I'm boycotting XD because they won't allow me to change the canvas background color.
The noze
wat
@@DesignCourse you have a big expérience and I love watch your skill. Perhaps a mathematic method will better for me as junior designer.
where is Jon Fork, is he killed by the boja.
I'm half way through the video, and hoping you're going to actually check all these colours for accessibility...
Hi
Adobe XD let you change the canvas color...
Why you screenshot it, you could have just copy it as png 😭
I like your videos, but this video is misleading and may result in designs with too many shade variations to that can be consolidated into fewer options.
Also might not be accessible to some color-blind users.
This method is just not good.
The best way is to create the pallet before implementing it in the design, and also better to check the contrast for accessibility. I really hope that for your paid content you to teach more then experiment.
ezw3e
vun.fyi