Page MenuHomePhabricator

UI/UX redesign
OpenPublic

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

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?

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.

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

Inline Comments

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

(also add icons)

This comment was removed by Agusbou2015.

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

Wow, I love these fonts, and layout, and stuff! 🤩
Content maximum width decision seems very hot, because too much characterd in a row can easily lead the brain nuts. And persistent photo on the right - I mean it helps a lot to get in touch with what you read in the current tab!