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.
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.
Notification channels
Choose how we reach you when something needs your attention.
Toggle · states
IA
- · Settings
- · Account
- · Notifications ●
- · Privacy
Specs
UX/UI Design
Recherche, Informationsarchitektur und visuelles Interface — konsequent vom Use Case her gedacht.
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
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.
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.
- 01DiscoveryStakeholder-Briefing, Research-Plan, Risikoliste
Discovery
stakeholders · 6
- · Goals & guardrails
- · Constraints (tech, time)
- · Success metrics
- 02StrategyPersonas, Customer Journey, Designprinzipien
Strategy
journey
DiscoverSign upSet upUseRenewPersonaPrinciplesPillars - 03UX-KonzeptIA, User Flows, Low-Fi-Wireframes
UX-Konzept
- 04UI-DesignHigh-Fi-Mockups, Komponenten, Style-Spec
UI-Design
AccountSave - 05Prototyp & TestKlickprototyp, Testbericht, Iterationen
Prototyp & Test
tasks · 4 / 5 done
- 06Hand-offDesign Tokens, Engineering-Specs, A11y-Report
Hand-off
tokens.json{ "color.accent": "#B0FE93" }A11ySpecsAssets
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
AAAGroßer Text
AAAIn 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.
Buchungskalender (Cal.com)
Dieser Bereich bindet den externen Dienst Cal.com ein. Mit dem Laden stimmen Sie zu, dass eine Verbindung zu Cal.com hergestellt und dabei Daten in die USA übertragen werden können.