Die Gestaltungsregeln für Apps richten sich weitgehend nach den Empfehlungen von Apple Inc. Dennoch wurden die meisten Elemente so angepasst, dass sie zum CD des LWL, insbesondere zur Website des LWL kompatibel sind.

Die Designs für iOS und Android unterscheiden sich geringfügig. Für beide Plattformen werden unterschiedliche Gestaltungsvorlagen zum Download angeboten (s. unten).

Splash-Screen und Hintergrund (Abb. 1 und 2)

• Der Splash-Screen (Abb. 1) besteht grundsätzlich aus dem weißen LWL-Logo auf blauem Grund.
• Der Hintergrund jeder App (also jener Bereich, der hinter dem App-Inhalt liegt) besteht aus der hier gezeigten Holz-Textur mit eingeprägtem LWL-Logo (Abb. 2).

Status-Bar

• Die Status-Bar (A, Abb. 3) ist opak schwarz und wird grundsätzlich nicht ausgeblendet.

Navigation-Bar

• Die Navigation-Bar (B, Abb. 3) ist grau. Auf der Startseite (Abb. 3) ist in der Mitte das LWL-Kürzel platziert. Rechts und links davon ist Platz für Navigationsbuttons. Diese sind im LWL-Dunkelblau (iOS) oder in Grau (Android) gestaltet.
  Das LWL-Logo zum Einsatz in der Navigation-Bar können Sie hier herunterladen.
• Auf allen anderen Seiten (Abb. 4 u. 5) wird in der Navigation-Bar das LWL-Logo durch den Seitentitel ersetzt.
• Die Navigation-Bar kann ausgeblendet werden.

Tab-Bar

• Die Tab-Bar (C, Abb. 3) befindet sich am unteren Bildschirmrand und schaltet zwischen verschiedenen Screens um. Unter iOS sollten hier möglichst die von Apple zur Verfügung gestellten Standard-Icons verwendet werden. Sie können von Icons im gleichen Stil ergänzt werden. Unter Android sollten Android-typische Icons Verwendung finden.
• Die Tab-Bar kann ausgeblendet werden.

Content-Seiten

• Content-Seiten auf höheren Hierarchieebenen (Abb. 3) sollten möglichst von einem großen Titelmotiv überspannt werden.
• Vertikal aufeinander folgende Bereiche werden durch graue Trenner separiert. Der Trenner kann anklickbar sein.
• Listeneinträge (Abb. 3) auf höheren Hierarchieebenen können ein dreiseitig angeschnittenes Bild enthalten. Der gesamte Listeneintrag ist klickbar. Auf tiefer liegenden Seiten (Abb. 5) sollen möglichst quadratische Bilder, die nicht angeschnitten sind, verwendet werden (selbstverständlich darf es Listeneinträge auch ohne Bilder geben). Auf der rechten Seite befindet sich ein nach rechts weisender Pfeil.
• Verlinkungen sind grundsätzlich blau.

Fonts

• Es wird empfohlen, die LWL-Hausschrift für Screenanwendungen, Open Sans, zu verwenden.

App-Icon

• Das App-Icon (Abb. 6 u. 7) ist in den frei zu gestaltenden oberen Teil und in den unteren CD-Bereich unterteilt.
• Der CD-Bereich enthält das LWL-Kürzel auf weißem Hintergrund. Dieser Bereich darf nicht verändert werden.
• Der frei zu gestaltende obere Teil unterliegt keinen Regeln. Empfohlen wird, klare, einfache Icons auf dunkelblauem Hintergrund einzusetzen.

Regelung für Kooperationen mit LWL-Mehrheit:

Sofern der LWL mehr als die Hälfte der Sach- und Personalkosten der App trägt oder die inhaltliche Betreuung überwiegend durch Mitarbeiterinnen und Mitarbeiter des LWL erfolgt oder die finanzielle Beteiligung eines Kooperationspartners an der App weniger als 20.000 Euro zuzüglich gesetzlicher Mehrwertsteuer beträgt, wird die App unter Berücksichtigung der folgenden Anpassungen gemäß den CD-Regeln des LWL gestaltet.

• Der blaue Spash-Screen wird durch einen weißen Screen ersetzt, auf dem die Logos des LWL und des Kooperationspartners/der Kooperationspartner abgebildet sind. Das LWL-Logo steht bei einer vertikalen Anordnung oben, bei einer horizontalen Anordnung links (s. Abb. 8, links).
• In der Navigation-Bar der Startseite wird das LWL-Logo um die Logos des Kooperationspartners/der Kooperationspartner ergänzt (s. Abb. 8, rechts). Das LWL-Logo steht links. Das Kürzel LWL ohne den Claim ist an dieser Stelle ausreichend. Sollten die Logos aus Platzmangel nicht in die Navigation-Bar passen, so werden sie an dieser Stelle durch den Seitentitel ersetzt.
• Das Motiv für das App-Icon (s. o., Abb. 6, Home-Screen) kann grundsätzlich frei gewählt werden.
• Im unteren Drittel des Icons (s. o., Abb. 7, LWL-App-Icon) muss immer das LWL-Kürzel in Blau auf weißem Grund rechts neben dem abgerundeten roten Rechteck stehen.

Regelung für Kooperationen ohne LWL-Mehrheit:

• Trägt der LWL die Hälfte oder weniger als die Hälfte der Sach- und Personalkosten der App oder erfolgt die inhaltliche Betreuung der App nicht überwiegend durch Mitarbeiterinnen und Mitarbeiter des LWL oder beträgt die finanzielle Beteiligung eines Kooperationspartners an der App mehr als 20.000 Euro zuzüglich gesetzlicher Mehrwertsteuer, so muss als Mindestanforderung das LWL-Logo im Splash-Screen (s. Abb. 8, links) abgebildet sein.

Hinweis:

Auch wenn der LWL mehr als die Hälfte der Sach- und Personalkosten der App trägt oder die inhaltliche Betreuung der App überwiegend durch Mitarbeiterinnen und Mitarbeiter des LWL erfolgt oder die finanzielle Beteiligung eines Kooperationspartners an der App weniger als 20.000 Euro zuzüglich gesetzlicher Mehrwertsteuer beträgt, kann der LWL-Direktor auf der Grundlage eines schriftlichen Antrags als Ausnahme zulassen, dass lediglich das LWL-Logo im Splash-Screen (s. Abb 8, links.) als Mindestanforderung abgebildet sein muss.

Für Web-Apps gelten grundsätzlich die gleichen Regeln wie für iOS- und Android-Apps. Jedoch orientiert sich das Design noch stärker an dem Design der LWL-Website. Dies drückt sich insbesondere durch den hellgrauen Hintergrund und den (abgesehen von Navigation- und Tap-Bar) Verzicht von Verläufen aus.

Photoshop-Templates und LWL-Icon herunterladen