Ubiquity improvements

[Feichtmeier]

@madsrh Mock-ups:

Basic ideas:

• [ ] make the titlebar also purple
• [x] make it purple with an image or a gradient
• [x] don't use blue progress dots, use white progress dots
• [x] use white text

---

Progress so far:

[didrocks]

I find the aubergine to be a little bit garish (a little bit with the new proposed gradient for gdm). Anyway to revisit with darker colors? (Maybe it's only the image rendering doing this?)

[madsrh]

I find the aubergine to be a little bit garish...

If so @didrocks, I think it's because that a huge part of the screen is white and only a bit is purple in the Canonical design (which I really like). So yes, this one might feel too garish because of that ratio 🤷‍♂️

...Anyway to revisit with darker colors?

Well, IMHO the current is too dark / heavy / ? The dark top and bottom just seems unnecessary to me - look at PopOS. I would like to brighten it up. Perhaps something like this:

Or plain with very minimal use of purple:

[Feichtmeier]

This one is also a good idea (but I like the purple, too) but from our design logic we used so far, the progress dots should not be green in the progress. Maybe when all are full.

[eaglersdeveloper]

@Feichtmeier, looks too boring.

[Feichtmeier]

@eaglersdeveloper I just linked @madsrh screenshot :D yes - I prefer the purple one, too!

[madsrh]

but from our design logic we used so far, the progress dots should not be green in the progress.

I know, I just didn't want too many colors so I cheated a bit, but you're right.

[eaglersdeveloper]

Cool! But there are empty places.

[madsrh]

@eaglersdeveloper I guess something like below would be better, but I don't know if moving anything is possible just by theming alone - @Feichtmeier? As mentioned earlier, I deliberately didn't move anything - just working with the colors here.

[Feichtmeier]

Depends how the code did the layout. But I think removing the lower area is not possible.

I would still go for the purple up and down. @didrocks the electron installer mock-up shows a very similar design. The screenshot with the gradient I posted was just the cheap replacement for the image Mads used in his mock-up.

[clobrano]

Probably the gradient becomes too bright in fact. What about no gradient? too dull?

[Feichtmeier]

No the gradient was just crap sorry, I didn't even upload it to the branch =]

This one is the current branch: https://user-images.githubusercontent.com/15329494/43423706-6423d180-944d-11e8-8ea2-51d76c3714e7.jpg

[eaglersdeveloper]

What about grey bottom?

[Feichtmeier]

@eaglersdeveloper I prefer a purple bottom =D Edit: okay, let's try gray. What gray is that @eaglersdeveloper ? Fixed some dialog strangeness (no border, no padding):

[matthewpaulthomas]

👋 Hi, Ubiquity designer here. It’s great to see people interested in improving the visual design!

I find the aubergine to be a little bit garish

I think it's because that a huge part of the screen is white and only a bit is purple in the Canonical design

I think how much bright colors are appropriate for a UI depends on:

• how small it is (for example, bikesheds are often colorful, but skyscrapers are usually grey)
• how lighthearted the situation is, or people want it to be (for example, picnic cutlery is often colorful, dining room cutlery usually isn’t)
• how often you’ll be using it (less important than the other two, but you can get tired of garish things).

Phone apps are often brightly-colored partly to help you distinguish them (since you don’t have title bars or always-visible app switchers), and partly because they’re small, lighthearted, and used for only a few seconds. But for a desktop operating system installer, none of that applies: you can tell what app it is from the title bar, it’s much larger than a phone screen, it’s Serious Business, and you’ll be staring at it for several minutes.

but from our design logic we used so far, the progress dots should not be green in the progress

Cool! But there are empty places.

I don't know if moving anything is possible just by theming alone

Those dots are not in the design spec, and I don’t think they should exist. Regardless of how they’re colored, they look like something you have to wait for. So if you’re happy to dive into the code, I would just get rid of them.

[madsrh]

Thank you @matthewpaulthomas

Phone apps are often brightly-colored partly to help you distinguish them..

I wasn't referring to phone apps in general, but specifically this Ubuntu installer:

it’s much larger than a phone screen...

To be fair, I would say that the installer window is (in some cases) the size of a tablet, but I get your point(s):

I understand that you don't think the all purple idea is a good choice - and I agree that it's a bit too much - but what about the less purple (without the dots), or almost no purple (without the dots) or just keep the old design? 🤷‍♂️

I'm not asking you to vote on a design (again), but just share which idea you think would fit Ubiquity best 😉

[Feichtmeier]

This would be the current ubiquity without style changes (apart from the dialogue fixing, which is quiet a no-brainer).

I can not say that it looks bad, since it fully consists of elements we already styled globally, but why I prefer the purple one, is that it is something special, something more than just "another dialogue". Same thing for the login screen and the boot screen. It makes somehow stands that they use purple, as we only use purple for "special" things. I would really be sad to see mads initial idea with full purple go

[matthewpaulthomas]

I wasn't referring to phone apps in general, but specifically this Ubuntu installer

Ok, but that was different from Ubiquity in three important ways:

• It wasn’t actually an installer: it assumed that Ubuntu Touch was already installed on the device. This meant you would have spent much less time using it, reducing garishness. (Specifically, there was an extra “Insert SIM” step, but no “Try or Install”, “Keyboard layout”, “Updates and other software”, “Turn Off Secure Boot”, “Installation type”, “Allocate disk space”, or “Where are you?” steps. As far as I can tell, my former colleagues never spelled out what would happen to those choices.)
• It assumed that this was a single-user device (no “Who are you?” step), further shortening the time you’d use it.
• It was mocked up as a full-screen app (without a title bar), so no risk of clashing with a title bar or surrounding UI, whereas Ubiquity is deliberately not full-screen (see discussion from 2005).

All of those made colorfulness more reasonable.

I understand that you don't think the all purple idea is a good choice - and I agree that it's a bit too much - but what about the less purple (without the dots), or almost no purple (without the dots) or just keep the old design?

The current design has too much black for my taste (though removing the progress indicator area would help a lot). And even if you think it’s about right, purple is brighter than black, which to me suggests there should be less of it.

But the only option that has less purple than the previous black — out of those three — just makes the headings purple on grey, which looks a bit arbitrary.

why I prefer the purple one, is that it is something special, something more than just "another dialogue"

That’s fair. But there are subtler ways of using purple, for example:

• only for a divider line between the heading and the contents
• a lighter tint, or an origami pattern using lighter tints
• purple headings on a white background, rather than a grey background.

It would be good to get rid of the dotted pattern, too — we’ve phased out dots elsewhere since 2013 or so.

[madsrh]

there are subtler ways of using purple, for example:

• only for a divider line between the heading and the contents
• purple headings on a white background, rather than a grey background.

I like the white background in the top here: It looks light and fresh.

@Feichtmeier Is there a fixed window height or can we simply cut off the bottom where the progress dots are atm and have a different height for the slideshow part? I know this will involve someone editing the code.

For all changes we have to keep downstream distros in mind!

And then for the slideshow, use this one:

[Feichtmeier]

Removing the bottom panel is possible with a big negative margin. But this is applied to all views. You cant remove it for 1 and then add it for the others.

The gradient border is not possible neither :( Sorry I cant came back with better news

[Feichtmeier]

Okay guys since the gradient border is not possible and the removal of the bottom section would mean that there is no progress bar when the installation starts, I'd say let's go with this one:

@madsrh @matthewpaulthomas everything else would mean to change the code of ubiquity and I'd say this is a bit out of this project.

[madsrh]

It's better but this one still feels too garish to me @Feichtmeier - sorry. I tried a lot of options and IMO we should just surrender and take the easy way, which in this case is finetune the current design 😢 We can always teamup with a Python developer for 19.04, if we want to revisit this 📅

I'm still in doubt about the color of the dots. I know that blue fits with the theme, but it looks really weird here. Can we go with white? How much can we style these progress indicators besides the color?

How about the slideshow - is Canonical planning to update that? It would need new screenshots too.

[matthewpaulthomas]

everything else would mean to change the code of ubiquity and I'd say this is a bit out of this project.

Yes, I think most things that would improve Ubiquity’s appearance involve digging into the code. For example, the “You may wish to read the release notes” area looks, well, desolate. And it’s weird that “Back” is the same width as “Quit” (which shouldn’t even exist, anyway) rather than being the same width as “Continue”.

But is it really not possible to give the header area and footer area different styles without touching the code? (For example, purple text on white for the header, dark grey on light grey for the footer?)

How about the slideshow - is Canonical planning to update that? It would need new screenshots too.

That is certainly something anyone could contribute, without being a Python programmer — they’re just Gimp files.

[Feichtmeier]

But is it really not possible to give the header area and footer area different styles without touching the code? (For example, purple text on white for the header, dark grey on light grey for the footer?)

Totally possible. Everything that is colour is possible and a little margin here and there like I did to the dialogue.

@matthewpaulthomas Could you make another mock-up with color only chabges?

[Feichtmeier]

Can we go with white? How much can we style these progress indicators besides the color?

I need to take a look but maybe they can be tweaked with border radius

[Feichtmeier]

I tried the purple fonts and the light bg:

---

That's just too much whitespace. And since removing the bottom element is not a good idea as long as the last ("installing") step includes it's installing-progressbar inside that element, we could use the headerbar color for the bottom:

Or with a border:

[madsrh]

...we could use the headerbar color for the bottom

...purple headings on a white background, rather than a grey background.

[Feichtmeier]

Updated the PR with the last screenshots but without the pruple line bottom.

The white heading above the gray middle looks a bit too stripy.

[clobrano]

As written by mistake in the PR, I like purple gradient, however it might clash with usual wallpaper picture like the one below

[madsrh]

⚠️ very rude mockups ahead!

Good point @clobrano 👍

I know that we can redesign the slideshow part too, but again isn't that's out of scope? So, IMO there are some options (that work for the full colored background and the text based wizard):

1. White/light top and bottom
2. Headerbar colored top and bottom
3. Purple top and bottom
4. Dark purple top and bottom

1.

When considering that wallpaper background, my earlier favorite for the wizard part with white header would look really bad on that slide. I think it looks disconnected somehow 🗑

2.

Here using the headerbar color for top and bottom like we saw in @Feichtmeier post

3.

This one is like the initial mockup (yeah, the garish ones 😉 ) except for the headerbar.

4.

This is almost what @Feichtmeier tried here, but this one is slightly darker. It keeps the dark top and bottom like option 2, but adds a bit of color 🎨

[Feichtmeier]

Valid argument with that slide show. I vote for 2. i.e. current one BUT with the "new" transparent blue dots instead of the gray empty ones :)

[clobrano]

I agree with @Feichtmeier, but I'd like to see how the "origami" shadows work there

[Feichtmeier]

I can push that when I revert back to black. What box shadow did you use

[madsrh]

@matthewpaulthomas

That is certainly something anyone could contribute, without being a Python programmer — they’re just Gimp files.

I would love to, but could you address these questions:

• How / when can I get the 18.10 wallpaper?
• Who decides or creates the text for these (or is this not something we can change because of translation e.g.)?
• Do I need to work with Launchpad to contribute 😩 ?

Thanks!

[madsrh]

@matthewpaulthomas @didrocks @8none1

The daily build is STILL using the old screenshots (Ambiance theme). Is anybody at Canonical working on this? We're kind of in the dark here 🤷‍♂️ We would love to help!

[Feichtmeier]

Also, the icons are old. Rhythmbox has a new suru icon, libre office has new icons. And I don't know if there aren't any better apps which we could promote in that screenshots. Maybe we can also talk about this? :)

[8none1]

The slideshow won't get updated until after UI freeze at the earliest.

If you want to make a start and capture some similar screenshots, I can put them together as soon as UI freeze is past.

[madsrh]

If you want to make a start and capture some similar screenshots,

I've put everything (that I have so far) together @8none1

Two ideas: light or dark

I'll have to retake most of the screenshots, because I don't want the image to be clipped 😞 If you look here, you can see what I mean in the Software Center, Rhythmbox and Customize slides.

We also have to wait for the new wallpapers which won't be announced until the 18. oct.

One last question: In the supported software list we include Flash. Isn't that a bit outdated as we approach 2019? 🤷‍♂️

[Feichtmeier]

+1 to remove "flash". It is pretty much dead an removed out of browsers and often considered to be a security risk :D

[madsrh]

@8none1 Any update on this?

I came across this one and was wondering if you know who this task is assigned to?

I'm happy to upload the files to Github, but Launchpad is... out of my comfort zone 😉

[8none1]

Slideshow updates are being tracked here: https://bugs.launchpad.net/ubuntu/+source/ubiquity-slideshow-ubuntu/+bug/1794822

(I've done the screenshots now, I just need to edit them and push a branch)

[Feichtmeier]

I think there were more improvements in mads Two ideas: light or dark He fixed the links being orange on an orange wallpaper he removed this dot grid and added those nice translucent boxes instead Any chance to include this? I bet mads can provide links to his work via dropbox/gdrive

[madsrh]

I've uploaded the "light" version to Github here. Because of the symlinks, I had to change the folder structure a bit, but you can grab the images and CSS from there.

[Feichtmeier]

Isn't this fixed? @madsrh

[madsrh]

@Feichtmeier well, sort of. The title of this issue is kind of vauge but yes, the suru icons and the CSS colors (link and header) landed. I would still like to see:

• Flash removed from supported software list (doesn't make much sense in 2019)
• Background dots removed
• Screenshots with no wallpaper (window cut-out) like I did here or here

@8none1 What is the best way to move forward with this? A Launchpad bug + patch? Is this too low priority because of @didrocks work on the new installer?

I'll close this issue for now since the above changes isn't exclusively related to Yaru.

[8none1]

Flash - yeah, makes sense to remove it. Background dots / screenshots - we can change the style of those for disco and see how it looks.

But yeah, generally, I dont think we should invest too much time and energy in the slideshow. That said, these changes are pretty low impact. If you want to open a LP bug go ahead, and I will look at making these changes when I re do the slideshow for D.