[1.9] Global Colours editor UI is missing

[LCamachoDesign]

I was waiting for the actual 1.9 beta to come out before posting this, but since it doesn't look like it's coming any time soon, I might as well post it in advance. Even if work in the UI has already started, I still think it's relevant to post this. If for nothing else then to make sure you avoid doing the global colours editor UI in the same disastrous way Adobe did with Illustrator for the iPad released today.

To avoid the above you must understand one thing, the whole point of global colours is to finely tune the colours of our illustrations, in real time. This means you must see the colours change within the illustration as you tweak the swatch. As such you must do your best to avoid obscuring parts of the canvas, no full screen editors please.

Another point with these mockups is to create them reusing as much of the existing UI as possible, so the amount of work needed to create this is reduced. This is a critical feature that has been missing for way too long, let's not delay it any further by requesting unique UI elements just for it.

With that out of the way, let's get started.

 

1. The first step in editing global colours is to actually have some.

For that you need to have a way to add them to the colour palette. A simple 'add global colour' entry on the existing flyout menu will do. The swatch will be further tweakable down the line, so this is enough or now.

 

2. Now that global colour swatches exist, you must be able to apply them.

For that you'll need an indicator showing the swatch is applied, a simple blue circle around the swatch will do. This is the same colour as used in many other controls throughout the app. On the next point I'll show these swatches as a grid instead of a list.

 

3. We must be able to apply global swatches to things beyond simple shapes.

Right now we're not able to apply any swatches, even regular ones, to things like layer effects. For global colours to be maximally effective this must change, we need a UI to select and apply swatches to things other than shapes. Here I'm showing how this would look when applying a global colour to a colour overlay layer effect.

 

4. Now that global colours are applied, we need to edit them.

This is where I ran into a possible UI inconsistency issue. What makes sense to me would be to long press a swatch, choose 'Edit' from a popup, and be taken to a panel for that effect like shown in point 5. The thing is, I don't think there's any instance where a popup menu like this takes us to a subpanel? And like I said at the start, if I want to minimize UI changes in order to deliver this as fast as possible...

... so if the above is an issue, then another solution can be used. Instead of long pressing the swatch, we could instead head to the Colours panel and have it behave in a way similar to the desktop version. That is showing a tint slider with a button linking to the colour editor.

 

5. Time to tweak the actual colour values

Independent of the design option chosen above, you'll end up on this panel to edit your global colour. You'll be able to tap the swatch name to change it, and more importantly change the colour values while you keep the canvas in sight at all time. Once you're done you can simple back out into other panels or tap away to close it.

 

Add... that's it. I'm open to take any feedback, and I'm sure the developers would like that too. However, remember that we must reuse as much of the UI as possible, so this critical feature can be delivered as soon as possible.

Thanks!