Design

Form Follows Function

Design for digital products

Design for digital products

Design for digital products

Hardware design

Hardware design

Hardware design

Graphic Design

Graphic Design

Graphic Design

Design for digital products

Good design improves the usability and clarity of digital products, strengthens brand perception, and makes a measurable contribution to achieving business goals.

Design for digital products

Good design improves the usability and clarity of digital products, strengthens brand perception, and makes a measurable contribution to achieving business goals.

1

Mockups and wireframing

Mockups are the first step in UI design: they combine insights from wireframes and prototypes, define views and details, and incorporate corporate design as well as product branding.

1

Mockups and wireframing

Mockups are the first step in UI design: they combine insights from wireframes and prototypes, define views and details, and incorporate corporate design as well as product branding.

2

Motion and Transition Design

Motion and transition design bring interfaces to life, make orientation easier, and reduce errors. Good animations guide users through states and create a smooth, intuitive user experience.

2

Motion and Transition Design

Motion and transition design bring interfaces to life, make orientation easier, and reduce errors. Good animations guide users through states and create a smooth, intuitive user experience.

3

UI Design Assets, Templates and Kits

All UI elements are finalized and collected in libraries. A consistent, atomically structured design system enables the rapid creation of additional UIs and automatically applies changes across all environments.

3

UI Design Assets, Templates and Kits

All UI elements are finalized and collected in libraries. A consistent, atomically structured design system enables the rapid creation of additional UIs and automatically applies changes across all environments.

4

Design handbook and guidelines

A style guide defines the design rules of a UI: elements, spacing, states, behavior, grids, colors, and typography. It serves as the basis for the efficient development of additional digital touchpoints.

4

Design handbook and guidelines

A style guide defines the design rules of a UI: elements, spacing, states, behavior, grids, colors, and typography. It serves as the basis for the efficient development of additional digital touchpoints.

1

Mockups and wireframing

Mockups are the first step in UI design: they combine insights from wireframes and prototypes, define views and details, and incorporate corporate design as well as product branding.

2

Motion and Transition Design

Motion and transition design bring interfaces to life, make orientation easier, and reduce errors. Good animations guide users through states and create a smooth, intuitive user experience.

3

UI Design Assets, Templates and Kits

All UI elements are finalized and collected in libraries. A consistent, atomically structured design system enables the rapid creation of additional UIs and automatically applies changes across all environments.

4

Design handbook and guidelines

A style guide defines the design rules of a UI: elements, spacing, states, behavior, grids, colors, and typography. It serves as the basis for the efficient development of additional digital touchpoints.

Responsive Design

Responsive design ensures that websites and apps look and function well on any device by automatically adjusting layouts, font sizes, and controls to fit the screen size and orientation. This keeps the experience clear, fast, and accessible on smartphones, tablets, and desktops.

BFSG – Accessibility Strengthening Act

Atomic Design Library

Branded Guidelines

A hand holding a smartphone showing the website homepage in front of an open laptop with the same website in the background
Dunkelpurpur zu Rot zu Orange Farbverlauf
Modern workspace with a large monitor displaying a component design library, keyboard, mouse, a small potted plant, and a chair in front of a window with daylight
Orange letters 'UX' and pink characters '2B' arranged diagonally on a black background with four gray circles at the corners of a dashed square

Responsive Design

Responsive design ensures that websites and apps look and function well on any device by automatically adjusting layouts, font sizes, and controls to fit the screen size and orientation. This keeps the experience clear, fast, and accessible on smartphones, tablets, and desktops.

A hand holding a smartphone showing the website homepage in front of an open laptop with the same website in the background
Dunkelpurpur zu Rot zu Orange Farbverlauf
Modern workspace with a large monitor displaying a component design library, keyboard, mouse, a small potted plant, and a chair in front of a window with daylight
Orange letters 'UX' and pink characters '2B' arranged diagonally on a black background with four gray circles at the corners of a dashed square

Responsive Design

Responsive design ensures that websites and apps look and function well on any device by automatically adjusting layouts, font sizes, and controls to fit the screen size and orientation. This keeps the experience clear, fast, and accessible on smartphones, tablets, and desktops.

A hand holding a smartphone showing the website homepage in front of an open laptop with the same website in the background
Dunkelpurpur zu Rot zu Orange Farbverlauf
Modern workspace with a large monitor displaying a component design library, keyboard, mouse, a small potted plant, and a chair in front of a window with daylight
Orange letters 'UX' and pink characters '2B' arranged diagonally on a black background with four gray circles at the corners of a dashed square
Six horizontal rows, each with eight colored swatches arranged side by side on a black background. Each row shows its own color family, from top to bottom: yellow and orange tones, green tones, blue tones, purple tones, and pink tones. The swatches are circular and the same size. The arrangement and variety of colors suggest a color palette designed for user interfaces.

Defined color palette

Black-and-white line drawing of a sine curve with a white point at the peak and several dotted points below it

Motion Design

Six horizontal rows, each with eight colored swatches arranged side by side on a black background. Each row shows its own color family, from top to bottom: yellow and orange tones, green tones, blue tones, purple tones, and pink tones. The swatches are circular and the same size. The arrangement and variety of colors suggest a color palette designed for user interfaces.

Defined color palette

Black-and-white line drawing of a sine curve with a white point at the peak and several dotted points below it

Motion Design

A person’s hand in an orange sweater working at a table with several wireframe sketches and a pen
A person’s hand in an orange sweater working at a table with several wireframe sketches and a pen

Wireframing

Several semi-transparent, dark-styled user interface elements with titles, labels, a search field, and buttons on a black background

Industrial Systems

A person’s hand in an orange sweater working at a table with several wireframe sketches and a pen

Wireframing

Several semi-transparent, dark-styled user interface elements with titles, labels, a search field, and buttons on a black background

Industrial Systems

Hardware design

UX for hardware goes far beyond attractive interfaces: it shapes interaction with physical products in an intuitive and cohesive way. Ergonomics, tactile qualities, and material properties ensure that a product feels truly good.

Hardware design

UX for hardware goes far beyond attractive interfaces: it shapes interaction with physical products in an intuitive and cohesive way. Ergonomics, tactile qualities, and material properties ensure that a product feels truly good.

1

From first ideas to sketches

From initial ideas, rough sketches quickly emerge—on paper, whiteboards, or digitally. Nothing needs to be perfect yet. The goal is to freely explore shapes, interactions, and scenarios without technical limitations.

1

From first ideas to sketches

From initial ideas, rough sketches quickly emerge—on paper, whiteboards, or digitally. Nothing needs to be perfect yet. The goal is to freely explore shapes, interactions, and scenarios without technical limitations.

2

Development of a testable prototype

As soon as promising ideas emerge, a simple prototype is created—for example as a 3D print or simply out of cardboard. It doesn’t have to be perfect; it should make interactions tangible. Early testing uncovers usability issues and saves resources.

2

Development of a testable prototype

As soon as promising ideas emerge, a simple prototype is created—for example as a 3D print or simply out of cardboard. It doesn’t have to be perfect; it should make interactions tangible. Early testing uncovers usability issues and saves resources.

Black-and-white technical product drawing of an elongated device

Product sketch

Close-up of a white digital hardware prototype with a small silver button, a green display opening, and four glowing dots

Digital Prototype

Hands use a rotating tool to work on a white 3D-printed prototype on a yellow surface

3D printed prototype

Graphic Design

Our graphic design services are an integral part of every project: from icons and visual elements to graphics, layout, and typography. We create clear, consistent, and high-quality designs that convey your brand identity and enhance the user experience.

Graphic Design

Our graphic design services are an integral part of every project: from icons and visual elements to graphics, layout, and typography. We create clear, consistent, and high-quality designs that convey your brand identity and enhance the user experience.

Mann in grauem Hemd hält schwarze Kamera

Icon set

Abstract graphic with two vertically extending, tapering shapes, divided at the bottom into several narrow stripes with orange and pink ends

Data and infographics

Sketch of a device with a hand inserted into it, along with two smaller detail drawings showing operation from above and from the side

Illustrations

Person wearing glasses in front of a monitor displaying color correction software with a color wheel and video preview open

Color Grading

FAQ

What is meant by UI design?

How does UI design differ from UX design?

Why is professional UI design so important?

Can UI design measurably improve existing products?

Design is not a goal, but a means to an end.

Good design is based on smart ideas and continuously evolves through user testing.

Design is not a goal, but a means to an end.

Good design is based on smart ideas and continuously evolves through user testing.

Design is not a goal, but a means to an end.

Good design is based on smart ideas and continuously evolves through user testing.

Loop.Lead.Love.

UX2B GmbH
Leutragraben 1 (JenTower)
07743 Jena, Germany

+49 (0) 3641 3163986
kontakt@ux2b.de

All rights reserved. © UX2B GmbH 2026

UX2B GmbH
Leutragraben 1 (JenTower)
07743 Jena, Germany

+49 (0) 3641 3163986
kontakt@ux2b.de

Loop.Lead.Love.

All rights reserved. © UX2B GmbH 2026