Skip links

Neues Sketch Tool: Erschaffen, testen & und exportieren Sie Ihr App Icon

Anpassungen, Anpassungen, Anpassungen!

Wenn Sie ein Icon für eine App entwerfen, ist dieses Symbol das Gesicht der App, wo auch immer die App zu sehen ist, z.B.:

  • Auf Ihrer Website,
  • in den App Stores,
  • auf dem Home Screen der Geräte,
  • in den Geräte-Einstellungen
  • in Push-Nachrichten
  • und an vielen Stellen mehr

Das Icon ist fast überall!

Das bedeutet auch, dass das Icon in vielen verschiedenen Größen angezeigt und somit produziert werden muss.

iOS und Android verlangen ebenfalls nach andere Größen: iOS benötigt 12 verschiedene Größen, und eine Android App benötigt 16 verschiedene Icon-Größen.

Eines der wichtigsten Dinge, die man als App-Entwickler wissen muss, sind all die verschiedenen Größen und Namens-Konventionen. Darauf basierend werden dann alle einzelnen Grafiken in den benötigten Formaten – die Assets – erstellt. Daher ist die Erstellung all dieser Symbole ziemlich zeitaufwendig und endet nicht selten in einer  Frustration.

Warum sollte ich eine Vorlage verwenden?

Es gibt für alles Vorlagen: Vorlagen für Standard UI-Komponenten, Vorlagen für die Erstellung von Style Guides, sogar Vorlagen für die Präsentation von Designs in verschiedenen Umgebungen und Geräten. Und sogar Vorlagen zur Erstellung von App-Icons.

Bislang hat jedoch keine dieser Vorlagen die Vorteile der leistungsstarken Kombination aus Icons und Objektgrößenanpassungs-Einstellungen genutzt, die in Sketch verfügbar sind.

Wie Sie das Beste aus dem Sketch Template Tool herausholen können

Die Vorlage verwendet Symbole, um das gleiche Icon wiederzuverwenden und es automatisch auf alle erforderlichen Größen zu skalieren.

Sie entwerfen Ihr Symbol also lediglich einmalig, und alle anderen Größen werden sofort für Sie generiert. Mit korrekter Benennung und Exportbereitschaft, übersichtlich in Ordnern angeordnet.

Darüber hinaus erhalten Sie auch eine Vorschau Ihres Icons in verschiedenen Keyscreens, wie z.B. dem Startbildschirm und in den App Stores. Dies hilft Ihnen, Ihr Icon hervorzuheben, aber auch, es an die Plattform anzupassen, für die Sie es entwerfen.

Dieser Fallstricke sollten Sie sich bewusst sein.

Nun, ein Symbol, das auf dem Startbildschirm gut funktioniert, könnte in halber Größe nicht funktionieren. Denn es könnte zu komplex sein, Farben verschmelzen, Elemente zu klein werden etc.
Da die Vorlage das gleiche Symbol verwendet und in verschiedene Größen skaliert, gibt es keinen Unterschied zwischen der großen und sehr kleinen Version des Symbols.

Die Vorlage basiert auf der am häufigsten verwendeten Icon-Größe, die eine der kleinsten ist, und skaliert das Symbol daher meist hoch.

Auf diese Weise werden die meisten der komplexen Probleme bei der Erstellung des Original-Icons gelöst. Wenn Sie Änderungen an einer bestimmten Icon-Größe vornehmen möchten, können Sie dieses Icon jederzeit vom Symbol trennen und Änderungen nur in dieser Icon-Größe vornehmen.

Die Version 1.1 der Vorlage wurde gerade freigegeben und kann kostenlos heruntergeladen werden.

Zögern Sie nicht, den Link mit Ihren Kollegen zu teilen.

Søren Clausen Designer

Jetzt anrufen