Diagramme für den Agenturalltag: Das ist Gliffy

|

Gliffy ist ein Tool, das Potenzial hat, euren Agenturalltag komplett auf den Kopf zu stellen. Die in Deutschland wenig bekannte Anwendung begeistert mit überschaubaren Funktionen, die jedoch schier unendliche Verwendungsmöglichkeiten bieten. Willkommen beim Photoshop für Diagramme :-).

Auf der Webseite von Gliffy entdeckt man den Spruch „Make Diagramming a Team Sport“. Eine recht treffende Beschreibung. Denn dank der intuitiven Bedienung und der vielfältigen Möglichkeit (auch zum Teilen) könnte Gliffy tatsächlich für viele Agenturen relevant werden, die bislang Diagramme zwischendurch geduldet, aber selten mit Freude in ihren Alltag gebracht haben.

Das Gliffy Potenzial hat, zeigt ein Blick auf die Referenzen-Liste. Hier entdecken wir Adobe, Twitter, Samsung, SalesForce und einige weitere Unternehmen, die weltweit bekannt sind.

Schritt für Schritt – So erstellt ihr Diagramme mit Gliffy

Im Prinzip lässt sich mit Gliffy alles visuell darstellen, was Struktur braucht. Angefangen bei Projektplanungen, Workflows, Business-Plänen, Sitemaps, bis hin zu Organigrammen, Netzwerk-Visualisierungen und Flow-Charts. 

Um mit Gliffy zu arbeiten, hier eine Übersicht zum Aufbau.

Screenshot Gliffy
Aufbau des Programms Gliffy mit Dokumentenleiste, Werkzeugleiste und Seitenleiste für Formen
  1. Die Dokumentenleiste erlaubt es euch, neue Dateien zu öffnen, zu speichern oder aber zu Importieren und zu Exportieren. Daneben könnt ihr die Diagramme drucken oder aber Dokumenten-Eigenschaften definieren.
  2. Mit der Werkzeugleiste erhaltet ihr all die Tools, die ihr zum Bearbeiten der Formen, Beschriftungen und Verbindungen benötigt. Hier könnt ihr Ebenen definieren, Objekte in den Hinter- oder Vordergrund holen oder auch die Größe der Ansicht anpassen.
  3. Einer der wichtigsten Buttons: Speichern :-). Hierüber könnt ihr euer Diagramm sichern. Anders als z. B. bei Google Docs findet keine Auto-Sicherung statt.
  4. In der Seitenleiste für Formen findet ihr vorgefertigte Formen, mit denen ihr euer Diagramm gestalten könnt.

Ich empfehle euch, vor dem Erstellen von Diagrammen immer zu überlegen, was ihr damit erreichen wollt. Das ist vergleichbar mit dem Einsteigen ins Auto und dem einfachen Losfahren, ohne das Ziel zu kennen. Was wollt ihr visualisieren? Was soll klarer ersichtlich werden? Wer soll davon profitieren? Habt ihr diese Fragen geklärt, kann es an die eigentliche Erstellung des Diagramms gehen.

Gliffy Formatierungsmöglichkeiten für Formen
Verschiedene grafische Elemente

Zieht eine der vorgefertigten Formen aus der Seitenleiste (4) auf das Arbeitsblatt an eine geeignete Stelle. Ein Doppelklick darauf erlaubt euch, die Beschriftung zu definieren. Daneben könnt ihr über einmaliges Klicken zwei Felder neben der Form anzeigen lassen.

Das erste (A) erlaubt z. B. das Einstellen der Form, z. B. die Farbe, Stärke, Umrandung und mehr. Das zweite (B) ermöglicht euch Textformatierungen, wie Textgröße und -farbe. Nun seid ihr frei, mit der Form zu arbeiten. Klickt sie an, haltet die Maus und verschiebt sie.

Gliffy Verbindungen
Verbindung zweier Elemente miteinander
Mit dem Hinzuziehen weiterer Formen gestaltet ihr euer Diagramm. Spannend wird es, wenn es an die Arbeit mit Verbindungen geht. Ihr findet sie in der Werkzeugleiste (2).

Klickt das Werkzeug und eine der Verbindungsstellen an einer Form an. Von hier aus zieht ihr die Verbindung zu einer anderen Form oder aber ins leere Blatt.

Auch Verbindungen könnt ihr per Mausklick auf die beiden Felder anpassen. So lassen sich Farbe, Dicke, Pfeilart und Struktur ändern. Daneben ist es möglich, die Position zu verändern. Einfach anklicken und das Ende verschieben.

Gliffy 2.0: So holt ihr mehr aus Diagrammen raus

Die Grundfunktionen von Gliffy wird man vielleicht von der einen oder anderen Online-Mindmapping-Software kennen. Doch geht das Tool noch um einiges weiter. Hier meine liebsten Funktionen, die euch nicht vorenthalten möchte.

Elemente sinnvoll Gruppieren

Je nachdem, was ihr in Gliffy als Diagramm darstellt, werdet ihr die Gruppieren-Funktion mehr oder weniger zu schätzen wissen. Das Gruppieren erlaubt euch nach dem Markieren von mehreren Elementen, diese in eine Gruppe zu summieren. Diese lässt sich dann nach Bedarf verschieben oder anpassen.

Ich schätze die Funktion, wenn es z. B. um das Visualisieren von Abläufen innerhalb einer Anwendung geht. Finden sich mehrere Module auf einer Ebene oder aber im gleichen Kontext, lassen sie sich über die Gruppieren-Funktion gemeinsam verschieben und anpassen.

Mit Ebenen arbeiten

Ebenen, manch einem bekannt aus Photoshop, erlauben euch, euer Diagramm mit Schichten aufzubauen. Hierbei kann die eine Schicht z. B. als Hintergrundfarbe einzelner Elemente dienen, die andere Ebene die eigentlichen Module beinhalten. Ihr könnt die Ebenen schnell über die Werkzeugleiste, den ersten Button von rechts, erreichen. Wo eine Verwendung sinnvoll ist, zeigt euch eine Gliffy-Vorlage:

Gliffy Impact-Map
Buntes Diagramm mit verschiedenen Schichten

Gut zu erkennen ist hier, wie die einzelnen Abschnitte („Goal“, „Actor“…) auf einer separaten Ebene liegen, die darauf angeordneten Module auf einer anderen.

Gitternetze und Führungslinien

Gliffy Führungslinien
Mindmap mit X- und Y-Werten
Ihr findet in der Werkzeugleiste die beiden Buttons für „Führungslinien“ und „Am Gitternetz ausrichten„. Die erste ist praktisch, da sie euch beim Platzieren neuer Module zeigt, wie diese sauber auf der gleichen Höhe bzw. Breite mit anderen Modulen angeordnet werden müssen. So erhaltet ihr ein optisch ansprechendes Diagramm.

„Am Gitternetz ausrichten“ erlaubt euch, die einzelnen Module nach dem Gitternetz auszurichten.

Bitte beachtet, dass Führungslinien viel Leistung eures Browsers in Anspruch nehmen. Das ist bei kleinen Diagrammen kein Problem, bei größeren empfiehlt es sich jedoch, diese Funktion zu deaktivieren. Sonst habt ihr mit Verzögerungen zu arbeiten.

Bereit Gliffy kennenzulernen?

„Willkommen beim Photoshop für Diagramme.“ :-). Gliffy ist ein wirklich praktisches Tool, das ich nicht mehr in meinem Alltag missen will. Ich bin gespannt, wie es euch gefallen wird. Für den Start bieten die Entwickler eine kostenfreie Testzeit an. Schaut dazu auf der Startseite vorbei.

Ähnliche Artikel:

Webentwicklung

Best Practices für responsive Bilder in TYPO3

Wie du Ladezeiten, Benutzererfahrung und SEO-Position durch moderne Bildformate wie AVIF und WebP verbessern kannst, erklärt Richard im Blog.

Webentwicklung

WordPress und KI (2): SEO

Du fragst dich, wie dir KI bei deinem Ranking helfen kann? Philipp stellt drei SEO Plugins für WordPress vor, die KI nutzen, um Content sichtbarer zu machen.

Webentwicklung

Die Agentur mehrwert im Interview: „Barrierefreiheit muss zum Selbstverständnis werden“

2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft. Wie die Agentur mehrwert schon heute barrierefreie Projekte umsetzt, erfährst du im Interview.

Webentwicklung

Lieber mit Agentur: TYPO3 Upgrade oder Relaunch?

Wer TYPO3 nicht regelmäßig aktualisiert, tut sich keinen Gefallen. Erfahrt hier, warum Agenturen bei großen Versionssprüngen unterstützen sollten.

"PHP in WordPress-Projekt aktualisieren" Schriftzug vor einem PHP-Logo
Webentwicklung

So aktualisierst du die PHP-Version deiner WordPress Website

Schritt-für-Schritt-Anleitung für die Aktualisierung der PHP-Version deines WordPress Projekts.

Kommentare

digital instinct am
Vielen Dank für das Aufbereiten und Veröffentlichen,
darin haben wir weitere Infos und einen guten Denkanstoß gefunden.
Antworten

Kommentar hinzufügen