GoSquared – https://www.gosquared.com/london2012/
GoSquared is a website that creates beautiful pieces of infographic work. One such example is The London Olympics in 2012. They created a live infographic showing some of the huge numbers that dominated the Olympic games.
The reasons I include this example are numerous. The website presents the information in a visually pleasing way, you interact with the graphic as you scroll. As you move past the statistic for the 100m record, a runner moves across the screen, its movement directly relating to your scrolling.
I also really like the layout and narrative aspect of the sight. The information is presented in a linear fashion, factoid by factoid, as you move down the page. Each graphic has its own illustration or animation which transition seamlessly into the page.
The design style is also very compelling. The fundamental theme is illustrations of light grey on a darker grey background. It’s beautifully simple. However some slides are in colour when it is appropriate. When I reached the fact about gold medals being largely comprised of silver, the page transitioned from gold to silver.
The facts chosen are very wide ranging and give a deeper story of the Olympic Games than a simple dry list of statistics. There are facts on competition, the effect on London, the wider world and seemingly randomly, the weight of potatoes consumed for the games. While being useful and conveying good information. There is a human element included as well.
Rule of Three – https://rule-of-three.co.uk/
Rule of three is a website that offers three primary services, hence the name. It is a very typography heavy website. It is clean and crisp in its layout. It is entirely monochrome and while what I have described thus far is nothing extraordinary, it really is worth a look.
The website works in a similar format as GoSquared. It is laid out in a linear fashion controlled by the reader scrolling down through it. It is not text heavy, it relies on a combination of text, image, illustration and animation to create a seamless viewing experience.
As you scroll through the sight it follows the traditional narrative of a commercial brand, but it does so in a beautiful way. It interacts as you move down. Transitions are done in various ways but always crisply and with elegance. There are a series of smokey Roshack ink blot-esc patterns at intervals between information heavy sections.
I can only describe this page in sections, but this does not do it justice as it is actually one fluid page that you descend through. But each section has its own distinct style, there is no fear of being bored by repetition. Despite this, a strong theme follows throughout.
I don’t think I’ve spent such a long time scrolling through a sight whose message didn’t interest me. The design choices are intriguing enough without the need to even care about the content of the message.
Evoenergy – https://www.evoenergy.co.uk/uk-energy-guide/
This website catalogues the pattern of the UK’s energy consumption over past decades. It is at its core, an incredibly simple and basic website design. It uses the same scrolling format as the previous two and contains numerous simple graphs and diagrams in beautiful pastel colours. But this only adds to its charm in my opinion.
It features in its centre a tree whose leaves represent the entirety of the energy consumption of the UK. This seems like an obvious nod to the environmental impact of our fuel consumption. The tree is very stylised. Its leaves are made up of circles of varying sizes and colours. Energy use by type is displayed in the colour of these circles, or leaves. The percentage of the tree that is that colour correlates to the percentage of the energy source used.
There is a tab to the side of the tree with decades marked out. As you click on them the tree changes to represent the usage data in that decade. Pretty basic. They creators did include a tab to navigate the fuel sources and give exact percentages of each source used. This is a nice touch because it offers solid statistics and compliments the visual story. The visual representation is simply there to show general trends. For example it is a moment works to scroll through the decades and see that use of solid fuels is consistently declining.
The design of this sight is very aesthetically pleasing while not sacrificing any efficiency in information conveyance. I also like the little touches such as one of the tabs bobbing as it appears to be held aloft by balloons. There are also cloud that drift by gently as you take in the information.
Overall this sight appeals to me for its user-friendly nature. It is a pleasant thing to look at. It just looks polished and perfected. The design style consists of simple geometric shapes like the first things you create in Adobe Illustrator. But this only serves to keep the message of the sight in focus. There is no clutter.
The idea of creating a website in the same vain as these examples for my project really appeals to me. Having something permanently available to the world that is a very basic tool to help people navigate a small collection of information quickly and in an anjoyable way.