App-Grafiken Anleitung

Einleitung 

 Für die Erstellung der nativen Apps (moApp) für iOS und Android werden Grafiken benötigt. Diese sind fix und können nur durch einen erneuten Upload in die App Stores wieder geändert werden. 

 1. Grafiken iOS-App (iPhone & iPad) 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 Ausmasse (in Pixel) 

 Dateiname 

 Format 

 

 

 

 

 1 

 Master Icon 

 

 

 

 1024 x 1024 

 master_icon_ios.png 

 PNG Transparenz für Hintergrund ist möglich 

 

 

 

 Die abgerundeten Kanten und der Spiegeleffekt werden von der App automatisch erstellt 

 2. Grafiken android-App 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 Ausmasse (in Pixel) 

 Dateiname 

 Format 

 

 

 

 

 1 

 Master Icon Es kann das gleiche Master Icon benutzt werden wie für die iOS-App 

 

 

 

 1024 x 1024 

 master_icon_android.png 

 PNG Transparenz für Hintergrund ist möglich 

 

 

 2 

 Benachrichtigungs Icon Das Sujet muss monochrom sein, optimalerweise nicht zu komplex, da es nur relativ klein dargestellt wird 

 

 

 

 96 x 96 

 notif_xxxhdpi.png? 

 PNG Transparenter Hintergrund! 

 

 

 3 

 Store Icon 

 

 

 

 180 x 120 

 android_werbegrafik_store.png 

 PNG 

 

 

 4 

 Funktionshintergrund 

 

 

 

 1024 x 500 

 android_funktionsgrafik_store.png 

 PNG 

 

 

 

 3. Grafiken Web-App 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 Ausmasse (in Pixel) 

 Dateiname 

 Format 

 

 

 

 

 1 

 Logo Header 

 

 

 

 360 x 87 

 logo_header.png 

 PNG Transparenter Hintergrund! 

 

 

 

 Logo Header Darkmode (falls obiges Logo auf dunklem Grund nicht optimal wirkt) 

 

 360 x 87 

 logo_header_dark.png 

 PNG Transparenter Hintergrund! 

 

 

 2 

 Master Icon Falls anders als bei den Apps oben 

 

 

 

 1024 x 1024 

 master_icon_web.png 

 PNG Transparenz für Hintergrund ist möglich 

 

 

 3 

 Stimmungsbilder 

 

 

 

 mind. 3500 x 1400 Pixel Typischerweise sind die panoramamässig dimensioniert 

 keine Vorgabe 

 JPG Auf Basis des angelieferten Bildes werden die Miniaturansichten (Thumbnails) für kleine Geräte automatisch erstellt. Die Masse (Verhältnis Breite/Höhe) der Stimmungsbilder sind frei wählbar, die Breite sollte jedoch nicht kleiner als der Vorgabewert sein. Sehr hohe oder quadratische Bilder werden nicht empfohlen, da sonst der Inhaltsbereich zu wenig Platz bekommt und in der Regel nicht optimal dargestellt werden kann. 

 

 

 

 4. Farbwerte (Hexacodes) 

 Der korrekte Farbwert (Hexacode) für die Kopfzeile ist für die Erstellung der App notwendig, da auf dieser Basis die Screenshots für den App Store erstellt werden. Nicht empfohlen sind weiss oder zu helle Farben da die Buttons automatisch die Hintergrund-farbe des Headers verwenden. Der Farbverlauf wird vom Betriebssystem (iOS) automatisch erstellt. 

 4.1 Kopfzeile 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 

 

 

 

 1 

 Kopfzeile Hintergrund 

 #004488 

 

 

 2 

 Kopfzeile Textfarbe 

   

 

 

 3 

 Kopfzeile Buttons 

   

 

 

 

 Die untenstehenden Angaben sind für die Erstellung der Apps nicht notwendig und können auch zur Laufzeit direkt via moPage-CMS verändert werden. 

 4.2 Inhaltsbereich (optional) 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 

 

 

 

 1 

 Hintergrund Content 

   

 

 

 2 

 Textfarbe Content 

   

 

 

 3 

 Titelfarbe Content 

   

 

 

 4 

 Linkfarbe Content 

   

 

 

 5 

 Linkfarbe Liste 

   

 

 

 6 

 Farbe Trennlinie 

   

 

 

 7 

 Farbe Buttons 

   

 

 

 

 4.3 Navigation moPage (optional) 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 

 

 

 

 1 

 Hintergrundfarbe 

   

 

 

 2 

 Linkfarbe 

   

 

 

 3 

 Farbe Trennlinie 

   

 

 

 

 4.4 Navigation iOS/android-App (optional) 

 

 

 

 Nr 

 Beschreibung 

 Beispiel 

 

 

 

 

 1 

 Farbe Navigation: Icons 

 #167816 

 

 

 2 

 Farbe Buttons 

   

 

 

 3 

 Schriftgrösse Navigation 

 optional