NEW - Watch the V3 updates: • I made Realtime Colors...
------
Let's see how we can choose colors for UI design using Realtime Colors, the first UI color picker that allows for visualizing your UI color choices on a real website.
// ✨ Helpful links:
Realtime Colors: realtimecolors.com
Figma Plugin: www.figma.com/community/plugi...
Simplest JS Theme Switcher Code: codepen.io/Juxtopposed/pen/OJ...
HSL Color Difference Game: codepen.io/Juxtopposed/full/g...
// ✨ Become a supporter:
ko-fi.com/juxtopposedme
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
Thanks for watching!
--------
// Timestamps:
00:00 Intro
00:19 Color design is HARD
00:39 Introducing Realtime Colors
00:58 About Colors
01:12 Simplest UI Color Design Tutorial
01:25 Step 1: Test with Realtime Colors
01:59 Color Schemes
02:59 Step 2: Export the Colors
03:17 Step 3: Design with the Colors
03:38 Step 4: Code with the Colors
04:11 60-30-10 Rule
04:36 Color Psychology
04:57 The Takeaway
--------
What is Realtime Colors?
Basically, it's a tool that allows you to pick your own colors for every element so you can have a better understanding of your color palettes and color design on different devices.
- Skip spending several hours on implementing the colors in a design software,
- Send the links of the colors to your friends,
- Download the palettes in image and code,
- Export the palettes on Figma through the plugin,
- and many more features, like font picking, etc. :)
In this video I'm also going through the implementation of the colors in both design (in Figma) and code, and explaining colors in UI design, including color schemes, the 60-30-10 rule, etc.
---------
#colors #colordesign #colorpalette #RealtimeColors #uidesign #choosingcolors #webdesign
-------
► Track Info:
► Video Link : • No Copyright Music for...
Music provided by TikTak No Copyright Music.
31 май 2024
