UI CONSIDERATIONS

[ronnyb]

There is an opportunity to design not only next evolution of visual design software, which you guys are clearly doing AMAZINGLY, but also to design the next step in the evolution of software UI. Affinity can be the app that changes the UI game for good. But in order to do so, it must leave behind the iconography that has defined what modern UIs are since the 90s.

 

I found a Yosemite version of the AD UI on one of the forums here when I first started hearing about AD, and I dug it up the other day to play around with some ideas I had. I can't remember whom or where I got it from, so my apologies to the artist who posted it for not giving him or her credit...

 

As far as the UI: We've seen a move towards simpler and more iconographic interfaces, and less towards photorealistic, or skeumorphic UIs. I welcome this trend, and think it can continue to its logical conclusion of an ultra simplified, unobtrusive, monochromatic, high detail, user definable UI, almost like the UI of the computers in the control center in Zion in the film The Matrix 3: super clean, retina-sharp, monochromatic overlay over the content.

 

A monochromatic UI is critical for a professional app. But that doesn't mean only gray. I think the proper balance between the unobtrusiveness of a gray background and the color of a monochromatic UI can be achieved, specially with some of the simple effects like glows and inversions to highlight the UI where necessary. 

 

There could be a setting in the Preferences to Activate Monochromatic UI. Another setting allows the user to determine her or his main UI color, glow level, as well as the pre-existing UI gamma controls for the background gray, which I think was a wise decision NOT to make it a user defined color. I would encourage the development team to allow the UI font size and perhaps a few san serif font variants with different widths, to be user selectable as well...

 

If you really wanna blow everyone else away: allow access to an AD file that contains the entire UI in vector format, neatly arranged and organized, which users could then customize and share to our heart's content. We can dream, can't we?!?

 

Anyway, here are a few basic variations of the UI, you get the idea where this could go:

 

Cyan:  

 

Magenta:   

 

Yellow:   

 

 

White:   

[AshTeriyaki]

It's a nice idea but I couldn't disagree more.

 

Here's my take:

 

When you see flat, monochromatic interfaces with flat icons, the majority of cases it is a mobile or simple gateway or limited function application.

 

Within a piece of software with a wide array of functionality you NEED colour. You also need dimensionality to define boundaries between panels and gangs of different, complex controls.

 

An important part of desktop software design is hierarchy and creating conventions for different areas of the application. Buttons of less or similar function share some consistent style (in AP, look at the adjustment vs. Tool icons, for example) and limiting a palette just makes it needlessly more difficult.

 

There's got to be function before form and so far flat UI for full blown application ls just doesn't cut it, it's a trend and rightly so.

[00Ghz]

the alternatives....my eyes burn....please no :(

[ronnyb]

The first 3 are admittedly over-vibrant, but the white better highlights the concept....

[peter]

AD is still easier to 'read' the tool bar, than AI's display. 

 

People generally see colour first, then postition, after that shape and finally fine detail. Just think about traffic lights; all of this very quickly.

[ronnyb]

@AshTeriyaki: I don't necessarily agree that you NEED color in software UI, I would say legibility trumps color. When you look at the international, modern visual language we have developed, it is not colorful; it is essential: form and contrast. There is a reason for that simplicity. Trying to cram a 32 x 32 or 64 x 64 tile with tiny pixel art is a recipe for disaster. In such a tiny area what is necessary is legibility. All those little colorful icons blend together, and what we really remember is their position more than their unique appearance.

 

@Peter: My understanding is that we perceive first and foremost contrast, not color. The dominant type of contrast we perceive is contrast of position in time, aka, movement, followed by contrast of "color," which is not only contrast of hue, but also of saturation (amount vs. lack of color) and value.

 

@00Ghz: These are quick sketches using bold colors to demonstrate the limits of an idea... are they the ideal icons? No. They ought to be bolder and graphic. Are they the best colors? That's personal preference, my personal choice would be very neutral, the last (white) one or a pastel color if anything, but if the artwork was neon and bright, that UI wouldn't be so "offensive," as offensive or appropriateness is again, contextual...

 

Anyway, it's an experiment to start a conversation. My personal choice would be to provide the users the option to modify an AD file with ALL the iconography and UI elements, as well as application Preferences including the current gamma and bg gray brightness, maybe a few more options in terms of UI font and size as well as larger icons, and a "highlight" or "glow" color preference as well for selected tools, pop-ups, etc. Of course these static images don't show any possible roll-over effects, which would add more depth and detail...

 

No two people are the same and so the best software, in my eyes, is the most flexible one that adapts to each user's preferences as much as possible. As you can read through the forums, people have different needs because of age, biological make-up, culture and personal preferences, etc. Of course, this being design software, the possibilities for UI iterations by the target audience (designers) are literally endless. Can you imagine the rate at which UI skins and iconography would evolve?!? Just my $0.02...

[AshTeriyaki]

I'd vote for custom icons. Perhaps they're lying around in the package somewhere...hrmm...

 

@ronnyb - My point was not 'colourful is better' just that in a complex system colour aids recognition. Especially if you are a little clever and group related functionality with the same palette. These are tools after all, the more efficient the better. Form after function and all that.

[Andy Somerfield]

Photo can have mono icons if you want - there is an option in preferences for that (not certain the Colour -> B/W mapping it uses it quite there yet though)..

 

Andy.

[MastroPino]

Photo can have mono icons if you want - there is an option in preferences for that (not certain the Colour -> B/W mapping it uses it quite there yet though)..

 

Andy.

 

Please consider to put this option on AffinityDesigner too, my eyes are burning with colored icons (directly from '90) and there are a pain for the attention too.

 

B)

[000]

I actually prefer the coloured icons … makes everything much friendlier and more fun. 

[00Ghz]

I actually prefer the coloured icons … makes everything much friendlier and more fun. 

 

I agree...better visibility for items

[ronnyb]

Hey @Andy,

 

Photo can have mono icons if you want - there is an option in preferences for that (not certain the Colour -> B/W mapping it uses it quite there yet though)..

 

Andy.

 

I tried the monochrome icons, and they just seem flat and blend away :/

 

I think for a monochrome UI option, it needs to be very graphic, as in mostly one color — white, or better yet user selectable :) — and perhaps a few other shades of gray, but mostly white to get the needed contrast and pop. Right now I am sticking to the colored versions...

 

I'd vote for custom icons. Perhaps they're lying around in the package somewhere...hrmm...

@ronnyb - My point was not 'colourful is better' just that in a complex system colour aids recognition. Especially if you are a little clever and group related functionality with the same palette. These are tools after all, the more efficient the better. Form after function and all that.

 

@AshTeriyaki: I already cracked open the app's contents and made my own icons and swapped out the originals :) It works pretty well, but there are A LOT of icons all over the Resources directory, and it's kinda tedious process, but definitely possible. I would love to see the UI iconography made more user accessible. It would be awesome if we could just modify an AD file and have the export Persona safely update the content of the app's Resource folder itself after restarting the app.

 

Totally agree with you about grouping tools and functionality with similar color palettes, as the shape tools clearly demonstrate. I feel like the color right now is being used literally in each icon, whereas if colored is to be used, it ought to enhance user legibility of tools. 

[MattP]

We do intend one day to ship a complete UI kit for Affinity so that when users suggest 'I'd like it to look like this' they can just show us, rather than having to screen-grab and tweak away...

 

We obviously already have master files with all of our icons already setup with correctly named slices, etc. I don't know whether apps become very unhappy if you start messing with their contents though? (I'm thinking in a App-Store-Update-Goes-Wrong kind of way?)

[MastroPino]

I actually prefer the coloured icons … makes everything much friendlier and more fun. 

 

 

I agree...better visibility for items

 

 

I totaly disagree... U need to concetrate to your work and not on icon.

[ronnyb]

We obviously already have master files with all of our icons already setup with correctly named slices, etc. I don't know whether apps become very unhappy if you start messing with their contents though? (I'm thinking in a App-Store-Update-Goes-Wrong kind of way?)

 

Hey Matt, I've been hacking my copy of AD Beta with my own custom icons, and my process has been to quit the app before opening it up and replacing the icon.png files. I restart ADB with no problems for the most part. There is one icon (rotate anti clockwise) that is not rendering properly, this is what it looks like:

 

[MattP]

Hi Ronny!

 

The only reason an icon wouldn't draw is if the image was incorrectly named - whether that's capitalisation, file extension, whatever. Other than that, I'd imagine it would work like the rest. The beta is interesting because it's a completely new package each time that replaces the old one - but I think the App Store updates are delivered as binary deltas and I have no idea what would actually happen if you modified the contents of the App Store version in your Applications folder... I don't even know if it would run up afterwards because of the signing? :S

 

Cheers,

Matt

[ronnyb]

Hey Matt! I just tried swapping the icons on the MAS version (after duplicating it of course). Works without a hick-up! Of course if I update it, i'd have to copy my icons into the Resources folder inside the app container, but that's a 3 second task...

[MastroPino]

Hey Matt, I've been hacking my copy of AD Beta with my own custom icons, and my process has been to quit the app before opening it up and replacing the icon.png files. I restart ADB with no problems for the most part. There is one icon (rotate anti clockwise) that is not rendering properly, this is what it looks like:

 

Screen Shot 2015-02-11 at 12.10.01 PM.JPG

 

Very nice work man!!!

 

After all is it possible to test #CCC instead of #FFF? 

 

:lol:

[ronnyb]

Thanks MastroPino! Here is the file I was working with, post back anything interesting you come up with ;)

 

AD Beta - monokrom UI.afdesign

 

Very nice work man!!!

 

After all is it possible to test #CCC instead of #FFF? 

 

:lol:

 

[ronnyb]

Apple just released Yosemite 10.10.3 with the beta for Photos app. I haven't downloaded the beta, but here is a video showing how Apple is evolving it's "pro" or dark themed UI. It's really nice how the UI animates, and is moving beyond the late 80s-90s faux buttons of most software...

 

I hope the Affinity UI evolves and adapts to a more modern visual language as well...

[ronnyb]

Here's another example of a modern, clean, pro UI in creative software:

 

http://macaw.co