What is InVision?

InVision has become a fundamental design tool. At Motel, we use InVision every day to design new features for web and mobile apps, and to review design direction with our clients. It's a browser-based platform that allows users to quickly upload designs and create clickable, interactive prototypes.

How do we illustrate an e-course?

We wanted something we could replicate for multiple course, but it needed to be relevant and unique to the course in question.

For the first book, we illustrated over 100 individual icons to start, each with their unique take on the course's subject. In this case "Making a Product Designer". We wanted the icons to represent the topic and to be relevant, not entirely abstract.

For each course, we sat down and illustrated a collection of objects that told a complex story.

To take this a step further, we created an icon, grid, and color constraint for each icon set.

This would allow us to illustrate individual icons for each course. With the grid constraint, we could arrange different icons into a pattern for background and graphic elements, or leave them on their own. With the color constraint, each course could have their set of colors, but would look consistent when courses were arranged together. If you're curious about this specifically, Mark Johnson (founding partner of Motel) described this in detail here.

With indefinite courses in the pipeline on design-related topics, Motel created a grid system and icon constraint that would allow a consistent look, but completely custom icon set from book to book.

We've designed nine courses, and counting.

The icons and system Motel created for InVision have proven to be a hit. Not only are they fun and playful, they add meaning to the courses that are being offered around the world, which anyone can take, for free.