Shown here are two screenshots of my final design. The first is what comes up when you first click on the page and the second is what happens when you start to scroll down.
When you start to scroll down the page the title at the top disappears leaving the subtitle at the top and the black line; which when clicked automatically goes back to the top of the page. The logo, navigation, contents and the summary at the two sides of the page stay exactly where they are even when scrolling around. The navigation allows you to jump back to the home page, change the settings (language etc), a profile button to log in and edit posts, a quick search tool and a related topics button. The content enables you to jump to the section of the page that you wish to view without having to scroll through the whole thing and the summary at the side means that you can find out a few quick facts about the page / person without reading the article.
All the information I used came directly from the original Wikipedia page. https://en.wikipedia.org/wiki/Donald_Trump
I started off by drawing out two simple designs referring back to the grids that i made. This helped me gain a better understanding of what I want my final design to look like. Here are my initial designs:
Using Adobe’s Illustrator, I then designed each part of the page separately (navigation, title, logo etc) before placing them together to form the outcome that I wanted.
The smaller navigation bar consists of a share button, home, settings, profile, search and related posts.
I used Adobe’s InDesign to produce a more graphic visualisation of the design so that I can keep relation back to it when producing it with coding. Here I have shown the grid that I drew out on the page followed by the design:
Using a grid when designing is a great way to ensure that everything lines up how it should and it’s also an easy way to manipulate / change around a design simply. Each part of the design will have it’s own place on the grid so when the grid changes so does the design, bit all the original elements are still there. Here I have drawn up two simple colour coded grids that include all the main elements of a Wikipedia page to get started:
I will use the grid technique when drawing out my designs and keep it in mind when actually creating the webpage with css and html.
I wanted to find out what the most viewed Wikipedia page was ever, but after a quick search found that the site itself actually had a page dedicated to displaying the top 25 viewed pages from each individual week.
This week the top result was Donald Trump so this is the page that I am going to redesign.
The one this I like the most about the way that Wikipedia is designed is the way that each page has a brief summary at the side. For example on Donald Trump’s page it has his name at the top followed by a photograph and then who he is (45th President of the United States), and then a few main things about him (DOB etc).
I also like the summary navigation on each page so that you can skip to a specific part rather than having to scroll through everything. However there is a lot of blank space to the side of it which I feel is not very aesthetically pleasing and wastes a lot of space on the page.
After looking into the design of a Wikipedia page, I have a very good idea of what I like, what I would change and the way I want my final redesign to turn out.
From these examples, I have realised that even a well designed global website like Wikipedia: will still have flaws and improvements that can be made. When it comes to design, it is very individual so designing something that is admired by everyone is an unrealistic expectation and definitely something to remember when receiving criticism.
Thinking just about the current colour scheme for Wikipedia; mainly black and white, I found that these colours were used to depict an online book, hence the colourless theme. I would like to include more colour within my redesign to make it more aesthetically pleasing to the eye. The target audience for redesign Wikipedia is anyone and everyone that uses the internet. In a lot of internet searches, Wikipedia will be one of the top pages to appear and therefore is viewed by thousands of people everyday.
At the very beginning of this project it is very important for me to understand the history of Wikipedia, its initial purpose and how it has changed over the years.
What I found:
Launched on 15/01/2001 by Jimmy Wales and Larry Sanger, Wikipedia’s technological concept was originally proposed by Rick Gates in 1993, combined with Richard Stallman’s idea in 2000 that no single organisation should control editing. Before wikipedia, Nupedia was their project; an online encyclopaedia but it was edited solely by experts. Wikipedia was designed to run along side Nupedia presenting draft articles and other ideas / discussions around the popular topics, but when it was officially launched it quickly overtook Nupedia becoming a globally recognised site. In 2016 Wikipedia’s total worldwide readership was averaged at 495 million a month. The site allows users to add and edit posts / pages on Wikipedia for others to view. The first ever post on the site was titled “UuU” and posted on 16/01/2001 (as seen below):
Every year, Wikipedia runs a fundraising campaign to support its operations. One of the first fundraisers was held from 18 February 2005 to 1 March 2005, raising US$94,000, which was US$19,000 more than expected.The 2012 campaign raised US$25 million from around 1.2 million donors.
In 2007 a newspaper article reported that even some professors at Harvard University were including Wikipedia in their syllabus, even though there was a split in general perception of using Wikipedia as a 100% credible source. Another study in 2013 carried out by four major universities found that debated articles featured on Wikipedia were Israel, Adolf Hitler and God.
“Wikipedia is the largest collection of free collaborative knowledge in human history. Millions of people from around the world have written and added to Wikipedia since 2001.” – wikimediafoundation.com
Here is a short video on the history of Wikipedia:
Here is a talk by the founder of Wikipedia, Jimmy Wales:
I also found this page that describes the advantages and disadvantages of producing redesigns of popular webpages, covering the different viewpoints on the topic:
“Re-Design Wikipedia. Deconstruct how Wikipedia works and why it has been designed that way, include testing. Your outcome should be well considered and rigorous rather than just an aesthetic redesign.”
We were given printouts of the Wikipedia page of “Cats.” We were told to analyse the webpage and explain why certain sections were displayed in a certain way. After we analysed the webpage in pairs, we went around and discussed the advantages and disadvantages. Most of the groups came up with similar points.
These images was taken from our session:
The start of this project will be entirely research based, figuring out the main features and also the history of Wikipedia itself. This will help me to understand how everything works and, hopefully, why it was designed that way in the first place.
The next step for me will be to decide how I want the final design to look and how I’m going to redesign it; before the actual making process of it all.