Digital Know How

Für ihren Fortschritt

Ein wichtiger Punkt bei der Entwicklung von Apps ist die äußere Erscheinung. Sie entscheidet maßgeblich über Erfolg oder Misserfolg eines Projekts. Aufgrund der Vielzahl von Geräten und Plattformen ist es nicht immer leicht dabei den Überblick zu behalten. In diesem Beitrag haben wir die wichtigsten Fakten in Bezug auf Bildmaterial und Grafiken in Apps zusammengefasst.

Bilder für hochauflösende Displays optimieren

Seit der Einführung des Retina Displays durch Apple mehren sich die mobilen Geräte mit hochauflösenden Bildschirmen. Sie verfügen über eine höhere Pixeldichte. Grafiken erscheinen noch schärfer, da das menschliche Auge die einzelnen Pixel nicht mehr auflösen kann. Damit die Bilder optimal dargestellt werden, müssen sie mit doppelten Maßen abgespeichert werden. Soll beispielsweise ein Logo in 250 x 250 px angezeigt werden, muss die Ausgangsdatei 500 x 500 px groß sein.

logo-normal-retina

In der Abbildung befindet sich links das Logo in Originalgröße und rechts das Logo mit doppelten Maßen. Ein deutlicher Unterschied ist erkennbar. Während das linke Bild bereits verschwommen und pixelig wirkt, ist die rechte Grafik noch gestochen scharf.

 

Icons als Schrift einbetten

Für die Einbettung von Icons ergibt sich das gleiche Problem wie für Bilder. Natürlich könnte man die Icons ebenfalls in doppelter Größe bereitstellen, allerdings gibt es noch eine zweite Möglichkeit, welche weitere Vorteile mit sich bringt. Die Rede ist von Icon Fonts, welche als normale Schrift ins CSS eingebunden werden. Anstatt alphabetischer Zeichen enthalten sie Glyphen und Symbole, die als Icons fungieren.

Vorteile einer Icon Font

  • Skalierbarkeit der Schrift sorgt für Schärfe
  • CSS-Eigenschaften wie Größe, Farbe, aber auch Effekte (z.B. Schatten) lassen sich leicht anwenden
  • hohe Browser-Kompatibilität

Iconfont

Neben einer Vielfalt bestehender und oftmals auch kostenloser Fonts, z.B. bei Font Awesome, gibt es die Möglichkeit aus eigenen Grafiken eine Schrift zu erstellen. Mit IcoMoon lassen sich Bilder im SVG Format in sekundenschnelle zur eigenen Font umwandeln. Dabei ist zu beachten, dass die Icons in einem Raster von 16 x 16 px oder einem Vielfachen von dem gebaut und die Konturen als Fläche abgespeichert werden.

Folgendes ist beim Erstellen der Icons für eine Icon-Font zu beachten:

  • Es sollte in einer Illustrator-Datei einerZeichenfläche mit einzelnen Ebenen genutzt werden. Die Ebenen sollten korrekt benannt sein (je nach Iconaussage) und alle vorgesehenen Icons umfassen – also ein Icon pro Ebene.
  • Die Zeichenfläche hat eine Größe von 24 x 24 oder 36 x 36 px –> Standardmaß für ein Icon.
  • Wenn Icons kleiner als das Standardmaß sein sollen, dann können diese natürlich in der Zeichenfläche verkleinert werden (mittig positioniert, die Proportionen untereinander müssen unbedingt beachtet werden).
  • Die Linienstärke muss mindestens 1px betragen.
  • Aus allen Linien muss eine Fläche erstellt werden (Pfad in Konturlinie umwandeln).
  • Einzelflächen müssen zu einer Fläche verbunden werden.
  • Icons grundsätzlich schwarz einfärben, diese können nachträglich per CSS beliebig eingefärbt werden.

 

Menüicon richtig erstellen

Menüicon richtig erstellen

 

App Icons

AppIcons

Das App Icon taucht nicht nur auf dem Home Screen, sondern auch im Menü und in den Stores der jeweiligen Plattform auf. Die nachfolgende Tabelle gibt einen Überblick in welchen Größen das App Icon für die verschiedenen Betriebssysteme hinterlegt werden sollte.

AndroidiOSWindows Phone
FormatPNGPNGPNG
Größen
  • 36 px (ldpi)
  • 48 x 48 px (mdpi)
  • 72 x 72 px (hdpi)
  • 96 x 96 px (xhdpi)
  • 512 x 512 px (Android Market)
  • 57 x 57 px (iPhone / iPod)
  • 114 x 114 px (iPhone 4 Retina Display)
  • 60 x 60 px (iPhone / iPod ab iOS)
  • 120x 120 px (iPhone 5 Retina Display)
  • 72 x 72 px px (iPad)
  • 144 x 144 px (iPad 3 Retina Display)
  • 76 x 76 px (Home Screen Icon ab iOS 7 )
  • 152 x 152 px (Home Screen Icon ab iOS 7 Retina Display)
  • 62 x 62 px (Windows Phone 7.1)
  • 99 x 99 px (Windows Phone 8)
  • 173 x 173 px (großes App Icon)
  • 300 x 300 px (Windows Phone Store App Bild)

Splashscreens

Splashscreens

Der Splashscreen bzw. Startbildschirm wird beim Starten oder Laden einer App angezeigt. Aufgrund der enormen Vielfalt an Geräten und Betriebssystemen lässt sich dieser nicht mit einer einzelnen Grafik realisieren. Die folgende Übersicht zeigt welche Größen und Formate für die unterschiedlichen Betriebssysteme benötigt werden:

AndroidiOSWindows Phone
Format9-Patch PNG (empfohlen)
PNG (empfohlen)JPG (erforderlich)
GrößenLDPI:

  • Hochformat: 200 x 320 px
  • Querformat: 320 x 200 px

MDPI:

  • Hochformat: 320 x 480 px
  • Querformat: 480 x 320 px

HDPI:

  • Hochformat: 480 x 800 px
  • Querformat: 800 x 480 px

XHDPI:

  • Hochformat: 720 x 1280 px
  • Querformat: 1280 x 720 px

XXHDPI:

  • Hochformat: 960 x 1600 px
  • Querformat: 1600 x 960 px

XXXHDPI:

  • Hochformat: 1280 x 1920 px
  • Querformat: 1920 x 1280 px
iPad:

  • Non-Retina:
    • Hochformat: 768 x 1024px
    • Querformat: 1024 x 768 px
  • Retina:
    • Hochformat: 1536 x 2048px
    • Querformat: 2048 x 1536 px

iPhone / iPod:

  • Non-Retina:
    • Hochformat: 320 x 480 px
    • Querformat: 480 x 320 px
  • Retina:
    • Hochformat: 640 x 960 px
    • Querformat: 960 x 640 px
  • iPhone 5 Retina:
    • Hochformat: 640 x 1136 px
    • Querformat: 1136 x 640 px
  • iPhone 6:
    • Hochformat: 750 x 1334 px
    • Querformat: 1334 x 750 px
  • iPhone 6 Plus :
    • Hochformat: 1242 x 2208 px
    • Querformat: 2208 x 1242 px
  • Hochformat: 480 x 800px
  • Querformat: nicht unterstützt

 

Eine App genauso flexibel wie das Leben – Mit der Multi-Channel-App alle Formate perfektionieren.

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 4.8 Sterne aus 14 Meinungen.