• Abb. 1: Splash-Screen

  • Abb. 2: Hintergrund

  • Abb. 3: Content Start

  • Abb. 4: Content zweite Ebene

  • Abb. 5: Content Liste

  • Abb. 6: Home-Screen

  • Abb. 7: LWL-App-Icon

Apps

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).

Regelung:

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 (gleiche Farbe wie auf der LWL-Website). Auf der Startseite (Abb. 3) ist in der Mitte das LWL-Logo mit rotem Quadrat platziert. Rechts und links davon ist Platz für Navigationsbuttons. Diese sind im LWL-Blau gestaltet (iOS) oder in Grau (Android).
    Das LWL-Logo zum Einsatz in der Navigation-Bar können Sie hier herunterladen.
  • Auf allen anderen Seiten (Abb. 4 + 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 verwendet werden, die nicht angeschnitten sind (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

  • Unter iOS wird die Schrift „Verdana“ verwendet. Überschriften können in Georgia gesetzt werden. Unter Android werden äquivalent die Schriften Droid Sans und Droid Serif verwendet.

App-Icon

  • Das App-Icon (Abb. 6 + 7) ist in den frei zu gestaltenden oberen Teil und in den unteren Corporate Design-Bereich unterteilt.
  • Der CD-Bereich enthält das rote Rechteck und das LWL-Logo. Dieser Bereich darf nicht verändert werden.
  • Der frei zu gestaltende obere Teil unterliegt keinen Regeln. Empfohlen wird jedoch die Verwendung klarer, einfacher Icons auf blauem (LWL-Blau) Grund.

App-Entwicklerkonten des LWL

Apps des LWL müssen als solche ausgewiesen werden - unabhängig davon, welcher Software-Hersteller sie entwickelt hat.

Für den Test und Betrieb von Apps hat die LWL.IT Service Abteilung Entwicklerkonten bei Apple und Google angelegt.

Externe Software-Entwickler, die im Auftrag des LWL eine App für die Betriebssystem-Plattformen iOS (Apple) und/oder  Android (Google) entwickeln, erhalten auf Antrag der auftraggebenden LWL-Abteilung oder LWL-Einrichtung Zugang zu diesen Entwicklerkonten und können eine App für Tests und für den Produktionsbetrieb bereitstellen.

LWL-Apps verweisen so aufeinander und sind in den App-Stores gesammelt auffindbar.

Entsprechende Anträge für den Zugang zu den Entwicklerkonten können per OLAV-Antragsverfahren an die LWL.IT Service Abteilung gerichtet werden.


Abb. 8: App-Design bei Kooperationen

Kooperationen

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.


  • Abb. 9: Beispiel für Web-App-Design

  • Abb. 10: Beispiel für Webb-App-Design

Web-App-Design

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.