Design Mockups (Updates Designer only)

Only updated mockups designs

1 Like

Desktop proposal V22Nov17
MainDesktopDark

Window test proposal V22Nov17
MainDesktop Window
MainDesktop Window

Window Full test proposal V22Nov17
MainDesktop WindowFull
MainDesktop WindowFull

Login test proposal V22Nov17
MainDesktop Login

7 Likes

GDM V22Nov17

idea_GDM

Files V22Nov17

Nautilus

12 Likes

Hi madsrh, It’s beautiful, but I think the blur in the list of files not it’s possible yet.

Files V22Nov17_LIGHT

Just trying a light idea for Nautilus.

MainDesktopDark-–-2

12 Likes

DESKTOP V22Nov17_LIGHT_ROUND_SOLID

MainDesktopLight

DESKTOP V22Nov17_LIGHT_ROUND_TRANSP

MainDesktopLight_trans

16 Likes

Nautilus_V22Nov17_A - higher contrast

A - Higher Contrast


Nautilus_V22Nov17_B - lower contrast

B - Lower Contrast

Nautilus_V22Nov17_C - light headerbar

C - Light Version

9 Likes

Files V23Nov17_DARK

MainDesktopDark4_

9 Likes

GDM V23Nov17_aubergine

idea_GDM_dot

GDM V23Nov17_white

idea_GDM_white_dot

12 Likes

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

mockup

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

light-headerbar

Not-so-flat-button

Widget Factory_V25Nov17
widget-factory

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

tabs3_

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

MainDesktop Login@2x

Main Desktop V27Nov17

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

MainDesktopDark@2x

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
    MainDesktop Window@2x

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)

MainDesktop Window – 1@2x

Files maximized Window V27Nov17

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

MainDesktop WindowFull@2x

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: )

MainDesktop Window Apps@2x

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)

MainDesktop Login@2x

Main Desktop V28Nov17
MainDesktopDark@2x

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

MainDesktop Window@2x

Files Windows Overlap Test V28Nov17

MainDesktop Window – 1@2x

Files maximized Window V28Nov17

MainDesktop WindowFull@2x

Terminal & Calc Test V28Nov17

MainDesktop Window Apps@2x

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
li1

Shattered
li2

Type
li3

White Wall
li4

Bright Squares
li5

2 Likes

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

Solid Login Screen - A Original #2c001el

lockscreen

Solid Login Screen - B Using #252525

login2

6 Likes

GDM30Nov17

Aubergine
idea_GDM_aubergine

Solid gray
idea_GDM1

Dots
idea_GDM2

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

MainDesktop Login@2x

2
MainDesktop Login@2x

12 Likes

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

dark_background

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

example

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

MainDesktop Login@2x

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

MainDesktopDark@2x

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

MainDesktop Window@2x
MainDesktop WindowFull@2x
MainDesktop Window – 1@2x

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.

MainDesktop Window Apps@2x

9 Likes