DESIGN SYSTEMS
'Helpy' design system
DESIGN SYSTEMS
'Helpy' design system
DESIGN SYSTEMS
'Helpy' design system
About
Helpy design system was created for a mobile app that facilitates the translation of text or speech between different languages. The app offer features such as text-o-speech, language detection, offline mode and a variety of language options to choose from.
Project details:
Client
TranslatorGo
Role
Product designer
Date
2021-2022
Tools
Project details:
Client
TranslatorGo
Role
Product designer
Date
2021-2022
Tools
Project details:
Client
TranslatorGo
Role
Product designer
Date
2021-2022
Tools
Overview
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. In this page you will found some of the components I built for Helpy design system, but a design system is much more than just a component library.
Foundations
By establishing strong foundations in a design system, organizations can achieve visual consistency, improve usability, and streamline the design and development process.
Color: A defined color palette that includes blue as primary, light blue as secondary, and yellow as complementary color, as well as variations for different use cases. I created two gradients for several use along the app.
Typography: Roboto, because it is a clean and modern font family. With its geometric shapes and rounded corners, it provides a friendly and approachable appearance.
Grid System: A 8pt grid system, that consisted of a 8 column grid with margins and gutter of 16pt.
Shadows: I defined 2 different shadows for cards, buttons and other main components.
Border Radius: 2 variations were defined: 4pt and total roundness for main buttons.
Icons: We decided to use Feather icons.
Foundations
By establishing strong foundations in a design system, organizations can achieve visual consistency, improve usability, and streamline the design and development process.
Color: A defined color palette that includes blue as primary, light blue as secondary, and yellow as complementary color, as well as variations for different use cases. I created two gradients for several use along the app.
Typography: Roboto, because it is a clean and modern font family. With its geometric shapes and rounded corners, it provides a friendly and approachable appearance.
Grid System: A 8pt grid system, that consisted of a 8 column grid with margins and gutter of 16pt.
Shadows: I defined 2 different shadows for cards, buttons and other main components.
Border Radius: 2 variations were defined: 4pt and total roundness for main buttons.
Icons: We decided to use Feather icons.
Foundations
By establishing strong foundations in a design system, organizations can achieve visual consistency, improve usability, and streamline the design and development process.
Color: A defined color palette that includes blue as primary, light blue as secondary, and yellow as complementary color, as well as variations for different use cases. I created two gradients for several use along the app.
Typography: Roboto, because it is a clean and modern font family. With its geometric shapes and rounded corners, it provides a friendly and approachable appearance.
Grid System: A 8pt grid system, that consisted of a 8 column grid with margins and gutter of 16pt.
Shadows: I defined 2 different shadows for cards, buttons and other main components.
Border Radius: 2 variations were defined: 4pt and total roundness for main buttons.
Icons: We decided to use Feather icons.
Illustrations
The illustration is characterized by its simplified and minimalist approach, using clean lines and basic shapes to depict people.
The use of rounded shapes adds a soft and friendly touch to the overall composition. It creates a welcoming and approachable aesthetic, making the illustrations visually appealing and relatable.
We decided to use this style because it combines simplicity, approachability, and a touch of whimsy.
Illustrations
The illustration is characterized by its simplified and minimalist approach, using clean lines and basic shapes to depict people.
The use of rounded shapes adds a soft and friendly touch to the overall composition. It creates a welcoming and approachable aesthetic, making the illustrations visually appealing and relatable.
We decided to use this style because it combines simplicity, approachability, and a touch of whimsy.
Illustrations
The illustration is characterized by its simplified and minimalist approach, using clean lines and basic shapes to depict people.
The use of rounded shapes adds a soft and friendly touch to the overall composition. It creates a welcoming and approachable aesthetic, making the illustrations visually appealing and relatable.
We decided to use this style because it combines simplicity, approachability, and a touch of whimsy.
Components
Components are reusable and modular elements that are used to construct the UI of a product.
They are reusable, consisten, scalable, and modular. Common examples of components in this design system include buttons, navigation menus, cards, modals, textfields, searchbar, lists, etc.
Each component has its own defined set of attributes, styles, and interactions.
Components
Components are reusable and modular elements that are used to construct the UI of a product.
They are reusable, consisten, scalable, and modular. Common examples of components in this design system include buttons, navigation menus, cards, modals, textfields, searchbar, lists, etc.
Each component has its own defined set of attributes, styles, and interactions.
Components
Components are reusable and modular elements that are used to construct the UI of a product.
They are reusable, consisten, scalable, and modular. Common examples of components in this design system include buttons, navigation menus, cards, modals, textfields, searchbar, lists, etc.
Each component has its own defined set of attributes, styles, and interactions.
More components
Site built in Framer
Site built in Framer
Agustina Del Moro © 2023
Agustina Del Moro © 2023