Design-Studie für Mac OS X App-Websites (Layouts)

Apple hat seinen Mitarbeitern seit ihrer Gründung Ende der 70er Jahre immer höchste Arbeit gefordert. Viele Designer sind erst kürzlich in die OS X-Umgebung eingestiegen und die meisten verlieben sich auf den ersten Blick. Mac OS X Lion bietet so viele Funktionen, die Sie sonst nirgends finden können - vor allem der App Store.

Von hier aus haben Sie Zugang zu einer Reihe von kostenlosen und kostenpflichtigen Anwendungen. Diese sind alle für OS X Lion entwickelt und können direkt in Launchpad heruntergeladen werden. In dieser Fallstudie werde ich die Designtrends für Mac-App-Websites untersuchen. Diese sind speziell auf OS X ausgerichtet und umfassen keine iOS-Apps. Die Stile sind sehr unterschiedlich. Neben diesen Tipps habe ich auch eine kleine Schaufenster-Galerie meiner Lieblings-Mac-App-Sites zusammengestellt, um ein wenig Inspiration zu teilen.

Vergrößern Sie Ihre wichtigsten Punkte

Wenn Menschen auf einer App-Website landen, hoffen sie, den Zweck der Anwendung sehr schnell herauszufinden. Dies erreichen Sie am einfachsten, indem Sie die Aufmerksamkeit der Besucher sofort auf sich ziehen und sie durch das gesamte Layout leiten. Und aus vergangenen Erfahrungen scheint es so, als würden riesige Texte / Grafiken oft ausreichen.

Alfred App ist ein solches Beispiel, das den gesamten Bildschirm in ein gleitendes Layout einfügt. Sowohl das App-Logo als auch der Download-Button springen zusammen mit dem monströsen App-Symbol auf einen Blick von der Seite! Benutzer, die mit der Alfred-App vertraut sind, erkennen den einzigartigen Hut und die Lupe. Und es ist nicht nur der obere Seitenbereich.

Wenn Sie nach unten scrollen, sollten Sie feststellen, dass jeder Seitenabschnitt ebenfalls in Teile aufgeteilt ist. Der Demo-Screenshot-Bereich enthält eine kleine Spalte für Miniaturansichten mit einer schönen Anzeige der App. Nur durch das Ausprobieren der wenigen Demo-Aufnahmen wird allgemein verstanden, was die App alles kann. Wenn Sie weitere Anwendungs-Websites finden, halten Sie Ihre Augen für das "große Bild" offen. Zeug, das auffallen soll. Denken Sie auch darüber nach, was von Ihrer eigenen App-Website gesprungen werden sollte.

Sauberkeitsmerkmale

Die bekannteren Site-Designs weisen häufig die gleichen Elemente auf. Dies könnte ein abgeschlossenes und detaillierteres Ikonendesign, ausgefallener Logotext und andere lustige Grafiken sein. Sie sollten jedoch Apples Beispiel folgen und das Verbrauchsmaterial ausschneiden. Saubere und vereinfachte Benutzeroberflächen sorgen dafür, dass sich Ihre Besucher durch weitere Downloads und Einkäufe konzentrieren.

Ich bin ein großer Fan von Instagram, der meine Zeit bei iOS sehr beansprucht hat. Und die Mac-App Karussell ist ein schöner Schwesterservice auf dem Desktop. Wenn Sie feststellen, dass das Layout der Site ein kleinerer Logo-Bereich ist, der mehr Platz für Screenshots bietet. Darüber hinaus erscheint die Typografie verfeinert, um dem klassischen, gehobenen Thema zu entsprechen.

Sie sollten auch beachten, dass es hier keine Hauptnavigation gibt. Erwägen Sie, dies für Ihre eigene App-Website zu duplizieren. Dadurch wird eine Menge Benutzerfrustration entfernt. Diese Idee gilt doppelt für mobile Benutzer, die Ihre Website zum ersten Mal auf dem iPhone oder Android finden. Wenn Sie die Nachricht Ihrer App auf einer einzigen Seite darstellen können, sage ich Tue es!

Fügen Sie Standard-App Store-Symbole hinzu

Die Aufmerksamkeit Ihrer Besucher zu gewinnen, ist eine wichtige Voraussetzung, aber Sie möchten auch ihr Vertrauen gewinnen. Und Leute, die das Mac OS verwenden, vertrauen im Allgemeinen den Apple-Entwicklern. Sie sollten Abzeichen und / oder Schaltflächen in Ihre Site aufnehmen, um den Nutzern mitzuteilen, dass Sie im App Store veröffentlicht wurden. Es mag klein erscheinen, kann aber für neue potenzielle Kunden von großer Bedeutung sein.

Die Marketing-Richtlinien für den Mac App Store (PDF) enthalten einige Details zum App Store-Badge, den Sie in den meisten der beliebten Mac-Apps sehen. Ich mag auch Dribbbles Aufnahmen, um zu sehen, ob jemand coole Design-Sets oder Icons in Bezug auf das Thema hat.

Stellen Sie, wo möglich, eine Demo bereit

Erinnern Sie sich daran, Ihre Nachricht schnell zu übermitteln? Dies kann am einfachsten durch Bilder oder Videos erreicht werden - keine große Überraschung. Aber auch nur Miniaturansichten oder Diashows reichen nicht aus.

Sie sollten versuchen, eine Demo Ihres Services in eine Art Workflow-Infografik aufzunehmen. Es gibt unzählige kostenlose PSDs zum Herunterladen, die in MacBooks, iPhone, iPad und alles andere passen. Hier ist ein schönes Beispiel für eine kostenlose iMac PSD-Vorlage zum Herunterladen. Jetzt können Sie Screenshots Ihrer Anwendung erstellen und kleine Demonstrationsbilder erstellen.

Das funktioniert im obigen Beispiel wirklich gut Benachrichtige mich. Die App ist für alle 3 Plattformen auf iOS / iPad und OSX geöffnet und entwickelt. Auf den ersten Blick können Sie davon ausgehen, dass es sich bei der App um ein Benachrichtigungssystem handelt. Durch eine kleine Demo-Grafik und einige weitere Erläuterungen können Sie die erweiterten Funktionen zusammenstellen, um Ihre Meinung zur App zusammenzustellen.

Dynamische Animationen & jQuery

Apple ist auch für schöne Übergangsanimationen bekannt. Ihre Liebe zum Detail in Design und Funktion ist unglaublich - sie umfasst die gesamte Bandbreite ihres gesamten Software-Portfolios. Und als Webdesigner, der unter Apple veröffentlicht, stellen Sie möglicherweise fest, dass Ihre App-Site eine magische Wirkung haben könnte.

Reeder für Mac ist wunderschön und die Demoseite passt genauso gut. Beachten Sie, dass die Seiten-URLs extrem einfach sind und leicht an Freunde oder über soziale Netzwerke weitergegeben werden können. Zusätzlich wird die Navigation in einer Seitenspalte gehalten, während der Seiteninhalt auf das absolute Minimum reduziert wird.

Obwohl Reeder schnelle Seitengeschwindigkeiten aufweist, ist dies nur ein Beispiel für viele App-Websites. Wenn Sie diese dynamischen Animationen mögen, sollten Sie in die jQuery-Bibliothek und auch in die jQuery-Benutzeroberfläche schauen. Dies sind zwei sehr beliebte JavaScript-Bibliotheken mit vorgefertigten Funktionen für Seiteneffekte? und du kannst viel bauen! Für eine Idee können Sie sich an diesem kleinen Apple-Tutorial mit jQuery erfreuen, um einen Einblendeffekt für Begrüßungsbildschirme zu erstellen.

Inspirationsgalerie

Wie bereits erwähnt, wäre keine Fallstudie ohne eine kleine Designvitrine vollständig.Im Folgenden sind nur einige Beispiele meiner persönlichen Website-Layouts für OS X-Apps aufgeführt. Überprüfen Sie sie und lassen Sie uns wissen, was Sie denken! Und wenn wir irgendwelche fantastischen App-Layouts vermisst haben, lassen Sie es uns in den Kommentaren wissen.