An evolving overview of essential concepts and methodologies for design and development processes.

Simplicity

Simplicity helps to make complex concepts more accessible and is therefore indispensable for design and development processes. Mastering simplicity will never be conclusively possible, as the meaning of it is shifting over time while knowledge and technology evolve.

A good way to start with simplicity is to keep things clear, ensure consistency while adding as less complexity as possible. When applied correctly, it will lead to more scalable and timeless solutions.

Writing

Writing is an underrated but essential skill for designers and developers. Every written piece of communication should be understood as quickly and clearly as possible. Therefore, the standards for good writing are clarity and efficiency. Clarity of writing usually follows clarity of thought. Removing unnecessary words, decorative language, and jargon will help to communicate more efficiently.

Atomic Design

Atomic Design is a methodology that seeks its inspiration from physics: All matter is comprised of atoms, which bond together to form molecules and then complex organisms. Similarly, interfaces consist of elements (atoms) forming small building blocks (molecules) and components (organisms) up to entire templates and pages. Atomic Design helps to craft and understand design systems. It encourages consistency, scalability, and reusability while simultaneously producing less bloat.

In-depth resource:
http://bradfrost.com/blog/post/atomic-web-design/

Naming Things

Naming things is challenging, time-consuming and often inconsistent. Naming methodologies got invented to tackle these issues. One of the most popular is BEM, which stands for Block Element Modifier. Initially, it was created to bring clarity to cascading style sheets, but can be adapted to other use-cases as well.

Basically, BEM assumes that there are blocks (block) consisting of elements (block__element). Altered versions of blocks and elements are described by setting modifiers (--modifier).

.header {}
.header--inverted {}
.header__logo {}
.header__logo--vertical {}
.header--inverted__logo {}
.header--inverted__logo--vertical {}

In-depth resource:
http://getbem.com/

Spacing Things

Maintaining a spacing system has many benefits: Consistent aesthetics, less decision-making while maintaining a quality rhythm between elements, better multi-platform design and easy communication between designers and developers. As most popular screen sizes are divisible by 8 on at least one axis, a 4 and/or 8 point grid system is the favorable solution by many experts including Google’s Material Design team. Basically, this means to use multiples of 4 or 8 to define dimensions.

In-depth resource:
https://spec.fm/specifics/8-pt-grid

CSS Architecture

Writing structured CSS can be hard. While CSS-in-JS seems like a shortcut, it is not an option for everyone and every project. The following approach encourages a sane and scalable CSS architecture. Therefore, styles are grouped into the following categories:

Settings
Settings contain global configurations like custom properties and breakpoints which are shared across the system.

Base
Base styles are default styles of HTML tags like headings or paragraphs without ID or class selectors. These styles serve as the foundation for everything specified afterward in the cascade.

Objects
Objects are class-based selectors that define design patterns like containers or grids shared across the system.

Components
Components are independent parts of any system. However, unity only exists when design elements are in agreement. Therefore, components here are not entirely isolated as they inherit base styles while taking-in specific component-related styles of this category.

Utilities
Utilities are high-specificity, very explicit styles. They mostly serve one purpose and are used as overrides.

Semantic Versioning

Semantic Versioning is a ruleset on how to apply version numbers: Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when making incompatible API changes,

2. MINOR version when adding functionality in a backward-compatible manner, and

3. PATCH version when making backward-compatible bug fixes.

In-depth resource:
https://semver.org/