This forum has been archived. All content is frozen. Please use KDE Discuss instead.

[Panicky things] Plasma NEXT OSD icons

Tags: None
(comma "," separated)
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Ok so I have one panicky job thats a tad hush-hush as its for Plasma NEXT. Its OSD's - essentially whenever a user click a keyboard hotkey for screen brightness up/down, wifi off/on, bluetooth off/on, touchpad off/on, keyboard brightness, Sound and switch keyboard language a floating thing will pop up in the screen as an icon for whats going on.

The issue so far has been whether or not it should be more informative than that but from what I could understand from the devs it will have another slider underneath which will say more precisely how much (in cases where its applicable).

I think the last bit is rubbish as that means that you know have two form factors to toy with and it seems a waste and a large chanse for having everything look weird in the end. But they need icons really really quick - code is done but icons are missing. My idea is that when we deliver them - we suggest having another look at the slider thing and prepare for our own sliders and meassures within the icon. (like sun rays from a screen getting bigger or a sound wave getting more pronounced).

The icons need to be fairly big but scalable - so no "different sets for different sizes" this time. They need to be monochrome BUT they can be with varying degrees of opacity which I think we should play with.

We need to remember the concept and mood we're going for too - sleek scifi but human. So combined round shapes and sharp sharp sharp corners well - go for symbols and try new ones. I have a few sketches I made but they are on the other computer so unless I suffer a stroke tonight - I'll upload them here tomorrow morning.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
Had a little time to spare so I took a stab at this. Let me know if I came anywhere close to what we might have in mind.

(The source is svg)

Image
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Those where brilliant! :D

My idea was more about mixing round shapes with sharp and combining symbols and images. The idea being that the information you get from it isn't that relevant (sound tend to be measured by the user him or herself instead of the arbitrary symbol for it as well as screen brightness). As long as you notice that something is going on and what it refers to "sound", "wifi", "language" etc.... or that was my idea.

Image


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Although I kinda cheated since I simply put the bar in the icon... (seriously though who needs three different levels of information? Icon changes, progress bar and the icons appearence... not to mention the fact that you experience the change first hand (hearing/seeing) and just need affirmation that something is happening and in what direction. Or maybe I should let that go :) )

I'm gonna remove the second cloud outline (the front cloud) so it doesn't crash into the wifi symbol - to try clean it up a tad.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
pinheiro
Registered Member
Posts
10
Karma
0
OS
can they be smpler ? Overal I like them... also remember to include double contrast we dont know what is behind them
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
To hell with Double contrast! (jk yeah kinda forgot - the issue is trying to get it without having another color involved)

Anyway here are the rest of them.

Image


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
I'm trying out a contrast in the opposite color in the hopes there is room for that (although tbh it breaks the design language - marked "ink lines" is poop). The detail is mainly because they will be so big anyway and that I want them to be not as strong but more vague and ephemeral, as it is they contain three (or four) vectors of information but still detailed enough to be interesting. Maybe I'm going about it wrong - it just feels like a good area where there is room for experimentation and testing.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Like this I guess - but it demands a secondary color

Image


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Or did you mean a flat background surface under it to be "reflected" against?


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
Fantastic! Love that more human-centric representation of sound with the headphones. Also I quite like the sharp but subtle background that let's the icon take center stage while providing just a touch of drama and whimsey in the background! A few thoughts:

Some actions, like you mention, the user in fact relies on some other primary source of information to determine action success: sound level, screen brightness, keyboard brightness. So maybe we can get away with more course representations of change? (Not so sure what the best answer is here, just a thought that might loosen up the creative process)

Some actions require some form of visual presentation to communicate state: WiFi on/off, Bluetooth on/off, Touchpad on/off. My thought is that symbol overlays to represent state just tends to add more information for the user to interpret. So for the WiFi off with disable icon overlay, the user now has to interpret both disable icon as well as the WiFi icon under it to be sure of what is being disabled. That was my thought on focusing on relatively simple shape changes instead to communicate state.

Also think for any state change, discrete or continuous, that we pick maybe only one or two things to alter that will represent the change: shape, shape and color, other? (Looks like you already have this down, just thought I'd mention it)

Anyway I'm definitely digging the direction!
User avatar
pinheiro
Registered Member
Posts
10
Karma
0
OS
some tricks ... render the icon say 4 times larger then scale it lineraly in gimp, it will avoid the overly sharp AA... also the double contrast does not need to be on te pixel level for the shadow, somthing almost invisible will do its just a mater of being sure that thre is enough contrast againts say white in this case, worse case scenario
User avatar
pinheiro
Registered Member
Posts
10
Karma
0
OS
I still think they are to busy dough ;( what do other people think? also the most significant elemnt here is the volume/intensety/strength and imo its almost lost in the decoration
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Pinheiro:

Ah thats because I frikking hate it - or rather I am totally annoyed with them. :) They serve two distinct purposes:
1) Show the user that the computer is responding, creating a sense of trust by having an icon pop up while pressing FN-buttons.
2) Show the user which way on the arbitrary scale of magnitude whatever it is you're changing is going.

No one cares if the volume is 33% or 20% they care whether or not the sound is "too loud", "too low" or "perfect".

Then there is one other thing - I tried making the progress bar bigger but tbh that was just a waste - its like animation I assumed - what you see is the thing that moves, the second something moves our eyes see it and as long as the rest of the icon is still (no changes or anything) the bar is the most obvious thing in the whole image since it just shifted.

And the last reason for all the detail - I wanted to use them as counterweight to flat elements that will be present. The urge will be to flatten everything which we shouldn't - we should just avoid unnecessary bevels, colorshifts and bulges. I think that that golden path is something we really should concentrate on - Alake's idea focusing on paper textures (****! I forgot to photograph the paper tests! Damnit), your wallpaper with its details and hints of further detail and depth while stilling being "flat" in a wonderful way is the path least trodden and the one we should go for.

But I will bow to the will of the people - Vox Populi! What do you think?

Alake:
Hmmm ok so what if we switch around the wifi/bluetooth icons?... Or we could simply let the Plasma Devs handle the progress bar and create an icon that changes with the settings and then see if they can be persuaded to go over to that fully?


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
plusfabi
Registered Member
Posts
25
Karma
0
OS
i'm with nuno. and after all i dont think we should do something like this. extra OSD are ugly. we should try to minimize the notifications, make the desktop more simple.
so in the worst case, why not pin the "OSD" to the notification area? set a little icon next to it. but please do not create another way to get some information to the screen.
User avatar
cuanknaggs
Registered Member
Posts
14
Karma
0
OS
also think they're too busy (can we remove the cored from the headphones to start with) and i'm not sure we should really on contrast as an information channel


Bookmarks



Who is online

Registered users: bartoloni, Bing [Bot], Google [Bot], Sogou [Bot]