Alle Seiten sind aufgebaut aus einer Kopfzeile, einem Logo, dem Inhaltsbereich und einer Fußzeile. Das Layout ist normalerweise bis zu 1200 px breit. Zusätzlich ist eine Layoutvariante mit unbegrenzter Breite verfügbar.
Alle Layouts sind responsive mit 4 Breakpoints, was bei Anpassungen beachtet werden sollte. Für Details dazu siehe settings.scss und die verwendeten Media-Queries.
Für die Kopfzeile bestehen 2 Varianten:
Variante (1) enthält:
- Website-Navigation
- Sprachauswahl
- Login (auf DARIAH-DE nicht benötigt, dennoch als Beispiel integriert)
- Suche
- DARIAH-DE-Menü (auf allein Websites identisch)
Variante (2) ist ein schmaler blauer Balken ohne Interaktionsmöglichkeit.
Auch das Logo gibt es in 2 Varianten:
Das Logo in voller Größe (1) kommt nur auf der Hauptseite zum Einsatz.
Auf Unterseiten wird hingegen die kleine Variante (2) verwendet, wobei der SVG-Code identisch ist, jedoch der ausgeschriebene Projektname verdeckt wird. Zusätzlich erscheint eine Trennlinie zwischen Logo und Seitentitel.
Soweit es das Design des Logos zulässt, soll es zu einem kleinen Teil in die Kopfzeile hineinragen, wobei der überlagernde Teil von einem weißen Rand umgeben wird. Hierfür gibt es keine festen Werte, jedoch ist darauf zu achten, dass ausreichend Abstand zwischen den Inhalten der Kopfzeile und dem Logo besteht. Das Logo selbst darf nicht verändert werden, um zu vermeiden, dass vom Originallogo abweichende Varianten online zu finden sind. Vielmehr wird dafür separater SVG-Code hinzugefügt.
Die Grundlage bilden 3 dem DARIAH-DE-Logo entnommene Farben:
#213365#494e7d#727299
Farbe (1) wird als Hintergrund für die Kopfzeile sowie für Überschriften erster Ebene (<h1>) verwendet. Farbe (2) wird für Links, dynamische Elemente und Buttons, Farbe (3) für Überschriften zweiter und dritter Ebene (<h2> und <h3>) eingesetzt.
Normaler Text erscheint in #333, heller Text sowie alle übrigen Überschriften in #707070.
Hinzu kommen aus Farbe (2) abgeleitete Hinweisfarben:
#446521für Erfolgsmeldungen#655321für Warnungen#652122für Fehler
Ränder und Trennlinien erscheinen in #ccc.
Hervorhebung erfolgt durch leichte Aufhellung. Dafür siehe settings.scss und die Effekte auf dieser Seite.
Überschriften erster und zweiter Ebene (<h1> und <h2>) werden im Font Museo Sans Rounded mit der Stärke 500 gesetzt. Dasselbe gilt für Buttons, wobei nur Großbuchstaben (text-transform: uppercase) verwendet werden.
Für alle anderen Überschriften und Fließtext kommt Roboto Light (Stärke 300) zum Einsatz, für fette Passagen Roboto Medium (Stärke 500).
Basisschriftgröße ist 16 px, kleiner Text erscheint in 14 px. Die Schriftgrößen von Überschriften stehen im Verhältnis 5:4 (»große Terz«) zur Basisschriftgröße.
Für gute Lesbarkeit sollten Textzeilen nicht breiter sein als 720 px, was bei Roboto in 16 px etwa 100 Zeichen entspricht.
Autoren sollten nur <h2> bis <h6> vergeben können, nicht jedoch <h1>.
Für mehr Details siehe fonts.scss und settings.scss sowie das Mockup mit allen HTML-Elementen.
Die Icons entstammen den Themify-Icons und werden als SVGs eingebunden, soweit möglich in der Originalgröße von 17×17 px.
In den Kacheln auf der Hauptseite wird die Strichstärke der Icons vermindert, indem eine schmale weiße Umrandung hinzufügt wird.
Sofern eigene Icons hinzugefügt werden, ist unbedingt darauf zu achten, dass sich diese harmonisch zwischen den anderen einfügen, insbesondere hinsichtlich der Strichstärke.
Die bereitgestellten Mockups bieten einen Überblick der verschiedenen Layouts und Designelemente. Die Fußzeile erscheint auf jeder Seite.
- volle Kopfzeile (klickbar ist nur der Menüpunkt »Digital Humanities«)
- Logo in voller Größe
- hervorgehobener Bereich mit 6 Kacheln, die – wie auf der alten Website – den Direkteinstieg zu wichtigen Unterseiten ermöglichen, ergänzt durch einen kurze Projektbeschreibung
- die neuesten 7 Blogposts; 4 in einer 2×2-Matrix, darunter 3 weitere nebeneinander
- hervorgehobener Link zum Blog
- Kopfzeile ohne Inhalt
- kleines Logo
- Inhaltsbereich
Eine Übersicht (fast) aller möglichen HTML-Elemente einschließlich Tabellen und Formulare.
- Kopfzeile ohne Inhalt
- kleines Logo
- Inhaltsbereich mit begrenzter Breite
Dieses Mockup demonstriert normalen Textinhalt mit optionalen Bildern und Medien, wie dieser für den Blog, aber auch auf statischen Seiten dargestellt werden sollte.
- volle Kopfzeile
- kleines Logo
- Inhaltsbereich
Für spezielle Seiten wurden weitere Mockups erstellt, darunter die Login-Seite, die Organisationsauswahl bei der Registrierung sowie eine Statusseite mit den neuesten Tweets.