Design Killer Mobile App-Tipps und Beispiele

Die mobile Szene ist in den letzten Jahren exponentiell gewachsen. Der iOS App Store ist zusammen mit Android Apps bei Google Play zu den zwei Hotspots für Smartphone-Enthusiasten geworden. Mit der steigenden Anzahl von Smartphone-Benutzern sehen Hunderte von Entwicklern von mobilen Apps neue Ideen auf dem Markt.

Die beliebtesten Apps werden von ihrer eigenen Website begleitet. Dies kann beim Marketing und beim Bekanntmachen Ihres Namens hilfreich sein. Es ist auch eine viel schönere Online-URL als die beiden App Stores. Ich glaube, dass jede erfolgreiche mobile Anwendung fast eine Webpräsenz erfordert.

In diesem Artikel möchte ich einige der die häufigsten Designtrends für mobile App-Websites. Es gibt keine strengen Regeln, die Sie für die Erstellung eines solchen Layouts beachten müssen. Vielmehr gibt es einige einzigartige Richtlinien und Trends, bei denen Webdesigner gute Ergebnisse erzielen, um ein Publikum zu gewinnen. Zusammen mit meinem iOS-Entwicklungshandbuch können Sie eine fantastische mobile App erstellen und auch die Website erstellen.

Sehen Sie sich diese Konzepte unten an und implementieren Sie einige davon in das Layout Ihrer eigenen Website.

Geräte-Screenshots

Ein Heftklammerstück für jede mobile App-Website muss ein Screenshot der Anwendung sein. Besucher interessieren sich nur für Ihre App und wie kann sie schneller als durch Screenshots demonstriert werden? Sie können Geräteaufnahmen in jeden Layoutstil einpassen, so dass dies keine Einschränkung darstellt.

Easy Chef ist eine spanische iOS-App, die viele Geräteaufnahmen verwendet. Im obersten Teil des Layouts befindet sich eine Diashow mit verschiedenen Ansichten. Wenn Sie nach unten scrollen, werden Sie andere Diagramme mit iPhone-Displays bemerken. Diese Bereiche enthalten detaillierte Beschriftungen und vergrößerte Bildschirmansichten. Ich habe tatsächlich über das Entwerfen informativer Produktgrafiken in einem älteren Beitrag geschrieben.

Ein weiteres interessantes Setup finden Sie auf der Tweetbot-Galerieseite. Dies ist ein sehr beliebter Twitter-Client für das iPhone, und die Entwickler haben eine Diashow mit Screenshots zusammengestellt. Wenn Sie versuchen, Platz in Ihrem Layout zu sparen, ist dies möglicherweise eine einfachere Lösung. Besucher müssen nicht nach unten scrollen und nach einer bestimmten Ansicht suchen. jQuery ist einfach zu implementieren und Sie können schnell eine verschiebbare iPhone-Bildschirmvorschau zusammenstellen. Es kann schwierig sein, zusätzliche Details anzugeben, diese können jedoch in einem anderen Abschnitt hinzugefügt werden.

App Store-Abzeichen

Diese Technik scheint auch nach dem Erstellen der Anwendung sehr einfach zu sein. Abzeichen werden schnell als Download-Links zum App-Marktplatz erkannt. Sowohl Android- als auch iOS-Benutzer haben die Möglichkeit, Apps direkt über ihren Browser anzuzeigen. Andernfalls wird dies bei der Anzeige auf einem Smartphone umgeleitet.

Ich benutze gern Instagram als Beispiel, da die Website auf ein neueres Layout aktualisiert wurde. Sie haben Abzeichen, die den Android Marketplace (Google Play) und den iOS App Store unterstützen. Beide Abzeichen sind sehr einfach gestaltet und auf einen Blick gut zu erkennen. Wenn Sie nach komplexeren Designs suchen, empfehle ich eine schnelle Dribbble-Suche. Talentierte Designer teilen häufig ihre App-Store-Badge-Konzepte für konstruktive Kritik.

Mobile soziale Netzwerke

Facebook und Twitter haben auf mobile Geräte umgestellt, was jedoch andere Netzwerke nicht davon abhalten konnte. Wir sehen, wie soziale Netzwerke mobile Apps verwenden, um eine völlig neue Kommunikationsplattform zu ermöglichen.

Localmind läuft nach einem Konzept, das dem von Foursquare ähnelt. Dort registrieren Sie ein Konto und beginnen mit dem Einchecken lokaler Orte. Sie können Fragen hinterlassen oder die Fragen anderer Personen beantworten. Ihre Website ist sehr freundlich und lädt Neulinge ein. Ich liebe besonders den oberen Bannerabschnitt, der mit einem benutzerdefinierten Kartenhintergrund entworfen wurde. Die Verwendung von Farbverläufen und Hintergrundtexturen geben der Website ein Eigenleben.

Minimale Fotofreigabe

Pose ist ein anderes Mobilfunknetz mit ähnlichen Idealen für minimalistisches Design. Sie können die mobile App für iOS- und Android-Geräte herunterladen. Das Gefühl ist ähnlich wie bei uns, aber es ist für mobile Mode-Liebhaber. Die gesamte App konzentriert sich auf Mode, Haare, Make-up und Glamour.

Benutzer können Fotos von ihrem Outfit, ihrer Kleidung oder ihrem Zubehör machen und sie im Netzwerk teilen. Bei Pose ist zu beachten, wie schnell Sie die Website durchsuchen können. Es ist leicht, den Unternehmensblog, die Kontaktdaten usw. zu finden. Auf anderen App-Websites werden diese Unternehmensfunktionen oft übersehen, was ein heikles Thema sein kann.

Wenn Sie die Aufmerksamkeit der Medien auf sich ziehen möchten, ist es wichtig, dass Ihre Website wie ein echtes Social Networking-Produkt wirkt. Sie versuchen nicht nur, Ihre App (über Anzeigen oder ein kostenpflichtiges Abonnement) zu verkaufen, sondern verkaufen auch das Netzwerk selbst. Social Apps können auf jeden Fall kniffliger sein als das Erstellen von normalen App-Websites. Sie haben aber auch mehr Downloads von Benutzern und es ist ein aufregendes neues Feld für mobile Geräte.

Von bescheidenen Anfängen

Webdesigner sind nicht immer in der Lage, unverschämte Grafiken und Symbole zusammenzusetzen. Glücklicherweise sind App-Websites nicht entscheidend, wie viel Sie mit Adobe Photoshop erreichen können. Ich glaube tatsächlich, dass Minimalismus für diesen Layoutstil viel besser funktionieren kann.

Leef App ist ein neu veröffentlichter Forrst-Client für iPhone. Ihre Website enthält einen schönen App-Screenshot sowie einen großen Download-Button. Der gesamte Seitentext wird auf ähnliche Weise wie die Schriftarten und Farbschemas von Apple vereinfacht.

Was die Website von Leef so gut macht, ist die Offenheit jedes Seitenelements. Es ist eklatant und offen, nichts versteckt oder zur Seite geschoben. Ich empfehle, diesen Stil als erste mobile App-Website auszuprobieren, wenn es nur zum Üben ist. Sie können viel lernen, indem Sie die geringeren Leckerbissen minimieren und sich auf das konzentrieren, was die Aufmerksamkeit auf sich zieht.

Schöne Whitespace

Genauso einfach ist die Wood Camera App-Website. Ihr Layout enthält nichts weiter als einen einfachen weißen Hintergrund und zentrierten Inhalt. Dieser Inhalt enthält einige Standard-Screenshots, ein App Store-Badge und einige weitere wichtige Funktionen.

Wenn Sie das Gefühl haben, dass Minimalismus und Leerraum für Ihr Layout wichtig sind, dann bleiben Sie dabei! Wood Camera ist kein besonders umwerfendes Website-Layout, aber es ist sehr einfach zu navigieren. Neben der offiziellen Seite des Entwicklers enthält die Website auch keinen alternativen Inhalt. Dadurch bleibt der Fokus auf die App und das, was sie bieten kann, viel wichtiger als auffällige Grafiken. Das heißt aber nicht, dass auffälliges Artwork eine schlechte Idee ist - es bedarf nur einer korrekten Implementierung.

Bunte Abbildungen

Im Gegenteil zu dem minimalistischen Ansatz ist eine Arbeit mit einzigartigen Illustrationen, die ich total bewundere. Oft wird dieses App-Detail durch dieses zusätzliche Detail komplett verkauft. Ein Beispiel, auf das ich mich beziehen kann, ist die Barista-App für iPhone. Der Kopf der Site ist mit kleinen Vektor-Cappuccinos und Espressogetränken durchsetzt.

Beachten Sie jedoch, dass es keine anderen Bilder gibt, wenn Sie die Seite nach unten scrollen. Dieser gesamte obere Abschnitt wurde speziell für die iPhone-App entwickelt, ähnlich einer Zielseite. Die Vektoren fallen sofort ins Auge und weisen auch darauf hin, worum es in der App geht.

Kitchenator ist eine ähnliche iOS-App, die Maßeinheiten zum Kochen und Backen umwandelt. Ihr Header-Layout verwendet reichhaltige Holzstrukturen, eine karierte Tischdecke und kleine Löffel Wasser. Diese Bilder weisen auf den Zweck dieser App hin, bevor Sie den Inhalt überhaupt überfliegen.

Dieser Designstil durchdringt tatsächlich das gesamte Layout. Der Fußzeilenbereich stimmt mit einem ähnlichen hölzernen Hintergrund und den meisten Schriftarten überein. Dies ist ein Beispiel für ein sehr einfaches Website-Layout mit einigen sehr leistungsstarken Grafiken.

App-Websites: Premium Showcase

Welcher Artikel wäre komplett ohne Augensüßigkeit? Neben den oben genannten Techniken habe ich auch diese wunderschöne Galerie von Websites für mobile Apps zusammengestellt. Beachten Sie das Logo und die Navigationsschemata sowie die Domain-URLs. Indem Sie studieren, was die Profis tun, können Sie Designtrends verstehen und in Ihren eigenen Projekten verwenden.

Bosquet App