Design Guidelines
Getting Started
Designing with React Magma
The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of color, typography, spacing, and icons, and then continue with the components.
We also welcome contributions from people outside the React Magma team. This includes both designers within Cengage as well as outside. Join us over on our Github page to start contributing today.
Resources & Tools
Sketch
Sketch is the primary application we use for designing products within Cengage. We maintain a comprehensive set of React Magma Sketch libraries you can download containing type styles, icons, and components. If you are a designer at Cengage, and you are a current Abstract user, then you'll find the libraries there instead.
To use the Sketch libraries you need the most recent version of Sketch installed.
Abstract
We use Abstract to store all of our design files. Abstract provides version control and collaboration tools. Visit Abstract Website
inVision
We use InVision to share our designs with stakeholders and create interactive prototypes. Visit InVision Website
Guiding Principles
Cengage exists to empower students and instructors with the audacity to realize their potential and the tenacity to achieve their goals. React Magma helps us build tools that are relevant and easy to use, and create educational experiences that accelerate learning while putting our users at the center of everything we do. The following design principles guide every decision we make.
Anticipate Needs
Don't overburden me with options or choice. Proactively assume what I need and when, while equipping me with the ability to change it.
“I hate going through each student or each activity and changing things when I'm changing the same thing ... on 10, 20 or 30 of them. It is so time consuming.”
Tolerate Mistakes
Mistakes are proof that I’m trying, but they should never impede my education experience. Preventing and helping me recover from a mistake should be as easy as it was to make it.
“...I feel like I am not learning with this software because I have no way of knowing where I made my mistakes.”
Inspire Confidence
Build confidence at every opportunity. Confidence that I can improve my understanding, confidence that the paragraph I just wrote won’t get lost and confidence that I won’t get lost.
“I’m calling in because all of my material on my account is gone.”
Cultivate Focus
Distractions are plentiful and my undivided attention is scarce. Any interference must be purposefully crafted to never override my education experience.
“... You also put up an online pop-up advertisement that would not go away for a solid week and prevented me from being able to complete the homework for that week at a reasonable pace.”
Preserve Simplicity
Be intentionally simple. Making common tasks fast, and easy for me to understand without explanation allows me to concentrate on my education experience.
“The organization was complicated and it was difficult to find assignments that were due...”
Encourage Mobility
I am not constrained by device or location and I expect the same of my education experience. Mobile empowers me to succeed, regardless of location, device or time.
“I shouldn't have to use my computer to take my tests or do my homework when I have a perfectly capable mobile device. I take online courses so that I can do my homework anywhere anytime.”