Symbolism of forms

On the most basic level, graphic design is about creating meaning from shapes. These shapes can be anything from the simplest geometrical shapes, to complex shapes holding a lot meaning – like letters.

Creating a functional design often entails working with these shapes to establish a good relationship between the content you’re trying to design, and the form you’re trying to present it in. Understanding the different techniques you can use to create a succesful relationship is therefore crucial.

So this is where we will begin our journey: By looking at simple black and white shapes as the form, and try to create succesful relationships between them using different rules of composition.

Workshop Task 1.
Symbolism of forms

Important Workshop you will have to bring: 1 scissor, minimum 6 sheets of A4 paper and minimum 2 black sheets A4 paper. All available in the college shop. (opening hours daily from 09.30 till 19.00). For the afternoon you need a laptop. If you don't have one you can borrow one from the library (limited availability) or simply ask a classmate with laptop and work together.

By using only black squares, create a graphic image that best expresses the meaning of the following words.

Order | Increase | Bold | Congested | Tension | Heavy

Carefully consider the following 5 relationship:
Format – How big is my canvas?
Shape – Rectangle? Triangle? Ellipse?
Position – Where do we place it?
Dimension – What size should it have?
Rotation – Do I turn it?

Format: A5

A few examples


All designs starts with a constrained area – let’s call it the Canvas. The canvas dictates the way we understand the forms in it.

The rectangular canvas makes no attempt to emphasize any direction. It concentrates the viewport into a well-known shape, and makes it easy to understand the placement of the elements inside of it.

The horizontal canvas is very natural, shaped to the way we experience the world. The human brain is optimized for analyzing horizontal movement (that orange thing moving behind the trees is probably a tiger!) in opposed to vertical movement.

The vertical canvas stands out and calls attention to itself. It’s more aggressive and seems more “designed”, which is probably why most posters have a vertical format.

Even a simple thing like choosing the bounds of your design matters.
In P5 we create a canvas in the function setup() by typing: createCanvas(800, 600);

Homework Task 1a.
Following the workshop and introduction to P5.js, you are now asked to created 3 new visual word representation in P5. Consider using interaction (for example mouseX and mouseY) and other Events you can find in the P5 reference page.

Note: This task is to get you familiar with basic coding and the P5 library, it is not about making your first masterpiece (although this might happen). There is no right or wrong, simply be curious and Playful. Explore the P5 reference and learn by trial and error. These experiments will be part of your final submission.

Canvas size: 800×600
Any use of shape and colours is allowed.

Save each sketch in a folder in the following structure: word-firstnamelastname
For example: balance-jaapdemaat or scale-jaapdemaat

Pick 3 words from the following list:

  1. balance
  2. Contrast
  3. Unity
  4. Repetition
  5. Emphasis
  6. Rhythm
  7. Pattern
  8. Harmony
  9. Scale
  10. Symmetry
  11. Proportion
  12. Alignment
  13. Speed
  14. Friction
  15. Space
  16. Weight
  17. Time
  18. Opacity
  19. Quiet
  20. Shout
  21. Density
  22. Explosion
  23. Implosion
  24. Grid
  25. Magnetic
  26. Gravity
  27. Melt
  28. Splinter
  29. Drop
  30. Empty
  31. Full
  32. Arrangement
  33. Chaos
  34. Linear
  35. Angular
  36. Arc
  37. Complex
  38. Simple
  39. Force
  40. Yellow

Homework Task 1b.
Read the following article and write a short (max 300 words) written response
Hackers and Painters by Paul Graham.

A field guide to Debugging
At all levels, programmers encounter bugs and will often spend more time debugging than actually programming the application. You can expect to spend a lot of time doing this and so it is important to develop good strategies for identifying and working through bugs as you learn to program in p5.js. Read the following article: This is optional but it will save you lots of time and frustration if you do read it!

Illustration by Taeyoon Choi

Video Tutorial
Daniel Shiffman has made many brilliant video tutorials on P5.js. Some topics we have all ready covered in class. Your last tasks for this week is to watch these tutorials and get familiar with the basics. You need to full understand these basics for next weeks class.


P5.js: What is it

P5.js: Basics of drawing

P5.js: Color

P5.js: Variables 1

P5.js: Variables 2

P5.js: JavaScript objects
Link to code used in this tutorial on Github

P5.js: the map

P5.js: the random()

P5.js: Introduction to Conditional Statements

P5.js The Bouncing Ball

p5.js: else and else If, and and or

p5.js: Boolean variables

Another great tutorial on transformations of the coordinate space including translate(), rotate(), scale(), push(), and pop().

All books are available in the library. Click on the image for a direct link.

Getting Started with p5.js
Lauren McCarthy, Casey Reas, and Ben Fry.

Published October 2015, Maker Media. 246 pages. Paperback.

Generative Design: Visualize, Program, and Create with Processing
Benedikt Gross, Hartmut Bohnacker, and Julia Laub
Princeton Architectural Press, 2012

Form and Code in design, art and architecture
Casey Reas
Princeton Archit.Press, 2010

The abc’s of the bauhaus and design theory
Ellen Lupton and J. Abbott Miller, editors

Thames & Hudson
ISBN 978-0-500-27714-0

Visual Grammar
Christian Leborg

A design Primer
ISBN 978-1-56898-581-7

A primer of visual literacy
Donis A. Donis

MIT Press
ISBN 0-262-54029-0