BRIEF
THE
This is a collaborative project with fellow motion designer Ana Kuster, who specializes in interactivity, animation, and design. Ana's Website
The objective of this project is to create an interactive principles of design infographic that's designed to better help students understand the principles through a hands on interactive approach. The piece would be displayed on our departments hallway kiosk and online for screens.
INTERACT WITH THE PROJECT ON THE RIVE MARKETPLACE!
RESEARCH
CONCEPT
CHOOSING PRINCIPLES OF DESIGN
A key objective for this project was to carefully select 4 - 6 design principles to use in our experience, however the names and types of design principles varied from each list we researched.
Our solution was to contact and meet with our college's design faculty and receive their input. We ended up landing with hierarchy, contrast, unity, and balance due to their importance and ability to reflect many other principles.
DESIGN CONCEPT RESEARCH
To start developing our designs we explored 3 different concepts and design directions. our first concept was focused on a Tech UI direction for visual clarity. Our second concept was a line based direction in witch all of our elements where crafted with strokes. Our final concept was an art nouveau inspired direction in witch the flowing organic forms of art nouveau architecture would drive our designs overall structure.
PITCHES
DESIGN
DESIGN ROUND 1
DESIGN ROUND 2
DESIGN ROUND 3
These designs were included in our first concept pitch to our art director. The design above was chosen for it's fun and approachable quality.
Our second design round was focused on simplifying our designs and emphasizing the principles over the background elements.
TECHNICAL
WORKFLOW
Our final round of designs was focused on limiting color to add a more serious, informative quality to our design. The direction above references the wavy quality of art noeveau with modern gradients.
StRUCTURE AND FLOW
The project is created in Rive, and each separate screen in this experience is a component in Rive, which behaves in a similar way to a precomp in After Effects. There's a component for the main menu, and then one component for each principle.
STATE MACHINE
The state machine in Rive allows for users to add creativity to their designs by using commands in block form rather than script form like traditional coding. Our state machine is designed to minimize all concepts but the one selected while adding transitions to make sure the experience runs as clean as possible.
OUTCOMES
LEARNING
This project was full of technical, design, and conceptual challenges. Condensing the wide scope of principles of design into just 4, and having them present themselves clearly and uniquely as their own principle proved to be a challenge.
We observed that using other design principles to help convey our main principle helped to give each main principle a unique quality and differentiate them from each other, witch also helped with making the project more engaging.
This project has made me more confident in my abilities in rive and my understanding of interactivity for screens.
vIEWER PANEL
Every component goes through what could be considered the "main precomp" of the file, which in this case is an artboard called "VIEWER." This artboard contains all the components and handles transitions from one component to another, creating smooth and seamless switches between screens.
PRINCIPLE SWITCHES
The principle switches use invisible hitboxes that detect taps or clicks. When triggered, each switch toggles a Boolean that changes the circles’ position, scale, or color. Clicking the back button resets all switches to their default “off” state so the principle screen always returns to its baseline setup.