Design Mockups (Updates Designer only)

Nautilus_V24Nov17 - (Pictures and Videos show the hover state for rows)

Nautilus_V25Nov17 - Light headerbar version of the above. Mimicking @wfpaisa’s raised buttons.

Not-so-flat-button

Widget Factory_V25Nov17

6 Likes

Files 26Nov17_Tabs

Giving tabs a try (but they ended up being too tall). See the hover effect here: https://youtu.be/reIYDywqAKA

11 Likes

Overall more focus on a basic theme and on what is actually possible, not on changing lot of stuff/details to get a whole new look.
Sleek and defined with a good overview with a bit of a “futuristic design” without getting lost in transparency. The rendering of fonts and lines are not good, unfortunately. Also (like proposed) changed the dark grey to #252525 to see how it works.

Login V27Nov17

  • Points pattern and a white layer over background (like discussed and reinterpreted)
  • Focus on login
  • More rounded window corners
  • Transparent color on the button to focus on the next logic step, but not to judge what is right or wrong

Main Desktop V27Nov17

  • Bar / Dock transparency reduced to 0.98 because of the overlapping windows

Files Window V27Nov17

  • Breadcrumbs smaller and simplified, less overwhelming, no space-consuming icons
  • Combined (from other mockups) window buttons - min/max without border, close button in flat Ubuntu style
  • Back and forward buttons without border
  • Search, list and menu buttons with border, it was too loose/unclear without
  • More rounded window corners
  • Transparency reduced to 0.98 because of the overlapping windows

Files Windows Overlap Test V27Nov17

  • Transparency reduced to 0.98 because of the overlapping windows
  • Windows behind windows become a little brighter, more transparency would look too confusing with many windows but needs adjustment (until Gnome implements a blur effect)

Files maximized Window V27Nov17

  • No window / dock / bar transparency
  • Still shadow to separate top-bar from window

Terminal & Calc Test V27Nov17

  • Based on the actual app design
  • Calc button colors for better overview
  • Terminal in Ubuntu terminal background-color (a terminal must be dark :upside_down_face: )

5 Likes

Based on your feedback, I updated the mockup from yesterday (V27Nov17) for a new feedback round.

Changes:

  • Dark grey changed to #2e2e2e (madsrh) from #252525
  • Unfocused Window now #414040 (madsrh) instead #3f4140
  • Different windows min/max/close buttons based on United theme (madsrh)
  • No round corners on the bottom anymore (because overlapping elements problems)
  • Less round corners on the top
  • Window boarders reduced from 2px to 1px

Login V29Nov17

  • didrocks pointed out, that we can not change the background for the screen (“This was the reason we selected this purple color + noise in 17.10”) so maybe we can use (css?) to create something fitting to the design based on the dots Ubuntu was using? Please give it a try! I would like it to be not too dark like here, but the background should also be not too present.

Test with background texture (https://www.transparenttextures.com/light-sketch.html)

Main Desktop V28Nov17

Files Window V28Nov17

  • Back/forward buttons with no boarder again
  • Breadcrumbs change to fit the design with a slight background color for active elements like on the dock (wfpaisa, godlyranchdressing, and madsrh)
  • Changed content background colors to Ubuntu default

Files Windows Overlap Test V28Nov17

Files maximized Window V28Nov17

Terminal & Calc Test V28Nov17

Waiting for your feedback and change proposals! :wink:
Please compare also the previous version.

4 Likes

Path Bar Button Focus States V1 - A
path-bar

Path Bar Button Focus States V1 - B (normal buttons)
path-bar-2

6 Likes

I created some example backgrounds with https://www.transparenttextures.com/ proposed from @godlyranchdressing and I guess we will find something that will fit the rest of the design :slight_smile:
Based on mid Canonical aubergine

Login Back Texture Test V29Nov17

Light Sketch

Shattered

Type

White Wall

Bright Squares

2 Likes

Something drastic, but also simple. Solid background with a gradient image overlaid.

Solid Login Screen - A Original #2c001el

Solid Login Screen - B Using #252525

6 Likes

GDM30Nov17

Aubergine

Solid gray

Dots

9 Likes

I like the idea of @godlyranchdressing with a very simple way of presenting the login screen, also @madsrh login looks nice, but the white window is working against the dark theme we are heading for.
And for now we should not change the Gnome window arrangement, only theming.

I tried to test a kind of “focus” with layers:

  • Canonical and Ubuntu Colors
  • Brightness can be adjusted by layer
  • the dots get lost in the middle and so it seems a little like losing focus
  • the rendering of the gradient is not too good…

Layers from top:

  • dark layer to reduce overall brightness
  • gradient layer with colors in the middle and transparent on the sides to just reduce the dots shining throw
  • layer of white dots
  • layer of gradient from Ubuntu orange to Canonical aubergine


12 Likes

I found the following image from the Unity 8 source package:

I did some simple rotating and flipping and came out with this for the login screen:

Ideally the background color would be the original #2c001e, but the source files are all jpg/png so there’s no way to just overlay the image on top of a solid color and produce the same origami fold effect. Unless someone is willing to step up to reproducing the effect using svg :upside_down_face:

5 Likes

Today I would like to introduce an adapted design based on previous designs, but more oriented towards Ubuntu and the Suru icons, but overall too dark.

First, the flat design is much more represented, as it is given in the icons. We say goodbye to skeuomorphism and lot of font/icon shadows and say hello to free and flat structures. So we jump on the trend that prevails because people are now used to working with the computer and thus you do not have to design close to reality.

To enforce the flat design without using garish or Ubuntu atypical colors, the windows are a little brighter than before, which is closer to the actual Ubuntu window color. Simplification and overview, with Ubuntu typical elements. Surfaces and buttons defined by black transparencies - also in preparation for future design adaptations (blur!).

So it is a visible adaptation of Ubuntu, clearly differentiates visually from Gnome and makes use of current trends without changing the substructure of the Gnome system.

It’s not quite finished, but it could be a start and more of an overall experience with the given possibilities.

In addition, I have also created suitable elements and the dock dots now work like discussed with madsrh. Also, all black or grey colors have a little red tone as didrock mentioned like in previous versions (r+2 g b).

Login V04Dec17

Simple and clean, only a three point gradient as background

Main Desktop V04Dec17
Quite the same, only a bionic beaver has jumped on the desktop… just my interpretation :slight_smile:

Files Window / Max / Overlay V05Dec17
Files background colors updated and windows 0.99 alpha



Terminal, Calc and Elements Test V04Dec17
Including flat elements test on black / white and button behavior. Also, test for adaptation of the design when Gnome should adopt blur.

9 Likes

With a dark headerbar and light window contents, a transparent #353535 leads to too “noticeable” background elements so I decided to use #252525 for everything again.

Desktop_V9Dec17 - Dash and panel shadow. Ubuntu logo replaces launcher. Panel button font size is very slightly reduced and a font-weight of 450 is used.

Maximized_Window_V9Dec17 - Dash becomes opaque. Panel shadow disappears. With both the headerbar and panel being the same color it’s difficult to give the illusion of the panel appearing over the dock.

Popover_V9Dec17 - Replace the underline effect (I know the activities button’s underline not lining up with the dash can cause anxiety) with a lighter background color and a very slight box-shadow. Suru arrows replace the old calendar arrows. Popover menus use #181818 (Jet) with the same alpha value as the panel/headerbar (.95).

Shell focus states_V9Dec17 - Replaced the orange used in the active/pressed state with a light gray color (it’s actually the text color transparentized a little). The volume slider’s button can’t have a 3px radius to match the GTK one, unfortunately.

focus states

7 Likes

Can’t wait to test it :slight_smile:

Quick notes to the mockups:
Shadows and inner shadows are too strong and wide, also I’m very unsure about the logo. Maybe white only and not sure if the thought behind it is right. I did try the logo on the top panel instead of the arrow but also unsure because how the button works…
The font seems good, also the Popover looks good, I just don’t like the borders too much on the buttons and in the menu layers under the text (Shell focus states gif).
Maximized window was also a big point for me because it should (for me) not melt together with the top panel. That was also the reason why I kept the shadow and in the new mockups, I tried a lighter grey for the windows to have a better visual separation.
I also was using the blue color for testing from the Suru theme, but I changed it back to orange because it just doesn’t fit somehow…

–

New thoughts, new mockups:
Because the last version was way too dark I took a step back and thought “How can we modernize Ubuntu without losing the typical feel and look while having a system that works for millions of people?” That is a big responsibility. And it’s a little more conservative, unfortunately. So dark theme comes later.

The main thought was, that the dark/gray is good for a background/frame, but at the same time, the icons must have a surrounding to hold a certain contrast that does not make one’s eyes tired over time. So instead of dark, I was working now with light layers.


Yes, it does look like a modernized version of Ubuntu. And more conservative. But the eyes can find everything fast.


Maximized windows separate from the top, the colors are maybe not perfect and the little Ubuntu logo as a test in the right corner.

And at last, I was testing the Suru elements:


They look neat and nice and they fit the design, only the blue that they used just does not work for me and don’t fit to the rest of the system (and is more like Gnome^^). I want them to work on dark and light background, so they have sometimes a little shadow or a certain grey - but this is not finished yet.

7 Likes

I’ll adjust. I was actually trying to channel Unity 7 which also had a very prominent panel shadow (that disappeared when a window was maximized). How about the following?

box-shadow: 0 4px 8px rgba(0,0,0,0.75);

The dash has the same values, just with inset appended.

I made the top panel darker (#181818) and the headerbar lighter (#303030. I think anything above that would require an opaque headerbar).

shadow

Echoing your worries on too much contrast, I experimented with some different colors taken from this image.

What’s wrong with the borders? Are they too light/too dark? Also, I think that the show apps icon is the only reasonable place to have the Ubuntu logo. Anywhere else and we should just not include it at all.

The different widgets look fantastic! Though the sidebar border is still too thick for my taste.

3 Likes

It looks pretty slick.

Screenshot from 2017-12-09 22-06-02

Though this is a little awkward, I think.

Screenshot from 2017-12-09 22-06-10

6 Likes

Already looks better, I was using a 0 2px 5px with 0.50 opaque, because on light wallpapers it was too present.
And I would like to have an opaque top panel (was using 0.80 with 37,35,35) and not too dark like Gnome. So the wallpaper shines a little thru which is nice and on dark wallpapers the panel does not just disappear in black. But maybe even 37,35,35 could be too dark, needs more testing.

The color combinations work for me, nice and clean! On your reference picture you can also find the buttons I prefer, I try to get rid of the borders around buttons to fit the overall design and work with layers and shadows instead.

In the case of the breadcrumbs, it’s getting too dark and the background layer of “Working” will melt together with the background on cheap monitors. Like said on the dark background we have to use light layers to separate and hold the contrast. If it is not working at all, I would try a middle/light grey for the border or a soft shadow if possible.

I already know that they discussed the Ubuntu logo instead of the “Activities” text, but they said that this not a good idea because of the official documentation and Ubuntu/Gnome help documents/website. I’m also not sure how it will look and feel… did you try to include it next to the right corner icons instead of the on/off and arrow icons?

And what about the widgets and elements: do you build them or can I build them and send it to you to try them?

Thanks, good feeling to make progress here :slight_smile:

I like the darker panel more. The idea behind a plain black panel for Adwaita is that it blends into the monitor’s bezels. The top panel should be something thats fades into the background when you’re not interacting with it. I don’t think it needs too much highlighting.

In the following mockups, I removed the panel shadow since it made the titlebar of maximized programs look too blurry and replaced it with a black border ( which is more obvious depending on the wallpaper or when a window is maximized). I kept the panel at #181818 with an alpha value of .95. The dash is the same color but the alpha value is 0.90 instead.

When a window is maximized the dash stays the same and the panel becomes opaque. You can see the black border separating the headerbar from the panel. I used a box-shadow here as a border would make the panel 1px taller.

I find that without the borders and with a lower contrast background (your example here uses a much lighter background color) that the button blends into the background too much. The buttons also look much darker than in your example. I’ll play around with a lighter color because while I do get your worries about too high contrast I also don’t want things to look dingy.

Good point.

The top right corner only shows system and app indicators, there’s no way to insert the Ubuntu logo there. In contrast to the wifi, bluetooth and other indicators it’ll just be a passive icon, too. It won’t be best place to put it.

3 Likes

A few days ago I did this mockup but didn’t have time to post it. I guess some of the elements that have been discussed in this thread by @godlyranchdressing and @luxamman havn’t been taken into consideration.

+1 for a darker theme (dark headerbar but light window content) like Ambiance which add to the “this looks like Ubuntu” feeling.

I know the breadcrumb-thing isn’t working out :roll_eyes:

I really like Aarons work on Desktop_V9Dec17

Desktop_11Dec17

And some comments:

6 Likes

hey @madsrh

just a quick respond from me about the mockup:

  • I know exactly what you mean with the thickness of the icons, but I have to say the work in a real system much better than in the mockups (guess the better rendering). If they are too thin in some places, I thought we take the Suru icons and just make them a little thicker - so they still fit the rest of the design.
  • The window controls are using way too much space for my taste. The idea with the space around to have a bigger click space is good, but making them a square is not only taking too much space in the width but also looking too much out of space for me.
  • Well, the round corners on the bottom is not bothering me too much, if it is possible without having to adjust every single app, it’s fine with me!
  • Good point about the shadows on unfocused windows, I would give it a try!
  • Heavy toggles - yeah, the ones used at the moment are big. I have the Suru toggles in three different sizes in the mockups, maybe we can use the mid and min size only.

Stefan

1 Like

+1 Right, I would prefer the Suru style too.

Using too much space? There’s plenty of space to take :upside_down_face: Anyway, I think the Ambiance buttons are too close. There’s nothing more annoying than hitting the close button when you were aming for the max button. I’ve been checking out the competition too :wink: and M$ uses a 3:2 aspect ratio. Also check @merlijn-sebrechts comment below:

I did a poor job explaining myself there - it’s not the actual size, but how they feel. The lever doesn’t have to fill half the button (looks less bulky) and by giving the toggle a border it’s easier to distinguish it from the background. In the image below the white lever bleends into the light gray background.

image

5 Likes