I made the best way to choose colors for UI design - Realtime Colors v1
67万 次观看 · 2023-05-03
UI 设计
NEW - Watch the V3 updates: https://youtu.be/zy7Kf8WiSyE
------
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: https://realtimecolors.com
Figma Plugin: https://www.figma.com/community/plugin/1234060894101724457
Simplest JS Theme Switcher Code: https://codepen.io/Juxtopposed/pen/OJBxEXV
HSL Color Difference Game: https://codepen.io/Juxtopposed/full/gOBWdaY
// ✨ Let's connect:
Twitter: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://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 : https://www.youtube.com/watch?v=nIrzhZNPaX8&t=0s
Music provided by TikTak No Copyright Music.
------
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: https://realtimecolors.com
Figma Plugin: https://www.figma.com/community/plugin/1234060894101724457
Simplest JS Theme Switcher Code: https://codepen.io/Juxtopposed/pen/OJBxEXV
HSL Color Difference Game: https://codepen.io/Juxtopposed/full/gOBWdaY
// ✨ Let's connect:
Twitter: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://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 : https://www.youtube.com/watch?v=nIrzhZNPaX8&t=0s
Music provided by TikTak No Copyright Music.