Grid Systems

In this course you will learn how to use two-dimensional grids for a variety of design applications. One helpful perspective is to look at grids as flexible visual systems (1) that can be playfully modified by various inputs, like randomness, mathematical calculations or interaction with mouse and keyboard. This results in a huge range of possibilities.

Ready? Let’s get started!

(1) Flexible Visual Systems is a theory, a book and a community by Dr. Martin Lorenz. The book has already been published in German and English. Get it here!

← Back to course-overview

Get started →
  1. Intro
  2. Setting up a Grid System
  3. Setting up the logic
  4. Components: Geometric Shapes
  5. Components: Images
  6. Components: Image details
  7. Components: Image details from an array
  8. Using a 2D-array for state management
  9. Interactivity 1
  10. Interactivity 2
  11. Interactivity 3
  12. Case Study: Llum Negra
  13. Case Study: Slate and Ash
  14. Addon: Grid Cells
  15. Wrapping Up