Shape Lab — Canvas
Two years in development, Shape Lab is an open-ended geometry app designed for the iPad and created for the primary school classroom environment.
Featuring shape recognition technology, Shape Lab allows students and teachers to explore shape and measurement concepts simply by drawing on the screen.
The complex, open-ended nature and broad target audience of the app presented particular design challenges. We needed to provide a set of shape and measurement tools accessible for everyone from very young children with developing motor skills right through to adults. This specific set of requirements created conflicting priorities that needed to be carefully balanced.
Students want to draw shapes and interact with them to discover and measure their mathematical properties. Users should be able to create shapes with precision even if they have poor motor skills.
As much of the screen as possible should be dedicated to drawing shapes. From the canvas students should be able to access all the tools provided quickly and easily so they can focus on their work.
Using shape recognition the students draw a shape and it is turned into a precise shape for them to work with. We also included snapping guides to help create complex shapes and patterns with multiple shapes.
The canvas itself is a drawing space with a static background grid. Much of the work focussed on arranging the toolbars in a way that meant all the tools were easily accessible without taking up too much space.
After exploring a variety of different approaches, it became clear a simple toolbar across the top of the screen was the best solution.
The icons were then grouped into subsets; actions that affect the whole document, actions that only affect the selected shape, and actions that are only used once in a document.
The focus for the visual design was to ensure the student’s work is the main focus. The toolbar itself was made transparent so shapes on the canvas would show through and allow a little bit of extra space to work with.
I created a colour palette for the shapes that work well together. Then the UI colours were chosen to work with the shape colours.