Page MenuHomePhabricator

Make Vector more minimalistic
Closed, DeclinedPublic

Description

Vector is created at the height of Skeuomorphism UI design, as year passed, it has began to look old, since trends has came to favor a more minimalistic design.
I have changed Vector a little to make it look better.

Screenshot

xuz0wik.png (872×1 px, 367 KB)

Pull request
https://gerrit.wikimedia.org/r/#/c/358229/

Make Vector look more minimalistic

Problem: Vector begin to look old because UI trends has came to favor flat deigsn.
Changes:

  1. Removes head-nav button images
  2. Redefine borders between sidebar, head-nav and content; And background-colors.
  3. Split body into new divs #body-left, #body-right. The left one contains sidebar,the right one contains head navigations and content.
  4. Replace position: absolute with normal flow when possible.

Event Timeline

Reedy renamed this task from Make Vector more minimalistic. to Make Vector more minimalistic.Jun 11 2017, 1:23 AM
Reedy subscribed.

I'd highly suggest you make it into a more formal pull request on gerrit.

And potentially post to the mailing lists too

Nemo_bis subscribed.

Screenshot
http://i.imgur.com/xuz0wik.png

Please upload screenshots locally: https://phabricator.wikimedia.org/file/upload/

I fail to see how this is more "minimalistic", since the interface elements are the same. Actually, you add more stuff, i.e. three rectangles in which to divide the interface.

For clarity, should this report be re-titled to "Make Vector clickable elements not have borders or separations"? Note that the tabs' text tends to get quite mixed up in languages where the strings are long and/or in devices where there is less space.

Change 358229 had a related patch set uploaded (by LegoFan4000; owner: Golopotw):
[mediawiki/skins/Vector@master] Make Vector look more minimalistic

https://gerrit.wikimedia.org/r/358229

I don't think this patch can be merged. This is a very large change to the design of the skin. I would recommend that you turn this into a new skin, based on Vector (http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/). I think users of existing wikis (including Wikimedia wikis', but not only) would be unhappy to see the interface changed suddenly after updating the skin.

Thanks for your advice, I am finding a good way to refactor every "Vector" into a new name, preferably automatically so that changes can be pulled easily.

It's possible that changes can be made to Vector in very small increments, but each one needs to be a separate commit and bug, invite lots of feedback and be thoroughly tested. There is a lot of CSS code in extensions, gadgets and per-wiki CSS configs that make assumptions about how Vector currently looks, so even making small changes to the toolbar or sidebar could result in some very broken behaviour.