Branding Ihrer App

Applies to Windows and Windows Phone

Im Folgenden werden einige der zahlreichen gestalterischen Möglichkeiten vorgestellt, die App-Designer und -Entwickler für das Branding von Windows Store-Apps nutzen können.

Warum sollten Sie Ihre App markenbezogen gestalten?

Eine Marke definiert die Eigenschaften und Vorzüge, mit denen ein Unternehmen in Verbindung gebracht werden möchte. Beim Entwerfen von Windows Store-Apps müssen Sie wichtige Entscheidungen treffen, um sicherzustellen, dass Ihre Apps das Wesen Ihrer Marke verkörpern. So, wie eine Marke ein Unternehmen definiert, dient die Darstellung Ihrer Marke in Ihrer Windows Store-App dazu, diese App von allen anderen unterscheidbar zu machen. Im Folgenden werden einige Beispiele hierfür vorgestellt.

Beispiel für eine Windows Store-App vor dem Branding:

Beispiel für eine Windows Store-App für die Contoso Bakery vor dem Branding.
Das Beispiel der Contoso Bakery veranschaulicht, wie eine App für eine Bäckerei aussehen könnte, wenn die Prinzipien für die Entwicklung von Windows Store-Apps eingehalten werden. Diese App ist zwar ein gutes Beispiel dafür, wie Inhalt in den Vordergrund gestellt wird, doch die Marke der Bäckerei wird nicht besonders effektiv dargestellt.

 

Hier sehen Sie die gleiche Beispiel-App nach dem Branding:

Beispiel für eine Windows Store-App für die Contoso Bakery nach dem Branding.
An dieser Version der App wurden einige offensichtliche Änderungen vorgenommen, durch die die App ansprechender wirkt. Indem die Marke der Bäckerei stärker betont wird, wird der Inhalt der App überzeugender präsentiert, und der Gesamteindruck der App passt zu den spezifischen Merkmalen einer Bäckerei.

 

So wird's gemacht: Einbinden Ihrer Marke

Sie bringen Ihre Marke durch eine Reihe visueller Elemente zum Ausdruck. So tragen beispielsweise eine markante Farbpalette, Grafiken, Layout und Stil der Bilder dazu bei, in einer Vielzahl unterschiedlichster Medien wie Rundfunk, Druckerzeugnissen, Web und Windows Store-Apps eine reproduzierbare und wiedererkennbare Marke zu schaffen.

Stellen Sie sich diese visuellen Elemente wie Stellschrauben vor, die Sie mittels Code beeinflussen, um ein unverwechselbares Erscheinungsbild für Ihre Windows Store-App zu erschaffen.

Visuelles ElementBeschreibung
Farben

Farbe ist ein wichtiges Merkmal beim Darstellen Ihrer Marke. Setzen Sie die Hauptfarben, die mit Ihrer Marke verknüpft sind, so ein, dass sie Kunden mitteilen, dass diese App von Ihrem Unternehmen stammt.

Grafiken

Mithilfe von Grafiken können Sie Ihre Marke unterstützen, indem Sie der Darstellung von Inhalten das gewisse Etwas geben. Zu viele Grafiken können jedoch den Inhaltsfluss beeinträchtigen und rein dekorativ wirken oder ablenken.

Bilder

Illustrationen und Fotos sollten ebenfalls Ihre Marke widerspiegeln. Verwenden Sie dieselben Bilder und denselben Stil wie für andere Veröffentlichungen oder Websites Ihres Unternehmens.

Raster

Mit dem Rastersystem für Windows Store-Apps kann dafür gesorgt werden, dass die Darstellung Ihrer App eine visuelle Einheit bildet. Durch das Raster wird die UI Ihrer markenbezogen gestalteten App so ausgerichtet, dass sie mit den übrigen Bereichen von Windows konsistent ist.

Layout

Die Anordnung visueller Elemente für alle Seiten muss zu Ihrer Marke passen. Sie sollten außerdem versuchen, seiten- und inhaltsübergreifend Konsistenz zu wahren.

Logo

Verwenden Sie Ihr Logo, damit Benutzer Ihre App und damit Ihre Marke schnell erkennen können.

Typografie

Schriftarten sind ein zentrales Element von Windows Store-Apps. Die Wahl der richtigen Schrift kann für Ihre Marke ähnlich bedeutsam sein wie Farbe, Logo oder Layout. Überlegen Sie also genau, welche Typografie Sie verwenden möchten.

 

Beispiel für Branchen-App

Das Branding Ihrer Branchen-Apps ist sowohl aus Einzelhandels- als auch Unternehmensperspektive von großer Bedeutung. Dieses Beispiel veranschaulicht, wie eine Einzelhandels- und Unternehmens-App eines Expressdienstunternehmens markenbezogen gestaltet werden kann.

Brandingelemente des Unternehmens

Fabrikam Worldwide Logistics bietet internationale Expressdienstleistungen auf drei Ebenen. Die Kundenzielgruppe sind Eigentümer kleiner Unternehmen, die Warensendungen problemlos verwalten möchten. Die Kernbotschaften an die Kunden betreffen zuverlässigen globalen Versand und reibungslose Transaktionen.

BrandingelementBeschreibung

Hauptmarke des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics

Die Hauptmarke vermittelt das Engagement bei der Bereitstellung zuverlässiger globaler Services mithilfe der grafischen Elemente wie z. B. der Karte und der Kette.

Logos für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics

Neben der Hauptmarke vermittelt das jeweilige Logo für jeden Service die drei Serviceebenen.

Markenelemente des Beispiels einer Windows Store-App für Fabrikam Worldwide Logistics

Die Markenelemente – z. B. gepunktete Linie und die Karte – in den Paketen werden im App-Designs wiederverwendet, um ein zusammenhängendes Brandingerlebnis zu gestalten.

 

Erstellen einer Sendung

Ein Kunde eines Kleinunternehmen meldet sich bei seinem Konto an, um eine Sendung zu erneuern.

Anmeldeseite einschließlich Branding der Überschrift des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics
Die Farbe, die Grafik und das Logo sind in der Kopfzeile und auf den Seiten als Markenelemente vorhanden.

 

Auf der Kontoseite vermitteln die Farbe, Grafiken (die Kette und die gepunktete Linie) sowie die Schriftart einen Eindruck der Marke. Die Identität des Kunden ist mittels Co-Branding in der Kopfzeile angegeben.

Coho Craftsman-Seite mit Co-Branding für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics
Das Co-Brand des Kunden ist von den Schriftarten der Hauptmarke inspiriert und verwendet die Serif-Schriftart "Constantia" für den Titel und die Sans Serif-Schriftart "Corbel" in der gesamten App.

 

Auf der Transaktionsseite wird ein flaches Navigationsmuster verwendet. Benutzer können in den einzelnen Abschnitten schwenken, um die Informationen zu überfliegen und zu ändern.

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit horizontaler Verschiebung über die Seite hinweg

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit horizontaler Verschiebung links auf der Seite

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit horizontaler Verschiebung in der Mitte der Seite

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit horizontaler Verschiebung rechts auf der Seite

In der semantisch gezoomten Ansicht können Benutzer schnell navigieren und den Verlauf aller Transaktionen mit einer Zusammenfassung anzeigen.

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit mittels semantischem Zoom verkleinerter Ansicht

Flaches Navigationsmuster für das Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics, mit mittels semantischem Zoom verkleinerter, verschobener Ansicht
Die Markenelemente wie z. B. Farbe, Grafiken, Servicelogos und Schriftarten werden konsistent verwendet, um das Wesen des Unternehmens zu vermitteln.

 

Mit der Navigationsleiste können Benutzer zu anderen Kategorien navigieren.

Navigationsleiste des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics

Lieferung einer Sendung

Ein Fahrer nutzt die App bei der Lieferung von Sendungen an Kunden. Bei Verwendung des zweispaltigen Designs, um den Bestand auf der einen und den Inhalt auf der anderen Seite anzuzeigen, kann ein Fahrer problemlos in den Detailinformationen einer Sendung navigieren. Die Markenelemente wie z. B. die Kette und die allgemeinen Steuerelemente werden in der gesamten App konsistent verwendet.

Seite mit zwei Spalten des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics, in denen Bestandsliste und Zuordnung zu sehen sind

Wenn der Fahrer ankommt, werden die Details in der rechten Spalte in einer vertikalen Bildlaufliste angezeigt. Der Bildlauf für die Bestandsliste und den detaillierten Inhalt erfolgen in dieselbe Richtung.

Seite mit zwei Spalten des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics, in denen Bestandsliste und Details zu sehen sind
Für die Infografik, anhand deren der Fahrer die Sendung im Lieferfahrzeug orten kann, wird dieselbe Markenfarbe wie in anderen Teilen der App verwendet.

 

Wenn der Fahrer den Kunden um seine Unterschrift bittet, werden in der App die Unterschriftseite im Querformat und die mit Branding versehene Navigationsleiste angezeigt. Im Querformat lässt sich das Gerät vom Fahrer leichter an den Kunden übergeben.

Signaturseite des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics im Hochformat
Die Bitte um eine Unterschrift ist ein wichtiger Aspekt des Brandings. Der Benutzer interagiert mit der Unternehmens-App und der Marke.

 

Sobald der Fahrer die Unterschrift erhalten hat, werden in der App die übrigen Elemente und Grafiken des Fortschritts angezeigt.

Seite mit Bestandsliste des Beispiels für eine Windows Store-App für Fabrikam Worldwide Logistics, im Hochformat

Co-Branding Ihrer App

Eine Beziehung zwischen zwei oder mehreren Marken wird als "Co-Branding" bezeichnet. Berücksichtigen Sie die folgenden Fragen, wenn Sie ein App entwerfen, die für mehrere Marken geeignet ist:

  • Von welcher Marke wird die Kommunikation geführt?
  • Welche Rolle spielt die Co-Marke in der Kommunikation?

Werden die Frage bei einer Windows Store-App nicht berücksichtigt, besteht die Gefahr, dass Kunden verwirrt und die Marke geschwächt werden.

Co-Branding beim Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics

Im Fabrikam-Beispiel wird das Co-Branding gehandhabt, indem die Marke durch eine konsistente Implementierung visueller Elemente zur Geltung gebracht wird. Beispielsweise werden die Farbe und Grafiken, das Layout und die Schriftart der Marke Fabrikam in der gesamten App verwendet, wobei ein begrenzter Satz an Stilvariationen berücksichtigt wird. Auf jeder Seite der App ist klar ersichtlich, dass die App von Fabrikam bereitgestellt wird.

Um zu vermitteln, dass "Coho Craftsman" die Sekundärmarke zur Hauptmarke ist, wird beim Logo, der Schritftart und dem Bild von Coho Craftsman auf das Fabrikam-Layout zugegriffen. Sie können sich beispielsweise vorstellen, wie ein weiterer kleiner Geschäftspartner von Fabrikam die derzeit von Coho Craftsman eingenommene Stelle besetzt.

Co-Branding beim Beispiel einer Windows Store-App für Fabrikam Worldwide Logistics

In diesem Beispiel treten auch weitere Marken auf. Die Kreditkartenunternehmen links auf der Seite erscheinen als untergeordnete Marken, teils wegen der geringen Größe, der inhaltsspezifischen Platzierung und der eingeschränkten Farbverwendung. Rechts auf der Seite werden die Marken der Bekleidungshersteller durch ein einfarbiges, verkleinertes Logo dargestellt und entsprechen den Designstilen der Hauptmarke. In allen Fällen wurden die visuellen Elemente so geändert, dass die Co-Marken eindeutig dargestellt, jedoch nicht als Hauptmarke hervorgehoben werden.

Beispiele für eine unverwechselbare Markenpräsentation

Im Folgenden sehen Sie einige Beispiele, die zeigen, wie sich mit den verschiedenen visuellen Elementen unterschiedliche Wirkungen und Eindrücke erzeugen lassen. In den Beschreibungen zu jedem visuellen Element finden Sie konkrete Details dazu, wie das Layout erstellt wurde und warum es wichtig ist.

Contoso Downtown Café

Eine Beispiel-Windows Store-App für das Contoso Downtown Café, die zeigt, wie die Marke durch Farben, Raster, Layout und Typografie zum Ausdruck gebracht wird.
Das Contoso Downtown Café ist eine Marke, die für Originalität steht. Es rühmt sich seiner hausgemachten Speisen und Getränkespezialitäten. In diesem Beispiel werden vor allem die visuellen Elemente Farbe, Raster, Layout und Typografie eingesetzt, um das Wesen der Marke zu transportieren.

 

Beispielfarbpalette für das Branding einer Windows Store-App.Farben   Das warme Dunkelgrau, das gebrochene Weiß und der Kupferton erwecken den Eindruck von Üppigkeit und Fülle. Die warmen Farben erinnern an einige der Farben, die man mit hausgemachten Broten, Suppen oder Pasteten in Verbindung bringt.
Beispielraster für das Branding einer Windows Store-App.Raster   In diesem Beispiel wird das Raster durch den Inhalt absichtlich aufgebrochen. Der Inhalt der Speisekarte ist für die Marke von zentraler Bedeutung. Der obere Rand wurde daher verkleinert, um mehr Platz für die Speisekarte zu schaffen. Der linke Rand wurde angepasst, sodass Firmenname, einleitender Text und Standortinformationen optisch mehr in die Mitte rücken und der Inhalt nicht gedrängt wirkt. Diese Änderungen wurden konsequent angewendet und ziehen sich durch alle anderen Seiten dieser App.
Beispiellayout für das Branding einer Windows Store-App.Layout   Das Design soll an eine Speisekarte erinnern, da die Speisekarte die Benutzer zum erneuten Besuch des Cafés veranlassen soll. Wie das Speisen- und Getränkeangebot soll das Layout so wirken, als wäre es von Hand gemacht. Der gebrochen weiße Hintergrund erinnert an Papier, der Farbton ist einladend, und der Inhalt ist strukturiert mit senkrechten Trennlinien und einer deutlichen Linksausrichtung des Textes.
Beispieltypografie für das Branding einer Windows Store-App.Typografie   Copperplate Gothic Bold ist die Hauptschriftart in diesem Design. Sie verleiht dem Firmennamen ein besonderes Aussehen, das einem handgeschnitzten Holzschild ähnelt. Script MT Bold und Segoe UI sind die ergänzenden Schriftarten. Die Script-Schriftart wird sparsam nur in der Überschrift der Speisekarte eingesetzt und erinnert an handgeschriebenen Text. Segoe UI wird für den Textkörper verwendet, um die Lesbarkeit des Speisen- und Getränkeangebots zu verbessern.

 

Contoso French Bakery

Eine Beispiel-Windows Store-App für die Contoso French Bakery, die zeigt, wie die Marke durch Farben, Raster, Layout und Typografie zum Ausdruck gebracht wird.
Die Contoso French Bakery ist eine Marke, die für Genuss steht. Für viele ihrer Kunden ist es DIE Adresse, um sich etwas Gutes zu tun und der Lust auf Süßes zu frönen. In diesem Beispiel werden die visuellen Elemente Farbe, Bilder und Layout eingesetzt, um das Wesen der Marke zu transportieren.

 

Beispielfarbpalette für das Branding einer Windows Store-App.Farben   Eine Farbpalette mit nur zwei Farben, Braun und Rosa, reicht aus, damit Kunden gedanklich die Verbindung zu einer Bäckerei herstellen. Braun ist die Hauptfarbe, die das Bild von Schokolade heraufbeschwört. Als Akzentfarbe kommt Rosa zum Einsatz, das an Glasuren auf Plätzchen und Torten erinnert. Unabhängig von diesen Geschmacksassoziationen erfüllen die beiden Farben auch einen bestimmen Zweck im Rahmen der Darstellung der Marke. Das Braun ist neutral genug, um einen satten Hintergrund zu liefern, vor dem die Farbfotos gut zur Geltung kommen, und das Rosa ist hell genug, um bestimmte Teile des Inhalts hervorheben zu können.
Beispielbild für das Branding einer Windows Store-App.Bilder   Die Fotos stehen im Mittelpunkt dieses Designs. Es ist offensichtlich, dass Zeit und Können aufwendet wurden, damit jedes Foto so aussieht, als könne man direkt in den Kuchen 'reinbeißen. Durch die Bilder von Gebäck wird deutlich, um was es bei dieser Marke geht. Die Bilder dienen außerdem dazu, die Inhaltskategorien zu definieren.
Beispiellayout für das Branding einer Windows Store-App.Layout   Das Erscheinungsbild dieses Beispiels unterscheidet sich vom Standarddesign von Windows Store-Apps. Der auffälligste Unterschied ist das Fehlen quadratischer Kacheln. Die Kacheln und das Raster sind weiterhin vorhanden, aber die Bilder wurden so gestaltet, dass sie an Dinge erinnern, die in einer Bäckerei üblicherweise zu finden sind, beispielsweise der kreisrunde und gezackte Umriss einer Cupcake-Form.

 

Contoso Sandwich Truck

Eine Beispiel-Windows Store-App für den Contoso Sandwich Truck, die zeigt, wie die Marke durch Grafiken, Raster und Logo zum Ausdruck gebracht wird.
Der Contoso Sandwich Truck ist eine Marke, die für urbanes Leben und kundenorientierte Standortwahl steht. Die Marke stützt sich auf eine Mannschaft aus exzellenten Köchen und eine Flotte von Lieferwagen. Das Angebot richtet sich an Menschen, die unterwegs einen schnellen Imbiss zu sich nehmen möchten. In diesem Beispiel werden die visuellen Elemente Grafik, Raster und Logo eingesetzt, um das Wesen der Marke zu transportieren.

 

Beispielgrafiken für das Branding einer Windows Store-App.Grafiken   Die Speisekarte bildet den Schwerpunkt und wird nicht durch den übertriebenen Einsatz von Grafiken überdeckt. Für die Unterstützung dieser Marke spielen Grafiken jedoch trotzdem eine wichtige Rolle. Die Sterne deuten beispielsweise ein Kundenbewertungssystem an, die Farbe und die Formen erinnern an Straßenschilder, und die Standortangaben sind vor einem dunklen Rechteck platziert, das die Darstellung einer Asphaltstraße enthält.
Beispielraster für das Branding einer Windows Store-App.Raster   Alle Elemente dieses Designs sind am Standardraster verankert, das die Struktur einer Draufsicht auf einen Stadtplan einer typischen nordamerikanischen Stadt nachahmt. Um diese geordnete Darstellung aufzubrechen, kommen überlappende Inhalte und Inhalte, die in die Ränder laufen, zum Einsatz, wodurch dieses Beispiel seinen besonderen Charakter erhält. Die Gesamtdarstellung des Inhalts ist klar und direkt, um Menschen anzusprechen, die unterwegs sind und eine schnelle Entscheidung treffen müssen.
Beispiellogo für das Branding einer Windows Store-App.Logo   In diesem Beispiel wird kein Firmenlogo verwendet. Der Firmenname wird als Text dort eingebunden, wo sich das Logo befinden würde. In diesem Beispiel ist der Firmenname erstmalig in den Gesamtaufbau integriert. Das Logo bzw. der Name ist nicht einfach oben links ausgerichtet.
Beispielfarbpalette für das Branding einer Windows Store-App.Farben   Schwarz und Gelb werden als Akzentfarben verwendet. Schwarz und Gelb sind Farben, die im städtischen Umfeld Verwendung finden, beispielsweise bei Schildern oder – in den USA – bei Fahrbahnmarkierungen.

 

Beispiele für die Verbreitung der Marke über alle Seiten einer App hinweg

Ihre Marke in die sekundären Seiten Ihrer App einzubinden, auf denen sich besonders viel Inhalt befindet, ist ebenso wichtig wie das Branding der Startseite. In diesem Beispiel wird die App einer fiktionalen Sportmannschaft herangezogen, um zu zeigen, wie Sie Ihre Marke auf mehreren Seiten einer App einbinden können:

Fabrikam FC, eine Profifußballmannschaft

Die Fans des Fabrikam FC, einer Profifußballmannschaft, möchten einen Blick hinter die Kulissen ihrer Lieblingsmannschaft werfen, alles über ihre Lieblingsspieler erfahren und überall auf die neuesten Informationen zugreifen können. Das Design der Startseite spiegelt das draufgängerische, dynamische Wesen der Marke wieder.

Startseite des Beispiels einer Windows Store-App für die Mannschaft des Fabrikam FC

Farbe, Typografie und Grafiken betonen das draufgängerische, dynamische Wesen der Marke.

 

Diese App verwendet ein flaches Navigationsmuster. Der Benutzer streicht über die Navigationsleiste, um zu anderen Ansichten der App zu navigieren.

Navigationsleiste des Beispiels einer Windows Store-App für die Mannschaft des Fabrikam FC

Die Farbe und das Logo sind als Branding-Elemente in der Navigationsleiste vorhanden. Die leuchtenden Mannschaftsfarben vor dem dunklen Hintergrund erzeugen einen scharfen Kontrast und dadurch eine draufgängerische Persönlichkeit und die Farbe Gelb wird in der ganze App verwendet und deutet auf Interaktivität hin.

 

Der Benutzer kann die Navigationsleiste verwenden, um sich die Spieler der Mannschaft anzeigen zu lassen.

Spielerseite des Beispiels einer Windows Store-App für die Mannschaft des Fabrikam FC

Die Schriftarten sind in allen unterschiedlichen Ansichten der App einheitlich. Die serifenlose Schrift unterstreicht die energische und draufgängerische Persönlichkeit der Mannschaft. Der Schriftschnitt, der ausschließlich Großbuchstaben verwendet, lässt bestimmte Beschriftungen eher wie grafische Elemente erscheinen.

 

Wenn Sie schnell zu einem bestimmten Spieler navigieren möchten, verkleinern Sie die semantisch gezoomte Ansicht auf dieser Seite.

Semantischer Zoom im Beispiel einer Windows Store-App für die Mannschaft des Fabrikam FC

Die Aufnahmen von Spielern in Aktion unterbrechen das Raster, um ein dynamisches Layout voller Energie zu erzeugen. Sie werden auf der Mannschaftsseite und der Startseite verwendet.

 

Beispiel einer Windows Store-App für die Mannschaft des Fabrikam FC mit Symbolen und Grafiken, die die Marke stärken.

Einfache Symbole und Grafiken machen die Inhalte unterhaltsamer und zugänglicher und ermutigen zur Interaktion und zum Erforschen der gesamten App.

 

Verwandte Themen

Die erste Begegnung mit Windows Store-Apps
Richtlinien für die UX
Befehlsmuster
Navigationsmuster
Gestalten einer App-Seite
Richtlinien für Fenstergrößen und die Skalierung auf unterschiedliche Bildschirme
Richtlinien für Schriftarten
So wird's gemacht: Branding Ihrer ListView
Galerie

 

 

Anzeigen:
© 2014 Microsoft