Zum Inhalt springen
Kontakt
Issue №01 — Hamburg

Cover · Hafencity

Design, das durchhält.

Wir entwerfen Produkte, die in der Realität Bestand haben — recherchiert, geprüft, bis ins Detail dokumentiert und an Ihre Engineering-Realität gekoppelt.

Sechs Disziplinen · Eine Designsprache · Ein Hamburger Team
Designgespräch anfragen

Disziplinen

Sechs Disziplinen — eine durchgehende Spur.

Jede Disziplin spielt im Atelier ihre eigene Tiefe aus. Klicken Sie sich durch — der Stage zeigt die jeweilige Arbeit live.

Auto-Cycling
Aktiv01 / 06
Settings / Notifications
2 of 4

Notification channels

Choose how we reach you when something needs your attention.

EmailDaily digest
Mobile pushReal-time alerts
In-app bannerCritical only
⌘S
CancelSave changes

Toggle · states

off
on
focus

IA

  • · Settings
  • · Account
  • · Notifications ●
  • · Privacy

Specs

type13 / 18radius6pxmotion220mseaseout-quart

UX/UI Design

Recherche, Informationsarchitektur und visuelles Interface — konsequent vom Use Case her gedacht.

UX/UI ansehen

Designsprache

Wir arbeiten in Systemen, nicht in Screens.

Farben, Typografie, Abstände, Radien — jedes Element ist ein Token mit einem Namen und einem Wert. Hovern Sie, um die Werte zu sehen.

Hovern für Token-Wert

Farben

—

Typografie

DisplayEight pt grid2.25rem
H2Specifik schreiben1.5rem
BodyLesbarkeit ist das Produkt1rem
CaptionDocumented · v1.00.75rem
—

Abstände

—

Radien

—

Anatomie

Eine Komponente — bis ins letzte Detail.

Jede Spezifikation eines Buttons — Radius, Padding, Schriftgewicht, States — als Live-Spielwiese. Verschieben Sie die Regler.

radius10pxpadding12 20weight500stateDefault

Schriftgewicht

States

Padding ⇕ vertikal · ⇔ horizontal · Radius gemessen am Rand · 8 · 16 · 24 px Grid

Vorgehen

Vom Briefing zur Auslieferung — in dokumentierten Schritten.

Jede Phase hat einen klaren Zielzustand, ein Artefakt und eine Stakeholder-Freigabe. Keine Hand-offs ins Leere.

No.Phase
  1. 01
    DiscoveryStakeholder-Briefing, Research-Plan, Risikoliste

    Discovery

    stakeholders · 6

    • · Goals & guardrails
    • · Constraints (tech, time)
    • · Success metrics
  2. 02
    StrategyPersonas, Customer Journey, Designprinzipien

    Strategy

    journey

    DiscoverSign upSet upUseRenew
    Persona
    Principles
    Pillars
  3. 03
    UX-KonzeptIA, User Flows, Low-Fi-Wireframes

    UX-Konzept

  4. 04
    UI-DesignHigh-Fi-Mockups, Komponenten, Style-Spec

    UI-Design

    AccountSave
  5. 05
    Prototyp & TestKlickprototyp, Testbericht, Iterationen

    Prototyp & Test

    tasks · 4 / 5 done

  6. 06
    Hand-offDesign Tokens, Engineering-Specs, A11y-Report

    Hand-off

    tokens.json{ "color.accent": "#B0FE93" }
    A11y
    Specs
    Assets

Live-Audit

Kontrast prüfen — sofort, im Browser.

Wählen Sie Vorder- und Hintergrundfarbe, lesen Sie das Verhältnis ab, sehen Sie WCAG-AA und -AAA in Echtzeit. Ein Werkzeug, kein Marketing.

Vorlagen

Sample

Lesen ist eine Pflichtaufgabe.

Wählen Sie Vorder- und Hintergrundfarbe, lesen Sie das Verhältnis ab, sehen Sie WCAG-AA und -AAA in Echtzeit. Ein Werkzeug, kein Marketing.

Verhältnis

19.30:1

Fließtext

AAA

Großer Text

AAA

In Zahlen

Das ist hafencity.dev

15+ Experten

Entwickler, Designer und Strategen aus unserem Hamburger HQ — eingespielt als ein Team.

50+ Kunden

Unternehmen aus Consumer, Healthcare und B2B vertrauen uns ihre digitalen Produkte an. Langfristige Partnerschaften sind die Regel, nicht die Ausnahme.

97% Weiterempfehlung

Wiederkehrende Engagements und Referenzen, die unsere Kunden tatsächlich anrufen. Vertrauen wächst, wenn Lieferung stimmt.

50+ Launches

Maßgeschneiderte Mobile- und Web-Produkte vom Konzept bis zur Wartung — Ende-zu-Ende verantwortet von unserem Team.

100% In-House

Strategie, Design und Entwicklung aus unserem Hamburger HQ. Ein Team, eine Projektleitung, Ihnen gegenüber verantwortlich von Kickoff bis Launch.

Seit 2023

Wir begleiten Unternehmen bei ihren digitalen Produkten — und wachsen mit den Teams, mit denen wir arbeiten.

Nächste Schritte

Lassen Sie uns über Ihr Projekt sprechen

30-minütiges Erstgespräch. Wir besprechen Ihre Ziele, klären offene Fragen und skizzieren den möglichen Projektablauf.

Termin buchen