
In der digitalen Produktentwicklung ist ein gut strukturierter Design- und Entwicklungsprozess entscheidend für den Erfolg eines Projekts. Doch oft scheitern Teams an Herausforderungen wie mangelnder Kommunikation, unklaren Vorgaben und fehlender Abstimmung zwischen Designern und Entwicklern. Diese Schwachstellen führen nicht nur zu Missverständnissen und Verzögerungen, sondern auch zu inkonsistenten Ergebnissen, die die Qualität des Endprodukts beeinträchtigen können.

In diesem Blogpost werfen wir einen Blick auf die häufigsten Probleme in traditionellen Design- und Entwicklungsprozessen und stellen im Anschluss einen modernen Ansatz vor, der durch den Einsatz von Tools wie Figma und Storybook nicht nur die Zusammenarbeit verbessert, sondern auch eine konsistente und effiziente Umsetzung garantiert.

#### Der veraltete Design- & Entwicklungsprozess ❌

Der Design- und Entwicklungsprozess ist oft von Herausforderungen geprägt, die sich aus unklarer Kommunikation, unzureichenden Designvorlagen und mangelnder Abstimmung zwischen den Teams ergeben. Angefangen bei der Ideensammlung bis hin zur Entwicklung ohne klare Richtlinien können diese Probleme zu Missverständnissen, unrealistischen Erwartungen und ineffizientem Arbeiten führen.

**1. Brainstorming und Ideensammlung**

Der Prozess beginnt oft mit einer Idee vom Kunden, die dann an eine Designagentur ausgelagert wird. Hier liegt oft das erste Problem: Die Kommunikation zwischen Kunde und Agentur kann unklar sein, was zu Missverständnissen und unrealistischen Erwartungen führt.

**2. Erstellung von Wireframes**

Die Agentur erstellt Wireframes, oft noch in Form von statischen PDFs oder pixelbasierten Entwürfen zum Beispiel für Desktop. Diese können jedoch die dynamischen Aspekte einer Website oder App nicht angemessen erfassen und lassen oft wichtige Details unberücksichtigt und Entscheidungen und Feedback für den Start der Entwicklung fehlen.

**3. Entwicklung ohne klare Richtlinien**

Die Entwicklung beginnt auf Basis der Wireframes und eines möglichen Styleguides. Hier entstehen jedoch oft Probleme:

- **Unvollständige Informationen:** Der Styleguide ist oft unvollständig und lässt Fragen offen, wie die richtige und konsistente Verwendung von Farben und Schriften, optimierte Layouts für unterschiedliche Bildschirmgrößen oder die Darstellung unterschiedlicher Zustände und Interaktionen.
- **Mangelnde Konsistenz:** Da Designentscheidungen durch statische PDFs nicht eindeutig festgelegt sind, treffen Entwickler oft individuelle Entscheidungen. So kann es gut sein, dass ein Entwickler den Abstand zwischen Text und Button etwas größer interpretiert und umsetzt als sein Team-Mitglied. Dies führt zu inkonsistenten Ergebnissen und erhöhtem Zeitaufwand.
- **Fehlende Abstimmung:** Die fehlende Koordination zwischen Design und Entwicklung führt zu ineffizientem Arbeiten und kann zu unerwarteten Problemen im späteren Projektverlauf führen. Der Kunde hat die statischen Mockups in PDF-Form gesehen, hatte jedoch andere Erwartungen an die Interaktion des fertig entwickelten Produkt oder für spezifische Fälle, welche nicht abgebildet werden konnten.

![](/images/blog/optimierter-design-entwicklungsprozess/design-system-processes.png 'Vergleich Prozesse')

#### Ein moderner Prozess ✅

In einem modernen Design- und Entwicklungsprozess bildet ein **Design System** die Basis für effizientes Arbeiten und eine konsistente Umsetzung. Der Prozess wird durch den Einsatz von Tools wie [Figma](https://www.figma.com/de-de/design/) zum Erstellen von interaktiven Klick-Prototypen oder [Storybook](https://storybook.js.org/) zur Erstellung einer Komponenten-Bibliothek unterstützt.

**1. Erfassen der Anforderungen und Wireframing**

Die Anforderungen werden erfasst und erste Entwürfe/Wireframes werden erstellt. Dabei findet eine kontinuierliche Rücksprache mit dem Kunden statt, um Basiskonzepte und Grundlagen des Design-Systems wie Farben, Schriften, Layouts und Interaktionen zu definieren. In diesem Prozess ist es wichtig, auch die Abläufe und Funktionen aus Kunden- und Anwendersicht zu verstehen.

![© Figma](/images/blog/optimierter-design-entwicklungsprozess/figma-design-system.png 'Design System')

**2. Design System als Diskussionsplattform**

Basierend auf den umfangreich erfassten Anforderungen und Konzepten wird von der Agentur das Designsystem und die Applikation in einem modernen Tool wie Figma in mehreren Sprints umgesetzt und anhand von Klickprototypen interaktiv gemacht. Das Design System dient als zentrale Plattform für Diskussionen und liefert viele Informationen sowie Antworten auf Design- und Entwicklungsfragen. Durch den Einsatz interaktiver Prototypen in Figma können UX-Fragen frühzeitig geklärt und Feedback eingeholt werden.

- **Interaktive Prototypen:** Durch interaktive Prototypen werden Designentscheidungen besser verstanden und können erlebt werden. Der Kunde kann die Basis-Interaktionen schon vor der Entwicklung sehen und präzises Feedback geben.
- **Figma als Tool mit DEV Mode:** Entwickler erhalten frühzeitig relevante Informationen auch aus technischer Sicht und können spezifische Fragen stellen und ihre Erfahrung einbringen, was den Entwicklungsprozess optimiert.
- **Konsistenz und Effizienz:** Alle Entwickler arbeiten auf der gleichen, vollständigen Grundlage, was zu einer konsistenten und effizienten Umsetzung führt.

![© Figma](/images/blog/optimierter-design-entwicklungsprozess/dev-mode-copyright-figma.png 'DEV Mode ©Figma')

<Card className="p-4 sm:p-4 md:p-6 my-8">
**Figma Dev Mode**

Figma bietet mit seinem [Dev Mode](https://www.figma.com/de-de/blog/introducing-dev-mode/) einen Playground für Entwickler, der den gesamten Prozess der Entwicklung unterstützt.

<ul>
  <li>**Inspizieren von Komponenten:** Entwickler können Komponenten im Detail untersuchen, einschließlich Zuständen und Interaktionen.</li>
  <li>
    **Output für Entwickler:** Figma generiert automatisch CSS-Stile, Rem-Größen und verwendet Tokens, was Entwicklern die Entscheidungsfindung
    erleichtert.
  </li>
  <li>
    **Markieren von Komponenten/Screens als "Bereit für die Entwicklung":** Diese Funktion ermöglicht eine klare Kommunikation zwischen Design und
    Entwicklung. Durch direkte Notizen für Entwickler und die Einsicht in Änderungen am Design seit der Freigabe werden Produktbesitzer und Entwickler
    dabei unterstützt, nachträgliche Änderungen besser zu verstehen und zu verwalten. Diese Funktionen tragen dazu bei, die Zusammenarbeit zwischen
    Design und Entwicklung zu verbessern und die Effizienz des gesamten Prozesses zu steigern.
  </li>
</ul>

  </Card>

**3. Entwicklung von Komponenten**

Basierend auf dem grafischen und interaktiven Komponentenkatalog in Figma kann mit der Entwicklung gestartet werden. Oft wird hier bereits mit der Implementierung von Basis-Komponenten gestartet. Diese werden unabhängig von der Applikationslogik (Backend, Authentifizierung, ...) implementiert und können somit ohne Abhängigkeiten entwickelt und getestet werden. Die isoliert entwickelten Komponenten, wie beispielsweise Buttons, Popups oder die Toolbar, können dadurch auch in anderen Projekten des Unternehmens eingesetzt werden.

- **Eigene Style- und Component-Library:** Isolierte Frontend-Komponenten können in einer eigenen Component-Library entwickelt werden, die in verschiedenen Projekten wiederverwendet werden kann.
- **Unabhängige Konzeption und Implementierung:** Durch die Entwicklung und automatisierten Tests der isolierten Komponenten, ohne Abhängigkeiten zu spezifischen Applikationen, ist eine schnelle und unabhängige Entwicklung möglich.
- **Storybook als Tool:** Mit Tools wie zum Beispiel Storybook kann eine Art [Katalog für alle implementierten Basis-Komponenten](https://react.ui.audi/?path=/story/components-accordion--properties) erstellt werden. Dies ermöglicht es allen Teilnehmern die generische Komponenten-Bibliothek anzusehen, auszuprobieren und für weitere Projekte einzusetzen.

Durch diesen modernen Prozess wird eine effiziente und konsistente Umsetzung von Design und Entwicklung gewährleistet, was zu qualitativ hochwertigen Produkten führt.

![© Storybook](/images/blog/optimierter-design-entwicklungsprozess/storybook-example.png 'Storybook Example ©Storybook')

![© Atlassian](/images/blog/optimierter-design-entwicklungsprozess/style-library-copyright-atlassian.png 'Library / Tokens ©Atlassian')

#### Fazit

Ein moderner Design- und Entwicklungsprozess zeichnet sich im besten Fall durch die Nutzung eines Design Systems aus, das als Grundlage für alle Arbeitsschritte dient. Durch die klare Definition anhand des Design Systems wird eine konsistente Umsetzung gewährleistet.

Die verschiedenen Bereiche wie Design und Entwicklung rücken näher zusammen, da jeder Bereich nur seine spezifischen Fähigkeiten einbringt. Entwickler müssen keine Designentscheidungen treffen, sondern können sich auf ihre Expertise konzentrieren. Gleichzeitig ermöglicht dies eine bessere Verknüpfung von Know-how und Inputs aus verschiedenen Bereichen. Entwickler und Produktbesitzer können frühzeitig ihr Wissen und ihre Erfahrungen in den Designprozess einbringen und so wertvolles Feedback liefern.

Durch dieses nahtlose Zusammenarbeit wird eine effiziente und konsistente Umsetzung von Projekten erreicht. Die klare Kommunikation und das gemeinsame Verständnis für die Anforderungen führen zu qualitativ hochwertigen Endprodukten, die den Bedürfnissen der Nutzer gerecht werden.

![](/images/blog/optimierter-design-entwicklungsprozess/design-system-processes.png 'Vergleich Prozesse')

#### Links

- [Figma für Design Systeme](https://www.figma.com/de-de/design-systems/)
- [Figma Dev Mode](https://www.figma.com/de-de/blog/introducing-dev-mode/)
- [Figma Introduction to design systems ](https://help.figma.com/hc/en-us/articles/14552901442839-Overview-Introduction-to-design-systems)
- [Design Tokens](https://atlassian.design/tokens/design-tokens)
- [Storybook](https://storybook.js.org/)
- [Storybook Figma integration](https://storybook.js.org/docs/sharing/design-integrations)


Konsistenz und Effizienz: So verbesserst du den Design- und Entwicklungsprozess


### Die Verbindung von Design Thinking, Rapid Prototyping und agiler Vorgehensweise.

Zu Beginn ist da eine Idee für eine digitale Applikation. Zwischen Idee und Go-Live gibt es aber einiges zu erledigen. Darunter fallen beispielsweise Konzeption, UI/UX, Entwicklung und Testing. Unterschiedlichste Phasen mit verschiedenen Personen, die jeweils einen anderen Background haben, bringen ebenso Kommunikationsprobleme mit sich.

Was tun, um entgegenzuwirken? Wie schafft man es, dass sich Programmierer und Auftraggeber in einer möglichst frühen Phase des Projekts verstehen, um spätere und kostenintensive Änderung zu minimieren? Eine Methode, die sich dabei als nützlich erweist, ist Rapid Prototyping.

Rapid Prototyping entstand in den 1990er Jahren, als es damals noch für die Anfertigung von Prototypen und Modellen mittels eines 3D-Druckers zum Einsatz kam. Schnell wurde klar, dass das Prinzip in verschiedene Branchen, darunter die Software-Entwicklung, übernommen werden kann.

![](/images/agile-arbeitsweise.png)

Zunächst einmal möchte ich mich der Zeit widmen und dieser physikalischen Größe eine fiktive Grenze setzen. Abgesehen von der Zeit zwischen Idee und dem Entschluss der Verwirklichung, können wir bei FORTIX mithilfe der Rapid Prototyping Methode in kürzester Zeit einen App-Prototypen entwerfen. Diese Methode visualisiert einerseits die gestalterischen Anforderungen, veranschaulicht die Usability und den User Flow und ist so konstruiert, dass die Resultate einer immer wiederkehrenden Analyse direkt in einer frühen Phase des Projekts beachtet werden.

### Wie ist die Vorgehensweise?

Der Prozess beim Rapid Prototyping ähnelt und überschneidet sich mit dem des divergenten und konvergenten Design (Thinking) Prozesses. Wenn es darum geht, einen evaluierbaren Prototypen zu testen, führt direktes Feedback zu einer nah am User orientierten Gestaltung. Hierbei kommen erfahrungsgemäß immer wieder Aspekte, wie Änderungswünsche oder Usability-Verbesserungen, ins Spiel, die sich erst bei der genaueren Untersuchung herauskristallisieren.

„If you are not prepared to be wrong, you will never come up with anything original.“ – Sir K. Robinson

Durch das rasche Erstellen eines Prototyps, dessen Änderungen mit deutlich weniger Aufwand verbunden ist als das Ändern einer bereits programmierten Anwendung, können wir visuell demonstrieren, wie die zukünftige Applikation aussieht und sich benutzen lässt. Der Output dieser Phase ist ein Prototyp, der maßgeblich dazu beitragt, dass Kunde und Entwickler einen gemeinsamen Nenner finden.

Als einen weiteren Faktor, welche die Methode unterstützt, sehen wir die agile Arbeitsweise. Diese fordert alle im Projekt Beteiligten dazu auf, ihr Wissen und Können einzubringen, um das bestmögliche Ergebnis zu erzielen. Durch den iterativen Prozess kann und soll jede wertvolles dazu beitragen, um alle Bereiche der Anforderungen abzudecken.

Während also Design Thinking dabei hilft, eine innovative und individuelle Lösung für Kunden zu entwerfen, unterstützen Rapid Prototyping und die agile Vorgehensweise dabei, die Lösung auf eine schnellere Art und Weise zu liefern, die das Kundenfeedback direkt in die Entwicklung einfließen lässt.

![](/images/rapid-prototyping.png)

Diese gemeinsame Sicht- und Vorgehensweise an ein Projekt, bringt den Wert dieser drei Bestandteile zur Geltung. Das Ergebnis ist das Lösen eines Problems und eine kosteneffiziente Entwicklung einer digitalen Applikation.

Wir bei FORTIX setzen auf eine innige Zusammenarbeit mit unseren Kunden. Die Nähe zum Entwicklungsprozess ermöglicht einen klaren Überblick und eine daraus resultierende qualitativ hochwertige Nutzererfahrung.


Rapid Prototyping – Gestalterische Sichtweise


### Ein Unternehmen, welches über seine alte Identität hinausgewachsen und nun bereit für neue Höhen ist. 

Im Juli 2020 durfte ich als InterMedia-Absolvent der FH Vorarlberg dem Team von FORTIX als kreativer Kopf beitreten. Die Aufgabe lautete: Bring Farbe in unser Unternehmen und stärke unsere Marke! Eine spannende Aufgabe und nach dem langen Studium eine willkommene Herausforderung.

Zuerst benötigte ich dabei etwas Hintergrundwissen: Der bisherige Auftritt von FORTIX wurde bis dato ausschließlich in Eigenregie entwickelt. Die Basis des Unternehmens wurde in den Räumen des Coworking-Campus V gelegt. Schnell wurde den jungen Gründern klar, dass dieses Forum zwar Startups einen idealen Raum zur Entfaltung bietet, langfristig betrachtet aber eine eigene Lokalität einen Mehrwert zusichert. Eine neue Bürofläche sollte dies beheben und gleichzeitig die Identität nach innen und außen stärken.

![FORTIX](/images/fortix-logo.jpg)

Das neu renovierte, helle Büro in der Marktstraße in Dornbirn erstrahlt durch eine elegante Einrichtung in modernem Glanz und schafft somit eine ausgezeichnete Basis für erfolgreiche Projekte. Der Umzug in die neuen Geschäftsräume im Herzen von Vorarlbergs größter Stadt, verlieh uns nicht nur eine angenehmere Arbeitsatmosphäre, sondern brachte auch ein Auffrischen der Markenidentität mit sich.

Es gab kleine visuelle Änderungen beim alten Schriftzug. Dieser wurde durch einen neuen, passend zum fortschrittlichen Unternehmen, ersetzt. Kritisch wurden auch die Aufgabenfelder begutachtet. Das Ergebnis war eine leicht veränderte Marktpositionierung, in dem deutlich definiert wurde, welche Themen zukünftig die Hauptrolle des Unternehmens einnehmen werden. Das Credo: Eindeutiger Fokus auf tiefere Spezialisierungen in den Bereichen, in denen wir extrem zuverlässig sind.

Der Aufbau der Website wurde ebenso analysiert und diskutiert. Wir kamen zum Entschluss, dass eine neue, sauber strukturierte Seite benötigt wird.  Die neue Website entspricht nun der aufgefrischten Marktpositionierung, beinhaltet das neue Branding und unterstreicht die hohen Ambitionen unseres jungen Teams.

Unsere Außendarstellung reflektiert ein widerspruchsfreies und einheitliches Erscheinungsbild. Sowohl der digitale als auch der analoge Auftritt wurde überarbeitet. Das neue Konzept ist präzise und widerspiegelt die Werte unseres Teams. FORTIX wird in Zukunft sicherlich nicht nur durch die imposante Gaupe im Stadtzentrum Aufmerksamkeit erregen.

Wir haben hohe Ansprüche und liefern starke Ergebnisse.

Wir hinterfragen die Dinge und treffen mutige Entscheidungen.

Wir lieben Herausforderungen und suchen energisch nach einer Lösung.

Wir sind bereit!


Konsistenz und Effizienz: So verbesserst du den Design- und Entwicklungsprozess

Rapid Prototyping – Gestalterische Sichtweise

Refreshing FORTIX