HTML Visual Methods


Throughout the Semester we have had an introduction to HTML and CSS script. Using Brackets as a platform, each week we have coded the templates of workable sites for future use. Using my self initiated project The Little Book of Leviathans I have created a website with the intention of outlining the inspiration and development of these sequence of illustrations. As a sample I have used Lorem Ipsum as selected text. Due to issues uploading the sample website I have had to include screen shots of selected pages.

The coding is as follows:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Elevate -->
<!-- load stylesheets -->
<link rel="stylesheet" href="
family=Open+Sans:300,400">  <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css"><!-- Magnific pop up style -->
<link rel="stylesheet" href="css/templatemo-style.css"><!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and 
media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<div class="container">
<div class="tm-sidebar">
<img src="img/menu-top.jpg" alt="Menu top image" class="img-fluid 
<nav class="tm-main-nav">
<li class="tm-nav-item"><a href="#home" class="tm-nav-item-link">Home</a></li>
<li class="tm-nav-item"><a href="#about" class="tm-nav-item-link">About</a></li>
<li class="tm-nav-item"><a href="#ideas" class="tm-nav-item-link">Ideas</a></li>
<li class="tm-nav-item"><a href="#contact" class="tm-nav-item-link">Contact</a></li>
<div class="tm-main-content">
<section id="home" class="tm-content-box tm-banner margin-b-10">
<div class="tm-banner-inner">
<h1 class="tm-banner-title">Suzette Moon</h1>
<p class="tm-banner-text">Illustration <br>Brighton University</p>  
<div class="tm-content-box flex-2-col">
<div class="pad flex-item tm-team-description-container">
<h2 class="tm-section-title">From The Deep</h2>
<p class="tm-section-description">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Quisque vel nisi pharetra nibh varius 
pharetra ac sagittis nisi. Etiam pharetra vestibulum hendrerit.</p>
<p class="tm-section-description">Donec ex libero, fringilla vitae 
purus sit amet, rhoncus pharetra lorem. Pellentesque id sem id lacus 
ultricies vehicula. Aliquam rutrum mi non.</p>  
<div class="flex-item">
<img src="img/squid%2001.jpg" alt="">  
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">The</h2>
<img src="img/white-bg.jpg" alt="Image" class="img-fluid">
<li class="box">
<a href="img/fish%20head%20large%2002jpg"><img src="img/fish%20head%2002.jpg" 
alt="Image" class="img-fluid"></a>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Little</h2>
<img src="img/white-bg.jpg" alt="Image" class="img-fluid">
<li class="box">
<a href="img/from%20the%20deep%2001%20large.jpg"><img src="img/from%20the%
20deep%2001.JPG" alt="Image" class="img-fluid"></a>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Book</h2>
<img src="img/white-bg.jpg" alt="Image" class="img-fluid">
<li class="box">
<a href="img/Scary%20fish%20large.jpg"><img src="img/scary%20fish.jpg" 
alt="Image" class="img-fluid"></a>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">of</h2>
<img src="img/white-bg.jpg" alt="Image" class="img-fluid">
<li class="box">
<a href="img/Octopus%20Large%2001.jpg"><img src="img/Octopus%2002.jpg" 
alt="Image" class="img-fluid"></a>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title"
<img src="img/white-bg.jpg" alt="Image" class="img-fluid">
<!-- slider -->
<section id="ideas">
<div id="tmCarousel" class="carousel slide tm-content-box" 
<ol class="carousel-indicators">
<li data-target="#tmCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tmCarousel" data-slide-to="1" class=""></li>
<li data-target="#tmCarousel" data-slide-to="2" class=""></li>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="carousel-content">
<div class="flex-item">
<h2 class="tm-section-title">The Ideas</h2>
<p class="tm-section-description carousel-description"
>Suspendisse fermentum auctor turpis quis volutpat. Ut 
sed nibh non purus porta lacinia. Donec et euismod elit. 
Aenean vitae quam leo. Pellentesque interdum metus sed 
massa rutrum.</p>
<div class="carousel-item">
<div class="carousel-content">
<div class="flex-item">
<h2 class="tm-section-title">Inspiration</h2>
<p class="tm-section-description carousel-description"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque vel nisi pharetra nibh varius pharetra ac sagittis 
nisi. Etiam pharetra vestibulum hendrerit. Pellentesque 
interdum metus sed massa rutrum.</p>
<div class="carousel-item">
<div class="carousel-content">
<div class="flex-item">
<h2 class="tm-section-title">The Project</h2>
<p class="tm-section-description carousel-description"
>Donec ex libero, fringilla vitae purus sit amet, rhoncus 
pharetra lorem. Pellentesque id sem id lacus ultricies 
vehicula. Aliquam rutrum mi non. Pellentesque interdum 
metus sed massa rutrum.</p
<section class="tm-content-box">
<img src="img/Head%2001.jpg" alt="Contact image" class="img-fluid">
<div id="contact" class="pad">
<h2 class="tm-section-title">Contact Us</h2>
<form action="#contact" method="get" class="contact-form">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 
<input type="text" id="contact_name" name="contact_name" 
class="form-control" placeholder="Name" required/>
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 
<input type="email" id="contact_email" name="contact_email" 
class="form-control" placeholder="Email" required/>
<div class="form-group">
<input type="text" id="contact_subject" name="contact_subject" 
class="form-control" placeholder="Subject" required/>
<div class="form-group">
<textarea id="contact_message" name="contact_message" class=
"form-control" rows="9" placeholder="Message" required></textarea>
<button type="submit" class="btn btn-primary submit-btn">Submit</button>
<footer class="tm-footer">
<p class="text-xs-center">Copyright &copy; 2016 Company Name - 
Design: <a rel="nofollow" href="
elevate" target="_parent">Elevate</a></p>
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script>             
<!-- jQuery ( -->
<script src="js/bootstrap.min.js"></script>                 
<!-- Bootstrap ( -->
<script src="js/jquery.magnific-popup.min.js"></script>     
<!-- Magnific pop-up ( -->
<script src="js/jquery.singlePageNav.min.js"></script>     
<!-- Single Page Nav ( -->
<script src="js/jquery.touchSwipe.min.js"></script>         
<!-- -->
<!-- Templatemo scripts -->
$(document).ready(function(){// Single page nav if($(window).width() 
<= 1139) {$('.tm-main-nav').singlePageNav({'currentClass' : "active",
offset : 100});} else {$('.tm-main-nav').singlePageNav({'currentClass' 
: "active",offset : 80});}
// Handle nav offset upon window resize
$(window).resize(function(){if($(window).width() <= 1139) 
{$('.tm-main-nav').singlePageNav({'currentClass' : "active",offset : 
100});} else {$('.tm-main-nav').singlePageNav({'currentClass' : 
"active",offset : 80});}});// Magnific pop up $('.gallery-container').
magnificPopup({delegate: 'a', // child items selector, by clicking on 
it popup will opentype: 'image',gallery: {enabled:true}// other options}
);$('.carousel').carousel({interval: 3000})
// Enable carousel swiping (
support-to-bootstrap-carousel-3-0/) $(".carousel-inner").swipe( {//Generic 
swipe handler for all directionsswipeLeft:function(event, direction, 
distance, duration, fingerCount) {$(this).parent().carousel('next');},
swipeRight: function() {$(this).parent().carousel('prev');

The extensive exercise resulted in the screenshots of the website below.




screen-shot-2016-11-25-at-14-31-16 screen-shot-2016-11-25-at-14-31-06screen-shot-2016-11-25-at-14-30-53



Love or Hate


Contextual and Cultural Research

Communicating a juxtaposition of emotions the following posts required a illustrative exploration of the Love or Hate brief. Within the structure of billboard and graphic layout I have attempted to convey a visual representation of these binary opposites. My original working point was the subject of Central Banking and most notably the Governor of the Bank of England Governor Mark Carney.

I considered several options regarding the subject matter, the fiscal policy since the 2008 financial crash, and as research tool drew from the criticism of the BoE current policy to the propaganda use of imagery. The initial ideas were a mere release of frustration and resentment. A juxtaposition of binary opposites that can translate clearly were later explored.

Preliminary Sketches


Drawing on the notion of fear and horror that central banks can convey preliminary concepts played around with linear translation of financial policies as a poster image. Without singling out an individual the images were meant as generalisation. The ink splats a literal stylistic representation on anger. I worked with several compositions before settling with the final one.


Scan 1-14fm1cs Scan 3-17ezxvr Scan 4-2jnsugt Scan 2-1nol0gz


Below the two diagrams exemplify the direct result of Quantitative Easing and continuing lowering and stagnation of the UK interest rate. A process that has been repeated since 2008. Theories regarding our current economic climate are attributed to this.


Charts provided by

Mark Carney’s poor record of anticipating economic trends was underlined by official figures. Deflation figures are near to zero and have been for a considered period of time. The Governor’s assurance this year that Britain’s experience of low and even negative inflation would be “temporary” seems a mockery as the figure has barely moved in nearly eight years even after QE stimulus and unmoveable interest rates. Mark Carney has repeatedly signalled that such a rise is approaching, only to retreat in the face of events the Bank failed to predict. The “emergency” rate of 0.5 per cent that has stood since 2009 and is now such a part of economic life that we have seen hyperinflation of assets such as property that have now made homes unaffordable and the value of money worthless.

Research source: The Telegraph and The Economist.

Rough sketch.


Research indicated that the introduction on QE as a fallout from the banking sector of 2008 and the consequential defaults of the Eurozone as only further fuelled further increase of national and personal debt.

The current figure of QE that the BoE has produced is now £445 billion.  UK personal debt according to stands at £1503 trillion by the end of September 2016, which is up from £1451 trillion from last year. That is an extra £1036.58 per UK adult a year.


Research of political Hate campaigns 

The famous “Labour isn’t working” ad was not written by Charles Saatchi, as is often believed. It was the work of a young copywriter named Andrew Rutherford. Charles rejected the ad, but Rutherford secretly re-inserted it into the presentation to Margaret Thatcher, then leader of the Opposition.

The poster ran in August 1978, a critical time for the Government of Jim Callaghan, who was deciding whether to call an election for October. The ad created an immediate sensation. In the middle of the silly season, the media seized on it as the topic of the day. Government ministers hit the roof.

Also created by Saatchi was the other poster involving a picture of Labour Party leader Tony Blair on a black background with a strip of the poster appearing to be torn off across the eyes of Blair. The eyes were replaced with a pair of “demon eyes” with the slogan “New Labour New Danger” positioned below the picture.

Final Composition

Visual conveyance of this research presented various challenges. Using the backdrop of London and a rendering of Carney. I attempted to construct a series of signifiers that can immediately be interpreted as an illustrative and negative indictment of Carney and the BoE. The idea behind the sketch was to use the skyline as a backdrop similar to the  economic charts, however when increased in size significance failed  to convey. Working with a palette of three colours I wanted to create the following indices:

Red – Debt

Black- Credit

Grey – Civil Service



The use of the word BANKER was meant as a contronym. The initial use of the term to denote a civil servant but the reference to the colloquial translation. Within the banner is a rendering of Carney although partly obscured, the overall impression is hopefully that of disdain and contempt utilising the ink spalt motif now rendered to a block of red.



As part of the brief we had to take the original image and re convey love. Within this boundary and utilising the same colours I looked to simplify the image using research of propaganda posters as a platform:


Visual culture in political posters convey a sense of serenity and optimism. Through the use of simple colours and bold lines images like the ‘Obama Progess’ poster created by Shepard Fairey present an iconic presentation similar to Jim Fitzpatrick’s representation of Che Guevara as seen below. In a Communist Poster from China the utilising of techniques  respond to simplicity whilst mythologizing the subject. Power and adoration a key signifiers to this style.

Besides drawing on national myths, political images also serve to create a myth of the individual to present to the public, as political images an idealized version of them self. Associating the values of the nation or cause with the values of the individual. I intended to draw on this cultural reference and apply it to a poster image of  Mark Carney.









Final Composition

Reworking the original illustration I removed the rendering replacing with bold lines. Using blocks of colour and eliminating the skyline. The triptych below is an attempt to convey the repetition of policy that has been argued provided the UK with its current economic stability.








Critical Analysis

The challenge presented a visualisation of binary opposites. Restricted with a three colour palette the main objective was to convey a subject for an audience unfamiliar with whom Mark Carney is. Within the exercises I attempted to explore and create a structure based around three key signifiers. The man himself, the London skyline and his role as the Governor of the Bank of England. Visually this presented some problems. The rendering of the subject within the Hate motif is obscured beyond recognition and the placement of the composition within the banner looks lost.

Reworking these themes for the Love aspect of the brief the re rendering of the image can  be characterised as more coherent. Utilising bold lines and block colours the pose is an attempt at being more reminiscent of the propaganda posters as discovered within  the research. Overall the project required a representation of conflicting imagery. I felt that further experimentation of themes could have been explored.





Narratives of the Unconscious

Visualisation Narrative of the Unconscious

Cultural and Contextual Research

Following on from the previous project the enclosed workbook and posts are an attempt to explore the narrative of the unconscious through a psychoanalytical exercise around the mind structures if the subconscious. As a starting point the ideas presented have been applied to the creative narrative both within a workshop enviroment and through individual development.


A visualisation exercise that was prompted by various depictions to reveal the inner and outer subconscious. Whilst taking part in this exercise my partner drew my descriptions. For this particular process my journey started on a beach that then lead to a cave that was blocked by a massive boulder. Following a wooden path I then came upon a derelict office building where I made my way to the reception. Here I followed a spiral staircase down to a dark cavernous underground. There was a room with just one window that had bars and dim light that shone through. In this room was a featureless shadow that towered in the corner and spoke the words, ‘it will be okay.’

Leaving this room I then came upon a gigantic pink blancmange that I proceeded to ascend. On my way up this mountain I encountered an angry fat man. Dressed in a pin stripe suit. He approached me and gave me a pocket watch then left without saying a word.


Storyboard of Visualisation


Key Elements: The Spiral Staircase Roughs and Concept Drawings

p1030770 p1030752 p1030751 p1030757p1030778

The Shadow in the Room


The Concious Landscape




Puppetry Development

Workshop exploring puppetry making and then employing a narrative to this exercise. In this instance we created a story around an old man who had a pet snail. One day he accidentally treads on this snail and kills his only friend. So heartbroken he takes to his bed where he is visited by his spirit animal, a mosquito, that guides him to a spirit world where he can make amends with his snail and continue in life redeemed.

p1030741 p1030740 p1030739

Each member of our group acted out the different parts for the class in a short 3 minute play.

Character Development from the Visualisation Exercise

Drawing from the original exercise on the first day these are some of the puppet attempts of the shadow that was in the room. The intention is to create a 3D version of a featureless shadow that can then be manipulated in a short film. In order to achieve this result various other elements need to be included such as the opening door and the room with the window.





The final version of the film that attempts to recreate the scene underground in the dark room.




I have considered the following research tools for this project. Both of the following links provided a framework which I tried formulate into my final piece.


Lotte Rienger 1899 -1981


The Tale of Three Brothers – Harry Potter and the Deathly Hallows Part II

(Please note that there are errors uploading hyperlinks using the wordpress platform due to not having access to the administrator panel to change essential settings.)

A structuralist approach as a  literary theory  are known to have developed as an outgrowth  aiming to understand the relationship between language and the human experience. Within this brief the challenge by the removal of language in any coherent context is to structure a narrative that can be understood. As a primary human experience based on the exercises carried out in the workshop the challenge is to present the work with no immediate signifiers to indicate any translation. As a consequence I  relied heavily on the subtext of the Shadow. It’s role within the narration was curiously pivotal however I failed to convey this significance instead opting for humour as a defence.

Critical Analysis

Within the exercises I have attempted to draw upon the previous workbook utilising storyboards as a means pf exploration and structuralism with the subject matter. Most revealing was the randomness of imagery. Encouraged within the workshop this developed as a journey of narrative resulting in a short puppetry play. Overall the actual construction of the puppets was a positive creative experiment if a little out go my comfort zone. The finished result did seem awkward with delivery.

As an introduction to this environment we were encouraged to work on a particular scene from the original visualisation exercise. I attempted a brief outline drawn from the ‘shadow in the room’ sequence. Identifying this narrative I incorporated my research of Shadow Play into a short 30 second film. The play at humour fails to convey and the overall film was deeply criticised for the overuse of transitions. This particular aspect required the film to be reworked with the aim of producing a more coherent final piece.