Logo Joomlainfo

Joomlainfo News & Infos

Wissenswertes rund um das Content Management

Hier könnte deine Werbung stehen! So wie das hier:

Freier Leseabo-Artikel: Neue Designsprache für Joomla! 4.0

3ddc7c1342202ff1939ae99b11098ec6

Mit Joomla! 4.0 soll nicht nur auf Codebasis vieles neu werden, sondern man will auch am Erscheinungsbild von Joomla! 4.0 und wie man in Zukunft grafisch kommunizieren will, einiges neu angehen. Das bisherige Flickwerk soll einem neuen, einheitlichen und durchdachten Design weichen.

Chiara Aliotta, die bereits die Akeeba-Produkte erfolgreich redesignt hat, hat nun gezeigt, wie sie sich das Redesign in Joomla! 4.0 vorstellt. 

An dieser Stelle wäre für Nicht-Leseabo Leser Schluss. Du müsstest dich anmelden, um weiterlesen zu können. Aber dieser Artikel ist ausnahmsweise für alle frei zugänglich.

Übersetzter Auszug aus der Februar-Ausgabe des Joomla! Magazins von Chiara Aliotta:

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.

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.

Quelle: magazine.joomla!.org

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email

Das könnte dich auch interessieren...

Business-Seite

Eine Business-Seite nur mit freien Extensions bauen

Einer meiner Gründe, warum ich immer mehr WordPress Seiten baue, sind die enormen Kosten der Joomla 3pd Erweiterungen. Da gehen schnell mal ein paar hundert Franken für Abos und Lizenzgebühren drauf. Nun habe ich die neue Joomla 4 genutzt, um zu schauen, ob es möglich ist, eine Seite mit ausschliesslich kostenlosen Erweiterungen zu bauen.

Weiterlesen »
J4 stable deutsch

Joomla 4.0 und 3.10 sind da!

Soeben ist Joomla 4 stable erschienen. Zudem wurde auch die Stableversion von Joomla 3.10. als Übergangsversion freigegeben! Nutzer der 3.9 Serie können ohne Probleme auf 3.10 aktualisieren. Die 3.10 erhält ab jetzt noch mindestens für zwei Jahre Updates.

Weiterlesen »

Willkommen zurück, wir haben dich vermisst

Bitte anmelden, um alle Inhalte werbefrei lesen zu können.

Diese Website verwendet Cookies, um dir die bestmögliche Nutzung dieser Website zu ermöglichen. Wenn du weiterhin auf dieser Website surfst, akzeptierst du die Verwendung von Cookies. Mehr erfahren