Jump to content
You must now use your email address to sign in [click for more info] ×

Light UI icons


Recommended Posts

I agree with both evtonic3 and A_B_C; the icons look too similar in 1.5.3 (I don't have the beta so I can't check the light UI but it sounds as though the issue persists across both).
 
I think icons that look significantly different would be better. (I don't think recolouring it would make much difference and it certainly wouldn't in monochromatic mode.) Maybe Serif could ask the users what they think it should look like. A little "design your own icon" competition might be a nice way to get people involved.
 
A quick "workaround" that I've used is to add a divider line both above and below the selection brush to make it stand out more from the other tools. It's not an ideal solution but at least it gives a visual clue that something is different.

Link to comment
Share on other sites

A quick "workaround" that I've used is to add a divider line both above and below the selection brush to make it stand out more from the other tools. It's not an ideal solution but at least it gives a visual clue that something is different.

I do not seem to have a divider line option in the Customize Tools window in the retail versions of either Affinity app. What am I missing?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

For those who want to experiment (& are willing to risk breaking the app) at least on the Mac versions you can customize the toolbar icons. They are png files stored (on Macs) at path /Applications/{name of app}/Contents/Resources (like /Applications/Affinity Photo.app/Contents/Resources for Affinity Photo).

 

Each icon has two versions (on Macs), an 18 x18 px one for non-retina & a 36 x 36 px one for retina displays. So for example, the four for these two brushes are named as follows:

brushtool.png & brushtool@2x.png

selectionbrushtool.png & selectionbrushtool@2x.png

 

Each of them is an 8 bit, 72 DPI, RGB png file with an alpha channel but no color profile, so as long as you replace the existing ones with ones in the same format with the same file names (which of course will require admin privileges) you should be able to use any image you want, but there are no guarantees that it will.

 

I hope it is obvious that this is an unsupported hack, that it would be an extremely good idea to have a backup of this folder if you try it, that you should do this only when the app is not open, & that applying any app update will wipe out your customized icons.

 

EDIT: I probably should add that in the betas there are separate files for the light UI tool icons (like brushtool_lightui@2x.png) so for them & the eventual 1.6 retail versions there are now four total png files for each tool.

Edited by R C-R

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

It's the last item after the cat shape. If you are using the Dark interface it may be barely visible depending on your UI gamma settings.

Thanks! I never would have found it without this helpful tip.

 

On my 27" iMac it is effectively invisible at my normal UI gamma setting (at least to my old eyes) so it is pretty much useless unless I stack two divider lines to create a more noticeable gap.

 

There are times I think all the Affinity developers must have young eyes, perfect vision, & never do any testing on large screen displays -- I can think of no other reason why there are still so many low contrast elements in the UI that some of us have been complaining about since day one. The betas' light UI option is not a viable remedy for this problem -- even combined with adjusting the gamma, there is no "just right" setting that increases the contrast enough without washing out the rest of the UI too much.  :(

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

I think you are right, R C-R. We need more contrast on the interface. However, it is clear that a certain balance has to be found, and such a balance is not easily achieved. If you turn up the contrast too much, the user interface will get distracting. The single elements will simply pop out of the window. So apart from the valid point you made, I believe the readability of a user interface depends on many factors, not only on increasing contrast. Here are some additional thoughts and observations:

  • I believe we will need a clear hierarchy of available options. In my opinion, the Character and Paragraph panels lack such a clear visual hierarchy the most. I really have problems using them intuitively. It is somewhat better in the light version, but I still believe there is room for improvement.
  • The spacing and the aligning of elements need to be reworked, as I mentioned elsewhere (here and here). We must be able to see at first glance which interface elements belong together, which elements form a series on the same logical or instrumental level.
  • Similar elements should be styled similarly, dissimilar ones dissimilarly. I cannot understand, for instance, why there should be a variety of button styles on the interface, when the buttons themselves share the same purpose. Compare, for instance, the Create and Detach buttons on the Symbols panel with the Character and Paragraph buttons of the context toolbar of the text tools. All of them are trigger buttons, but the first ones are styled differently from the latter ones.
  • The same goes for some instances of radio-button-style selectors. Compare, for example, the selectors for the node size in the preferences and the selectors for the text alignment on the context toolbar of the text tool. Same function, different appearance.

I fear many users will find that such considerations are nit-picking. However, I still believe that the Affinity apps (which are unrivalled in speed and feature a lot of great innovations) should have a user interface that is on a par with the technical framework …  :)

 

Hope that makes sense …  :)

Link to comment
Share on other sites

I think you are right, R C-R. We need more contrast on the interface. However, it is clear that a certain balance has to be found, and such a balance is not easily achieved. If you turn up the contrast too much, the user interface will get distracting. The single elements will simply pop out of the window.

I realize that the UI must not be cluttered with a lot of distracting high contrast elements but particularly on the Tools panel, only one tool can be selected at a time, so I doubt increasing the background contrast only behind the selected tool is going to do that. If that is still too much, then as an alternative the selected tool could have a 1 or 2 pixel thick frame around it in a higher contrast gray.

 

Either way, this is would be very small change in the overall contrast of the UI -- the Tool panel icons are only 18 px square on non-retina screens & 36 px square on retina ones, & most of that space is already occupied by the tool's pixels (which for most tools are already colorful enough to contrast significantly with the other items in the panel). The same is true for many of the buttons in the UI.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

I have no issue with the comments given above. The UI needs some tweaks here and there to make various things more consistent while also making other things more differentiable. I think all of the arguments given are valid and more discussion will be a good thing that I am looking forward to reading more about. This is all very interesting and also very important if the Affinity family is trying to draw in users of other products.

However, just getting back to the original problem - that of the selection brush being too similar to the paint brush - can I suggest that the selection brush icon be rotated by 90 degrees clockwise? It would still be the same icon but it would look sufficiently dissimilar to the paint brush that the user will be able to more easily spot the difference.

A lot of advanced users will probably just use the keyboard shortcuts and not even notice the icons anymore but beginners need to be given a little bit more help, and making the icons look sufficiently different to each other will be useful.

Link to comment
Share on other sites

A_B_C, actually I suggested rotating it 90 degrees clockwise which would make it look like the attached screen-grab (where I've also re-coloured the brush "handle" to make the difference more noticeable).

I think it's important to note this as it keeps all the tools' handles/bases on the same side. This way, the "functional ends" of the tools are all at the same side. It's a little less jarring that way.

post-55880-0-35890500-1495539955_thumb.png

Link to comment
Share on other sites

It's the last item after the cat shape. If you are using the Dark interface it may be barely visible depending on your UI gamma settings.

 

If you're in the Dark UI it's barely visible with your gamma settings as bright as they'll go!

Link to comment
Share on other sites

I see … sorry …  :(

 

Yes, that was my main problem with what I understood to be the suggestion, however, I see an issue with the rotation as well. All other tools are pointing (or painting, as it were) downwards, only the selection brush would select something up there on the wall …  :unsure:

Link to comment
Share on other sites

No need to apologise A_B_C, it's my fault really. I should have given the image in the first place and made my point more clearly.

I see what you mean about changing the direction of the icon but since the Move, Node, Corner, Dodge, Zoom (and the one in your image that looks like a magic wand) tool icons are all in a bottom-right to top-left orientation I don't think there's too much of a problem with that. A precedent has already been set.

I'm all for consistency in the UI but I prefer usability over consistency pretty much every time.

For example, if a machine has both a start and stop button that are both the same size and shape and red in colour they might look aesthetically pleasing together but it doesn't help the operator much in figuring out which to use in an emergency. Obviously, icons on an illustration software toolbar isn't an emergency situation but I hope I've managed to get the idea across reasonably well.

For icon design, on the rare occasion when I have done any, I try and make the icon look like the tool as it would be in use in my right hand. So, to take two examples, a pen would be oriented top-right to bottom-left - as it would look as if I was writing with it - while a magnifying glass would be oriented bottom-right to top-left - as it would look as if I was examining something.

With that in mind, since the selection brush is a "broad strokes" tool - at first use, at least - then it might make sense to orient it bottom-right to top-left in the same way that a paint brush would be if you were using it to paint a fence (or whatever). To think of it another way, you're not selecting things with the tool, you're painting an area which the software uses to figure out what to select. Less "select this", more "select stuff from in here".

That's all just my opinion though; I could very easily be talking complete rubbish.

Link to comment
Share on other sites

For icon design, on the rare occasion when I have done any, I try and make the icon look like the tool as it would be in use in my right hand. So, to take two examples, a pen would be oriented top-right to bottom-left - as it would look as if I was writing with it - while a magnifying glass would be oriented bottom-right to top-left - as it would look as if I was examining something.

 

That's interesting, Garry. For me, both would be in the same bottom-right to top-left orientation, the main difference being that my hand would be above the handle of the magnifying glass but below the barrel of the pen.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

I'm all for consistency in the UI but I prefer usability over consistency pretty much every time

I do not mean this as a reflection on any Affinity user or developer, but I think there is great wisdom in what Emerson wrote about consistency.

 

Personally, I don't care how tool handles are oriented in the Tools panel or even if the icons are stylistically or thematically different. As long as each one is distinctive enough to avoid confusion with any of the others & they are reasonably suggestive of their function, I will be happy enough with how they look.

 

That said, I think it would be interesting & informative to see what users can come up with as alternatives to the OEM tool icons. Other users willing to do a little lightweight hacking could try them out. Some might be worth adding to the Resources section of the forum. As long as it is made crystal clear that they are unsupported, use at your own risk hacks, I do not see the harm in that.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Alfred, you're quite right to point that out. Some people have different writing styles and so their pen may be oriented differently to mine.

Maybe the pen was a bad example. As an alternative, I think most people use an eyedropper in pretty much the same way, I.e. with the "business end" of the dropper in front of their hand so they can see what they're doing, and that would have a top-right to bottom-left orientation (for a right-handed person) as the icon shows.

Without trying to push this any further than it probably should go (too late? ), the Smudge tool now looks a little odd. I don't think I would ever have my hand in that position to smudge something - it looks quite uncomfortable. Maybe other people would, I don't know, it's not really that important.

Anyway, I don't want to take the thread away from its main thrust which was about making the selection brush icon easier to differentiate from the paint brush icon. (Apologies evtonic3.) Maybe someone can come up with a better icon, my suggestion for a rotation was just something simple that could be done quickly - except for changing the documentation of course.

Link to comment
Share on other sites

R C-R, I like that quote and I agree with you.

As long as the icons give a reasonable idea of what they are for and they are easily distinguishable from each other then that's fine with me. As I said above, my rotation suggestion was just a quick fix rather than wanting to get into some kind of debate about icon design (even though it's been an interesting discussion so far).

I like your idea about having a separate thread related to alternative icon sets. They don't even have to be actual icon sets, just a collection of icons displayed in a grid (or something similar).

With the artistic skills evident in the forum I'd think some people could come up with some cracking ideas.

Could there be a stipulation that only Affinity products should be used to create them? It might be interesting to see what people can create for Affinity with Affinity.

Link to comment
Share on other sites

It is perhaps worth mentioning here that icons are just symbolic abstractions that may represent not only analogs of physical objects but also the actions or results of using those objects, or even things that have no direct physical analogs outside the virtual realm.

 

I don't think we need to be overly concerned with how we hold, orient, or use any physical analogs. Which symbol best differentiates one tool from another is the important thing, right?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Yup, absolutely. As long as I don't get them mixed up then I'm happy. Making them look like something I can relate to is just a bonus.

On a related - but possibly not interesting - note, the first time I saw the crop icon many (many) years ago I had no idea what it was supposed to be. I didn't come from an illustration/publishing background so it made no sense to me. Some weird-looking rectangle with a line going though it didn't match the action I was using it for which was taking part of a picture away. It took me a while to learn what it was about.

The same thing goes for cut and paste. We don't use scissors and glue in a word processor but the icons still hark back to a time when that's how documents were put together.

Link to comment
Share on other sites

The same thing goes for cut and paste. We don't use scissors and glue in a word processor but the icons still hark back to a time when that's how documents were put together.

 

Funny you should mention that, Garry. The 'Cut' icon is a pair of scissors but the 'Paste' icon is a clipboard rather than a pot of glue!

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

The same thing goes for cut and paste. We don't use scissors and glue in a word processor but the icons still hark back to a time when that's how documents were put together.

Along the same lines, the most commonly used "Save" icon is probably still an image of a floppy disk, so there is more truth to this internet meme than some might think! :lol:  

64947985.jpg

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.