https://github.com/elemental-design/principles
Abstract on creating a better digital design system
https://github.com/elemental-design/principles
Last synced: 3 months ago
JSON representation
Abstract on creating a better digital design system
- Host: GitHub
- URL: https://github.com/elemental-design/principles
- Owner: elemental-design
- License: mit
- Created: 2019-10-16T14:10:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-19T14:16:35.000Z (over 5 years ago)
- Last Synced: 2025-01-26T06:41:13.664Z (4 months ago)
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Design Principles
Learn core concepts of digital design.
Our aim is to help you define the workflow of creating a design language and **bridge your code with design**. Using a design language can prescribe you to a brand expression that may or may not match your brand. To allow for **true brand expression**, it is best to create **your own personalised** design language (style system).
You can use an existing framework like Material Design or Bootstrap, but the problem with them is that with a base setup, the brand expression is tailored around a large brand's design expression. Google's vibrant colours and use of depth with shadows may not suit everyone.
More focus is needed on **empowering individuals** with the **tools to create their own design language with customisable primitives**.
## Philosophy
Good software design should synthesise the principles of product design with technology. Inspiration should be taken from the physical world and applied inside software. While screens are 2D, texture and feedback can be breathed into an app to aid the user journey. Design should be **democratised with tooling** that **lowers the barrier of entry** to both code, and design.
Atomic design is a powerful design methodology that involves creating modular designs out of primitive elements: atoms.
**“Build systems, not pages.”**
[ref](https://material.io/design/introduction)
## Bridging Code With Design
### React Sketch.app
While restricting you to the React and Sketch ecosystem, [React Sketch.app](https://github.com/airbnb/react-sketchapp) is one of the best tools you will find that helps you to **build a scalable design system**, generated directly from your actual code.
### Styled System
### Elemental React
https://github.com/elemental-design/elemental-react/
## Grid
Material Design has a visually balanced spacing system. An 8px grid is good for keeping elements aligned and consistent (4px for typography and iconography). For desktop, it is good to use a column system.
[ref](https://material.io/design/layout/spacing-methods.html)
## Primitives
Design tools are generally comprised of some base primitives:
- Shapes
- Rectangles, ellipses, paths and text
- Attributes
- Fill, border colour, border radius/style, shadow,
React and Sketch are good tools to bridge the gap between design software and CSS attributes due to their component-based systems. React props can act as an API wrapper and syntactic sugar for things like background colour, images, patterns, blur, etc. Tooling can be used to bridge React with Sketch's open file format.
## Grammar
A common design language.
[A Pocket Thesaurus for Describing Design Work](https://medium.com/google-design/designers-thesaurus-412340363f8c)
## Reading
- https://daneden.me/2018/01/05/subatomic-design-systems/
- https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee
- https://medium.com/@_alanbsmith/layered-components-6f18996073a8
- https://medium.com/@_alanbsmith/component-api-design-3ff378458511
## Resources
- https://material.io
- https://uxplanet.org/
- https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6