Designing w/ Adobe XD: ColorSchemer Studio UI Design

The design process I would use to create the Color Wheel UI element for ColorSchemer Studio.

ColorSchemer Studio has been my go to color picker for many years. The application is easy to use and is packed with features.

For this walkthrough, I’m going to use the iPad template in Adobe Experience Design CC (Adobe XD), which has dimensions 768px by 1024px.

Let’s begin.

Guides

First we need to create some guides. I start with a simple grid and a circle that’s 415 x 415.

Then I add some radial guides that will be used to align the color segments for the color wheel.

There are only six lines in the radial grid. The lines were rotated in increments of 30º from the previous.

Color Segments

To create a color segment, we can either user a rectangle that intersects the large primary circle, or we can use the pen tool. I’m going to use the rectangle method.

First we have to duplicate the disc, then draw the rectangle a bit larger than the disc. Double-clicking on the rectangle allows us to change the anchor points. I reshape the rectangle as shown below in Image 4.

With both shapes selected, select Intersect transform operation (Object > path > Intersect). You should now have your first segment. I’ve colored mine #8d40ca.

Let’s go ahead and rotate the first segment by 30º. Then create 10 additional segments with each incrementally rotated by 30º. It would have been great if we could have been able to use the Repeat Grid, but presently (to my knowledge) we can’t 😭.

Nonetheless, we get the following.

Got it? Sweet!

Now let’s position them and add some more colors.

I’m using: #8d40ca, #ce41a8, #e34853, #ea7c4a, #eaa34a, #eac34a, #eae34a, #c1dd46, #56cd41, #40cac5, and finally #4083ca.

If you are following along, you should get something similar to the image below. Note also that I have moved the center disc to the top ‘layer’.

Now that we have the 10 secondary segments, we need to draw the primary/selected color segment. Referring back to Image 1, we notice that the segment is a bit larger than the others.

Duplicating the gray disc and increasing the size to 460 x 460 we get an appropriate disc.

We create the primary segment using the same steps from Images 4 & 5, and set its color to #4640ca. Again, we move the center disc to the top layer.

Center Component

Let’s begin by drawing four circles with decreasing radii of 220px (Pink), 180px (Grey), 120px (Green), and finally 60px (White). The rational for the sizes is that I want the Green circle to be an equal distance away from the White circle and its Gray neighbor. The Green circle (see Image 11) will eventually be used to show the inner-most monochromatic color segment while the Grey circle will show the first monochromatic color segment.

First things first, grids and positioning.

Using the same method that we used to draw the color segments, I create six segments and rotate each incrementally by 60º.

With the six inner segments (the dark Grey shapes), we get Image 13.

After altering the order of the disc and the guide lines we get Image 14.

Next, we need to adjust the Grey circle to match the Saturation for the first Monochromatic color segment. For me, having a White fill with a 21% opacity seemed to work. The Green circle required a bit more work for the second Monochromatic color segment.

I went ahead and set the fill and border to white, but set the color opacity for the fill to 60% while setting the border’s color opacity to 70%. Next I tweak the opacity for the shape 45% to get the second Monochromatic color segment.

Hmmmm. There’s an error 🙄.

The center component is a bit too small. The fix is to select and group all the elements of the center component, then resize them so that they cover the lower-most circle.

Next we need to un-group the shapes; merge the Pink circle and the White center circle (Object > Path > Add); then change the color of the resulting group to White.

Clean-up time!

After deleting the guide lines it was necessary to shift some of the color segments to improve the alignment. Also, I edited the center segment shapes to ensure that the border lines were aligned with the color segment border lines.