UI: create a design system for HandyMan - Githubissues

NagarroLabs / HandyMan

connect handyman with clients React app

6 stars 8 forks source link

UI: create a design system for HandyMan #12

Closed TBD closed 4 years ago

TBD commented 4 years ago

why:

have a single "source of truth" of how HandyMan should look
speed up development

how to:

go through mockups and extract components that are needed and can be reused between pages
design a color scheme (use https://coolors.co/generate )
select a grid system
create/find icons (see tools)
find React components (in blueprint, canvas, ...) and see if they can be customized to our system

output:

[x] logos - 1 logo
[x] colors - 4 colors (primary, secondary, background, text)
[x] typography - header, body, button text, form, ...
[x] grid/size/spaces - a grid system to be used
[x] icons - easy to use SVG based icons
[x] components - input fields, buttons, cards, images, ...

everything (besides components) can be created in Figma and saved there.

tools: https://figma.com/ - web based vector editor, realtime collaboration https://thenounproject.com/ - search for icons https://www.flaticon.com/ - search for icons

examples: https://blakewilton.com/Cava-Design-System - simple design system https://blueprintjs.com/docs/ - ready made React components https://canvas.hubspot.com/components - extensive design system with lots of components https://github.com/jbranchaud/awesome-react-design-systems - collection of design systems

reading corner: https://medium.com/hubspot-product/people-over-pixels-b962c359a14d - creating HubSpot Canvas https://youtu.be/Hx02SaL_IH0 - video about Github design system