PROJEKT

Online-Whiteboard für kreative Zusammenarbeit in Echtzeit

Individuelle Softwareentwicklung, Zusammenarbeit in Echtzeit, Freihandzeichnen, Board-Freigabe, Private Projekträume, Datei-Uploads, PNG- und PDF-Export

  • Branche: Kreative Dienstleistungen
  • Tschechische Republik Standort: Tschechische Republik
  • Lieferzeit: 16 Wochen
  • Technologien: JavaScript / TypeScript (Node.js), Python
4+ Monate

Dieser Kunde investiert Zeit darin, kreative Arbeiten, Kommentare und Dateien in verteilten Teams abzustimmen. Das Online-Whiteboard ist ein webbasierter Arbeitsbereich, in dem die Agentur gemeinsame Boards erstellt, freihändig zeichnet und visuelle Inhalte hinzufügt. Es bietet Projektmanagern und Teammitgliedern einen zentralen Ort für die Zusammenarbeit auf Desktop- und Mobilgeräten. Private Bereiche, Berechtigungen, Kommentare, Sitzungsprüfung und Board-Export unterstützen diese Arbeit.

Zusammenfassung

Problem

Die Kreativagentur organisiert die visuelle Zusammenarbeit über getrennte Diskussionen, Dateien und Schritte zur Board-Freigabe.

Lösung

Die Lösung wurde zu einem responsiven Online-Whiteboard mit synchronisiertem Canvas-Zustand, Projekträumen und Chat.

Ergebnis

Die Software wurde entwickelt, um den manuellen Abstimmungsaufwand und Nacharbeiten bei gemeinsamer kreativer Arbeit zu reduzieren.

Kundengeschichte

Der Kunde ist eine Kreativagentur aus der Tschechischen Republik. Sie arbeitet mit verteilten Teams, die gemeinsam visuelle Inhalte erstellen, austauschen und prüfen.

Kreative Arbeit umfasst Freihandskizzen, Text und Bilder. Dazu gehören auch Kommentare, gemeinsame Dateien und Board-Berechtigungen.

Gefordert waren Profile, Suche oder Matching sowie Projektmanagement. Auch Kommunikation und Zusammenarbeit waren Bestandteil des Auftrags.

Analysen und aufgezeichnete Aktivitäten waren ebenfalls vorgesehen. Außerdem wurde responsiver Cloud-Zugriff benötigt.

Die Lösung wurde als modulare Webanwendung konzipiert. Besonderes Augenmerk lag auf synchronisierten Boards, privaten Projekträumen, Live-Cursorn und Kommentaren.

Chat mit Anhängen, Sitzungswiedergabe sowie PNG- oder PDF-Export vervollständigten den Arbeitsbereich.

Der Kunde benötigte

  1. Profile, Suche, Projekte, Kommunikation und Workflows für die Zusammenarbeit.
  2. Analysen, Dashboards, Kennzahlen und wiederabspielbare Aktivitäten.
  3. Responsive Nutzung auf Desktop- und Mobilgeräten.
  4. Skalierbares Cloud-Hosting mit Dokumentation und Möglichkeiten für spätere Erweiterungen.

Warum Standardsoftware nicht passte

Standardplattformen für Arbeitsplatzinnovationen unterstützen Teams beim Erstellen von Anwendungen und Automatisieren von Geschäftsprozessen. Ihre Beschreibungen positionieren sie jedoch als Low-Code- oder No-Code-Plattformen und nicht als dedizierte gemeinsame Zeichenflächen. Daher wurde eine individuelle Plattform benötigt, die synchronisiertes Zeichnen, Live-Cursor und Kommentare in einem Workflow vereint. Auch Berechtigungen, private Bereiche, Dateiaustausch und Sitzungswiedergabe blieben zusammengeführt.

Projektübersicht

Die Lösung wurde als responsive Webanwendung mit synchronisierter Bearbeitung und raumbasierter Zusammenarbeit konzipiert. Der Canvas-Zustand bleibt über Nutzer und Sitzungen hinweg verfügbar, während die Oberfläche Zeichnungen, Text und Bilder zusammenführt.

Für eine kontrollierte Zusammenarbeit wurden private Projekträume und Besitzrechte für Boards eingerichtet. Freigabeeinstellungen und Bearbeitungsrechte legen den Zugriff auf jedes Board fest, während die Board-Bibliothek bestehende Arbeiten übersichtlich hält.

Ein Echtzeit-Chat verbindet die Unterhaltung mit der Arbeit am Board. Nachrichten, angehängte Dateien und Kommentarverweise bleiben Teil der gemeinsamen Sitzung.

Die Sitzungswiedergabe zeichnet Zeichenaktivitäten zur späteren Prüfung durch Analysten oder Trainer auf. Das Panel für Export und Dateiaustausch verarbeitet Referenzbilder, Cloud-Dateien sowie PNG- und PDF-Boards.

Das System wurde modular aufgebaut, sodass Analysen, Dashboards, Dokumentation und spätere Erweiterungen ergänzt werden können, ohne die gesamte Plattform neu zu entwickeln. Die Dokumentation kann mit @docusaurus/core (einem Tool für Dokumentationswebsites) oder Sphinx (einem Dokumentationsgenerator) erstellt werden.

Wichtige bereitgestellte Funktionen

  • Synchronisierter Canvas-Zustand
  • Gemeinsame Bearbeitung des Whiteboards
  • Werkzeuge zum Freihandzeichnen
  • Live-Cursor und Kommentare
  • Private Projekträume
  • Board-Freigaben und Berechtigungen
  • Echtzeit-Chat mit Anhängen
  • Sitzungsaufzeichnung und -wiedergabe
  • PNG- und PDF-Export von Boards

Kann ergänzt werden

+ Sitzungsaufzeichnung + Sitzungswiedergabe + Wireframe-Erstellung + PNG-Export + PDF-Export

Wer kann diese Lösung noch nutzen?

Diese Unternehmen haben eine ähnliche Aufgabe, und dieselbe Lösung kann an ihre gemeinsamen visuellen Sitzungen angepasst werden.

Ein Kreativstudio

Aufgabe Es benötigt einen zentralen Ort für gemeinsame Skizzen, visuelle Referenzen, Kommentare und Prüfungssitzungen.
So unterstützt die Lösung Die Lösung unterstützt das gemeinsame Zeichnen, den Dateiaustausch, die Zugriffskontrolle für Boards und den Export fertiger Boards.
Kreativstudios

Eine Plattform für Fernunterricht

Aufgabe Lehrkräfte und Teilnehmer müssen während gemeinsamer Sitzungen auf visuellen Boards arbeiten können.
So unterstützt die Lösung Die Lösung verbindet Freihandzeichnen, Kommentare, Anhänge, die Anwesenheit der Teilnehmer und die Sitzungswiedergabe.
Geschäftsdienstleistungen

Ein Marktplatz für die Zusammenarbeit von Kreativen

Aufgabe Mitarbeiter müssen Kampagnenarbeit besprechen und gemeinsame visuelle Materialien verwalten.
So unterstützt die Lösung Die Lösung ermöglicht private Projekträume, Board-Berechtigungen, Echtzeit-Chat und Exportfunktionen.
Kreativagenturen

Technologie-Stack

JavaScript / TypeScript (Node.js)

Entwicklung von Webanwendungen

Diese Sprachfamilie unterstützt die responsive Weboberfläche und Funktionen für die Zusammenarbeit in Echtzeit.

Python

Analysen und Datenanalyse

Python unterstützt bei Bedarf Analysen, Berichte und die Auswertung von Aktivitäten.

PHP

Serverseitige Anwendungsentwicklung

PHP steht für serverseitige Anwendungsmodule zur Verfügung.

css

Gestaltung der Benutzeroberfläche

css (ein Parser und Stringifier für Stylesheets) unterstützt die Gestaltung der Weboberfläche.

dropbox

Cloud-Dateiaustausch

dropbox (ein SDK für die Dropbox-API) verbindet Referenzdateien und Cloud-Speicherinhalte mit dem Board.

jspdf

PDF-Export von Boards

jspdf (eine JavaScript-Bibliothek zur PDF-Erstellung) erzeugt PDF-Versionen von Boards.

pandas

Analyse von Aktivitätsdaten

pandas (eine Python-Bibliothek zur Datenanalyse) unterstützt Berichte und die Analyse aufgezeichneter Aktivitäten.

@docusaurus/core

Dokumentationswebsite

@docusaurus/core (ein Generator für Dokumentationswebsites) kann Systemanleitungen für das Kundenteam veröffentlichen.

PNG

Export von Bild-Boards

PNG-Dateien speichern exportierte Board-Bilder für die gemeinsame Nutzung und Prüfung.

PDF

Export von Dokument-Boards

PDF-Dateien speichern exportierte Boards als Dokumente.

Integrationen

Dropbox

Referenzdateien und Dateien aus dem Cloud-Speicher werden über das SDK zwischen Dropbox und dem Board übertragen.

Analytics services

Aufgezeichnete Aktivitäten können für Kennzahlen, Berichte und Dashboards an Analysedienste übergeben werden.

PNG and PDF files

Board-Inhalte werden als PNG-Bilder oder PDF-Dokumente aus der Plattform exportiert.

Das Ergebnis

Gemeinsame Boards bündeln visuelle Arbeiten

Der Board-Arbeitsbereich bietet der Kreativagentur eine gemeinsame Zeichenfläche für Freihandzeichnen, Text und Bilder. Außerdem werden Haftnotizen, Kommentare und die Live-Anwesenheit von Teilnehmern unterstützt.

Synchronisierte Bearbeitung macht den aktuellen Canvas während der gesamten Zusammenarbeit sichtbar, während Berechtigungen festlegen, wer darauf zugreifen oder ihn bearbeiten darf.

So funktioniert es

  1. Das Canvas-Synchronisierungsmodul hält Canvas-Zustand, Zeichnungen, Text, Bilder und Haftnotizen über Nutzer und Sitzungen hinweg synchron.
  2. Das Freihandzeichenwerkzeug zeigt Zeichenaktivitäten auf dem gemeinsamen Whiteboard.
  3. Live-Cursor und Kommentare zeigen die Anwesenheit der Nutzer und die Diskussion neben der Board-Arbeit.
Tipp: Private Projekträume und Board-Berechtigungen halten gemeinsame kreative Arbeiten unter Kontrolle.
Gemeinsamer Board-Arbeitsbereich

Gemeinsamer Board-Arbeitsbereich

Funktionen auf diesem Bildschirm
Synchronisierung des Canvas-Zustands Gemeinsames Whiteboard Freihandzeichenwerkzeug Zusammenarbeit in Echtzeit Board-Freigaben verwalten

Kontrollierte Bereiche erleichtern die Verwaltung von Boards

Die Board-Bibliothek führt bestehende Boards und Projekträume in einer Ansicht zusammen. Besitz, Zugriff und Bearbeitungsrechte machen die Board-Struktur für Projektmanager und Teammitglieder übersichtlich.

So funktioniert es

  1. Die Board-Liste zeigt Board-Namen und Besitzrechte.
  2. Private Projekträume verbinden Boards mit ihren Projekträumen.
  3. Freigabeeinstellungen speichern Benutzerzugriff und Bearbeitungsrechte für jedes Board.
Board-Bibliothek und Projekträume

Board-Bibliothek und Projekträume

Funktionen auf diesem Bildschirm
Board-Freigaben verwalten Private Projekträume

Der Chat hält Dateien und Diskussionen neben dem Board

Der Zusammenarbeits-Chat bündelt Nachrichten, Anhänge und Teilnehmeridentitäten während einer gemeinsamen Sitzung. So verfügt die Agentur über einen zentralen Kommunikationsbereich für kreative Diskussionen und Dateiaustausch.

Kommentarverweise verbinden die Unterhaltung mit der relevanten Board-Arbeit.

So funktioniert es

  1. Das Echtzeit-Chatpanel zeigt Nachrichten und Teilnehmeridentitäten.
  2. Der Nachrichteneditor sendet Diskussionen zusammen mit der gemeinsamen Sitzung.
  3. Die Upload-Funktion fügt Dateien hinzu, während Kommentarverweise Nachrichten mit der Board-Arbeit verbinden.
Zusammenarbeits-Chat

Zusammenarbeits-Chat

Funktionen auf diesem Bildschirm
Zusammenarbeit in Echtzeit Zusammenarbeit in Echtzeit

Wiedergabe unterstützt die Prüfung von Zeichnungen

Der Bildschirm zur Sitzungsprüfung ermöglicht Analysten und Trainern, die Entstehung einer Zeichensitzung zu untersuchen. Eine Zeitleiste und ein Wiedergabebereich ordnen Zeichenereignisse zusammen mit Prüfnotizen an.

So werden aufgezeichnete Aktivitäten für Schulung, Prüfung und spätere Diskussionen nutzbar.

So funktioniert es

  1. Die Sitzungsliste zeigt aufgezeichnete Zeichensitzungen.
  2. Die Sitzungszeitleiste ordnet Ereignisse ihrer Position in der Wiedergabe zu.
  3. Der Canvas-Wiedergabebereich zeigt die Zeichensitzung, während Prüfnotizen verfügbar bleiben.
Hinweis: Die Wiedergabe ist eine optionale Erweiterung zur Prüfung aufgezeichneter Zeichenaktivitäten.
Sitzungswiedergabe und Prüfung

Sitzungswiedergabe und Prüfung

Funktionen auf diesem Bildschirm
Funktion zur Sitzungswiedergabe Zeichensitzungen aufzeichnen

Der Export macht Boards zu teilbaren Dateien

Das Dateiaustauschpanel bringt Referenzbilder und Cloud-Dateien in das Board und bereitet fertige Boards für die gemeinsame Nutzung außerhalb der Sitzung vor. PNG- und PDF-Funktionen unterstützen zwei gängige Ausgabeformate.

Der Exportstatus zeigt den Zustand der erzeugten Board-Datei an.

So funktioniert es

  1. Die Upload-Steuerungen für Bilder und Cloud-Dateien fügen Bilder und Dateien aus dem Cloud-Speicher zum Board hinzu.
  2. Die Dateiliste zeigt hochgeladene Bilder und Cloud-Dateien.
  3. Die PNG- und PDF-Exportfunktionen erzeugen PNG- und PDF-Boards, während der Exportstatus deren Zustand anzeigt.
Board-Export und Dateiaustausch

Board-Export und Dateiaustausch

Was die Lösung ermöglicht

Mit dieser Lösung kann die Kreativagentur:

  • Gemeinsame visuelle Boards in Echtzeit erstellen und bearbeiten.
  • Skizzen, Kommentare, Dateien und Berechtigungen in einem Arbeitsbereich verwalten.
  • Den Zugriff über private Projekträume und Board-Einstellungen steuern.
  • Board-Arbeiten per Chat mit gemeinsamen Anhängen besprechen.
  • Aufgezeichnete Zeichensitzungen per Wiedergabe prüfen.
  • Boards als PNG-Bilder oder PDF-Dokumente exportieren.

Könnten Standardlösungen diese Aufgabe übernehmen?

Vor dem Design wurde die Aufgabe anhand der eigenen Produktbeschreibungen mit Standardprodukten verglichen.

Was der Kunde benötigt Low-Code-Plattformen Claris FileMaker, AppSheet, Ninox No-Code-App-Plattformen Budibase, Google App Maker, Appify Enterprise-App-Plattformen BMC Helix Platform, Grid Individuelle Lösung
Profile, Suche und Matching — — —
Projekte, Kommunikation, Zusammenarbeit teilweise teilweise teilweise
Analysen und wiederabspielbare Aktivitäten — — —
Responsive Nutzung auf Desktop und Mobilgeräten — — —
Passt zu den eigenen Regeln des Kunden: Phasen, Rollen, Berichte teilweise teilweise teilweise
Alle Schritte an einem Ort — — —
Keine manuellen Schritte zwischen Programmen teilweise teilweise teilweise

Nach den öffentlichen Beschreibungen der Produkte und ihrer Kategorie.

Standardprodukte decken Teile der Anwendungsentwicklung, Zusammenarbeit, Prozessautomatisierung und Berichterstellung ab. Sie reichen aus, wenn ein Team nur eine allgemeine interne Anwendung oder einen einzelnen Prozess benötigt.

Sie bieten jedoch nicht die dedizierte gemeinsame Zeichenfläche des Kunden mit synchronisiertem Zeichnen, Live-Cursorn, Kommentaren, privaten Bereichen, Wiedergabe, Dateiaustausch und Board-Export an einem Ort. Die einzelnen Teile müssten weiterhin konfiguriert und manuell miteinander verbunden werden.

Am Ende

Am Ende wurde die Lösung entwickelt, um manuelle Abstimmungen auf dem Weg von einer kreativen Idee zu einem gemeinsamen, prüfbaren Board zu vermeiden.

FAQ

Sie möchten ein ähnliches System entwickeln? Lesen Sie die Antworten unten, um zu erfahren, wie ein individuelles Online-Whiteboard visuelle Zusammenarbeit, Zugriffskontrolle, Dateiaustausch und Prüfung verbinden kann.

Etwas Ähnliches benötigt? Sprechen wir darüber
Oder weitere Projekte ansehen