Web Design

In the end I decided that I wanted to make an interactive website to project my visual work in one clean, easily navigated source. I had originally intended to build a website from scratch before finding out it would be beyond me to do so in the timeframe allowed.

From that point I had decided on an animation. However by happy accident I found that my earlier research on visual storytelling:

online https://www.dtelepathy.com/blog/inspiration/30-compelling-examples-of-visual-storytelling-on-the-web

I decided to investigate website template products. I found that websites like SquareSpace and Wix could facilitate most of the effects I wanted without the need for coding. I was infatuated with the concept of parallax scrolling and other visual effects. These were available to me.

I wanted a double layered site. The front portion would be the meat of the site, the information, the graphics and written work. The background would consist of relevant images that would help guide the narrative. I also wanted the website to be entirely simple to use. Allowing a viewer to simply scroll down to access all of the information in a clean package.

Here is the result: https://davidrothwell96.wixsite.com/mananddog

I have to mention, the editor fought me every step of the way, with elements moving and disappearing when I switched between devices and screen ratios. I had originally intended for the third animation (the 10 countries with the highest dog population) to include buttons in the shape of the countries concerned that would display further information when the cursor was passed over them. I did this only to come back to it, the day of the project and find that they had all been removed without explanation.

My Thoughts

This was a very exciting and challenging brief to complete. I honestly wish we could be set a task and then reset the same task again immediately after so that all the bugs and mistakes we made the first time could be eliminated and we could produce new work of much higher quality.


Further Complicating Matters

As I have already outlined in my blog, I have decided to combine a website and animation as a means of showing my info graphic designs. What I have now come to the realisation of, is that I would like to add another element to this. It is perfectly easy to have, in my online maps, hyperlinks which would then show further information. My idea is to create a series of maps detailing various worldwide statistics as well as highlighting the locations and dates of certain important instances.

These would include:

  • First archaeological evidence of domesticated dogs
  • Locations of important dogs (largest, smallest, most expensive, rarest, fastest etc.)
  • Locations of news stories involving dogs (disaster response, protection, lifeguard, firefighting etc.)
  • Working breeds (hunting dogs, guard dogs, sled dogs)

Other examples may follow but these are simply off the top of my head. I may have a short time in which to do this, but now that I have inspiration I will be able to proceed quickly and efficiently. I work well under pressure.

One other advantage to this idea is that the maps could double as printed ephemera with very little extra work. I will show my research and progress in later blog posts.

Refinement of my Idea

Throughout this task I have been determined to create a website as the basis for my infographic, a linear scrolling sight which would give the information in a narrative format. What I quickly realised in researching this, was the level of coding required to do this and my lack of said skills. I haven’t been put off however.

What I have now decided to do is create a series of animations. These brief slides will contain facts and figures, combining visual and typographic media to create a visually pleasing, educational animated video.

My idea here, is to create the clips individually before slicing them together with various transition slides and then possibly recording a voice over. The clips will hopefully therefore, become a seamless video. They will also, however, have another purpose.

Having kept these clips distinct from one another, I can turn them into gifs or other handy small file formats and paste them directly into a website. Using a template company such as Wix or WordPress, I can create something akin to the site I originally had in mind while avoiding the coding problem. I do actually intend to learn coding as the skill will be invaluable to me in future instances like this. But the tie constraints mean I haven’t got a chance of learning the method and creating the sight in the allotted time.

Here is my animated logo, which will double as the intro to my video. It is brief and simplistic, but I wanted a quick and concise method of information conveyance. One thing I have found consistently in my favourite examples of infographics is that they all follow relatively simplistic graphic style, there are minimal colours used and they do not contain any unnecessary clutter. It is for this reason, my video will consist of silhouetted figures and use only the monochromatic colour scheme.

Here is my second slide. This was the logical starting place for me as it goes back to our shared origins. It simply shows the first confirmed archaeological sights of wolf domestication with the approximate date along the bottom of the screen.

I will refer to this simplified world map a number of times in my work as much of our relationship with dogs is best conveyed on a global scale. Number of dogs compared to human beings. working dogs vs pets, countries categorised by treatment for dogs etc.

My Thoughts 

In every project i have undertaken thus far, I have always been working somewhat on the fly, not knowing until very late in the game, what my final product will resemble. In this project in particular I have struggled to pin down my ideas and be clear on what I want to create. This work however, has allowed me to focus my mind and refine what I want to create very effectively. Animation is a horribly slow and intricate process even to produce something as basic as I have. But every slide I complete is one fewer to worry about

Inspiring Example of Visual Storytelling Online

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.

My Thoughts 

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.


Exhibition Way-finding

In my exhibition, patrons will need a simple and clear system of signage that helps them navigate the exhibition and see it in a manner and order that it was intended to be displayed. I need to insure that the system is understandable and in-keeping with the theme of the exhibition. Maintaining a consistent style throughout every aspect of the exhibition will be critical to drawing people into the world I am aiming to create and allow them to be more fully immersed in the work surrounding them.

The first method I researched was simply signage on walls and signs demarcating routes, floor numbers and containing information on what each area contains. This is very simple and effective. The use of colour coding is also very appealing as it fits with my theme of bringing colour to a slightly lifeless and cold environment.

The other method which I found very impactful and playful, was the method of printing or otherwise laying the information out on the floor so you simply follow different paths through the building as you progress. This, again can employ colour coordination, routes of varying colours take you to different areas or floors, each area may focus on a different aspect of the exhibition.

One thing I want to create is an interactive experience. I want to show that the human interaction with our surroundings is what can make them beautiful and intriguing. One concept I have been mulling over is the idea of allowing the visitors to leave their own impression on the exhibition in the way the graffiti artists of Berlin did with the buildings there. Not only allowing them to feel more connected to the exhibition and the subjects it explores, but also leaving the place different to when they found it. I want the exhibition to change and evolve as time progresses so each visitor experiences something new. It may even lead to people returning to see what has changed.

To achieve this I want to incorporate the interactive elements with the structure of the exhibition, notably, the way-finding system. If I was to have large concrete blocks with arrows and lettering engraved into them, they could act as large blank canvasses for people to paint onto. I could have sharpies or spray cans on hand for people to doodle on the concrete as graffiti artists would sign a wall. As time progresses, some drawings would be overlapped or covered by new ones. In time the blocks would become pieces in the exhibition. Works of art in their own right.



This is a link to an artist called Sam Cox, he creates exhibitions which consist of entire rooms where he has doodled on every surface in a constant stream of shapes and colours. I want an effect like this, where every inch of the signage is a canvas for people to express themselves and let their playful side come out.

Doole Man

In Glasgow

Another aspect that I think is important is to tie in the colour scheme which marks out individual sections or floors of the exhibition. When creating my typeface, I used a colour scheme taken directly from one of the buildings that was part of the Berlin Turmkunst (Tower Art Project), the Bierpinsel (Beer Brush).


I used swatches taken directly from the Bierpinsel and applied them to my type. It occurs to me that the front of the building is coloured in a pattern of ascending horizontal layers. It would be a neat tie in to use these colours as stages of the exhibition. Starting with the red base and building up through the teal, purple, off-white etc. I will explore these concepts and mock-up designs and write about the outcomes in my next post.

Apply my brand to ephemera

At this late stage of my project I have settled on a final brand identity. It IS the final identity because even if I wanted to, time has run out for that. But luckily I quite like it. In order to present it in a manner that will allow my audience to understand its real world application, I have mocked up a number of pieces of ephemera across numerous media.

The poster and ticket design are the basis on which all these other elements revolve around. I did this in order to create a consistent visual brand. Here are my completed pieces.


I’m happy with the results of this work. I have tried to not simply reprint the same poster image again and again. But to adapt the signage for each piece while maintain the overall theme. I have to say that despite the rocky start I had on this project. The results are far more promising than I had originally anticipated.

I had considered making a mobile app for the exhibition, but given the nature of the subject, anything that I could include in an app would simply act as spoilers for what would be to come in the exhibition. I may create a webpage to simply work as an advert for the exhibition. Explaining a brief overview of the history  behind the topic and including some images and explanations of the exhibition, akin to a teaser trailer for a movie.

My next step will definitely be to establish a way finding system within the exhibition. I want people to be guided around in a unique way that is in-keeping with the theme of the  exhibition itself. I will explore this in my next blog post. I already have some ideas in the works.

New and (hopefully) Improved

My personal tutorial gave me a new lease of creative life and I quickly began redesigning my project, taking all the best bits of my existing work and applying them to a fresh design.

 I immediately began scouring the library and the web for ephemera designs to act as inspiration, as a kind of mood board. One place I found a lot of useful resources was on Pinterest. It’s not much use for academic work as very little of it’s work is sourced. But ilI found some fantastic ephemera designs. 

Using these as my inspiration. I decided to create a grid design with a series of related images. 

Here is my completed poster design. I decided to give LenCorbusier pride of place in the center of my poster as it is difficult to talk about anything Brutalist without mentioning him, he’s the linchpin.

 I did try the poster on a white background, but the contrast between true black and the vibrant colours of my design gave the image far more force. My options were really only on the monochrome spectrum as the coloured text would be lost of a coloured background. 

David had suggested I use a typeface called ‘Akkurat’ but I was unable to source it and so I decided to go with Helvetica. The reasons for this are numerous. It’s a clean San serif font, given the topic a serif font would be inappropriate. It is also versatile. It comes in many weights and styles. It’s also just a really good fallback for most projects. 

Im really pleased with my poster at this point and it was the driving force behind the rest of my ephemera. 

Here is my ticket design, entirely derived from the poster to maintain a consistent graphic style.

I also mocked up a bus stop poster in order to demonstrate its aesthetic in a real world scenario. 

My T-shirt design with exhibition and venue logos (front)

And the same imagery as the ticket (rear)

My Thoughts 

I’m really pleased with the direction my project is taking even if it is at an alarmingly late stage. I’ve gone from doing what I can to have something to present, to taking a lot of pride in my work in a short space of time. With my new design principal finished and ready to apply to the remaining aspects of the project, I am confident I can complete the task on time and to a high standard.