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.
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.”
While restricting you to the React and Sketch ecosystem, React Sketch.app is one of the best tools you will find that helps you to build a scalable design system, generated directly from your actual code.
https://github.com/elemental-design/elemental-react/
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.
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.
A common design language.