Drawing and Designing – Causeway City

Most drawing in school is based on life drawing; you learn to look and draw what is in front of you. In the case of ‘Design’ that is rarely the situation. More often you are attempting to draw something that is not in front of you, not even made yet, because you are trying to Design it. As a Designer you are giving the thing it its form. You can of course base your design on a different but similar thing that is in front of you. A designer of a wineglass might for example base his design on a plant. In other situations however you need to form an idea entirely in your head, then quickly draw it before it goes out of your head.

There is a common simple mistake. The tendency to draw stuff you are trying to design without thinking about what it is you are drawing. Very often people blame their lack of ability to draw and offer that as the reason why the design has not appeared on the page as it were – by itself. This is like trying to do life drawing without looking at the model.

Although this is a simple mistake and it is easy to describe it, and it sounds almost trite, it is a mistake that nearly everyone makes. I think that the only people that don’t make this mistake are people who have never tried to design something.

Here is a simple strategy for Designing something using drawing as method for figuring out the design.

  1. Think of it – then draw it
  2. Seek inspiration or information about the problem
  3. Armed with the inspiration or information think of it again – then draw it.

I have now introduced a secondary but related issue. What information do you need to solve the design problem?

In the case of the Causeway City project what information do you need to solve the sub problems of:

  1. The landscape drawing
  2. The concept for the City
  3. Composition
  4. City details


Arrangements for Causeway City project presentations (wk 12)

  • A2 (594 x 420) size drawing flush mounted on foam core board.
  • Line drawing only (no colour)
  • Can be pencil or ink, can include ink wash/cool grey markers
  • Entry fee £1. Winner takes all.
  • Keep an eye on twitter @anto_hutton

NB: Class on Wk 12, 10/12/14 will start at 11.15

Reminder: Why Designers draw?

Memory Leak!

Memory Leak Wiki:
In computer science, a memory leak occurs when a computer program incorrectly manages memory allocations[1] in such a way that memory which is no longer needed is not released. In object-oriented programming, a memory leak may happen when an object is stored in memory but cannot be accessed by the running code.[2] A memory leak has symptoms similar to a number of other problems (see below) and generally can only be diagnosed by a programmer with access to the program.
In development environments such as XCode (screen shot below) and Borland there are often tools and methods for detecting Memory Leaks. There is no agreed general icon for a Memory Leak.

xcode screenshot

xcode screenshot

MINI Project: Design an ICON to symbolise Memory Leak as a general phenomenon.

In designing an icon for a Memory Leak one could look at the idea of leaks, or the idea of memory as a start point.
The question of how to approach the design of Memory Leak sharpens the focus on “The visual Classification of Icons

The final design should by presented in three resolutions:
1024 x 1024,
512 x 512 and
120 x 120

Timetable: This project could take forever, but dont take forever. Do it in one week. Please tweet me the answer.

Current state of the art?

Current state of the art?

Memory Leak Meme

Memory Leak Meme

cpu, memory, diskstorage, network

xcode: cpu, memory, diskstorage, network

Please tweet me with your answers but also please present A4 printed version of the icons in class.

Also please position (redraw) your icon on this chart.

(tweet or email) If you think it doesn’t fit add a new classification element.

DES516 – PPD Project #1 Timetable – Design change tracking

Project 1: Change tracking – awareness of what you are doing.

Duration – 1 week. Marks awarded – 10%

Please find the attached spreadsheet (Design Timetable). Make a version of that table without loss of any critical information that is:

  1. Easier to read
  2. Quicker to read
  3. Less visually cluttered
  4. Printable on A4 sheet
  5. Clear and less read error prone
  6. Reduce the ink to data ratio

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antoine de Saint-Exupery

Record each change you make from start to finished item. Make an animated gif showing each of up to 15 steps.




Make an Animated gif or flash or animated ppt. showing each step in the transformation of the timetable. http://makeagif.com/

Please tweet the finished URL to https://twitter.com/anto_hutton before class next week. Please also bring an A4 print version of the final design.

Sheilla McCallan http://makeagif.com/pqGfEv

Mary L Waddell https://www.youtube.com/watch?v=R4YitY87yMk&feature=youtu.be

Gareth McIllwrath http://makeagif.com/i/OHJ5mD

Felicity Smyth http://makeagif.com/i/HTp3SY

Erin Reid http://makeagif.com/i/r8DK_x

Ciara McErlean http://makeagif.com/NfXYU7

Elizabeth Moran http://gifmaker.cc/PlayGIFAnimation.php?folder=2014092807tIVicaZ1mQxz1eV0DTk8Zt&file=output_fmLqTj.gif

Darren McCaskie https://www.youtube.com/watch?v=4euBaEPksKc&feature=youtu.be

Marie Clare Duncan http://makeagif.com/i/QTSfHg​​

Eilish Owens http://makeagif.com/i/ugoxL0



DES320 User Centred Design – Module summary

Starting point

Outline project briefs based on outcome of ‘The future of Security” Design Search in Semester 1.


Evidence based design – keeping the user central to the mission

Extend and customize the brief

Envisage and design the intervention

Create a script and storyboard

Make a movie

Examination of different type of Interaction Design movies. (Before and after/ annotated with meta graphics, animated, talking head, interview the inventor)

Focus on Interaction and Motivation – tell the story of the effect all about the effect that the intervention has on the people in the story

(Skipped but not forgotten: Visual and Interface, the detail design of the intervention)

Covered in passing:

Calm Technology, AOMO, Ubiquitous computing

Computers as Theatre

Wearables and IoT


Attendance                                                         5%

Brief                                                                    5%

10 point key storyline – pdf document         10%

Storyboard and script – pdf documents       30%

Youtube/vimeo presentation video              50%

Summary DES134 Interaction Design Techniques

DES134 Interaction Design Techniques- Module summary

  1. Interaction Design Jobs – what is Interaction Design?
  2. Back to the future of Computing – Ted Nelson/Roy Stringer
  3. Navihedrons – Technology: 3dMax, Export, Flash, WebGL
  4. Other aspects of a Navihedron Website: Accounts, Edit/Save, A database that is dynamically written
  5. A simple three frame storyboard
  6. An exemplar use case
  7. VIIM-A paper prototypes
  8. Presentations ranging from IoT (C+J) to Jesse Schell (Amy)
  9. Using the computer as a computer – to explore a context rather than search – proposal for characteristics of a new Navihedron
  10. Brenda Laurel –Computers as Theatre: Ignore the voice behind the curtain


  1. Navihedron                               10
  2. Use case scenario                    10
  3. Interaction storyboards          20
  4. VIIM – A                                      30
  5. Project proposal                      15
  6. Reading presentations           10
  7. Attend                                         5

Hand in details for DES320

Due date: Tue 13 May

Attendance                                                     5%

Brief                                                                 5%

10 point key storyline – pdf document      10%

Storyboard and script – pdf documents    30%

Youtube/vimeo presentation video            50%

sketch diagrams

I recently did a little sketching project on twitter. It came about as a result of a bit of personal reflection. I did think that I sketch all the time. I keep notebooks, I must be on notebook 89 or something. I was looking through my notebooks to find some example sketch work and to my shock I discovered only a few sketches. I am not happy with that because I think sketching is a great way to work out answers to problems. I would hate to think of myself as someone whose work is just writing based. (A slow creeping truth)

So I resolved to do a sketch diagram every day for 30 days and tweet them day by day. It has been an interesting experience and remarkably difficult.

I was surprised about how difficult it was because I used to produce 30 sketches in a morning when I was working in Industrial Design. I should be able to do this very easily . I have discovered how easy it is to get out of practice.

The sketches concern the work of the day, some are University research work, some are teaching related figuring out ideas with students and some are related to software development projects I am working on.

Generally I am pleased with the sketches and pleased with the thinking they illustrate. Each sketch is an attempt to work out some sort of a problem. I will take a break for a while but will come back to it soon on https://twitter.com/anto_hutton


Navihedron Characteristics

Characteristics of a Navihedron (Proposal)

    • It tells a story – The story can be read from any of the 12 starting points depending on the readers point of view/interest. No matter where they start from the Navihedron still makes sense.
    • It is dynamically updated – content streaming from the web constantly updates the Navihedron. It is not a fixed content entity.
    • Drag and Drop – You can drag your own content in to a point and drop it there as a Nav point.
    • Relational – When you create the Navihedron you set the relational rules. Jump from one point to the next point only or jumps allowed to points deep or jump to anywhere (no rules).
    • Exploration not search – The Navihedron allows a user to explore interactively – in that sense it differs from a Search.
    • As content is added the Navihedron increases in Context – The Navihedron responds by updating itself when the user adds a new Nav point.
    • Suggestion Machine – The Navihedron is a suggestion machine – constantly giving you content suggestions.
    • Uses computer as a computer – The Navihedron uses the computer to search and to process and to suggest. (Ted Nelson)
    • Reversable – at any point (by some means, dependent on the design specifics) you can reverse in any exploration go backwards to where you came from. (Ted Nelsons back button?)
    • A double click creates a new Navihedron – A new Navihedron is created using the Nav point that is clicked as its start point when that point is double clicked
    • Rich links – The links that the Navihedron leads to are full of recorded – you knwo where you came from
    • Surprising content – Content should surprise and delight to keep the user interested