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.


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

Visual Story Telling Brief

We have been asked to create a narrative through visual story telling on any subject we choose. The idea is to create a visual piece that uses a systematic approach to convey statistics or other forms of information.

There are numerous forms of visual information we use on a daily basis without even taking conscious notice of them.


  • Street SignsImage result for uk street signs

The world is full of street signs, many countries have their own approach to these signs, but all of them follow a theme. They all revolve around the use of isotype.  Isotype is a means of communicating simple messages in a visual form that is more universally recognized than text. Visual representations of the message are created to quickly bring to mind the subject matter and allow those who see the symbol to react accordingly.

One reason Isotype is used so universally in road networks is to allow people internationally to comprehend their meaning.without having to understand the language. While many signs include some text, they are designed to be comprehensible regardless of this.


The term hieroglyphics refers to a system of writing using ancient Egyptian symbols. The hieroglyphics involved a series of ‘picture’ words. Consisting of several hundred words, this system of writing was intensely complex and very labor intensive. The first hieroglyphics were used on buildings and tombs. It is believed that the Egyptians first began developing this system of writing about 3000 BC.


Similar to istype, hieroglyphs were ancient examples of using pictures as language. They would represent actions or events and tell a story in a linear fashion.


Wingdings is somewhat of a phenomenon as it is a commonly available typeface that consists of seemingly random symbols in place of alphabetical letters.

‘In the early ’90s, it was one of the first times people realized fonts could break through to the mainstream. One of the creators of Wingdings, Charles Bigelow, of the legendary design studio Bigelow & Holmes, told me Wingdings marked one of the first times a font became part of the popular culture.’

‘As a means of writing sentences, Wingdings fails — but that was never its purpose. It was created to be used as a unique tool for the pre-internet era. It was akin to emojis, but with even more utility.’

‘Today it’s easy to cut and paste images from the internet, but it used to be a lot harder. There were few ways to get images, files were way too large for puny hard drives, and they were of poor quality. Even worse, it was tough to get pictures to play nicely with text. Fonts like Wingdings provided a workaround by giving people high-quality, scalable images that didn’t clog up their hard drives.’


Wingdings then, is not much good for story telling of any kind. Unless, it seems, you are a conspiracy theorist. In my research I found an odd story regarding Wingdings and the events in New York on September 11th, 2001 or 9/11.

According to some, the Wingdings font predicted the events of that day. This theory comes from the fact that if you type Q33NY in Wingdings it will turn them into images that seem to relate to the events. It’s clear to me that this is very dubious. But the story seems to have gripped many people and as far as stories telling goes, this story made a large impact on people.




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. 

Personal Tutorial and work overhaul

I recently had a brief personal tutorial session with David. I showed him my ephemera and animation thus far and he seemed to have some positive things to say. He also, however, had a lot of useful advice and constructive criticism. 

We agreed that the typeface, although he liked it. Was barely legible when overlayed on a concrete background being of the same texture. The blending between the two was blurring the outlines of the type. 

He also suggested making the most of the type’s ability to push the exhibition’s message. It was suggested that I leave the ‘playground’ section of my ‘BRUTALIST PLAYGROUND’ title in full colour, to emphasise it’s playful nature. But to desaturate the word ‘brutalist’ to juxtapose the two words. 

Another suggestion was that ‘Brutalist Playground’ should act as both the title and logo of the exhibition. The typeface is far two abstract to work as body text and so I should explore other potential typefaces to work as my body text. 

 I found this brief encounter very helpful as I felt that my project had, once again, started to stall. After the meeting I immediately set to revamping my work and In my next post I will showcase my new and improved designs.