Page MenuHomePhabricator

UI/UX redesign
OpenPublic

Tags
None
Tokens
"100" token, awarded by Shizhao."Love" token, awarded by Ranjithsiji."The World Burns" token, awarded by Nomadash.
Authored By
Nomadash, Nov 27 2018

Mock History

Current Revision11

Mock Description

Wikipedia Interaction Web Redesign in two color Scheme for day and night.

Font: Source Sans Pro & Libre Baskerville

Main Focus: Readability, layout, and interaction

You can view the animated prototype here:
http://dribbble.com/shots/5603289-Wikipedia-Redesign
http://uplabs.com/posts/wikipedia-interaction-redesign

Event Timeline

When will this hypothetical redesign go live?

Ahecht added a subscriber: Ahecht.EditedDec 20 2018, 3:44 PM

Only using 40% of the page width for the actual article text seems quite low, and makes the page look cluttered (despite all the whitespace). Vector, by comparison, uses around 80%.

The squeezing of text will only get worse on pages with larger in-line images, strings of sequential in-line images, both right- and left-aligned images, or tables. In fact, pages with wider tables may be broken entirely since you've cut the width of the body text in half.

At the very least, shrink the left bar to 2/3 or so it's current size, and reduce the margin and padding around the article body.

@Agusbou2015 not sure. We first have to get the community approval for the design mockup maybe then we might be able to deploy it. It might take time.

@Ahecht, Thanks for the inputs. I really appreciate it. The design proposal is designed for 1440 px width devices. Currently, the main container size for reading the actual text is 700px which is usually is the maximum length for having a friendly content reader on the website. If you pay attention to most blogs (i.e. Medium) or news they are leaving the content width to a maximum of 700px and centering the container to the middle. The reason for that is because users can easily scroll down while reading the article. It is the most common use these days by most of the big companies.

I am thinking to have 4 design concepts. W = Width

  1. XLarge (W 1440px), - Main Content (W ~%50) (W 700px)
  2. Large size (W 920p), - Main Content (W ~%60) (W 590px)
  3. Medium Size (W 750px) - Main Content (W ~80%) (W 550px)
  4. Small (W 420 px) - Main Content (W ~90%) (W 390 px)

What do you think of dropping/moving/restructuring the left side menu altogether? I don't know about you but I never used the left side menu bar in my entire use of Wikipedia. I maybe come up with a better UX practice for it.

takidelfin added inline comment(s).Dec 26 2018, 9:08 PM
Inline Comments

Maybe it could be hidden by default and show only a ~80px wide bar with icons representing particular link and expand (after hovering) to the current width (with an icon on the left side of a given link)?

Az1568 added a subscriber: Az1568.Jan 2 2019, 9:40 PM
Paladox added a subscriber: Paladox.Jan 2 2019, 9:52 PM
Paladox added inline comment(s).Jan 2 2019, 9:58 PM
Inline Comments

Maybe create a drop down that way things won't get so stuffy up here.

(also add icons)

corey added a subscriber: corey.Jan 6 2019, 7:01 AM
This comment was removed by Agusbou2015.

Wow this is fantastic. When we get this wikipedia live. Any timeline ?