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

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis" style="border-collapse: collapse; width: 100%; border-width: 1px;"><thead><tr><td style="width: 5.12515%;">Nr</td><td style="width: 26.9368%;">Beschreibung</td><td style="width: 19.9046%;">Beispiel</td><td style="width: 15.0081%;">Ausmasse (in Pixel)</td><td style="width: 16.4579%;">Dateiname</td><td style="width: 16.6865%;">Format</td></tr></thead><tbody><tr><td style="width: 5.12515%;">1</td><td style="width: 26.9368%;">Master Icon</td><td style="width: 19.9046%;">[![appstore_icon.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/appstore-icon.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/appstore-icon.png)

</td><td style="width: 15.0081%;">1024 x 1024</td><td style="width: 16.4579%;">master\_icon\_ios.png</td><td style="width: 16.6865%;">PNG   
*Transparenz für Hintergrund ist möglich*</td></tr></tbody></table>

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

## 2. Grafiken android-App

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-1" style="border-collapse: collapse; width: 100%; border-width: 1px;"><thead><tr><td style="width: 5.24434%;">Nr</td><td style="width: 27.1752%;">Beschreibung</td><td style="width: 19.4258%;">Beispiel</td><td style="width: 14.9008%;">Ausmasse (in Pixel)</td><td style="width: 16.6865%;">Dateiname</td><td style="width: 16.6865%;">Format</td></tr></thead><tbody><tr><td style="width: 5.24434%;">1</td><td style="width: 27.1752%;">Master Icon  
*Es kann das gleiche Master Icon  
benutzt werden wie für die iOS-App*</td><td style="width: 19.4258%;">[![appstore_icon.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/Gaqappstore-icon.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/Gaqappstore-icon.png)

</td><td style="width: 14.9008%;">1024 x 1024</td><td style="width: 16.6865%;">master\_icon\_android.png</td><td style="width: 16.6865%;">PNG   
*Transparenz für Hintergrund ist möglich*</td></tr><tr><td style="width: 5.24434%;">2</td><td style="width: 27.1752%;">Benachrichtigungs Icon  
*Das Sujet muss monochrom sein, optimalerweise nicht zu komplex, da es nur relativ klein dargestellt wird*</td><td style="width: 19.4258%;">[![notif_xxxhdpi.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/notif-xxxhdpi.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/notif-xxxhdpi.png)

</td><td style="width: 14.9008%;">96 x 96</td><td style="width: 16.6865%;">notif\_xxxhdpi.png?</td><td style="width: 16.6865%;">PNG   
*Transparenter Hintergrund!*</td></tr><tr><td style="width: 5.24434%;">3</td><td style="width: 27.1752%;">Store Icon</td><td style="width: 19.4258%;">[![android_werbegrafik_store.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/android-werbegrafik-store.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/android-werbegrafik-store.png)

</td><td style="width: 14.9008%;">180 x 120</td><td style="width: 16.6865%;">android\_werbegrafik\_store.png</td><td style="width: 16.6865%;">PNG</td></tr><tr><td style="width: 5.24434%;">4</td><td style="width: 27.1752%;">Funktionshintergrund</td><td style="width: 19.4258%;">[![android_funktionsgrafik_store.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/android-funktionsgrafik-store.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/android-funktionsgrafik-store.png)

</td><td style="width: 14.9008%;">1024 x 500</td><td style="width: 16.6865%;">android\_funktionsgrafik\_store.png</td><td style="width: 16.6865%;">PNG</td></tr></tbody></table>

## 3. Grafiken Web-App

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-2" style="border-collapse: collapse; width: 100%; border-width: 1px;"><thead><tr><th style="width: 5.7211%;">Nr</th><th style="width: 26.9368%;">Beschreibung</th><th style="width: 19.3064%;">Beispiel</th><th style="width: 14.7818%;">Ausmasse (in Pixel)</th><th style="width: 16.6865%;">Dateiname</th><th style="width: 16.6865%;">Format</th></tr></thead><tbody><tr><td style="width: 5.7211%;">1</td><td style="width: 26.9368%;">Logo Header</td><td style="width: 19.3064%;">[![logo_header_3x.png](https://doc.anthrazit.org/uploads/images/gallery/2026-07/scaled-1680-/logo-header-3x.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-07/logo-header-3x.png)

</td><td style="width: 14.7818%;">360 x 87</td><td style="width: 16.6865%;">logo\_header.png</td><td style="width: 16.6865%;">PNG   
*Transparenter Hintergrund!*</td></tr><tr><td style="width: 5.7211%;">  
</td><td style="width: 26.9368%;">Logo Header Darkmode  
(falls obiges Logo auf dunklem Grund nicht optimal wirkt)</td><td style="width: 19.3064%;">![](https://www.citymobile.ch/mopages/7181/grfx/logo_header_3x.png)</td><td style="width: 14.7818%;">360 x 87</td><td style="width: 16.6865%;">logo\_header\_dark.png</td><td style="width: 16.6865%;">PNG   
*Transparenter Hintergrund!*</td></tr><tr><td style="width: 5.7211%;">2</td><td style="width: 26.9368%;">Master Icon  
*Falls anders als bei den Apps oben*</td><td style="width: 19.3064%;">[![appstore_icon.png](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/5wWappstore-icon.png)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/5wWappstore-icon.png)

</td><td style="width: 14.7818%;">1024 x 1024</td><td style="width: 16.6865%;">master\_icon\_web.png</td><td style="width: 16.6865%;">PNG   
*Transparenz für Hintergrund ist möglich*</td></tr><tr><td style="width: 5.7211%;">3</td><td style="width: 26.9368%;">Stimmungsbilder</td><td style="width: 19.3064%;">[![1626495582.jpg](https://doc.anthrazit.org/uploads/images/gallery/2026-02/scaled-1680-/1626495582.jpg)](https://doc.anthrazit.org/uploads/images/gallery/2026-02/1626495582.jpg)

</td><td style="width: 14.7818%;">mind. 3500 x 1400 Pixel  
  
*Typischerweise sind die panoramamässig dimensioniert*</td><td style="width: 16.6865%;">*keine Vorgabe*</td><td style="width: 16.6865%;">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.*</td></tr></tbody></table>

## 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

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-3" style="border-collapse: collapse; width: 100%; border-width: 1px;"><thead><tr><th style="width: 5.36353%;">Nr</th><th style="width: 27.5328%;">Beschreibung</th><th style="width: 67.1037%;">Beispiel</th></tr></thead><tbody><tr><td style="width: 5.36353%;">1</td><td style="width: 27.5328%;">Kopfzeile Hintergrund</td><td style="width: 67.1037%;">\#004488</td></tr><tr><td style="width: 5.36353%;">2</td><td style="width: 27.5328%;">Kopfzeile Textfarbe</td><td style="width: 67.1037%;"> </td></tr><tr><td style="width: 5.36353%;">3</td><td style="width: 27.5328%;">Kopfzeile Buttons</td><td style="width: 67.1037%;"> </td></tr></tbody></table>

  
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)

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-4" style="border-collapse: collapse; width: 100%; border-width: 1px;"><thead><tr><th style="width: 5.60148%;">Nr</th><th style="width: 27.5332%;">Beschreibung</th><th style="width: 66.8653%;">Beispiel</th></tr></thead><tbody><tr><td style="width: 5.60148%;">1</td><td style="width: 27.5332%;">Hintergrund Content</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">2</td><td style="width: 27.5332%;">Textfarbe Content</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">3</td><td style="width: 27.5332%;">Titelfarbe Content</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">4</td><td style="width: 27.5332%;">Linkfarbe Content</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">5</td><td style="width: 27.5332%;">Linkfarbe Liste</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">6</td><td style="width: 27.5332%;">Farbe Trennlinie</td><td style="width: 66.8653%;"> </td></tr><tr><td style="width: 5.60148%;">7</td><td style="width: 27.5332%;">Farbe Buttons</td><td style="width: 66.8653%;"> </td></tr></tbody></table>

### 4.3 Navigation moPage (optional)

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-5" style="border-collapse: collapse; border-style: solid; width: 100%; border-width: 1px;"><thead><tr><th style="width: 5.60134%;">Nr</th><th style="width: 27.4142%;">Beschreibung</th><th style="width: 66.9845%;">Beispiel</th></tr></thead><tbody><tr><td style="width: 5.60134%;">1</td><td style="width: 27.4142%;">Hintergrundfarbe</td><td style="width: 66.9845%;"> </td></tr><tr><td style="width: 5.60134%;">2</td><td style="width: 27.4142%;">Linkfarbe</td><td style="width: 66.9845%;"> </td></tr><tr><td style="width: 5.60134%;">3</td><td style="width: 27.4142%;">Farbe Trennlinie</td><td style="width: 66.9845%;"> </td></tr></tbody></table>

### 4.4 Navigation iOS/android-App (optional)

<table border="1" class="table" id="bkmrk-nr-beschreibung-beis-6" style="border-collapse: collapse; border-style: solid; width: 100%; border-width: 1px;"><thead><tr><th style="width: 5.48229%;">Nr</th><th style="width: 27.5332%;">Beschreibung</th><th style="width: 66.9845%;">Beispiel</th></tr></thead><tbody><tr><td style="width: 5.48229%;">1</td><td style="width: 27.5332%;">Farbe Navigation: Icons</td><td style="width: 66.9845%;">\#167816</td></tr><tr><td style="width: 5.48229%;">2</td><td style="width: 27.5332%;">Farbe Buttons</td><td style="width: 66.9845%;"> </td></tr><tr><td style="width: 5.48229%;">3</td><td style="width: 27.5332%;">Schriftgrösse Navigation</td><td style="width: 66.9845%;">*optional*</td></tr></tbody></table>