@madsrh@c-lobrano@frederik-f + others, I don’t think I have permission to post in the mockups thread (well I don’t have a “reply” button there ) but I said I would have a go at some mockups with the origami layering for the submenus.
Here is attempt #1 - the drop shadow is a bit crude, but key points are:
1px edge highlights/lowlights like app window titles, with light along the top edges;
Drop shadow around the panel, like app windows;
Completely opaque, like app windows (I haven’t yet found a way of combining transparency and higher/lower layering that I like);
A deliberately busy mockup composition, to avoid showing it only in the most flattering context!
@madsrh, nope, if the text has changed colour that’s an error in the GIMP job!
Yep, very similar (I’m trying to have a play with your ideas from that thread) - only differences are removing the slight transparency and making the edge-handling the same as app windows (if you only have the bright line on the “illuminated” top edge, the boundary becomes softer, but then hopefully the addition of a slight app window-style drop shadow compensates for that).
EDIT: the transparency is less visible when there isn’t much detail behind the panel, but, in the original screenies, you can see it a bit for the orange “x” and the difference between terminal header and window.
In the latest screengrab I was working on, there was more happening behind the panel and the transparency was much more prominent:
I think I need to say it, since it is seating in the corner of my head for too long now.
Flat became a new religion !
Flat can be boring as hell and can be styled with fine good design .
Mix elements when picked wisely can edify the overall design.
OK. I removed it out of my chest!
I feel better now.
This is my stab at @madsrh’s second mockup above (dark submenu with drop shadow). It has the same treatment of the edges as my first mockup. Also, I don’t even know if this is possible: the submenu section of the panel is 1px narrower.
Other effects: very slight indent and muting of the submenu text (maybe I went too far with the muting… imagine something less pronounced if so) to increase the illusion of it being further away.
@c-lobrano is that one of the existing mockups or has it been tweaked? Hard to tell on phone. If it’s one of the existing ones I’m happy to mock up some of the other popovers in an identical style (e.g. launcher icon right-click) to see how people feel
The problem I see is that this black border is not used elsewhere. It feels like a stranger when opening different elements. OSDs,
alt-tab,
or the ctrl+alt+arrow up/down workspace switchers.
All have that transluscent border. That’s why it feels natural for me to only use the transparent border in that popups
With the recent transparency increase, the lighter submenu area is also quiet visible. I see no real benefit of that black border.
Here’s an idea of what the launcher popovers might look like with the approach under discussion. I’ve started using semi-transparent 1px lines for the layering effects so they don’t stay the same colour while the panel itself picks up lighter or darker notes from the background.
Current:
Approach under discussion:
What’s different?
Edges take cues from the app window titles (= highlight on top edge and no bright boundary all the way round)
I wonder how much sense (in terms of consistency ‘congruency’) a drop shadow makes. It makes the popups seem higher than the shell as well as the windows, perhaps this is intentional (pop up s) but the triangle bit connecting the popup to the Launcher doesn’t have a drop shadow, so trying to visualise this in 3D fashion, would there be a vertical incline from the end of the triangle to the popup (if the triangle had a drop shadow then it would not be connected to the shell when looking at it in 3D terms so that doesn’t help)? Alternatively, the shell elements should all get drop shadows to make it all seem raised from the content on the screen, maybe, though maybe that’s too strange, would mean there would be a shadow on the top of maximized windows, for example. Another alternative is the the triangular bit has a progressive drop-shadow to indicate an incline to the pop-up (should start on the left (for the Dock) with no drop shadow and end on the right with the full drop shadow of the popup)… Maybe this would look too strange but it makes the most ‘sense’ of the picture.
) but I said I would have a go at some mockups with the origami layering for the submenus.
