Search
Contact
michael.fortress
@gmail.com
312—810—6371
Connect
« Student Work | Main | BeerHoptacular! »
Sunday
May092010

Wikipedia

Problem
Wikipedia lacks a solid brand foundation and faces readability issues and easy access to information. The brand’s current logo — the unfinished puzzle globe — is seen by its audience as laughable.

Insight
A lack of mark-up style isn’t making Wikipedia neutral, it creates an aesthetic that inhibits readability and easy access to information.

Solution
I focused on a smart typographic solution, appropriate for reference materials. There is stock in the stark black text on a white background, with a serifed face set in small caps and featuring a crossed-V style capital W. This capital W is iconic and separates the brand from other online entities that use a capital W — such as Wordpress — but without the crossed-V format.

 

Web
The most important element of this redesign is the aspect of the brand which people most frequently interact with. This solution involves creating an interface that is open, breathable, and accessible. Content was divided in a logical manner. The header contains the Website’s more important feature: the search. The left column contains the navigation within Wikipedia. The main body that houses the article is treated as a narrative; this content is written by users while referencing external materials. The narrative can be read, edited, discussed, and bookmarked. In addition, users can view past versions and edits.

Within the narrative, issues such as line length and text wrapping were addressed by dividing the content into two columns. Stylesheets for media and content such as video, audio, and pull quotes were defined in order to encourage more robustly developed posts.

The right column is reserved for factual information and article tools. Some tools I added were a topic web, so the user could easily see topics that link to and from this article; a contributor geography map; and highlighter tools so that users can mark copy to reference in the future, divide content by update, and by reference material.

 

Mobile
The crossed-V style capital W serves as a simple identifier for the application. The stark black on white brand asset is striking and sophisticated.
The approach for the mobile interface was designed to solve an immediate need for quick and easy access to media and written content. 


Multiple entry points into forms of media should be accessible to the user above the fold.

 

Print Collateral
The approach for stationary was simplicity, readability, and easy access. This was done by designing with stark minimal layouts and clean typography. The system uses the brand’s hero color, link blue, to as a callout and as a general indicator of information that links people.

Business Cards
Card 01
This business card style is the more conventional option. It employs a simple and sophisticated use of the logo on the front side. On the backside, the format for displaying background information — as seen on the Website — is used, including a tongue-in-cheek treatment of the employee’s name and place of origin.

 

 

Card 02
Of a more conceptual nature, this card simply displays the logo, Website url, and the employee’s name appearing in quotes and offset by the universally-recognized icon for “search.” This implores the receiver to search for the employee on wikipedia.org. This method controls how the receiver retrieves this information and has the receiver interacting with the brand’s Website. Employees will have profile pages that function like articles, allowing for content, media, and discussion.

Reader Comments (1)

This is such a great concept. Keeping enough the same but it's clearly much easier to navigate and read!

June 3, 2011 | Unregistered CommenterJustine

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>