Design Manual

Vorwort

Das Corporate Design ist das zentrale Element der Identität eines Unternehmens und prägt das visuelle Erscheinungsbild maßgeblich. Es zeichnet sich durch den konsequenten Einsatz und das optimale Zusammenspiel der vier Basiselemente Farbe, Typografie, Logo und Layout aus.

Die einzelnen Richtlinien sind klar strukturiert, so dass sie einfach angewendet werden können. Die in diesem Manual festgelegten Gestaltungsvorgaben sind für alle künftigen Print- und Digital-Projekte verbindlich.

Die Wortmarke

Der moderne, klare und serifenlose Schriftzug „makandra“ ist in Kleinbuchstaben gesetzt. Die Schriftstärken sind alle gleichmäßig breit. Das „m“, sowie das „n“ und das „r“ sind durch seine spezielle Form, bzw. einen Schnitt des Buchstabends, hervorgehoben. Durch die Trennung ergeben sich einzelne Punkte, die einen automatisierten Software-Test visualisieren. Ein Punkt, sowie die Ecke am „a“ sind farblich hervorgehoben. Die Spitze der Ecke steht exakt im 90-Grad-Winkel zum Buchstaben „a“.

Auch im Fließtext wird das Wort „makandra“ stets klein geschrieben.

Varianten und Downloads

Das makandra Logo wird grundsätzlich in den CI-Farben platziert. Weitere Platzierungsmöglichkeiten auf verschiedenen Farben werden unten gezeigt. Die Platzierung des Logos erfolgt auf klaren Hintergründen immer direkt und ohne weitere Hintergrundelemente.

In 1c-Dokumenten wird das Logo invertiert platziert. Auf weißen Hintergründen wird das Logo ausschließlich schwarz und auf schwarzen Hintergründen ausschließlich weiß platziert. Aus Gründen der visuellen Einheitlichkeit ist es nicht zulässig, das Logo in einer anderen Farbe zu verwenden.

Platzierung auf farbigen Hintergründen

Die Wortmarke kann auf einfarbigen Hintergründen aus der Farbpalette platziert werden. Dabei ist stets die Variante zu wählen, die einen maximalen Kontrast zum Hintergrund bietet.

Nicht zulässig

No margin
Fehlender Abstand
Tiny
Nicht lesbar
Rotated
Keine Drehung
Distorted
Kein Verzerren
Recolored
Keine Farbänderung
Omitted
Kein Weglassen
Cropped
Kein Anschnitt
Edited
Keine Veränderungen
Outline
Keine Stiländerungen

Das Icon

Das makandra-Icon kommt immer dann zum Einsatz, wenn die Wortmarke in der Abbildung zu klein werden würde. Es kann zudem auch als Gestaltungselement in allen Designs verwendet werden. Hierbei gelten die gleichen Richtlinien wie bei der Wortmarke.

Ein „m“ als Identität – mit dieser inhaltlichen Botschaft fungiert die Icon als einzigartiges und zugleich einprägsames Statement für hoch-spezifisches Know-How. Das „m“ mit drei integrierten Punkten visualisiert einen automatisierten Software-Test.

Das Icon kann an beliebigen Stellen in jeder beliebigen Größe platziert werden. Gedruckt oder online soll sie das interpretieren, was sie ist. Die makandra-Identität steht für die Entwicklung komplexer Softwarelösungen, Webseiten und Hosting. makandra bietet kompetente, technische Expertise bei allen digitalen Projekten.

Varianten und Downloads

Das makandra-Icon wird grundsätzlich in den CI-Farben platziert. Weitere Platzierungsmöglichkeiten auf verschiedenen Farben werden unten gezeigt. Die Platzierung des Icons erfolgt auf klaren Hintergründen immer direkt und ohne zusätzliche Hintergrundelemente.

In 1c-Dokumenten wird das Icon invertiert platziert. Auf weißen Hintergründen wird das Icon ausschließlich schwarz und auf schwarzen Hintergründen ausschließlich weiß platziert. Aus Gründen der visuellen Einheitlichkeit ist es nicht zulässig, das Icon in einer anderen Farbe zu verwenden.

Platzierung auf farbigen Hintergründen

Das Icon kann auf einfarbigen Hintergründen aus der Farbpalette platziert werden. Dabei ist stets die Variante zu wählen, die einen maximalen Kontrast zum Hintergrund bietet.

Farben

Alle Inhalte verwenden eine einheitliche Farbpalette aus sechs Tönen, um maximale Wiedererkennung zu erreichen.

Die Farben der Palette können mit weiß oder schwarz gemischt werden, um andere Kontraste zu erzielen. Der Farbton selbst darf dabei nicht verändert werden.

Primäre Markenfarben

Licorice
#141210
rgb(20, 18, 16)
cmyk(70%, 65%, 6%, 85%)
hsl(30, 11%, 7%)
Coated Black C
Uncoated 6 U
Amaranth
#e61d47
rgb(230, 29, 71)
cmyk(0%, 95%, 60%, 0%)
hsl(347.5, 80.1%, 50.8%)
Coated 192 C
Uncoated 192 U

„Lakritzschwarz“ und „Amaranth“ sind die primären Markenfarben von makandra. Die Farben können zu jedem Thema eingesetzt werden.

Erweiterte Farbpalette

Silver
#ccd4d9
rgb(204, 212, 217)
cmyk(20%, 10%, 10%, 5%)
hsl(203.1, 14.6%, 82.5%)
Coated 538 C
Uncoated 538 U
Ash
#4d5456
rgb(77, 84, 86)
cmyk(25%, 10%, 10%, 75%)
hsl(193.3, 5.5%, 32%)
Coated 425 C
Uncoated 425 U
Lemming
#0D3F94
rgb(13, 63, 148)
cmyk(90%, 60%, 0%, 40%)
hsl(217.8, 83.9%, 31.6%)
Coated 286 C
Uncoated 286 U
Galaxy
#20304c
rgb(32, 48, 76)
cmyk(57%, 35%, 0%, 70%)
hsl(218.2, 40.7%, 21.2%)
Coated 2767 C
Uncoated 2767 U

Typografie

Die Marke makandra verwendet die Schriftfamilien Roboto und Roboto Mono. Durch Verwendung des „Light“-Schnittes für Fließtext ergbit sich ein frisches und modernes Schriftbild.

Elemente

Überschriften
Roboto Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 ß % & / ( ) = ? ` * ´ ; , . : ! ° § $
Intro-Text
Roboto Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 ß % & / ( ) = ? ` * ´ ; , . : ! ° § $
Fließtext
Roboto Light
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 ß % & / ( ) = ? ` * ´ ; , . : ! ° § $
Hervorhebung Fließtext
Roboto Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 ß % & / ( ) = ? ` * ´ ; , . : ! ° § $
Quelltext
Roboto Mono
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 ß % & / ( ) = ? ` * ´ ; , . : ! ° § $

Anwendungsbeispiel

Ein Team mit Geschichte

makandra ist ein Team aus Ruby-Entwicklern und Linux-Administratoren mit Sitz in Augsburg. Wir entwickeln und betreiben anspruchsvolle Web-Anwendungen auf Basis von Ruby on Rails.

Seit unserer Gründung 2009 haben wir über 100 Rails-Projekte erfolgreich realisiert. Unser Operations/SRE-Team kümmert sich um den stabilen Betrieb von über 100 Rails-Anwendungen auf über 200 Servern und berät im Bereich Amazon Web Services. Unsere Kundenstruktur umfasst Unternehmen aus den unterschiedlichsten Branchen und reicht vom Start-up, über Mittelständler, bis hin zum Großkonzern. Allen Kunden und Projekten gemeinsam sind unser Technologie-Stack und unsere Herangehensweise.

Agil handeln, langfristig denken

Wir legen Wert auf stabile, technisch hervorragende Lösungen, die auch in Zukunft noch wartbar bleiben. Wir sind zutiefst davon überzeugt, dass automatisierte Tests nicht nur technisch notwendig sind, sondern einen positiven wirtschaftlichen Beitrag zu Software-Projekten leisten. Deswegen verzichten wir niemals auf Tests.

Wir sehen einen inhärenten Sinn darin, Prozesse wiederholbar zu machen. Deswegen schreiben wir in unserer Wissensdatenbank makandracards alles auf, was wir herausfinden. So entwickeln wir unsere Best Practices ständig weiter, und verteilen sie im Team.

Verwendung als Web-Font

Die Schriftfamilie Roboto ist am einfachsten über Google Fonts einzubinden.

Google Fonts erlaubt es, den benötigten Zeichensatz sowie die gewünschten Schriftschnitte einzugrenzen. Jeder Schnitt (z. B. Light, Italic, Bold, Bold Italic) bedeutet für den Benutzer einen Download einer separaten Schriftdatei von signifikanter Größe. Daher sollten nach Möglichkeit nicht mehr als 3 Schnitte gewählt werden. Als Zeichensatz reicht meist „Latin“.

Die Standard-Schnitte Light, Italic und Bold können über folgendes externes Stylesheet eingebunden werden:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,700&display=swap" rel="stylesheet">

Bei der Formattierung von Fließtext ist darauf zu achten, dass der Schnitt „Light“ (Schriftstärke 300) und nicht „Regular“ verwendet wird:

body {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}

Verwendung in Print und Office

In Google Docs ist die Schriftart Roboto im Schnitt „Light“ („Leicht“) verfügbar:

Google docs

Für LibreOffice muss Roboto erst heruntergeladen und installiert werden. Leider ist für LibreOffice der Schnitt „Light“ eine separate Schriftart namens "Roboto Light". Will man ein Wort fetten, muss manuell auf den regulären Font „Roboto“ gewechselt werden:

Libre office