This is an unsolicited redesign of an existing Wikipedia article page for desktop or larger tablet screens. The redesign uses the Wikipedia article on the English painter John Constable (1776 - 1837).

The redesign is mostly a tweak to the existing page layout rather than a radical change. Click the image below to see a full version of the page (file size is 2.7mb)

Wikipedia article redesign

The main changes are described below.

Typeface

The typeface used is Source Sans Pro: a free, open source typeface family designed by Paul D Hunt and released by Adobe. Three weights have been used in the design: Regular, Medium and Italic. Although the typeface won't be suitable for all languages, it supports a wide range of languages using Latin script.

Below is an example of an article page in German using Source Sans Pro. Click the image below to see a full version of the page (file size is 1.35mb).

Wikipedia article redesign in German

Article header

The article tabs are grouped together for a tidier look.

Wikipedia article header comparsion

Site navigation

The Page Tools section of the side menu has been re-ordered. All links relating to the current page are grouped together first followed by site-wide links.

Side menu links are also more widely spaced out to make them easier to tap on touch devices.

Wikipedia side menu comparsion

Colour

Colour is used to soften the appearance of the page and to highlight elements.

Wikipedia colour comparison

Quotes

Quotes have a bolder visual appearance which make them easier to pick out when skimming an article. Ideally, all quotes should contain an attribution below the quote (not just in the body of the article).

Wikipedia colour comparison

Pictures

Pictures with captions have been give a slightly cleaner look.

Wikipedia colour comparison

Side-by-side comparison

Click the image below to see a side-by-side comparison of the original Wikipedia layout with the new layout (file size: 4.75mb).

Wikipedia article side-by-side comparison

Click the image below to see a side-by-side example in German (file size: 2mb).

Wikipedia article side-by-side comparison (German)

Another alternative

This second layout example contains a horizontal menu at the top of the page. Article text sits in a narrower column so line lengths are more readable. Images bleed into the side margin or sit completely in the side margin. Links related to the page appear in a side menu next to the article.

Click the image below to see a full version of the page (file size is 3mb).

Alternative Wikipedia article redesign

Site-wide links are contained in the drop-down menu at the top of the page. Click the image below for a larger view.

Alternative Wikipedia article redesign

License

These designs are released under the Creative Commons Zero Waiver 1.0 (CC0) license.

Please note that the Wikipedia content in these designs is not public domain. Wikipedia content is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Additionally, the typeface Source Sans Pro is licensed under the SIL Open Font Licence (105kb PDF link).

Download the designs

You can download the designs in SVG format. These SVG files open correctly in Inkscape 0.48 but not Adobe Illustrator. The files were exported to SVG, so the text is not properly editable. You'll also need Source Sans Pro installed on your computer for the fonts to appear correctly.

It's best to save these files to your computer rather than open them directly in your web browser: right-click a file and choose "Save as..." or "Save link as..."