Ortica
Sprechen wir ↗

UI- und UX-Design

Klare Oberflächen.
Gestaltet, um gebaut zu werden.

Wir gestalten Oberflächen für Websites, Webanwendungen und Apps in Figma: Abläufe, Prototypen und Designsysteme. Wer gestaltet, entwickelt auch, und das ändert einiges.

  • Figma
Was wir machen

Vom Problem
zum Screen.

  1. 01

    Analyse und Abläufe.

    Wir beginnen bei den Menschen, die das Produkt nutzen werden, und bei dem, was sie damit erledigen müssen. Ein Blick auf das Bestehende, Abläufe für die wichtigsten Aktionen und, wenn das Budget es vorsieht, Interviews mit künftigen Nutzern.

    • UX
    • Analyse
    • User Flows
  2. 02

    Wireframes und Prototypen.

    Einfache Skizzen der Screens, um die Struktur festzulegen, dann klickbare Prototypen in Figma, die man vor der Entwicklung ausprobiert.

    • Wireframes
    • Prototypen
    • Figma
  3. 03

    Oberflächen.

    Das eigentliche Design: Typografie, Farben, Komponenten, Fehler- und Ladezustände, Versionen fürs Smartphone.

    • UI
    • Responsive
    • Barrierefreiheit
  4. 04

    Designsysteme.

    Komponenten und Variablen in Figma, abgestimmt auf den Code. So bleibt das Produkt einheitlich, auch wenn es wächst.

    • Designsystem
    • Komponenten
    • Design Tokens

Woran wir arbeiten

Analyse und AbläufeWireframes und PrototypenOberflächenDesignsysteme
Figma
Design und Entwicklung zusammen

Wer gestaltet,
weiß, wie es gebaut wird.

Meistens

  • Das Design geht an ein anderes Team
  • Details gehen bei der Übergabe verloren
  • Schöne Screens, die schwer umzusetzen sind
  • Fehler- und Ladezustände werden vergessen

Bei uns

  • Dieselben Personen, von Figma bis zum Code
  • Komponenten, die schon für die Entwicklung gedacht sind
  • Technische Grenzen beim Gestalten berücksichtigt
  • Jeder Zustand eines Screens gestaltet
So arbeiten wir

Erst verstehen.
Dann gestalten.

  1. 01

    Verstehen.

    Ziele, Nutzer und Rahmenbedingungen. Was soll passieren, wenn jemand das Produkt öffnet?

  2. 02

    Strukturieren.

    Abläufe und Wireframes: Wir entscheiden, was wohin gehört, bevor wir über Farben sprechen.

  3. 03

    Gestalten.

    Die vollständige Oberfläche für Desktop und Mobil, mit den Komponenten des Designsystems.

  4. 04

    Testen.

    Klickbarer Prototyp und Korrekturrunden mit Ihnen. Wenn das Budget es vorsieht, testen wir ihn auch mit einigen echten Nutzern. Dann wird entwickelt.

Häufige Fragen

UI- und UX-Design:
was man uns fragt.

Was bedeutet UI- und UX-Design?

UX ist, wie ein Produkt funktioniert: was Nutzer finden, in welcher Reihenfolge, wie leicht sie erledigen, was sie wollen. UI ist, wie es aussieht: Typografie, Farben, Komponenten. Wir gestalten beides zusammen, weil das eine ohne das andere nicht trägt.

Machen Sie auch nur das Design, ohne Entwicklung?

Ja. Sie bekommen die Figma-Datei mit Komponenten, Stilen und Prototyp, bereit für Ihr Team oder einen anderen Dienstleister. Wenn wir es danach selbst entwickeln sollen, haben wir einen Vorsprung.

Arbeiten Sie mit Figma?

Ja, unser gesamtes Design entsteht in Figma: geteilte Dateien, Kommentare, Prototypen und Komponenten. Wenn Sie schon eine Bibliothek oder ein Designsystem haben, bauen wir darauf auf.

Können Sie die Oberfläche einer bestehenden Software neu gestalten?

Ja. Wir schauen, wie sie heute genutzt wird, sammeln die häufigsten Probleme und gestalten zuerst die Screens neu, die am meisten ausmachen. Das geht auch in Etappen, ohne alles anzuhalten.

Was kostet das Design einer Benutzeroberfläche?

Das hängt vor allem von der Zahl der Screens ab und davon, ob ein vollständiges Designsystem dazukommt. Nach einem ersten Gespräch schicken wir Ihnen ein schriftliches Angebot mit Phasen, Zeitplan und Preis.

Wie lange dauert das Design?

Das hängt davon ab, wie viele Screens und Abläufe es gibt. Im Angebot finden Sie die Phasen mit geschätzter Dauer. Meist beginnen wir mit den wichtigsten Abläufen und ergänzen den Rest.

Ist das Design barrierefrei?

Wir berücksichtigen Barrierefreiheit von Anfang an: Kontraste, Schriftgrößen, klickbare Flächen, Fokuszustände. Sie nachträglich zu korrigieren, kostet deutlich mehr.

Nächste LeistungWebsite-Wartung Updates zuerst auf Staging getestet, Backups, Sicherheit und Eingriffe für Websites und Onlineshops. Auch wenn wir sie nicht gebaut haben.
Das nächste Projekt

Eine Oberfläche zu gestalten?
Sprechen wir darüber.

Ein neues Produkt oder eines, das einfacher werden soll: Wir beginnen bei den Menschen, die es nutzen.

Sprechen wir darüber