GDM V22Nov17
Files V22Nov17
Hi madsrh, It’s beautiful, but I think the blur in the list of files not it’s possible yet.
Nautilus_V22Nov17_A - higher contrast
Nautilus_V22Nov17_B - lower contrast
Nautilus_V22Nov17_C - light headerbar
Nautilus_V24Nov17 - (Pictures and Videos show the hover state for rows)
Nautilus_V25Nov17 - Light headerbar version of the above. Mimicking @wfpaisa’s raised buttons.
Widget Factory_V25Nov17
Files 26Nov17_Tabs
Giving tabs a try (but they ended up being too tall). See the hover effect here: https://youtu.be/reIYDywqAKA
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
Main Desktop V27Nov17
Files Window V27Nov17
Files Windows Overlap Test V27Nov17
Files maximized Window V27Nov17
Terminal & Calc Test V27Nov17
Based on your feedback, I updated the mockup from yesterday (V27Nov17) for a new feedback round.
Changes:
Login V29Nov17
Test with background texture (https://www.transparenttextures.com/light-sketch.html)
Main Desktop V28Nov17
Files Window V28Nov17
Files Windows Overlap Test V28Nov17
Files maximized Window V28Nov17
Terminal & Calc Test V28Nov17
Waiting for your feedback and change proposals!
Please compare also the previous version.
Path Bar Button Focus States V1 - A
Path Bar Button Focus States V1 - B (normal buttons)
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
Based on mid Canonical aubergine
Login Back Texture Test V29Nov17
Light Sketch
Shattered
Type
White Wall
Bright Squares
Something drastic, but also simple. Solid background with a gradient image overlaid.
Solid Login Screen - A Original #2c001el
Solid Login Screen - B Using #252525
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:
Layers from top:
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
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
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.
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.
Can’t wait to test it
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.
And at last, I was testing the Suru elements: