

Minimal Wikipedia redesign concept - haymills
http://wikipedia.moesalih.com/Hacker_news

======
exDM69
It's pretty but the lack of borders around boxes makes some articles hard to
follow. Look at this for example:
[http://wikipedia.moesalih.com/Hyperbolic_function](http://wikipedia.moesalih.com/Hyperbolic_function)

There are many people doing redesigns for websites and games, and they usually
end up making things prettier while not improving user experience or even
making it worse. So my humble request to everyone making these is to try to
address the usability issues a site might have, and don't concentrate too much
on the superficial look of the site.

~~~
1user1
That!

------
eanplatter
IDK, I think people tend to ignore the virtues of Wikipedia's design. It's
actually really well thought out. It may not be pretty, or hip, but as far as
utility goes it's hard to find a site that can beat it.

Think about how people use Wikipedia: scanning for one specific bit of
information. Normal users see 90% of the information on the page as un-useful,
why should meta info matter.

Overall, I think their biggest virtue is consistency, even though it's changed
over the years, a user generally knows where to find what she's looking for.
That's the purpose of good design, is it not?

------
DanBC
Disables zoom (iOS, Chrome).

Why do people do this? They are, even if they don't realize it, yelling "FUCK
YOU" to people like me.

------
interfacesketch
I hope I'm not hijacking this thread in any way by posting a link to my
Wikipedia redesign attempt. It's not actual code - just a visual mock-up. I
posted it a while ago to Hacker News but would love to hear feedback

[http://www.interfacesketch.com/wikipedia/](http://www.interfacesketch.com/wikipedia/)

~~~
D4AHNGM
Wow. I know it's a purely personal taste thing, but I think your redesign is
leagues ahead of OP's proposal. Your design keeps the informative,
interconnected aspect of Wikipedia's design and then cleans it up slightly and
makes it more readable, but does so in a way that won't alienate the average
user.

I might actually see if I can find the time to code up a preview of your
design and see how it handles 'in the wild', as such.

~~~
interfacesketch
Thanks very much! I wanted to keep all the existing features of an article
page rather than eliminate anything. I think it's possible to do this while
making the page feel a little less busy and cluttered.

------
MasterScrat
I will just leave this here, since a lot of the comments are basically echoing
Wikipedia's official stance on the subject:

[http://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesigns](http://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesigns)

------
gnu8
The large font looks ridiculous, why do you people keep doing that? If I
needed bigger letters on my screen I'd adjust the DPI on my display.

~~~
ToastyMallows
I'm going to have to second this. Why waste all of this screen real estate? I
zoomed it out to 67% on Chrome to make it look normal. Definitely one of my
biggest pet peeves about modern web UI.

------
LukeB_UK
From the "about" page[0]:

 _But it deserves a better and more delightful design. This is my vision of
how the reading experience should be like. Better typography, removed side
bar, reduced clutter, improved contrast and clarity, and more open space._

By removing these useful elements, it's actually made the general experience
of a web site worse. These things are needed in one form or another to make a
website usable as a site and not just a page.

[0]:
[http://wikipedia.moesalih.com/?about](http://wikipedia.moesalih.com/?about)

~~~
ykl
As with every other Wikipedia redesign proposal, linking to J. Thomas's
Wikipedia Redesign post is necessary:

[http://jgthms.com/wikipedia-redesign.html](http://jgthms.com/wikipedia-
redesign.html)

~~~
gone35
Nice. This should be a required reading for every "vision"-happy hipster
designer out there:

 _It works for me, in my context, on my screen, it should be fine, right?
Well, that 's not designing. That's cheating. You're skewing the content's
use, perverting its value._

This point is worth repeating: _design without a purpose is not design; it 's
onanism_. Anyone can go spend a weekend playing with photoshop for hours to
give free rein to their own "vision" and aesthetic prejudices, given enough
familiarity with the tool --in a way, not too different from shopping or
'pimping' a car or what not. But an altogether different challenge is to
design _for_ users, the vast majority of whom one will likely never even meet.
And that requires at the very least some empathy for the poor victims stuck
with one's shitty and arbitrary design choices long after one has moved on
check in hand --like _disabling zoom, hello!?!??_.

So when the OP glibly says in their manifesto[1]:

" _I_ love Wikipedia. It's awesome. But it deserves a better and more
delightful design. This is _my_ vision of how the reading experience should be
like. Better typography, removed side bar, reduced clutter, improved contrast
and clarity, and more open space."

I would respond:

1\. Ok, but try first put yourself in the shoes the hundreds of millions of
users who rely on wikipedia every day and their whole spectrum of use cases,
environments and needs; then

2\. try locate the totality of your own experience within that spectrum; and
then

3\. ask yourself to what extent your prior notions of delight, clarity,
typographic beauty, _etc_ might be highly conditioned by the peculiarities of
your own experience and environment; and

4\. to what extent such acquired "good design" intuitions are really the kind
of self-evident, plausibly generalizable ground truths about usability and
human interaction you feel it's worth pontificating about.

[1]
[http://wikipedia.moesalih.com/?about](http://wikipedia.moesalih.com/?about)

------
elsen
again?!

This is wikipedia mobile with a new typo isn't it?

[http://en.m.wikipedia.org/wiki/Hacker_news](http://en.m.wikipedia.org/wiki/Hacker_news)

~~~
mdolon
In terms of readability, I actually much rather prefer this one.

~~~
applekor
I like OP's typography better in most respects, but the mobile site's line
length is far more manageable.

------
jaysonelliot
Wikipedia redesigns are becoming the new Hello World.

~~~
glifchits
True... but this one actually implements the design, as opposed to the
photoshop mockups I normally see on some designer's blog

------
jimktrains2
The side bar on the full site provides useful links like citation and language
selection, as well as basic navigation.

How do I do that here?

------
roryokane
A copy of an email I sent to the designer, “A few notes about your Wikipedia
redesign”:

> … custom formatting on some wikipedia pages might not look right. If you see
> anything like that, let me know.

The formatting of highlighted code examples is not right. Sometimes there is
extra indentation at the beginning, and the syntax highlighting is always
missing. For example, compare [your Ruby (programming language) –
examples]([http://wikipedia.moesalih.com/Ruby_%28programming_language%2...](http://wikipedia.moesalih.com/Ruby_%28programming_language%29#Examples))
to [Wikipedia’s Ruby (programming language) –
examples]([http://en.wikipedia.org/wiki/Ruby_%28programming_language%29...](http://en.wikipedia.org/wiki/Ruby_%28programming_language%29#Examples)).
Also, the code example `puts"Give me a number"` is missing a space compared to
Wikipedia’s version.

There is too big a difference between the font sizes of normal text and of
code blocks. In the site, code blocks are at a readable font size while main
text is overly big, and when I zoom out to 80% to make the main text more
comfortable, code block text is now too small. Picture captions and infoboxes
also have this problem, to a lesser extent.

On [the about
page]([http://wikipedia.moesalih.com/?about](http://wikipedia.moesalih.com/?about)),
“email me” should be a link to “mailto:moe.salih@gmail.com”, so we don’t have
to go to your personal website and find the link in the footer.

------
1user1
No, not another follower of "things are difficult, let's make them simple,
modern and nice" camp. Will people learn that removing stuff from the product
doesn't make it simple, but simplistic? Removing features (changing languages,
wikimedia/wikiquote links) is not an improvement.

Sure, the font typeface is nice, and much better than original but that's
about it.

Why is the text so damn huge? I know how to use zoom, thank you very much.
Actually, you even broke that - take a look at timeline image of
[http://wikipedia.moesalih.com/Hanibal](http://wikipedia.moesalih.com/Hanibal)
\- the picture text is a tiny compared to the gigantic text - I can zoom in,
but then the text becomes even bigger.

A lot of whitespace and removing virtually all the colors makes the page look
very sterile. Remove scrollbar, make the links indistinguishable from text and
you have a Metro/Modern(R)(TM) app. I still wonder how much brain damage the
designer of that style suffers from...

No visited link indication? Is that meant to be some kind of a joke?

Obviously in some designers' minds (including yours) cleaner = better. But
it's not! Wikipedia is not the award-winning oh-my-god-it-looks-so-nice page.
No it's very very functional and easy to read. All those vertical lines, boxes
and bars add structure and visual cues to the text and make it much easier to
read. Thank you for taking it away.

No offense, but this creation is horrible.

------
Drew68192
Why is the font so large?

All browsers have the ability to configure the font to whatever the user
desires. Why does this site override the user's preferences, and make the body
text larger?

~~~
vlunkr
That was my first thought. It might look pretty, but Wikipedia is mostly a
text website, this would require way too much scrolling.

------
ArtifTh
So, how am I supposed to select language?

------
jjhale
I think that the edit button is an important part of wikipedia.

Maybe some kind of menu button could be added near the search bar with the
edit, history and talk links.

------
nilkn
Personally I don't think it improves on the usability and I find the font too
large, meaning that I feel like I have minor tunnel vision compared to normal
Wikipedia.

The only part of normal Wikipedia pages that I normally never touch is the
sidebar with the different languages. I don't think I hardly ever click on
anything there. It would make sense for my usage at least for the sidebar to
be hidden by default.

------
3pt14159
I actually like the redesign, it is cleaner and less distracting when I read.
It does need some edge cases handled though. For instance, look at Russia's
flag:
[http://wikipedia.moesalih.com/Russia](http://wikipedia.moesalih.com/Russia)
vs [http://en.wikipedia.org/wiki/Russia](http://en.wikipedia.org/wiki/Russia)

~~~
pyre
Or this: [http://imgur.com/JdfnF7a](http://imgur.com/JdfnF7a)

------
garrickvanburen
This is a really interesting approach - and I concur w/ elsen - it's not that
far from wikipedia's current mobile implementation [1]

Last summer, I build a couple of MediaWiki skins; one based on Zurb's
Foundation [2] and one based on Yahoo's Pure [3]

Both of these projects showed me many of the non-obvious challenges in
redesigning Wikipedia; tabs, tables, and editor come to mind immediately.
Cascading a new look&feel down to common (and uncommon) extensions is, of
course, it's own level of effort.

1\.
[https://en.m.wikipedia.org/wiki/Main_Page](https://en.m.wikipedia.org/wiki/Main_Page)
2\.
[http://foreground.thingelstad.com/wiki/Main_Page](http://foreground.thingelstad.com/wiki/Main_Page)
3\.
[http://filament.thingelstad.com/wiki/Main_Page](http://filament.thingelstad.com/wiki/Main_Page)

------
Springtime
This would work well as a userstyle for Wikipedia if it were available. The
type is far too large though, I needed to zoom out about 50% for comfort.

Compare a featured article seen on the front page in the mobile version of
Wikipedia [1], with this site's style [2]. The mobile version keeps the text
smaller and narrower, making for easier desktop reading. There ultimately
isn't much this new style improves upon though.

[1]
[http://en.m.wikipedia.org/wiki/Cyclone_Joy](http://en.m.wikipedia.org/wiki/Cyclone_Joy)

[2]
[http://wikipedia.moesalih.com/Cyclone_Joy](http://wikipedia.moesalih.com/Cyclone_Joy)

------
D4AHNGM
I do like clean minimalism, but I'm not sure it works on a site like
Wikipedia. The NYTimes recent redesign was a pretty good meld of minimalism
around the article but retaining functionality.

I fear that your design kind of strips away a whole ton of functionality and
with something like Wikipedia functionality is infinitely more important than
design.

Kudos on actually coding up a completely working live preview though. That's
not something I see too often with these kinds of proposals.

------
cylinder
I prefer the current wikipedia.

------
wodenokoto
There are still some rough edges, but definitely one of the best redesigns I
have seen.

\+ large, beautiful readable fonts

\+ Search bar is a search bar and easy to find

\+ unnecessary borders removed

\- Could use a little bit more branding

\- No change-language feature

\- Zoom disabled on mobile devices

\- Some elements needs size tuning

------
peterfa
I prefer this redesign
[http://wikipedia.gkvasnikov.com](http://wikipedia.gkvasnikov.com)

~~~
0x006A
That's just a bunch of images. The linked page actually works.

------
ivan_ah
Typography is good, but text with lots of links in it is difficult to read:
the low weight font and the blue color doesn't work on the pure-white
background. Maybe slightly darker color for links or a little bolder?

------
GrinningFool
Actually looks really good.

But... why are you leaking my information to facebook, twitter, yandex.ru and
google analytics?

------
sswezey
For the contents outline, some kind of bullet or symbol would be nice to
indicate different levels and each heading.

------
metacorrector
how about wikipedia allows multiple style sheets and lets us each choose what
we like. One size does not fit all.

------
chris_wot
Breaks infoboxes.

------
tejas-manohar
So clean

------
nielsbot
"minimalist"

------
Xlab
>_<'

