Kostenloser SEO-Report für Ihre Website

UI Design Agentur für Web & Apps – Screendesign & Design-Systeme

Design, das eine Roadmap überlebt.

Screendesign für Websites und Web-Apps, Produkt-UI und Design-Systeme, die halten, während das Produkt wächst. Als UI Design Agentur aus Innsbruck designen wir wie Engineers und entwickeln wie Designer – jedes Screendesign wird von denselben Leuten gebaut, die es entworfen haben. Das Design-System ist kein Stickeralbum, sondern der Quellcode dafür, wie das Produkt aussieht.

Design-Projekteab €3.900

Endpreis nach Diagnose — vor Projektstart schwarz auf weiß.

Alle Preise

/ Kommt Ihnen bekannt vor?

Warum Screendesigns in der Umsetzung sterben.

  1. 01

    Schöne Screens, andere Website

    Das Figma-File war perfekt. Was live ging, sieht anders aus – weil Designer und Entwickler nie dieselbe Sprache gesprochen haben.

  2. 02

    Jede neue Seite ein neuer Look

    Drei Designer, vier Blautöne, sechs Button-Varianten. Ohne System driftet jede Erweiterung weiter weg von der Marke.

  3. 03

    UX-Probleme erst nach dem Launch

    Der Ablauf wurde nie getestet, nur gezeichnet. Die Nutzer finden die Lücken – mit Support-Tickets statt mit Feedback.

  4. 04

    Die Agentur liefert Bilder, kein Produkt

    Ein Design-Paket, das die Entwicklung erst interpretieren muss. Übergabe dauert Wochen, Details gehen verloren, niemand fühlt sich zuständig.

/ Was bei uns anders ist

UI Design, das von den Leuten gebaut wird, die es entworfen haben.

  1. Design und Entwicklung aus einer Hand

    Wir entwerfen den Screen und bauen ihn. Kein Übergabeverlust, keine Interpretation – was Sie im Prototyp freigeben, geht so live.

  2. Design-System statt Sticker-Sheet

    Tokens, Typografie, Komponenten und Abstände als Quellcode. Jede neue Seite und jedes neue Feature sieht automatisch nach Ihrem Produkt aus.

  3. UX vor UI

    Erst der Ablauf, dann die Oberfläche. Klickbare Prototypen, mit echten Nutzern getestet, bevor eine Zeile Code entsteht.

  4. Festpreis ab €3.900

    Der Umfang steht im Angebot, der Preis auch. Für Web-Apps, SaaS-Oberflächen und Websites, die mehr als eine Vorlage brauchen.

Was Sie bekommen

Systeme, keine Screens.

  • / 01

    Screendesign für Web & Apps

    Oberflächen für Websites, Web-Apps und Dashboards – als klickbarer Prototyp in Figma und als gebaute Komponenten. Responsive von Anfang an, nicht als Nachgedanke.

  • / 02

    Design-Systeme

    Tokens, Typografie, Komponenten und Abstände, die halten, während das Team wächst. Dokumentiert, versioniert, in Code – nicht nur in einer Figma-Bibliothek.

  • / 03

    Produkt-UI & UX

    Abläufe, Zustände, Fehlerfälle, leere Zustände – die Arbeit, die eine Web-App benutzbar macht. Getestet mit Nutzern, nicht nur mit Stakeholdern.

  • / 04

    Marken-Identität & Marketing-Layouts

    Logo, Farbwelt, Typografie und die Marketing-Seiten, die dazu passen. Wenn eine Marke schon da ist, arbeiten wir mit ihr – nicht gegen sie.

Tools, die wir verwenden

  • Figma
  • Tailwind Tokens
  • Phosphor / Lucide
  • Framer Motion
  • shadcn/ui
  • Inter / Instrument Serif

Wie wir arbeiten

  1. Zuhören

    Produkt, Marke und Zielgruppe prüfen. Oft machen wir zuerst ein Problem sichtbar, statt sofort zu zeichnen.

  2. Eingrenzen

    Tokens vor Komponenten, Komponenten vor Screens. Die Hierarchie entscheidet, ob das System zusammenhält.

  3. Bauen

    In Figma gestalten, im Code spiegeln, unterwegs dokumentieren. Engineers liefern Designs aus, die sie lesen können, nicht interpretieren müssen.

  4. Begleiten

    Design-Systeme zerfallen ohne Pflege. Wir bleiben nah, damit das System lebendig bleibt.

Über das Studio gesagt

Wir lassen die Arbeit zuerst sprechen.

  • I cannot recommend Yuriy enough. He designs and builds beautifully and correctly, communicates clearly, and makes the work fun. If you need a high-performance website for your business — look no further.

    Griffin Stewart

    Mitbegründer, 5DayDeal

  • Yuriy is by far one of the best developers I've ever worked with. Skill, ability, communication — all top notch. Best of all, he thinks above and beyond the task and recommends a better alternative when one fits.

    Gary Rudd

    Mitbegründer, LifeLock Promo Codes

  • Yuriy and his team are simply the best. They take a vision and turn it into a complete work of art — every aspect of the solution completed professionally and to perfection.

    Douglas Geller

    Gründer & CEO, GDSI

/ Das Paket

Design-Projekte ab €3.900 – Umfang und Preis im Angebot.

Endpreis nach Diagnose · €120 pro Stunde außerhalb des Umfangs

  • Screendesign für Websites, Web-Apps und SaaS
  • Klickbarer Figma-Prototyp, getestet vor dem Code
  • Design-System: Tokens, Typografie, Komponenten, Abstände
  • Dokumentiert und versioniert im Code, nicht nur in Figma
  • Abläufe, Zustände, Fehlerfälle und leere Zustände
  • Gebaut von denselben Leuten, die es entworfen haben

Ausgewählte Arbeiten

Ausgewähltes Produktdesign & UX.

Ein paar Projekte, bei denen Design-System und Umsetzung dieselbe Aufgabe waren. Vorher-Nachher, wo wir es haben – die ganze Geschichte steht in der jeweiligen Case Study.

/ 01

Reini Happ und Freunde

Non-Profit · Spendenseite · Innsbruck

  • Marken-Identität
  • UI-Design
  • Web-Umsetzung
Reini Happ und Freunde – die alte Standard-Theme-Spendenseite, vor dem Rebuild
BEFORE
Reini Happ und Freunde – die neu gestaltete, gebrandete Spendenseite
AFTER

Problem

Eine Website, die wie ein nachträglicher Einfall gebaut war – Standard-Theme, kaputte Assets und Spenden hinter einer 22-stelligen IBAN, die man in die Banking-App tippen musste.

Approach

Eine neue Marke und ein fokussierter Rebuild: Spenden mit einem Tap über Stripe und PayPal und ein eigener Post-Type, der die Erfolge des Teams automatisch zusammenrechnet.

Outcome

Eine Spendenseite, die endlich zum Team dahinter passt – Spenden mit einem Tap, Summen, die sich selbst zählen.

Spenden über Stripe + PayPal
1-Tap

Spenden über Stripe + PayPal

Summen automatisch gezählt
auto

Summen automatisch gezählt

Case Study lesen

/ 02

Formula Foundry

B2B-SaaS · Komplettes Produkt-Launch · End-to-End gebaut

  • Marken-System
  • Produktdesign
  • Design-System
Formula Foundry – Marketing-Site, Add-ons und Kundenportal
AFTER

Problem

Ein Startup für Spreadsheet-Power-Tools brauchte ein ganzes Produkt, das sich am ersten Tag wie ein Produkt anfühlt – zwei Add-ons, ein Kundenportal und eine Marketing-Site –, bevor es ein einziges Testimonial gab.

Approach

Eine Marke und ein Design-System über alle Flächen: das Google-Sheets-Add-on, das Excel-Add-in, das App-Portal, die Marketing-Site und die nutzerbasierte Abrechnung – End-to-End gestaltet und gebaut, auf einen Launch-Termin.

Outcome

Kohärent genug, dass Daten- und Finanzteams ihm vom Launch an vertrauten – und der organische Fußabdruck wuchs, als Content- und Vergleichsseiten live gingen.

Suchimpressionen in ~6 Monaten
+54×

Suchimpressionen in ~6 Monaten

organische Klicks

organische Klicks

Flächen, ein Launch
4

Flächen, ein Launch

Case Study lesen

/ 03

Structura

Unser eigenes Produkt · Marketing-Site, App-Portal & Docs

  • Marken-Identität
  • Produkt-UI
  • Design-System
Structura – Marketing-Site mit der Produkt-UI im wp-admin
AFTER

Problem

Unser eigenes Produkt brauchte ein Gesicht – eine Marketing-Site, ein App-Portal und eine Docs-Site, die als ein System lesen, plus eine Produkt-UI im WordPress-Admin, wo Design sonst stirbt.

Approach

Ein Design-System über Marketing-Site, die Produkt-UI im Admin und die Docs: Tokens und Komponenten geteilt, damit das Dashboard gestaltet wirkt, nicht angeflanscht.

Outcome

Eine Produktoberfläche, durch die Besucher navigieren können – und ein wp-admin, das nicht nach wp-admin aussieht.

Flächen, ein Design-System
3

Flächen, ein Design-System

Produkt-UI, die nativ wirkt
in-admin

Produkt-UI, die nativ wirkt

Case Study lesen

Wachstumszahlen aus der Google Search Console (Suchimpressionen & Klicks). Design und Umsetzung von Xerx.

Design-Systeme

Design-Systeme, keine Sticker-Sheets.

Das System ist keine Sammlung von Screens – es ist der Quellcode dafür, wie ein Produkt aussieht. Tokens, Typo, Komponenten und Abstände, die halten, während das Team wächst.

Type scale

Aa
Display · 40
Heading
Fraunces · 400 · 26
Body copy that has to read for years.
Inter · 16
LABEL
JetBrains · 13

Color tokens

accent-400

accent-500

brand-500

brand-700

ink-950

ink-700

paper-50

paper-200

--gradient-brand · cyan → purple

Components & states

LiveBadgeChip

Spacing & grid

6-col · 24px gutter

4
8
16
24
32

Fähigkeiten

UX und UI sind verschiedene Aufgaben.

Wir machen beides – denn eine schöne Oberfläche über einem kaputten Ablauf scheitert trotzdem, und ein perfekter Ablauf, der lieblos aussieht, gewinnt nie Vertrauen.

UX — Experience

Kommen Menschen ans Ziel?

Struktur und Ablauf: der Teil, den Nutzer spüren, aber nie sehen.

  • 01Nutzerflüsse & Journeys
  • 02Informationsarchitektur
  • 03Interaktion & States
  • 04Usability & Research
  • Produktdesign
  • SaaS Design Agentur

UI — Interface

Wirkt es durchdacht?

Oberfläche und Handwerk: der Teil, der ein Produkt sorgfältig gebaut wirken lässt.

  • 01Typo & Hierarchie
  • 02Farbe & Tokens
  • 03Komponenten & States
  • 04Motion & Feinschliff
  • UI-Design
  • Digitales Produktdesign

Stimmen

Vertraut, um Bleibendes zu bauen.

  • I cannot recommend Yuriy enough. He designs and builds beautifully and correctly, communicates clearly, and makes the work fun. If you need a high-performance website for your business — look no further.

    Griffin Stewart

    Co-Founder, 5DayDeal

  • Yuriy is by far one of the best developers I've ever worked with. Skill, ability, communication — all top notch. Best of all, he thinks above and beyond the task and recommends a better alternative when one fits.

    Gary Rudd

    Co-Founder, LifeLock Promo Codes

  • Yuriy and his team are simply the best. They take a vision and turn it into a complete work of art — every aspect of the solution completed professionally and to perfection.

    Douglas Geller

    Founder & CEO, GDSI

FAQ

Häufige Fragen.

UX ist, wie es funktioniert – Abläufe, Struktur, ob Menschen ihre Aufgabe wirklich erledigen können. UI ist, wie es aussieht und sich anfühlt – Typo, Farbe, Komponenten, Bewegung. Eine gute UX/UI-Design-Agentur macht beides, denn eine schöne Oberfläche über einem kaputten Ablauf scheitert trotzdem.

Wenn Ihr Produkt wächst oder mehr als eine Person an der UI arbeitet, fast sicher. Ein Design-System hält alles konsistent und schnell baubar, während Sie skalieren – Tokens und Komponenten statt neu gezeichneter Screens. Für eine einzelne Landingpage ist es übertrieben, und das sagen wir auch.

Design-Projekte starten ab €3.900 – eine fokussierte Produkt-UI ist etwas anderes als eine komplette Marke plus Design-System, deshalb steht der Endpreis nach der Diagnose vor Projektstart schwarz auf weiß. Sagen Sie uns, wo Sie stehen und was hakt, und wir schnüren ein ehrliches Paket, statt blind zu schätzen. Alle Pakete im Überblick finden Sie auf unserer Preisseite.

Ja – ein großer Teil unserer Arbeit ist Produktdesign und UI/UX innerhalb einer bestehenden Marke, kein Rebranding. Wir bauen das Vorhandene zu einem System aus, das hält, während das Produkt wächst.

Wir designen wie Engineers – Tokens in Figma, im Code gespiegelt, unterwegs dokumentiert –, damit Entwickler Designs ausliefern, die sie lesen können, nicht rückentwickeln müssen. Oft ist der Engineer von Anfang an im Raum.

Bei uns beginnen Design-Projekte bei €3.900 Festpreis – etwa das Screendesign für eine Website oder den Kernablauf einer Web-App inklusive Prototyp. Ein vollständiges Design-System mit Komponentenbibliothek liegt darüber; der Preis steht im Angebot, bevor wir anfangen. Stundensatz für Arbeit außerhalb des Umfangs: €120.

Webdesign ist die Gestaltung einer Website als Ganzes, Screendesign und UI Design meinen die Gestaltung der einzelnen Oberflächen – Screens, Komponenten, Zustände – ob für eine Website, eine Web-App oder eine mobile App. Bei uns hängt beides zusammen: Wir entwerfen die Screens und bauen sie, deshalb bleibt das Ergebnis so, wie es im Prototyp aussah.

Zusammenarbeit

Ein Design-Problem im Kopf?

Marke, Produktdesign oder ein Design-System. Erzählen Sie uns, woran Sie arbeiten.