Responses by Readymag.
Background: Readymag Design Workout is a collection of entertaining tasks intended to help stay creative and keep spirits high. They range from depicting your daily activities with an animated diagram to inventing functions for the buttons on a weird-looking remote control. The project was based on the DesignWorkout training program for designers and co-authored by the team of Readymag, a browser-based design tool. The target audience is anyone who wants to learn how to turn obstacles into new possibilities or breakthrough ideas.
Readymag Design Workout is a noncommercial passion project of Readymag team and DesignWorkout. The DesignWorkout system puts no limits on medium, and to solve the tasks you can use anything from paper and pencils to tomatoes and mozzarella. Still, one of our intentions was to encourage visitors to try out Readymag, a browser-based design tool that helps create and publish web projects in WYSIWYG-style without the help of developers.
Design core: Readymag offers a rich palette of design tools, including a vast font library, animations, embed capacity and more. One of our tasks was to show how to harness this richness—as limits are necessary for any decent design. That’s why we adhered to a certain minimalistic style throughout the whole project.
The primary font is Graphik, which is more or less the main font we use for Readymag projects for its strong Swiss School feeling. The color palette—yellow, red, black, white—came from the DesignWorkout brand guidelines, though they also fit neatly into Readymag’s laconic color palette. This overarching minimalism enabled us to be more creative with smaller elements.
Favorite details: The key design decision was to make almost every element of the project rearrangeable: you can drag and drop pictures and shapes wherever you want. The inspiration for that came from a list of exercises we received from the DesignWorkout team. When we looked at everything, we noticed that many were obviously inspired by the feel of paper and cardboard. You can move paper pieces of different colors to create a collage, glue or pin some of them to the background, and so on. We also wanted to show users straight away that they can interact with the project, not just browse through. Technically, this was accomplished with a piece of custom JavaScript code. Still it fits neatly into the overall no-code Readymag design style.
Challenges: Combining a playful approach with a serious task. The DesignWorkout program might be challenging and require focus. At the same time, we realized how tired everyone is of meeting deadlines and pushing themselves. So we did our best to create something that is both fun and useful, something you can pursue on your work break or in a whole week. Every user can choose a level of dedication that suits them best.
Navigation structure: We wanted to show users straight away that they can interact with the project, not just browse through. Besides rearranging everything on each page, users can complete the tasks in order or pick one of their liking. You can also go back and start over implementing new approaches and ideas.
Special navigation features: There is a Table of Contents page with tasks accessible by numbers.
Technology: The project was created entirely with Readymag. It is based on a WYSIWYG approach; therefore, creatives can achieve the desired result instantly whether through animation, original navigation or onload presets. We also used a chunk of vanilla JavaScript code to create a widget drag-and-drop effect—a feature that is accessible to any of the Readymag users on certain plans.
