top of page
orelo.gif

Prototype made with Protopie

Scaling a design system

for a podcast app

The need for Design Systems goes hand in hand with the need for scale, efficiency, and consistency in design, and that was exactly what Orelo needed.

​

In collaboration with a very good friend of mine, and also a great designer, Henrique Sanches, we designed Orelo's Design System in Figma and started by defining the first tokens.

​

As Adobe says:

 

"Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates."

​

A collection of design tokens is what we called Foundation in this project. Check it below: 

Screen Shot 2021-01-31 at 20.32.31.png
Screen Shot 2021-01-31 at 20.32.51.png
Screen Shot 2021-01-31 at 20.33.22.png
Screen Shot 2021-01-31 at 20.33.04.png
Screen Shot 2021-01-31 at 20.33.37.png
Screen Shot 2021-01-31 at 20.33.48.png

After designing the Foundation, we used those tokens to create the Components session: a series of standalone UI elements designed to be reusable, like a button. And we specified its functional behaviour by building instructions that would allow developers to use these componentes in a logical and consistent way.

​

The components helped us to create the first reference screens of their new app:

Screen Shot 2021-01-31 at 21.00.14.png
Screen Shot 2021-01-31 at 21.00.25.png
Screen Shot 2021-01-31 at 21.00.25.png
Screen Shot 2021-01-31 at 21.00.35.png
Screen Shot 2021-01-31 at 21.00.50.png
Screen Shot 2021-01-31 at 21.01.06.png
Screen Shot 2021-01-31 at 21.02.22.png
Screen Shot 2021-01-31 at 21.01.44.png
Screen Shot 2021-01-31 at 21.01.28.png
Screen Shot 2021-01-31 at 21.07.45.png

© 2021 by Amanda Elyss. Proudly created on a Saturday morning.

bottom of page