Neue Designsprache für Joomla! 4.0

Written by | 13 March 2018 | Published in 2018 March
Die Joomla! World Conference 2017 in Rom war ein grosser Moment, um über die Zukunft des Projekts zu diskutieren. Oh welch Überraschung: es bekam hauptsächlich den "Joomla! 4"-Stempel aufgedrückt. Im Rahmen der Konferenz wurde Chiara Aliotta eingeladen, am Marketing Sprint teilzunehmen. Sie hatte einen ganzen Tag Gelegenheit, mit den Leitern und Mitgliedern des Marketing-Teams zusammenzuarbeiten. Diese sind für die Entwicklung der Joomla! 4 Marketingkampagne verantwortlich. Gemeinsam haben sie viele Ideen besprochen und diskutiert, Prognosen gewagt und Erwartungen formuliert, um die gesteckten Ziele möglichst realistisch und erreichbar zu machen.  

Translated from A new visual language for Joomla 4Chiara Aliotta

Eine neue Bildsprache für Joomla! 4

Laut Sandra Decoux, Koordinatorin der Abteilung für Marketing und Kommunikation, wird: "Joomla! 4 ein grosser Schritt nach vorn für alle Leute sein, die Websites und Webanwendungen erstellen". Sandra fuhr fort: "Wir wollen sicherstellen, dass künftige und bisherige Benutzer fühlen und verstehen können, dass wir etwas Grosses herausbringen".

Aus Fehlern lernen

Ich erinnere mich noch an meinen ersten "Joomla!-Version" Start im Jahr 2014. Damals war ich Joomla! Brand-Manager und es kam gerade Joomla! 3.3 heraus. Aus irgendeinem Grund, an den ich mich nicht mehr erinnere, haben wir alles, was wir bis Version 3.2. designed hatten, weggeworfen.

Viele Ideen sind während unserer Meetings entstanden. Einige Ideen sind wirklich unglaublich gut. Hey, wir haben einige grossartige Köpfe in der Community. Falls ihr euch wundert: Die letzte Kampagne wurde konzeptionell aus dem Leben der Bienen inspiriert. Die kleinen Bienen sind unsere unermüdlichen Freiwilligen und ein geschäftiger Bienenstock, das Innere unseres kostbaren Produktes, des Joomla! CMS. Jedes Sechseck würde mit den Hauptmerkmalen jeder Version gefüllt und von da an wäre das Sechseck das neue Symbol der 3.x-Kampagnen.

Joomla! 3.x Kampagne

Ich fand, dass es eine grossartige Idee war, und trotzdem denke ich, dass sie nun vorbei ist. Wie bei jedem Projekt, das auf Freiwilligenarbeit basiert, gab es einige, die kurz nach dem Kampagnen-Start gegangen sind. Inzwischen wussten die neuen Freiwilligen nur noch sehr wenig oder gar nichts mehr über das Warum und die Hintergründe unserer damaligen Marketing-Entscheidungen.

Nichts wurde wirklich dokumentiert. Die Kampagne für Joomla! 3.x lief weiterhin mit Hexagonen, aber die eigentliche Idee ging in der Übersetzung verloren, was durch den Mangel an Konsistenz und Kontinuität zunehmend sichtbar wurde.

Wir wollen nicht, dass nochmal das Gleiche geschieht, wenn es um Joomla! 4 geht. Aus diesem Grund haben wir uns bei der neuen Kampagne für folgende Regeln entschieden:

  1. Eine starke visuelle Sprache haben, die nicht unbedingt nur auf Bildern basiert.
  2. Klare Regeln haben, die es ermöglichen, es konsequent für Joomla! 4.0 und aufeinanderfolgende Versionen (4.1, 4.2, etc.) anzuwenden.
  3. Das Design soll mit der allgemein-gültigen Joomla!-Marke verbunden sein, aber mit einem frischen Erscheinungsbild.

Die Bildsprache

In der Vergangenheit haben wir eine Kombination aus Bildern und Icons verwendet, die grösstenteils aus vorhandenen Quellen stammen. Für die neue Version wollten wir Illustrationen verwenden, die speziell für Joomla! erstellt wurden. Die Verwendung von Illustrationen hat viele Vorteile:

  • Es ist möglich, komplexe Konzepte in verständliche und klare Informationsblöcke zu übersetzen.
  • Sie brauchen nicht übersetzt zu werden und in einer internationalen Gemeinschaft wie der unseren ist das ein grosser Vorteil.
  • Es ist eine freundliche, farbenfrohe und wiedererkennbare Sprache, die unsere Marke repräsentieren kann, ohne zu stark nach "corporate" zu klingen.

Aber natürlich können Illustrationen leicht zu grossen Schwierigkeiten führen, wenn sie nicht mit einigen Regeln versehen sind!

1. Regel: Farbpalette

Um die Wiedererkennbarkeit unserer Marke zu gewährleisten, waren wir in der Vergangenheit der Meinung, dass die Verwendung aller 4 Hauptfarben eine gute Praxis ist. Leider habe ich im Laufe der Jahre verstanden, dass einige Farbkombinationen für eine wirklich schlechte Designauswahl sorgen.

Joomla! 4 Branding Farben

Übersetzung des Bilds: Sorry Designer, ich wollte euch nicht zum Weinen bringen. Aber ich habe nur die Joomla! Brandfarben verwendet.

Um das Wachstum von Joomla! 4 und allen kommenden Versionen aufrechtzuerhalten, benötigen wir ein Farbschema, dass in allen unseren Kommunikationsunterlagen (online und offline) konsistent verwendet werden kann und keinen Interpretationsspielraum zulässt, was zu einer kompromittierten Darstellung unserer Marke und ihres Produktes führt.

Aus diesem Grund haben wir uns auf 2 Farbschemata konzentriert. Ein primär- und basis Schema, die jeweils von unterschiedlichen Farbtönen unterstützt werden.

Primäre Farbgebung:

Sie umfasst die Farben, die das Thema/die Veröffentlichung am meisten charakterisieren. Die Grundfarbe ist dunkler und heller, um Akzente zu setzen und Kontraste zwischen den einzelnen Elementen zu erzeugen.

Primäres Farbschema

Basis-Farbgebung:

Das ist die Palette, welche die Primärfarben ergänzt und für grundlegende Oberflächenelemente (Hintergrund, Text, etc.) verwendet wird. Sie unterstützt und vervollständigt das Primärfarbschema. Es hilft auch, eine visuelle Hierarchie zwischen den Elementen zu erstellen (z.B. ein aktiver Button vs. ein deaktivierter Button). Dieses Schema wird sich aufgrund der Veröffentlichung nicht ändern. 

Basis Farbschema

Wir haben uns vorgestellt, dass jede Joomla! 4.x Version eine Themen-Farbe (Primärfarbe) erhalten wird. So wird es einfach sein, die Farben mit der Version zu wechseln, wenn wir zur nächsten Version gehen.

Farbkonzept für verschiedene Versionsfarben

Die untenstehende Tabelle enthält bereits 10 verschiedene Farben, was bedeutet, dass man bis zur Veröffentlichung von Joomla! 4.10 gut abgedeckt ist!

Verschiedene Farbtöne für jede Version

Stellen wir uns vor, dass wir nun bei der Veröffentlichung von Joomla! 4.4 sind. Das einzige, was wir brauchen, ist:

  1. Wähle die Hauptfarbe.
  2. Kreiere die Farbtöne.
  3. Kombiniere die (Hauptfarbe & Ummantelungen) mit unserem Basisfarbschema.

Jetzt musst du die erstellte Palette nur noch anwenden. Fertig!

2. Regel: Der Illustrations-Stil

Sobald die Farbpalette definiert ist, kommt die Erstellung des Illustrationsstils, dass nur für Joomla! gemacht wurde. Ein weiteres spannendes Experiment, dass Liliana und ich bearbeitet haben.

Wir arbeiteten zusammen, um eine einfache Sprache voller schöner und aussagekräftiger Symbole zu schaffen, die gut zusammenpassen, um die Joomla!-Welt laufend weiterzuentwickeln.

Wir entwickeln laufend mehr davon, aber hier ist ein kleiner Einblick.

Illustrations-Stil ab Joomla! 4.0

Bei der Erstellung der Icons ist es wichtig, zu verstehen, welche Farbe für den Strich und welche für den Farbton verwendet wird. Die kleine Farbpalette hilft definitiv bei der Definition dieser Details. Während die Hauptfarbe verwendet wird, um die Striche des Symbols zu definieren, sind die verschiedenen Farbtöne der gleichen Farbe hilfreich, um eine flache Schattierung zu erzeugen (also bitte keinen Farbverlauf) und auch, um den Illustrationen Tiefe zu verleihen.

Eigenständiger Icon-Stil

3. Regel: Erstelle eine Joomla! Welt

Was die meisten Anwender mit Joomla! erreichen können, ist das "Gründen/Bauen" und das Wachstum des eigenen Unternehmens voran zu bringen. Der beste Beweis für diese Aussage ist die Tatsache, dass die ehemalige Präsidentin von Open Source Matters, Sarah Watz, im vergangenen Jahr die Führung eines eigenen Unternehmens übernommen hat.

Wir sind sehr stolz auf unsere CMS-Funktionen und auf unsere motivierte Community. Aber jedes Mal, wenn wir unsere Produkte bewerben, scheint es, als ob wir vergessen haben, eine immer wiederkehrende Frage zu beantworten: Warum ist Joomla! eine gute Lösung für das Wachstum meines Unternehmens?

Aus diesem Grund waren wir uns alle einig, dass, obwohl die Funktionen von Joomla! 4 und kommende Versionen wichtig sind, unsere Marketing-Kampagne sich auf die Vorteile der Verwendung von Joomla! im Allgemeinen konzentrieren muss.

Zeit zum Bauen!

Zum Zeitpunkt dieses Artikels, haben wir 6 Vorteile für die Verwendung von Joomla! identifiziert und haben sie in sechs kleinen Welten illustriert.

6 entscheidende Vorteile von Joomla!

Die obigen Abbildungen bestehen aus Grundelementen (Icons), die einmal zu einer strukturierten und komplexen Botschaft kombiniert wurden.

Die Elemente werden kombiniert, um eine spezifische Botschaft zu identifizieren, die unsere wichtigsten Zielgruppen anspricht: Entscheider in KMUs (CEOs, Marketing Leaders, Sales Manager, etc.), Technische Mitarbeiter (Entwickler, Programmierer, Integratoren, etc.), Kreative (Kreativagenturen, Designer, Studenten, etc.).

Die Illustrationen sollen alle über die reichen Funktionen und Funktionalitäten von Joomla! kommunizieren. Das Bauen dieser Welten kann ein bisschen schwierig sein. Aber wir werden unser Bestes geben, um einige Regeln aufzustellen, die beim Bau zu beachten sind.

Alles ist noch in der Entwicklung, aber es gibt zwei wichtige Konzepte, die es zu beachten gilt:

  1. Kombiniere nur solche Symbole, welche die Botschaft im Auge behalten. Verwenden wir die Art und Weise, wie wir sie für die Zielgruppe angemessen weitergeben wollen.
  2. Achte beim Hinzufügen von Symbolen/Elementen darauf, dass du die Leser nicht überforderst. Es sollte einfach aussehen und man sollte nur wenige Symbole/Bilder verwenden.
  3. Harmonie und Ausgewogenheit sind der Schlüssel zu schönen und nachhaltigen Ökosystemen.

Erstellungsprozess einer Bild/Symbol-Anzeige

Stelle den Fokus richtig!

Die Bildsprache für Joomla! 4 ist immer noch ein tolles "work in progress" (in laufender Bearbeitung) und erweist sich als echte Bewährungsprobe. Tatsächlich haben wir bis heute noch nie so strukturiert über unsere Kampagnen nachgedacht.

Unser CMS benötigt eine solide und effektive Kommunikationssprache. Aus diesem Grund gehen wir davon aus, dass sich das hier abgebildete Illustrationssystem zusammen mit unseren Publikationen weiterentwickeln wird. Wobei wir spezifische Richtlinien befolgen. Als Teil des Designteams ist es unsere Aufgabe, sicherzustellen, dass wir die Konsistenz unserer Botschaften schützen können. Und glaub mir, das ist die eigentliche Herausforderung.

Wir arbeiten und testen immer noch an den Illustrationen, suchen nach Grenzen und beheben Lücken. Wir ermutigen dich, deine Gedanken und Feedback in diesem Stadium mitzuteilen. Dies wird uns enorm helfen, die Schwachstellen aufzuspüren, an die wir nicht gedacht haben.

 

Read 4216 times Tagged under Designers, German
Roger Perren

Roger Perren

Joomla! Enthusiast and Sitebuilder from the beginning...

Founder of www.joomlaclub.ch, the free online Joomla! Community. Teammember of the German Translation Team (GTT) and Joomla Community Manager.