Lesson Design

Design Tools

Having a streamlined design production benefits everyone in the process. We've found these to be the best design tools to support our workflow. Suggestions and improvements are welcome, we're always iterating to improve.

Sketch for Interfaces

Sketch is the best tool for designing interfaces - from sims to viewer skins that frame the lesson. We’ve created a template file containing all the core parts of a lesson design - font heirarchies, colour palettes, viewer and default input styles. Reusable elements are the key to consistent designs across a lesson, which Sketch handles well with symbols.

Photoshop for bitmaps

For editing and manipulating images, nothing beats Photoshop. We use this for creating lesson backgrounds, scenes, assets and diagrams. We then export these assets to incorporate into the rest of the lesson design in the Sketch file.

Invision for feedback

Invision is the easiest way to get stakeholder feedback, and keep them updated on design updates as the project progresses. After trialling many competitors (read, all of them) we’ve found there is no better way to collect feedback, and most importantly for designers, action it. Use the Craft plugin by Invision to sync artboards from Sketch.

Invision Inpsect for handover

Inspect helps us handover designs to Developers. Syncing your work to Invision via Sketch allows it to be shared with developers that have been added to the prototype. Once synced, developers can click on design elements to find their CSS properties and relative distances, to help them create the design.