This week we looked at prototyping, specifically reusable. design systems where we followed along with our lecturer’s Figma Demo, and designing the system ourselves.

Gestalt Principles

First we looked at Gestalt principles, which are psychology based rules of visual perception that explain how the brain organises visual information as unified wholes. They are especially useful in design, and helping to guide how information is organised. There are six common gestalt principles.

• Proximity

  • Elements that are close together are perceived as a group.

• Similarity

  • Things that look similar (shape, color, size) are seen as part of the same group.

• Continuity

  • The eye prefers to follow continuous paths or lines rather than abrupt changes.

• Closure

  • Our brain fills in missing parts of a design to see a complete shape.

• Figure & Ground

  • We naturally distinguish between an object (the figure) and its background (the ground).

• Symmetry

  • Symmetrical elements are perceived as belonging together, even if they’re far apart.

  

https://www.interaction-design.org/literature/topics/gestalt-principles#:~:text=How many Gestalt principles are,(also known as prägnanz).

Reusable Design Systems

A reusable design system is a collection of design components and guidelines intended to manage design at scale using reusable components and patterns. They are used to ensure consistency, efficiency and scalability in design and development.

Design Tokens

Design tokens are the foundation of a design system - they are the smallest, reusable pieces of a brand’s visual identity, which can keep consistency across screens and platforms, speed up development, update tokens once and styles update everywhere. Using variables as design tokens we can adjust the typography, spacing, borders, and colours for all the components that use them in one go. Below are examples of the design tokens:

• Colors
• Font sizes
• Spacing
• Border radius, line height, opacity etc.