Basiselemente
Farben
Einführung
Bis Version 2 der SaaS-Anwendungen von LOGICHECK wurde die Hausfarbe LC-Grün als Primärfarbe eingesetzt. Mit Einführung von CHECKBOXX kam erstmals die Farbe LC-Petrol zum Einsatz. Im Frühjahr 2023 wurde entschieden, diese Farbe zukünftig als Primärfarbe für alle SaaS-Dienste einzusetzen. Im Rahmen einer Ergonomie-Prüfung wurde oft ein nicht genügendes Kontrastverhältnis zwischen Schriftfarbe und Hintergrund bei Verwendung der LOGICHECK-Hausfarben bemängelt, weshalb die Hausfarben mit Schwarzabstufungen vermischt wurden, um dem entgegenzuwirken.
Hausfarben „Original“ VS. Kontrastoptimierung
Farbpalette
In unseren SaaS-Diensten wird das LC-Grau mit LC-Petrol kombiniert und sorgt für ein modernes und professionelles Erscheinungsbild. Bei wichtigen Hinweisen wird die Farbe LC-Signal benutzt, bei Fehlermeldungen die entsprechend definierte Farbe (LC-Rot).
LC-Grau 2
#2F3535
LC-Petrol 2
#005C4E
LC-Signal
#EE7F00
LC-Rot
#F7450C
Typische Verwendung und Anmerkungen
- Text-Ausgaben
- Formular-Labels
- Prozenttöne für Formular-Hintergründe
- Sparsamer einzusetzen
- Überschriften
- Akzentfarbe
- Buttons
- Hinweis-Texte
- Flächen zur Hervorhebung von wichtigen Hinweisen
- Fehlermeldungen
Abstufungen
Um ausreichend viele Farbtöne zur Gestaltung zur Verfügung zu haben, aber nicht zu bunt zu werden, können die Primärfarben abgestuft werden. In Kombination mit Schrift ist selbstredend immer auf einen ausreichenden Kontrast zu achten (ggfs. mit entsprechenden Tools prüfen)! Die Abstufungen sind aus den allgemeinen Corporate-Design-Vorgaben übernommen (mit Ausnahme der 5%-Abstufung).
Farbschema bei Flächen
Innerhalb der Anwendung kommen verschiedene Flächen als Hinterlegung für Elemente oder Funktionen vor, deren Verwendung einem festgelegten Schema folgt.
Info-Flächen
Das System spielt auf Info-Flächen Informationen aus – etwa die Mietdauer-Berechnung nach der User-Eingabe von Start- und Enddatum.
„Wachsende“ Info-Flächen (z.B. Akkordeons)
Auch hier werden vom System verarbeitete Informationen ausgegeben. Durch die Outline um die Fläche wird verdeutlicht, dass es sich um eine „wachsende“ Fläche (also ein Akkordeon) handelt. Sie kommt dort zum Einsatz, wenn der Inhalt relativ umfangreich ist und/oder nicht auf den ersten Blick sichtbar sein muss.
Ergebnis-Box
Das Endergebnis einer Fallbearbeitung wird in der Ergebnis-Box abgebildet. Dementsprechend optisch prominent wird sie abgebildet und im Vollton von LC-Petrol eingefärbt. Der Text steht weiß auf LC-Petrol und wird mittels Linien in Sinnabschnitten unterteilt. Besonders wichtige Hinweise werden mit einer Fläche in LC-Signal ausgegeben.
Mehr dazu unter „Seitenelemente > Ergebnis-Box“.
Interaktionsflächen
Flächen, auf denen der User Eingaben machen kann, etwa das „Funktion wechseln“-Menü oder Eingabefelder, wird ein heller LC-Grau-Ton verwendet. Auf das genaue Farbschema bei Eingabefelder wird im Kapitel „Komponenten“ eingegangen.
Typografie
Grundsätzliches
In unseren SaaS-Diensten kommt ausschließlich die LOGICHECK-Hausschrift „Maven Pro“ zum Einsatz. Wir verwenden ausschließlich die Schnitte „Regulär“ und „Medium“. Bitte nicht den „Bold“-Schnitt verwenden – er wirkt im Vergleich sehr plump. Für Hervorhebungen wird der „Medium“-Schnitt genutzt, gerne im Zusammenspiel mit Schriftgröße und Farbigkeit.
MavenPro Regular
font-weight: 300;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
!Ҥ$%&/()=?`
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
MavenPro Medium
font-weight: 500;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
!Ҥ$%&/()=?`
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Klassen
Definierte Klassen gewährleisten ein konsistentes Erscheinungsbild und ermöglichen Differenzierungen. Dabei ist immer eine gute Unterscheidbarkeit in Zusammenhang mit der optischen und inhaltlichen Hierarchie zu achten.
Headlines
Headline 1: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
h1
{MavenPro regular;
font-size: 36px;
line-height: 44px;
color: #005C4E;}
Headline 1 Popup: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
h1.popus
{MavenPro regular;
font-size: 32px;
line-height: 42px;
color: #005C4E;}
Headline 2: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
h2
{MavenPro regular;
font-size: 30px;
line-height: 38px;
color: #2F3535;}
Headline 3: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
h3
{MavenPro regular;
font-size: 22px;
line-height: 30px;
color: #005C4E;}
Headline 4: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
h4
{font-family: MavenPro-Medium;
font-size: 18px;
line-height: 26px;
color: #2F3535;}
Headline mit Border-Top
h4.border
{border-top: 1px solid #828686;
padding-top:12px;
width: fit-content;}
Einsatz: Übersicht Gerichtsurteile, Menü „Funktion wechseln“
Headline mit Border-Top
h4.border2
{border-top: 1px solid #005C4E;
padding-top:12px;}
Einsatz: Kunden-Cockpit > Prüfvorgaben > Textbausteine, Clusterung nach Rubriken
Copy-Texte
Copy-Text normal: Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere?
p
{MavenPro regular;
font-size: 18px;
line-height: 30px;
color: #2F3535;}
Copy-Text klein: Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere?
p.small
{MavenPro regular;
font-size: 15px;
line-height: 24px;
color: #2F3535;}
Listen
- Copy-Text normal: Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann.
- Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein:
- Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere?
ul li
{MavenPro regular;
font-size: 14px;
line-height: 22px;
color: #2F3535;
margin-bottom:10px;
list-style-type: disc;
list-style-position: outside;}
Links
Default
Ich bin ein Link.
color: #005C4E; text-decoraton:underline;
Hover
Ich bin ein Link.
color: #2F3535; text-decoraton:none;
Links werden immer unterstrichen und in LC-Petrol dargestellt.
Unterstreichungen sind ausschließlich für Links vorgesehen! Sollte eine Hervorhebung im Text benötigt werden, kann der Medium-Schnitt der Maven Pro genutzt werden.
Default
Ich bin ein Link.
color: #005C4E;
Hover
Ich bin ein Link.
color: #2F3535; text-decoraton:underline;
Links außerhalb von Fließtexten (z.B. Footer)
Hier verhält es sich umgekehrt, Links werden erst beim Hovern unterstrichen
Specials
Headline 2 alert: Ich stehe als Headline in Overlays.
h2.alert
{MavenPro medium;
font-size: 30px;
line-height: 38px;
color: #EE7F00;}
Komponenten
Buttons
Buttons Hauptnavigation
Funktionsauswahl
Befindet sich der Nutzer auf der Startseite mit dem „geführten“ Ablauf, muss er zunächst die grundsätzliche Funktion auswählen.
Layout
Im weiteren Prozess kann der Benutzer dann die konkrete Funktion wählen. Neben der eigentlichen Funktion ist der Funktionsbereich auf dem Button vermerkt, also etwa „Privat genutzte Fahrzeuge“ oder „Verbindliche Beratung“.
Zweck des Pfeils
Die Buttons zur Funktionsauswahl lösen nicht direkt den Start der angewählten Funktion aus, sondern erst der Button „Bearbeitung starten“. Daher dient der Pfeil als verdeutlichender Indikator, welche Funktion im Prozess gerade vom Nutzer angewählt wurde.
Vermassung
Die Breite der Buttons zur Funktionsauswahl richtet sich immer nach geltenden Raster (siehe „Abstände / Vermaßungen > Raster“ ).
Aktionsbuttons
| Einsatzgebiet | Beispiel | |
|---|---|---|
| Big-Button mit Icon | Für den Start der Fallbearbeitung auf der Startseite wird ein größerer Button eingesetzt, der dadurch optisch noch etwas mehr auffällig ist. |  |
| Standard-Button mit Icon | Löst eine wichtige Schlüsselfunktion aus oder beendet eine Funktion „positiv“ (etwa das Speichern eines Unternehmenseintrags); bekommt durch seine Optik eine gewisse Prominenz. |  |
| Ghostbutton mit Icon | Zwei Einsatzgebiete: Erscheint negativ weiß in der petrolfarbenen Sidebar (mehr darüber) und löst eine wichtige Schlüsselfunktion (etwa den Abschluss der Fallbearbeitung) aus. Mit grauem Rahmen beendet sie eine Funktion „negativ“ (wie etwa das Abbrechen einer Eingabe). Ein in der Farbe „LC-Signal“ eingefärbter Button dient bei destruktiven Funktionen wie Löschen dazu, den User bereits optisch zu warnen. |  |
| Ghostbutton ohne Icon | Erscheint an Stellen, an denen sich der Button optisch integrieren soll und es einer nicht so starken Aufmerksamkeit bedarf. Beispiel: Button „Neues Unternehmen anlegen“ auf der Startseite oder „Tagespreis abfragen“ bei der Lokalen Rechtsprechung. |  |
| Runde Buttons ohne Text | Kommen dann zum Einsatz, wenn eine Funktion in einem Bereich oft wiederholt benötigt wird und der Button somit optisch möglichst unauffällig integriert werden soll. Beispiel: Ergebnis-Tabelle mit Unternehmen auf der Startseite. Er sollte so selbsterklärend sein, dass er keine Beschriftung benötigt (außer einen Tool-Tip). |  |
Layout
Standard-Button mit Icon (und Big Button)
Runde Buttons ohne Text
Popup-Bedienelemente
Vermassung
Standard-Button mit Icon
Ghostbutton ohne Icon
Big Button
Auswahlelemente
Radio-Buttons werden vorzugsweise bei klaren Ja/Nein-Abfragen oder bei vertikal angeordneten Abfragen mit weniger als sieben Möglichkeiten eingesetzt. Bei Abfragen mit einer horizontalen Anordnung sind Chips zu verwenden.
(Text)Eingabefelder
Ausgabefelder
Es gibt zwei Arten von Ausgabefeldern:
- Vorbefüllte Felder, deren Wert der Nutzer ändern kann
- Vorbefüllte Felder, die vom Nutzer nicht zu ändern sind bzw. Berechnungsfelder
Die Vorbefüllung wird dem Nutzer durch die gestrichelte Linie verdeutlicht. Ist es ein zu änderndes Feld, hat dieses auch einen Hintergrund – Berechnungsfelder etwa haben keinen Hintergrund.
Dropdowns
Datepicker
Tab-Menüs
Horizontal
Vertikal
Filter bei Typeingrenzung
Tabellen
Akkordeons
Chips
Chips werden eingesetzt, wenn in einer horizontal angeordneten Abfrage mehr als zwei Auswahlmöglichkeiten vorkommen, etwa bei der Abfrage „Abzug Eigenbetriebskosten“.
Es gibt sie in zwei Größen: Einer kleineren Variante für kurze Inhalte (etwa Prozentzahlen) und eine größeren Variante (etwa bei der Auswahl von Ansprechpartnern).
„Bildersuchbaum“ (gewerblich genutzte Fahrzeuge)
Für die Anordnung der Kacheln und die Abstände dazwischen wird das 3er-Raster für den Inhaltsbereich benutzt.
„Disabled State“
Abstände / Vermaßungen
Seitenraster
Die Gestaltung und der Aufbau des User Interfaces der LOGICHECK-Webanwendungen basieren auf aktuell vier verschiedenen Seitenrastern. Bedingt durch die feste Seitenbreite von 1260px können fixe Raster angesetzt werden, die zur dazu dienen, die (Bedien-)Elemente der Anwendung übersichtlich und aufgeräumt auf der horizontalen Achse zu platzieren. Sie unterstützen auch die Blickführung, etwa bei tabellenartigen Ansichten. Neue Abschnitte oder Funktionen sollten deshalb immer unter Berücksichtigung des Raster angelegt werden.
Die definieren Rasterdefinitionen sind nach Möglichkeit einzuhalten – sollte es der Inhalt oder technische Beschränkungen erfordern, ist ein Verlassen der Vorgaben möglich.
Einstiegsseite
Auf der Einstiegsseite kommt ein 18spaltiges Raster zum Einsatz, um auf eine große Flexibilität zurückgreifen zu können.
Beispiel
Funktionsseiten
Bei den Funktionsseiten wurden drei Raster für den Inhaltsbereich festgelegt, die je nach Inhalt anzuwenden sind. Für die Inhaltsboxen in der rechten Seitenleiste gibt es ein Raster.
Raster „2 Spalten á 4 Einheiten“
Dieses Raster ist sinnvoll, wenn im Inhaltsbereich zwei thematisch zusammengehörige Abfragen kompakt nebeneinander dargestellt werden sollen. Der Abstand in der Mitte ist etwas größer, um die gedachte Zweispaltigkeit zu verdeutlichen. Das Raster wird in der Rechnungsprüfung fast durchgängig eingesetzt.
Raster 10 Spalten
Bietet sich eine Unterteilung in zwei Spalten nicht an, weil etwa eine inhaltliche Abtrennung zwischen linker und rechter Spalte nicht sinnvoll ist, kann das flexible 10er-Raster verwendet werden. Es wird etwa bei den Funktionen „Beratung“ eingesetzt.
Raster 3 Spalten
Werden im Inhaltsreich drei Spalten benötigt, bietet sich dieses Raster an – so z.B. bei der Unterteilung der Gerichtsurteile. Die Spalten können bei Bedarf in feinere Einheiten unterteilt werden.
Raster rechte Seitenleiste
Auch die Inhaltsboxen in der rechten Seitenleiste orientieren sich an einem Raster.
Beispiel Rechnungsprüfung
Beispiel Telefonische Beratung
Vertikale Abstände
Für die Anordnung der Elemente in der vertikalen Achse wurde kein konkretes Raster zugrunde gelegt – allerdings wird mit festgelegten Abständen gearbeitet, um Einheitlichkeit und Übersichtlichkeit zu wahren. Für einen großen Teil an Anwendungsfällen kann eine Systematik abgeleitet werden.
Einheiten
Systematik
Beispiele
Startseite
Beispiel Rechnungsprüfung
Beispiel Telefonische Beratung
