Version 1 / 11. Mai 2020
Design Manual
- Erklärungen
- Downloads
- NoGo's
Einleitung
Was ist tumult und wie sieht es aus? tumult versteht sich als eine Marke und soll sich als solche etablieren. Hierfür ist es entscheidend, im Außenauftritt eine konsistente Sprache zu sprechen. Dieses visuelle Erscheinungsbild wird auch Corporate Design genannt und setzt sich aus verschiedenen Elementen der Gestaltung zusammen. Um eine durchgängige Qualität der internen und externen Kommunikation zu gewährleisten, sind in diesem Design Manual die Basiselemente, einige Regeln und Fallbeispiele zusammengetragen.
Logo
Logodaten
Das zentrale und immer wiederkehrende Element des Außenauftritts ist das tumult Logo. Dieses ist eine Wortmarke, was bedeutet dass der Schriftzug als solches das Logo bildet. Um die Eigenständigkeit und den Wiedererkennungswert des Logos zu erhöhen, wurde der Schriftzug grafisch aufbereitet. So sind die Abstände zwischen den Buchstaben verändert, um eine ‚gedrängte‘ Wirkung zu erzeugen und so den Wortinhalt aufzugreifen und zu unterstreichen. Auf Grund dieser Veränderungen ist es wichtig, stets die geschlossenen Logo Daten zu verwenden.
Durch die Wahl der Schriftart und der Abstände wirkt die Wortmarke relativ massig und kompakt. Dementsprechend benötigt sie viel Raum um die gewünschte Wirkung zu erzielen. Hierfür ist es wichtig die Abstände zu Rändern, Logos oder anderen grafischen Elementen zu beachten. Der geringstmögliche Abstand zu einem anderen grafischen Element wird durch die sogenannte Schutzzone definiert. Diese ergibt sich hier aus dem Buchstaben „l“ des tumult-Logos (siehe Abbildung) und ist stets einzuhalten. Bei den zur Verfügung gestellten Logodaten ist die Schutzzone bereits durch das Datei-Format definiert. Bei den meisten Anwendungen wird jedoch wesentlich mehr Weissraum benötigt als ihn die Schutzzone vorgibt.
Im recht üblichen Beispiel des „Logofriedhofs“(Abb.1), bildet die Schutzzone der Wortmarke nach rechts und links den Mindestabstand zu den nebenstehenden Logos. Die Größe richtet sich jedoch an der Höhe und dem Volumen der übrigen Logos und schafft ein visuelles Gleichgewicht. Auch bei der Verwendung der kombinierten Wortmarke (ganz rechts), ist die Höhe des tumult-Logos entscheidend, nicht die Gesamthöhe der Marke mit Untertitel.
Im Fall des Stickers mit kreisförmiger Grundform (Abb. 2) ist die Gesamtbreite der Logodatei gleich des Durchmessers des Aufklebers. Wie durch die zwei Beispiele ersichtlich, ist die Anwendung der Schutzzone sehr produktspezifisch und immer wieder neu abzuwägen.
Der Begriff tumult, samt dem Logo, ist als Dachmarke zu verstehen. Diese hat eine übergeordnete Funktion und bewirbt selbst keine eigentlichen Leistungen, sondern das Gesamtprodukt als Summe aller Teile. Die Dachmarke teilt sich in verschiedene Projektbereiche (Beratung, Redaktion, unterwegs) auf. Diese selbstständig agierenden Unterprojekte (Monomarken) werden auch formal durch den jeweiligen Untertitel des Logos klar separiert und kommuniziert.
Da die Kommunikation überwiegend von einem bestimmten Unterprojekt ausgeht, ist es wichtig auch stets die jeweilige kombinierte Wortmarke zu verwenden. Die reine Dachmarke tumult wird ausschließlich für projektübergreifende Produkte/Anwendungen, wie beispielsweise Werbeartikel, verwendet. Diese klare formale Abgrenzung ist nicht zuletzt für den Endnutzer, also den jungen Menschen wichtig, um sich schnell zurecht zu finden und problemlos die jeweiligen Ansprechpartner und Akteure zu erkennen.
Das kombinierte Logo aus Dach- und Monomarke ist ein festgelegtes grafisches Element und sollte nicht verändert werden. Die drei Parameter sind Schriftart/schnitt, Zeilenabstand und Position. Wie in der Darstellung zu sehen, sind diese Parameter durch bestimmte Maße des tumult-Logos bestimmt. Etwaige Anpassungen oder Ergänzungen liegen in der Verantwortung der Dachmarke.
Beliebte Fehler
Wenn man die originalen Logodaten verwendet, kann nicht viel schief gehen. Dennoch hier noch einmal der Hinweis das es nicht möglich ist, einfach den Begriff in der zugrundeliegenden Schrift (oder einer anderen) zu schreiben. Weiterhin sollte das Logo nicht verändert, beispielsweise verzerrt oder gedreht werden.
Farben
Primärfarben
Das visuelle Erscheinungsbild ist durch eine Kombination aus viel Weissraum, guten Fotografien und wenigen farbigen Akzenten definiert. Für diese Akzente können die drei Primärfarben Anthrazit, Violett und Türkis verwendet werde.
Fließtexte auf weissem Hintergrund können in einem normalen Schwarz oder Anthrazit erstellt werden. Ebenso eignet sich hierfür das Violett. Verwendet man eine der Primärfarben als Hintergrund für Schrift oder Symbol, sollten diese stets in Weiss gesetzt werden.
Beim tumult-Türkis ist zu beachten, dass der Kontrast zu Weiss wesentlich geringer ist als bei den anderen Primärfarben. Diese Variante sollte also mit Bedacht und in passenden Formaten (bspw: keine zu kleinen Schriftgrößen) verwendet werden. Besonders bei Druckprodukten gibt es, je nach Drucktechnik und Papierart, eine große Varianz in der Darstellung der Farben und Kontraste.
Die gemeinsame Verwendung von Anthrazit und Türkis ist möglich. Der Kontrast dieser Farbkombination ist jedoch nicht optimal ist, und sollte deshalb nur in seltenen Fällen eingesetzt werden.
Für jede der Primärfarben sind im folgenden die Farbwerte, in vier verschiedenen Formaten aufgelistet. Diese sind der HEX Code (beginnend mit # ), RGB, CMYK und Web safe color. Hinter jedem dieser Formate verbirgt sich jeweils die selbe Farbe. In allen üblichen Softwareanwendungen ist es möglich, manuell die Farbe eines grafischen Element oder einer Schrift einzugeben. Je nach dem welcher Wert hier erfragt wird (meist RGB) können einfach die aufgelisteten Zahlenwerte übernommen werden.
Verschiedene Medien haben verschiedene Farbräume. Ein Farbraum setzt sich aus bestimmten Grundfarben zusammen, welche die Art und Anzahl der darstellbaren Farben vorbestimmen. So wird beispielsweise der Farbraum RGB (RotGrünBlau) für digitale Produkte verwendet und CMYK (CyanMagentaYelloBlack) für Druckprodukte.
Je nachdem, ob man beispielsweise ein Flyer oder einen Webbanner erstellt, sollte man auf die entsprechenden Farben zurückgreifen. Die tumult Farben sind so angepasst dass sie im jeweiligen Medium die größtmögliche Wirkung entfalten. Die für Druckprodukte angepassten Farben sind türkis_print und violett_ print. (Da Anthrazit eigentlich keine Farbe, sondern ein Schwarzwert ist, bedarf es hier keiner Unterscheidung)
anthrazit
violett
türkis
#2E2D2C
anthrazit
- RGB 46,45,44
- CMYK 0, 2, 4, 82
- Web 333333
#462E87
violett
- RGB 70, 46, 135
- CMYK 48, 66, 0, 47
- Web 333399
#352664
violett_print
- RGB 53, 38, 100
- CMYK 47, 62, 0, 61
- Web 333366
#2BE3BB
türkis
- RGB 43, 227, 187
- CMYK 81, 0, 18, 11
- Web 33cccc
#61BEB2
türkis_print
- RGB 97, 190, 178
- CMYK 49, 0, 6, 25
- Web 66cc99
Falsche Farbkombinationen
Alle übrigen, nicht zuvor erwähnten Kombinationen der Primärfarben entsprechen nicht der gewünschten formalen Sprache uns sollten vermieden werden.
Sekundärfarben (nur Web) & Icons
Aktuell gibt es eine kleine Anzahl eigens für die Website tumult-halle.de entwickelter Icons. Diese sind auf der nebenstehenden Darstellung erläutert und dienen der schnellen Navigation. Mit einer steigenden Komplexität des Web-Angebotes wird auch die Zahl und Vielfalt der Icons und Piktogramme noch steigen. Das markanteste Icon ist sicherlich das „Stadtherz“, welches auch an anderen Orten als der Website auftaucht (Haus der Jugend/Bus Außengestaltung). Es dient als ergänzende Grafik zum Logo, sollte aber noch nicht alleinstehend verwendet werden, da sich die Zugehörigkeit zum Projekt tumult erst etablieren muss. Alle Icons sind frei verfügbar und können auch bei anderen Produkten (Visitenkarten etc.) Verwendung finden.
Für die Webentwicklung ist es praktisch auf starke Kontrastfarben zurückgreifen zu können. Diese sind für tumult die nebenstehenden Gelb- und Rottöne. Sie können dafür genutzt werden, Fehlermeldungen oder andere Nutzerhinweise von der übrigen Nutzeroberfläche abzuheben. Ihre Verwendung ist damit aktuell ausschließlich auf die Umsetzung der Website beschränkt.
#EB4E51
#FFFF57
Schriften
Schriften
Die zwei Schriften von tumult sind Merriweather Sans und Roboto.
Beide Schriften werden in der kombinierten Wortmarke verwendet. Die Schrift Merriweather Sans ist im Schriftschnitt ‚black‘ die Basis des tumult Logos und für den Projektbereich wird die Roboto im Schriftschnitt ‚light‘ genutzt.
Für jegliche Art von längeren Sätzen und Fließtexten sollte ausschließlich die Roboto verwendet werden. Entgegen der relativ verspielten Merriweather, wirkt die Roboto schlicht, zurückgenommen und sachlich und eignet hierfür sich somit wesentlich besser. Zudem hat die Roboto ausreichend Schnitte (thin, light, regular, medium, bold, black,+italic) um Akzente und Unterscheidungen im Satz zu ermöglichen. Die Merriweather sollte ausschließlich für einzeln stehende Begriffe oder kurze Wortgruppen genutzt werden, welche beispielsweise bei Werbeprodukten denkbar wären.
Beide Schriften sind Google free fonts, also Schriften deren Lizenzen das Unternehmen kostenfrei zur Verfügung stellt. Um die Schriften nutzen zu können, müssen sie auf dem eigenen PC installiert sein. Hierfür ist es notwendig sie nach dem Download in die eigene Schriftsammlung zu übertragen. Auf diese Sammlung kann dann die verwendete Software (Indesign, Word, Powerpoint,..) zugreifen. Wie genau dieser Kopiervorgang für das jeweilige Betriebssystem funktioniert, lässt sich schnell via Suchmaschine herausfinden.
Den Download dieser und weiterer Google Schriften findet man HIER
Merriweather Sans
Merriweather Sans
Merriweather Sans
Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!
Roboto
Roboto
Roboto
Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!
Fotografie
Im besten Fall kann aus dem tumult Projekt heraus eine eigene Bildredaktion und eine Zusammenarbeit mit lokalen Fotografen aus der Zielgruppe entstehen. Bisher greifen wir jedoch auf kostenfreie und bezahlte Stock-Fotos zurück. Diese werden von einer Vielzahl von Bildagenturen angeboten. Ein Großteil der bisher verwendeten Bilder stammt von www.pexels.com
Bitte nicht:
HEY DARLING!
wie wär's mit
WELTRETTEN?
Bitte was? Ok, aber erst nach dem Mittag.
Sprache
Die Sprache von tumult in Wort und Text, ist ähnlich der Sprache der Fotografie: direkt, ehrlich, natürlich und gelegentlich auch dreist. Der tumult-Sprech versteckt sich nicht hinter Kofferwörtern und leerem Phrasen, sondern sagt kurz und prägnant, worum es geht. Damit kann natürlich nicht jeder verwendete Begriff messerscharf definiert und nicht jeder Satz perfekt ausformuliert sein. Ob in einem VierAugenGespräch oder auf einer Unterseite der Website – tumult bedient sich jenen Narrativen, welche den Interessen und Wünschen der jungen Menschen tatsächlich gerecht werden. Wir wollen nicht nur trocken informieren, sondern Inspirieren und zum Entdecken einladen. Wir wollen nicht nur Beratungspunkt sein, sondern die Hand (oder Schulter) reichen und Vertraute*r sein.
Und deshalb: Wir sind nicht die Zielgruppe, aber wir sind für sie da! Das Verwenden von Begriffen, welche vermeintlich einer Jugendsprache entlehnt sind (bspw. Jugendwörterbuch o.ä.), ist meist nicht die beste Wahl. Lieber sollte tumult eine eigene Sprache entwickeln und mit der Zeit etablieren. Das beste Beispiel für die richtige Sprach- und Begriffwahl ist hier der eigene und sinnstiftende Projekttitel : tumult.
PS: Wir duzen unser Publikum!
Dieser Gestaltungsleitfaden ist, genau wie das gesamte tumult Projekt, noch in seiner Enstehungsphase und nicht endgültig. Mit der Zeit werden weitere Kapitel ergänzt und bestehende verändert werden. Somit kann auch der Außenauftritt mit den Anforderungen und der Ausrichtung von tumult wachsen. Bei jeder relevanten Veränderung wird die Versionsnummer und das Datum (am Beginn der Seite) verändert. So können alle Akteure stets mit den aktuellen Daten und Richtlinien arbeiten.
to be continued..
Dieses Design Manual wurde erstellt durch den
