Color palette adjustments on mobile
Hi dribbblers,
I hope you do not mind reading a bit more than usual, because I have something interesting for the UX thinkers!
I wanted to share with you the result of a quite challenging task of putting complex functionality into the mobile device. UX hypotheses were based on my experience working with colors and and also the experience of other designers as well.
THE GOAL Make the process of color palette adjustments on the mobile screen as easy and intuitive as possible using gestures.
THE USER Mostly designers, painters, photographers and all other people who are looking to find, create and collect color palettes.
SOLUTION The solution is oriented toward people who are familiar with the common ways any color can be achieved on the screen (such as HSB, RGB models etc.), since they already familiar with some color picker interfaces.
The HSB (Hue/Saturation/Brightness) model was used to define each color. In order to change any color, the user has to manipulate each of these color parameters.
Instead of using traditional ways of changing these parameters (like sliders), I decided to make it more user-friendly and visual using gestures, while keeping in mind the way designers are accustomed to working with color pickers.
Hue can be changed separately for each color in the palette by pressing on each color to change it.
Saturation and Brightness work the same as in other color pickers. We have 2 axes: Saturation is horizontal one, Brightness is vertical one.
Touch the empty space and drag more to the left and Saturation will be increased. Drag more to the top and Brightness will be increased. Drag to the opposite directions do decrease the values.
Another feature that makes a color palette more cohesive is adding a mutual hue to all colors in a palette. This feature is called Overlay color, and it’s based on the technique of putting a new color above using an “Overlay” blending mode.
Check out the 60fps attachment, It reveals more functionalities.
If you want to team up with me, contact me via: