PageUp Design System

Transcript

1. Global Experience Language
4. Team
6. Design
7. Listen to the data Talk to real users Make it accessible Create the entire experience Make it personal No instructions necessary Leading the way Create irrational loyalty Be consistent, not uniform Experience Design Principles
8. Design Methodology
10. Foundation Colours Typography
11. Iconography
13. Examples
15. Molecules
17. Organisms
19. Templates
20. Sketch library of all components
21. Responsiveness
22. Screen breakpoints
23. Design on grids
25. Accessibility Accessibility
26. Design - Accessibility
27. Accessibility Responsive Desktop Minimum touchable area on responsive: 42x42px
31. A11Y - Assistive Technology
33. Tech
34. Tools
35. • Use BT4 source Sass files as base • Use grid system • Use only subset of components • Add PageUp brand • Extend with GEL Sass files • Customize with overrides • Improve Accessibility • Build PageUp specific components
36. Bootstrap Alerts GEL Alerts
37. PageUp specific UI patterns • Iconography (Font icons + Illustrations) • Avatar • Dots • Breadcrumb • Buckets • Ratings • Steppers • Timelines • Empty states • Loading states
38. HTML guideline • Use native HTML <a> <button> <input> <select> • Use semantic markup <nav> <header> <main> <section> • Use accessible markup aria, alt, role • Follow the markup from Bootstrap and GEL website
40. CSS Approach • Transition from "semantic" approach to "functional CSS" (Atomic CSS) • Only define the classes once • Content-agnostic components + utility classes • Mobile first
41. Utility Classes • Text sizes, colors, and weights • Border colors, widths, and positions • Background colors • Flexbox utilities • Padding and margin helper https://getbootstrap.com/docs/4.3/utilities/ https://hackerthemes.com/bootstrap-cheatsheet/
42. Advantages • CSS Reusability and Scalability • Enforced UI consistency • Developers don’t need write CSS
43. PD landing page
44. When to write CSS?
47. https://github.com/PageUpPeopleOrg/react-gel-ui
48. Product
52. Questions
53. #GEL