This user hasn't shared any biographical information


Posts by chris

Soundscapes Worksheet

This entry is part 2 of 3 in the series Digital Landscapes


Recreate a journey through the following environments

  • Industrial
  • City
  • Jungle

The listener should become immersed in the environment you have created, try to make them feel like they are actually there.


Each journey should be around  60 seconds long

Source material from a site like and record your own samples when possible.

Try to create a rich texture of sounds using multi-track production software.

Fade each piece in and out

Mix down, normalise and export a final master in WAV format

Upload to Soundcloud and link through to your blog


The British Library

The British Library’s extensive collections of unique sound recordings, which come from all over the world and cover the entire range of recorded sound: music, drama and literature, oral history, wildlife and environmental sounds.


Freesound is a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.

Sound Map

This entry is part 1 of 3 in the series Digital Landscapes


Create a simple sound map of an agreed area, say the center of a town or city.

Cover 8 to 12 locations.

Output options



Put them on Google Maps

Present them as an interactive video on youTube


Create a short video with images and sound recordings from the locations



Digital Landscapes


  • Investigate
  • Develop
  • Produce


  • Urban
  • Industrial
  • Managed countryside


  • Photography
  • Video
  • Audio
  • Graphics
  • Software generated


  • Representational
  • Virtual
  • Abstract


  • Large scale projections for an exhibition installation
  • Simple projection mapping for an exhibition installation
  • Small screen variations as apps or ebooks




Audio Player Worksheet

This entry is part 5 of 5 in the series Web Content Assessment

<audio controls>


Before HTML5, there was no standard for playing audio files on a web page.

Audio files had to be played with a plug-in such as flash. However, different browsers supported different plug-ins causing compatability problems for both developers and users

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

The control attribute adds audio controls, like play, pause, and volume.





Note, you should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element. There are still compatability issues.

This new <audio> element allows multiple <source> elements. <source> elements can link to audio files in different file formats (codecs).

Supported Audio Formats

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

The browser will use the first recognized format. Note the differences between some of the main browsers

Audio Formats and Browser Support

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3


Create a webpage that plays an audio file using html 5.

Here is the basic page for you to work with in Notepad ++ or similar


<!DOCTYPE html>

<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>

Your browser does not support the audio element.



Save the page along with the audio file into the same folder in your project

Prototyping techniques

A prototype is a real but partial representation or implementation of a design concept.It can be used to demonstrate and evaluate a concept at different stages in the design process. It could be something simple like paper and cardboard or a complex piece of coding. Prototypes are the main way of involving potential users and clients in evaluating your design ideas.  There are two main kinds of prototypes


  1. Low fidelity; lo-fi
  2. High fidelity; hi-fi


Hi-fi prototypes


Very similar in look, feel and functionality of the final design output

  • Useful for detailed evaluation of the main design elements
  • Can be a crucial stage in client giving go ahead for final version
  • Generally developed late on in design process

Lo-fi prototypes


  • Focus on the broad ideas underlying the design
  • Can be produced quickly and cheaply
  • Capture early design thinking and can form the basis for generating new ideas




Simple Magazine Cover

It may seem like a simple thing to do, but a lot of thought goes into the design of a magazine cover.

Covers compete for attention next to dozens of other magazines on the rack.

In this tutorial, we’ll not only take you through the process of creating a cover, but also reveal techniques that designers use to make their covers stand out.


Success-ometer Project


As part of a new student support project the College is looking to develop an interface for students to rate their success or failure according to different parameters.

User responses to be captured and displayed as a group.

Visual style based on instrument gauges; industrial feel

Uses must be able to rate themselves from 1 to 5 either in terms of success or failure.

Has to work on a mobile device

See sketch for details











You can work at any of 3 levels:-

  1. Visual design – using Photoshop.
  2. Visual design and interaction using Flash.
  3. Visual design and interaction using javascript.


Develop your design using the level you feel is best suited to you.

Take it to hi-fi prototype level.

Evaluate your work in a structured manner

Timescale 2 to 3 weeks

Abstract Video Project L5

This entry is part 6 of 6 in the series Digital Video Skills

bm-pf107There are many techniques to create abstract video ranging from computer generated graphics (cameraless) to video synthesis with existing material as a base.

In this project we are going to use a simple video synthesis technique to produce a short abstract sequence.

The key concept here is to relate the basic visual components to filters in Premier Pro

Remember, visual components include

  • Line
  • Shape
  • Colour
  • Space
  • Movement
  • Size
  • Texture

and these can be organised in different ways to tell different stories

Before you begin research and give an example of a similar technique.  Post it on your blog.

You are going to investigate and apply effects in Premier Pro to a short video sequence

  • Create a project folder
  • Start a new Premier project and save it into the folder
  • Shoot or source a 90 second clip and save it into your project folder
  • Use a piece of music as your idea to work with
  • Try and express aspects of the music using the filters
  • Export a final mix and post on your blog along with a short description of how did the project and what you felt about the results.



Abstract Video Introduction

There are many possible ways to approach this area.

In this case, lets look at it in terms of how abstract art developed around 100 years ago.


The treeness of a tree

In this example we will look at the development of the work of the painter Mondrian.

What makes a tree a tree?

The work of Piet Mondrian is a good example of the development of visual ideas relevant to this project, in a move from representational art to more abstract forms, he can be shown to investigate techniques related to Significant Form.

Abstraction can be thought of as a process where, say, a landscape painter could arrive at a finished piece through a process of abstraction from the landscape. It could still be regarded as a landscape painting though.
Have a look at this site where these ideas are expanded upon.

Visual Components

So what have we got to work with?

Think of it all in terms of a film


Actors, locations, props, costumes, and scenery are visual components. A visual component communicates moods, emotions, ideas, and most importantly, gives visual structure to the pictures.
These components are used in creating any picture. and can be regarded as basic visual components for just about any television, computer, and movie visual.
This is not outer space or “giving someone his or her space.” There are three kinds  of visual space:
first, the physical space in front of the camera;
second, the space as it appears on a screen;
third, the spatial size and shape of the screen itself.
Line is a perceptual fact. It exists only in our heads. Line is the result of other visual components that allow us to perceive lines, but none of the lines we see are real.
Shape goes hand in hand with line, because all shapes appear to be constructed from lines.
Tone refers to the brightness of an object in relation to gray scale.  It does not refer to the tone of a scene (sarcastic, excited, etc.), or to audio tone (treble and bass).
Tone is an important factor in black & white and color photography.
One of the most powerful visual components, color is also the most misunder-
Movement is the first visual component to attract the eye. Movement occurs using objects, the camera, and the viewers’ eyes as they watch the screen.
We’re most familiar with rhythm we can hear, but there’s also rhythm we can see. Rhythm is found in stationary (nonmoving) objects, moving objects, and editing.

Cameraless Techniques

Norman McLaren

Len Lye


Computer generated

It is possible to generate similar effects using code


Particle Illusion





Can you think of examples of when this could be used?


Example of these ideas being applied in mainstream TV and Film visual design.



Produce three 30 second clips demonstrating different visual components using the filters in Premier Pro

Discus how you could do this with your tutor.


Mobile Device Research

Some general comments about the mobile device research so far.

Remember they are really an integration of what were mobile phones and computers,so a timeline of this development rather that going way back to just phones would better inform your design thinking.

They have different levels and forms of connectivity to a range of networks – cellular, wifi, gps and local nodes like bluetooth and the emerging NFC capability

Mobile devices are blurring the boundary between these networks. Some do not access them all.

Different screen sizes pose a challenge for graceful flow of your screen design elements

Link at least one aspect of each area of your research to your design, it could be done as a summary at the end.