Logo Studio Robert Fassbender

Komplexe Inhalte einfach und schnell vermittelt

Simplify complex content

Gerade in der Onlinekommunikation bietet es sich an, komplexe Inhalte zu visualisieren. Die Betrachtungsdauer von Onlineinhalten ist rund 75% kürzer als bei Printmedien. Außerdem sind gut gestaltete Grafiken und Diagramme weitestgehend global verständlich oder mit wenig Aufwand in verschiedenen Sprachvarianten umzusetzen.

Komplexe Inhalte einfach und schnell vermittelt

Simplify complex content

Gerade in der Onlinekommunikation bietet es sich an, komplexe Inhalte zu visualisieren. Die Betrachtungsdauer von Onlineinhalten ist rund 75% kürzer als bei Printmedien. Außerdem sind gut gestaltete Grafiken und Diagramme weitestgehend global verständlich oder mit wenig Aufwand in verschiedenen Sprachvarianten umzusetzen.

Der Gestaltung sind keine Grenzen gesetzt: Einfache Farbflächen, Verläufe, Flächen mit Mustern, Fotos oder Symbolen, statisch oder animiert, mit themenbezogenen Hintergründen und Audioeffekten.

Wenn sich die Datenbasis der Grafik regelmäßig verändert, kann eine Schnittstelle zwischen Datenbanken und dem Layout der Grafik programmiert werden.

In unserem Webdesign Layout B-2-B Frontend zeigen wir die Einbindung von typischen MS Office Grafiken und Tabellen aus PowerPoint oder Excel in Internetseiten.

Bei allen Charts lassen sich Balken, Linien, Datenpunkte oder Segmente individuell gestalten. Neben Farben und Farbverläufen sind auch Muster, Grafiken und Fotos möglich. Ebenso lassen sich die Hintergründe sowie Legenden, Gitternetzlinien und Texte beliebig gestalten.

Die meisten Animationen, die beim klicken oder überfahren mit der Maus ausgelöst werden, werden auf mobilen Endgeräten und Touch-Screens durch antippen mit dem Finger ausgelöst.

css3:balkendiagramm basic

Market share since 2010
Value 10%
Value 20%
Value 30%
Value 40%
Value 50%
Value 60%
Value 70%
Value 80%
Value 90%
Value 65%
Value 55%
Value 100%
Balkendiagramm
Balkendiagramm
  • Beliebig viele Werte
  • Auch negative Werte oder Werte > 100% möglich
  • Animation: Bei 'mouse-over' verändern die drei oberen Balken die Farbe, die Fotofüllung unten das Bildmotiv

css3:Balkendiagramm complex

Market Share %

Tortendiagramm complex
Balkendiagramm
  • Der User kann die Datenreihen mit einem 'mouse-click' oder 'finger-tip' auf die Legende ein- oder ausblenden, was bei komplexen Grafiken die Übersichtlichkeit verbessern kann
  • Animation: Bei 'mouse-over' über das Diagramm wird ein Hintergrundbild angezeigt
  • Animation: Bei 'mouse-over' über auf die einzelnen Balken werden die Referenzwerte angezeigt

css3:säulendiagramm basic

Säulendiagramm basic
Säulendiagramm
  • Animation: Bei 'mouse-over' über die einzelnen Balken werden die Referenzwerte angezeigt

css3:säulendiagramm complex

Sales UK 2016

  • 100

    90

    80

    70

    60

    50

    40

    30

    20

    10
  • %

  • A

  • B

  • C

  • Q1

  • A

  • B

  • C

  • Q3

  • A

  • B

  • C

  • Q4

säulendiagramm complex
Säulendiagramm
  • Beliebig skalierung und Werte auf der y-Achse
  • Animation: 'mouse-over" auf die Legende zeigt den Text "Info ▲" an ein 'mouse-click" offnet ein Infofenster mit mehr Text
  • Animation: 'mouse-over" auf die drei Säulen von Q2 zeigt Infos zu den Säulen an
  • Die Säulen in Q3 haben eine Schatten und wirken etwas plastischer. So können auch 3D-Säulen gestaltete werden
  • Die Säulen in Q4 habe drei abgerundete Ecken

css3:säulendiagramm user input

Marktanteile %

Eingabe von Werten 0% - 100% möglich

säulendiagramm complex
Säulendiagramm
  • In diesem Diagramm kann der User selber Werte eingeben, die als Ausgangswert für weitere Berechnungen dienen können.
  • Die drei grünen Säulen haben den Anfangswert 0% und können bis 100% erhöht werden.
  • Bei den pinken Säulen ist der Anfangswertert 10% und der zweite Wert 50% höher als der Erste. Wird vom User der erste Wert erhöht, erhöht sich der zweite Wert entsprechend.

css3:tortendiagramm basic

Market Share %

tortendiagramm basic
Tortendiagramm
  • Einfache Darstellung eines Tortendiagramms

css3:Tortendiagramm complex

Market Share %

Tortendiagramm complex
Tortendiagramm
  • Animation: Das Tortendiagramm baut sich bei Aufruf der Seite im Uhrzeigersinn drehend auf und der Effekt lässt sich mit dem Button Reset wiederholen
  • Animation: Mit dem Button Randomize zeigen sich zufällige Varianten von Segmenten und Farben

css3:kurvendiagramm 1 complex

Longterm prospect international markets

Kurvendiagramm
  • Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
  • Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt

css3:kurvendiagramm 2 complex

Longterm prospect international markets

Kurvendiagramm
  • Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
  • Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt
  • Mit den Buttons Dataset ++ / -- lassen sich Kurven zu- und abschalten
  • Mit den Buttons Data ++ / -- lassen sich auf der x-Achse Monate zu- und abschalten
  • Animation: Mit dem Button Randomize zeigen sich zufällige Varianten von Werten und Farben

css3:Punktediagramm complex

Longterm prospect international markets

Kurvendiagramm
  • Mit einem 'mouse-click' auf die Legendentexte lassen sich die jeweiligen Linien ein- und ausblenden
  • Mit einem 'mouse-over' über die Datenpunkte der Linien, werden die Relevaten Werte angezeigt