Amplication

Input Component
Default TextButton
Github Repository Selection
Matanforu/test2https://github.com/matanforu/test2
Select
System Colors
#7950ED#A787FF#53DBEE#15192C
Button ComponentCommit Changes
Icons
Drag us

Wasn't it a little messy?

That's how the design system were

Lets get organized

What was the impact?

WEBSHOP

Broken components

Fixed all Broken components that didn't work. It helped us to use the components in various screens resolutions and was easy to check responsiveness

Icon library

Created a icon library organized alphabetically in order to make the developers life easier by searching their names instead of the category

Organized files and documentation

Uploaded to Icomoon library and created labels for each components

What about the
Landing Page?

Made iconography for the landing page

Inspiration

Github Authorization inspired me with the design of the elements in the rest of the site

GitHub authorization inspirationThe icon style it led to

Design Process

It took couple of sketches in order to get to the desired shape

Inspirations
Sketches
Result

Inspirations

Creating a mood board by gathering ideas

Sketches

Provide sketches and directions to reach the desired shape

Result

It is important to choose the right angle, color, and illustration

Iconography

illustration made for the features page

Instant GraphQLREST APIIdentity & PermissionsReact Admin UINode.js Code GenerationApplication DeploymentOpen SourceWebhooks IntegrationVersion ControlGitHub Sync