I agree with that, moreover there’s a weird resize of the WiFi icon when hover, I’ll try to take an image or a gif tomorrow
Here’s the original site where I grabbed most of everything:
https://docs.ubuntu.com/phone/en/apps/design/
I skimmed through it and even though it’s been redesigned, it looks like the content is mostly the same, just with more stuff added (guess I didn’t need to panic grab). Either way, there’s still the screenshots of what I considered “useful” from Unity 8 and probably some other stuff too.
Suru Guidelines + Unity 8 Screenshots
I’ll round the corners.
That is weird. In the top bar or in the popover?
2 Likes
Sorry, not WiFi, but the volume icon in the top bar
here is the picture
A part from the volume “waves” that are sharper, even the rest of the image looks more rounded
… and it seems fixed after the last update 
The icon is always like in the last picture
1 Like
Sam fixed a bunch of bugs in the icon theme yesterday, I guess that was one of them 
1 Like
@luxamman, @madsrh, and others, I’d like to have your input on something.
Unity8 and Ubuntu Touch actually used Blue as the “activity indication” color. (progress bars etc…). More info: https://docs.ubuntu.com/phone/en/apps/design/building-blocks/activity-indicators
@c-lobrano created a PR that implements that: https://github.com/Ubuntu/gnome-shell-communitheme/pull/2
What do you guys think about this, and what do you guys think about following the Ubuntu Touch/unity8/Suru design style as much as possible? It will probably speed up development a bit, which is good since we’d like to have a first version ready for 18.04 (April 2018)…
I think it’s important to make a decision about this now, but I leave the decision entirely to you.
5 Likes
Basically, I think that we should use as much of the Unity8/Touch design as possible. It would be silly not to take advantage of all that work from the design team and use that as a starting point.
Long answer short: +1 for blue activity indication color 
5 Likes
I’m all for it! Reuse and refine, since not everything will carry over very well.
5 Likes
Sorry for proposing a PR before discussing this first. I saw other contributions close to Unity8 and I misunderstood. However, as you said, unity8 is a solid and well defined design so even changes to it will be easier to discuss, I think.
2 Likes
Hey there,
about
My opinion:
The Unity 8 experience is well done on the phone and on the tablet, the desktop styling was at least for me not completely finished (have a look at the window min/max/close buttons or font style/size and so on).
The overall design is nice, but it is also a different system than Gnome.
I like to reuse the icons, the element styles and so on and having Ambiance in mind when it comes to the feeling and Ubuntu style history. That’s why I’m quite happy with the first Communitheme steps (running in 18.04 VM and on 17.10), because it does feel like Ubuntu (even if there is still a lot to do, for now, it is a kind of mix of a lot of styles, but that’s okay for testing).
So, the blue was in my elements mockups once and like said before, I’m not sure if we should use it.
First of all: the number of color elements like the indicators and so on is limited. They are not present all the time when using apps and programs, so is there really the need for another color?
Second: Gnome is blue. The orange is part of the typical Ubuntu styling and branding and the blue is maybe just not necessary.
For now, I would prefer to style them in orange, make for example indicators a little thinner (like in Suru) with new elements in Suru style (for example the sound volume, instead of the circle the round-corner squares) and make them work better with the dark backgrounds (black indicator background is hard to see in the top-panel settings).
–
And some more overall thoughts based on the actual status for more discussions/work:
- EDIT: Seems the Dock is now dark and just a little transparent? Maybe it was just wrong in my VM, in the live system it is working and looking nice! (I still don’t like the transparent Dock. Too loose, hardly working with every wallpaper and so on - we had the discussions a lot of times. It’s just not working for me. I’m fine with some transparency, but too much is just too much… I like the transparency and color when getting darker when windows max, because then it looks like a Dock, not like an area on the desktop with some icons… And the dark background make the icons look even more stylish - IMHO^^)
- Window transparency still too much, like discussed before maybe completely get rid of it. Also the transparency from the notification/settings from the top-panel.
- The Ubuntu logo as app-launcher is looking for attention all the time. I like the logo to be there, but maybe we should try to get rid of the orange and try different way’s to differ the app-launcher button from the app icons. For the usual working day the logo is not the main contact point (that’s still “Activities”, yep), so maybe try to not bring it too much to attention all the time. Or maybe make the orange a hover (with smooth transition) and when active. Or maye this is just something to get used to… And it seems the orange background of the logo is wider than the Dock.
- I like the buttons like in “Settings” and so on, they maybe just need a little bit more contrast - means the surrounding a little darker. But just a bit
- Buttons in top-panel setting and so on looking very different than the once from “Settings”. We’ll need to figure out how the dark and white background works with the style of the buttons.
- The hover on some buttons (like in Files) has too dark borders for me, they jump out of style. Maybe no border or slightly like the other buttons? Also, it seems that window min/max button from “Files” differs from apps like “Firefox”.
- The buttons/breadcrumbs in “Files” are still not right for me, but some thought: When opening “Files” the non-active buttons immediately call your attention, because they use the bright background which brings them in the “attention contrast”. But at this moment, they are not important at all. So better work into dark or just with borders? And then the breadcrumbs (or switch buttons?) are having too much dark inner-shadow, so they seem to be in the window, but other buttons are looking like they hover over the window. So when visiting the window where to choose the wallpaper they two are next to each other and the difference is quite heavy and out of style. So I guess we can try to flatten the buttons in general, or for the start, make the inner-shadow less strong and so making them less 3D - or reduce them to two instead of 3 layers. One button is flat on the window, the other buttons hover.
- Green buttons (like Select) have a not fitting border
- Window min/max are having a bright background on non focused windows.
- When selecting files or folders in “Files”, they overlay color is too much and folder seems to be more red than orange. Maybe we should not use the full Ubuntu orange, but a slight orange (like the area when clicking and selecting files) and not switch font color to white (but maybe a little bit darker).
- The green checkboxes with the white hook, the hook is too big and so is looking less like a hook.
- Are the icons in the top-panel on the right scaled? They look a little blurry (I’ll test that again on a native system).
- In the notification center, the close button for notifications is too heavy for me. I would prefer to just have a simple X (maybe with a slight bright back) to have a difference between closing windows and closing/dismissing elements in apps/programs.
Like always quite a list
Thanks again to all of you because the first milestone for me was to have everything up until Christmas! And the system already looks nice and stylish and still like Ubuntu. We gonna rock it
Thanks, Stefan
7 Likes
Honestly, I don’t see the need to honor Ambiance when Ambiance is still available and being maintained. Unity 8 was supposed to be something completely new and discarded a lot of Ambiance’s elements. I think it’s okay for the look and feel of this to be different the way Unity 8/Suru was going to be.
On the use of blue, how do you feel about limiting the use of the orange instead of replacing it entirely with the blue?Part of the reason why the orange was replaced with the blue is because it’s such a distracting color and people associate orange with a warning/an error. For some elements (like the volume slider and scale), the cool blue is much easier to look at as opposed to the bright orange which grabs attention for little reason.
Good point. How about a small orb like in this image?
Or maybe something like Unity 7’s launcher? (The dock transparency looks pretty nice in that image 
)
Can you post a screenshot? I don’t think I understand.
I tried, but I don’t think that can be fixed, unfortunately. I looked at some other themes and Ambiance has the same problem. With Adwaita the folders look green instead so I suppose it could be worse.
I notice it too now that you mention it. I think it might have to do with the “font-size: 95%” rule, I’ll get rid of it.
A lot of changes were made to buttons on the SASS side of things but they haven’t been merged yet. It should fix some problems like the headerbar buttons being too dark/light and the window buttons having a light background when not in focus. Thanks for the awesome feedback.
6 Likes
I agree with that, but at the same time, we can use it as a solid base to discuss any change.
consider that the orange is a “selected_bg_colors”, for items that are not selected using orange might be distracting (and as @godlyranchdressing said, orange takes lot of attention)
Yes, in my PR I used an indicator a little thinner, but I think we can make it even better. The point is always to consider all the screen sizes.
2 Likes
FYI: this is called a “squircle”.
This is probably because you still have the original Ubuntu stylesheet for the dock, I haven’t found a good way to fix that for the moment, I’ll add instructions to the docs for how to fix it manually. If anybody has any ideas as to how we can fix this in a proper way, let me know!
PS: I just found this Suru icon design guide Sam Hewitt wrote. I’m posting it here mainly because I don’t want to lose the link. I intend on creating a web page with a collection of all the Suru design stuff somewhere in the future.
3 Likes
Happy holidays everyone 
I’ve spent some time investigating what works best for window controls. I’ve made a few rough HTML mockups. I’m pretty sure I could remove most of these, but I’ll post them all below. Please ignore the rest of the image as the focus here was on the min, max and close buttons.
I’ve added a public poll, just to see if we’re on the same page.
4 Likes
Great work! I’m totally in favor of 4 or 6.
My ideal result would be to have widget “invisible” until needed.
3 Likes
Hey there, just before the year ends, an update on my part:
After setting up a new VM the Dock is still very transparent. IMO needs less transparency to feel like a solid Dock and work in every circumstance, with every wallpaper, and to be more clear.
For now, honestly, the blue is just present with the volume and this is not making sense entirely. There is no concept and the blue just breaks out from the orange only accents. Compressing / copy files in “Files” is when clicked on the progress clock presented by a green bar. Downloading in Firefox is also orange. So for now I’m still not convinced by a single blue bar. And for testing: the blue should fit the orange, like the base #1C6595 and lighter variations like #37759D and #5A92B6 and darker variations like #0E4E78 and #053C5F. Overall orange and blue are working fine together, it’s just confusing if the only visible blue in the whole system is the volume bar.
Yeah, I think this can work - let’s try it if you like! It is still orange, but less screaming for attention. If it is still too much, I also would go with just white/Unity 7 style. Maybe we need to take care of the possibility that with a round logo there is no square border/background and with a lot of open apps, the logo needs to be visually separated.
Also, the overlay on the button when clicked looks weird - is that a dock thing?
The actual window controls in communitheme works nice for me, maybe they can take more space for clicking and need a little adjusting. I also don’t see a white ring needed, this jumps out of style.
–
Buttons
They still make me think because we are still not right there.
IMHO: We’re mixing styles and concepts a little.
First, what I like is:
Like said before, they maybe need a little more contrast/darker border, but they look nice, simple, and you know whats going on - like clickable, clicked and hover as a grey color. Non-clickable buttons appear flat, this is also fine with me.
Buttons on a dark background are very different, they need to work in the same way, but also needs to be different in style.
First the flat ones:
You see, the flat buttons are borderless, but on hover they having a border like none-flat buttons. I think, they only need to have a hover color, not changing the type of button from flat to a raised/hover button. Also for now it looks not that nice with the dark border. When clicked, the buttons get’s an inner-shadow and this is fine for me, it gives us a nice and easy visual feedback - maybe the inner-shadow could be less dark, but that’s it.
So: I would suggest getting rid of the hover border to stay flat until clicked.
Next, the raised/hover buttons on dark and breadcrumbs:
This is hard to find a styling line. Now it is more a mixture of buttons and concepts.
- The first thing you look at, is the less important - the non-clickable buttons. Also like said before, we should make the non-clickable darker and the clickable more bright to bring attention and meaning where it needs to be. Here we are misleading the focus.
- We have two kinds of feedbacks on clicked buttons - inner-shadow and the orange line. I guess when having the orange line, it is not necessary to give the button an inner-shadow. When having a lot of buttons like here, it immediately starts to look nervous and crowded, also because the “Home” button is elevated quite next to the lowered button. Let’s keep it simple and stylish.
We have that kind of buttons also in the software center/wallpaper and when having categories. So maybe let’s not think of them like typical buttons, but categories. Make them flat with a background, an orange line and a simple hover grey. So for now, just remove the inner-shadow for testing.
The other way is to make them flat (if the orange line is not fitting to the rest of the system) and just work with the background grey and maybe if needed, an inner-shadow.
The settings, lock & off buttons:
They follow the flat buttons now, like I like them to be. Maybe we can add a background grey to make them more noticeable, but at least the hover grey needs to be brighter.
–
Some more:
- When in “Files” and change the view from grid to list, the list types/categories header font needs to be a little darker to be better readable
- Can we try to make the window header smaller to fit the rest of the system? Like in Firefox, the header is bigger and bolder than for example the top panel font.
–
So, thanks to all who contribute and I wish you all a good start to the new year!
It’s gonna be a LTS year^^
6 Likes
Hey, first of all, I’d like to say that your analysis is always very detailed and full of examples, so thank you for this work.
For now, honestly, the blue is just present with the volume and this is not making sense entirely.
That’s maybe because most of the changes are in the gtk theme, while my PR applied only to gnome-shell (and Firefox is gtk2, if I’m not wrong). @godlyranchdressing’s changes on the gtk3 theme have been merged in the very last days. Said that, I’d like a separation between selected widgets and indicators, but no problem to get rid of this blue entirely if it’s a common desire.
You see, the flat buttons are borderless, but on hover they having a border like none-flat buttons. I think, they only need to have a hover color, not changing the type of button from flat to a raised/hover button.
I agree that the dark border looks a bit weird now, but I need to see a borderless hover button before being sure that’s better. I’ll try something asap and post the result.
the raised/hover buttons on dark and breadcrumbs […]
I agree with the idea of a mixed style now. We might need some more mockups to look at and decide what is better. I’m not a designer, but I’d like to try myself directly in css, so I add this to my todo list as well.
So, thanks to all who contribute and I wish you all a good start to the new year!
Quote that! Good new Year’s Eve to everyone!
4 Likes
Hi all!
Here I show three different hover effects for headerbar flag buttons and I’d like to know your preferences
current version
borderless (as suggested by @luxamman)
a little variation with border color 5% ligher than current used (ubuntu bg color), that is #3D3A3A vs #302E2E
- current hover
- borderless hover
- boder #3d3a3a (5% lighter than ubuntu_bg_color)
0 voters
9 Likes
Damn! You’re all doing an awesome job 
A few comments on a screenshot from today:
@luxamman already adressed the issue here.
You’re right! The circle X makes it easy to distinguish from other OS’es and I think that’s essential, but I would like to see more space and a larger clickable area highlighted on hover as @merlijn-sebrechts mentioned .
+1
7 Likes