Étude de conception sur les sites Web d'applications Mac OS X (Layouts)

Apple a toujours exigé le plus haut calibre de travail de ses employés même depuis sa fondation à la fin des années 1970. De nombreux concepteurs ont récemment migré vers l'environnement OS X et la plupart tombent amoureux à première vue. Mac OS X Lion offre tellement de fonctionnalités que vous ne pouvez pas trouver ailleurs, notamment l'App Store.

De là, vous avez accès à une multitude d'applications gratuites et payantes. Celles-ci sont toutes conçues pour OS X Lion et peuvent être téléchargées directement dans Launchpad. Dans cette étude de cas, je vais examiner les tendances en matière de conception pour les sites Web d'applications Mac. Celles-ci sont spécifiquement destinées à OS X et n'incluent pas les applications iOS? les styles sont très différents. Parallèlement à ces conseils, j'ai également compilé une petite galerie de présentation de mes sites d'applications Mac préférés pour partager un peu d'inspiration.

Élargissez vos points clés

Lorsque les utilisateurs accèdent à un site Web d'application, ils espèrent comprendre très rapidement le but de l'application. Pour ce faire, le moyen le plus simple consiste à attirer immédiatement l’attention des visiteurs et à les guider tout au long de la mise en page. Et d’expérience passée, il semble que des textes / graphiques de taille énorme feront souvent l'affaire.

Alfred App est un exemple qui intègre la totalité de l'écran dans un agencement coulissant. Le logo de l’application et le bouton de téléchargement jettent un coup d’œil sur la page, ainsi que la monstrueuse icône de l’application! Les utilisateurs familiers avec l'application Alfred reconnaîtront le chapeau et la loupe. Et ce n'est pas seulement la partie supérieure de la page non plus.

En faisant défiler la page, vous remarquerez que chaque section de la page est également divisée en morceaux. La zone de capture d’écran de la démo contient une petite colonne pour les vignettes avec un bel affichage de l’application. Il suffit généralement de consulter les quelques images de démonstration pour comprendre ce que l'application peut faire. Alors que vous trouvez de plus en plus de sites d’applications, gardez les yeux ouverts pour une vue d'ensemble? trucs qui est destiné à se démarquer. Pensez également à ce qui devrait être sauté de votre propre site Web d'application.

Caractéristiques de coupe nette

Les conceptions de sites les plus populaires présentent souvent le même type d'éléments. Il pourrait s’agir d’une conception d’icône plus détaillée et plus détaillée, d’un texte de logo fantaisie et d’autres graphismes amusants. Mais vous devriez suivre l'exemple d'Apple et découper les consommables. Des interfaces propres et simplifiées permettront à vos visiteurs de rester concentrés sur leurs achats et téléchargements.

Je suis un grand fan d'Instagram, qui a pris beaucoup de temps sur iOS. Et l'application Mac Carousel est un service soeur sur le bureau. Si vous remarquez que la mise en page de leur site comporte une zone de logo plus petite avec plus de place pour les captures d'écran. De plus, la typographie semble plus raffinée pour correspondre à la thématisation chic et haut de gamme.

Vous devriez également remarquer qu'il n'y a pas de navigation principale ici. Envisagez de dupliquer ceci pour votre propre site Web d'application, cela évite beaucoup de frustration des utilisateurs. Cette idée est doublée pour les utilisateurs mobiles qui découvrent votre site Web pour la première fois sur iPhone ou Android. Si vous pouvez représenter le message de votre application sur une seule page, je dis fonce!

Inclure les icônes standard de l'App Store

L'attention de vos visiteurs est une exigence importante, mais vous voulez également gagner leur confiance. Et les utilisateurs de Mac OS font généralement confiance aux développeurs Apple. Vous devez inclure des badges et / ou des boutons sur votre site pour que les internautes sachent que vous avez été publié dans le magasin d'applications. Cela peut sembler minime, mais cela peut avoir une grande importance pour les nouveaux clients potentiels.

Les consignes de marketing (PDF) du Mac App Store détaillent le badge App Store que vous voyez sur la plupart des applications Mac populaires. J'aime aussi prendre des photos de dribbble pour voir si quelqu'un a des décors de conception sympas ou des icônes relatives au thème.

Fournir une démonstration si possible

Vous souvenez-vous de l'intérêt de transmettre votre message rapidement? Ceci peut être facilement réalisé par des images ou des vidéos - sans grande surprise. Mais même des galeries de vignettes ou des diaporamas ne suffisent pas toujours.

Vous devriez essayer d'inclure une démonstration de votre service dans un type d'infographie de flux de travail. Il y a des tonnes de fichiers PSD gratuits à télécharger qui conviennent aux MacBook, aux iPhone, aux iPad, etc. Voici un bel exemple de modèle de PSD iMac gratuit à télécharger. Vous pouvez maintenant prendre des captures d'écran de votre application et créer de petites images de démonstration.

Cela fonctionne très bien dans l'exemple ci-dessus pour Prévenez-moi. L'application est ouverte et développée pour les 3 plates-formes sur iOS / iPad et OSX. À première vue, vous pouvez supposer que l'application est un système de type notification. Grâce à un petit graphique de démonstration et à quelques explications supplémentaires, vous pouvez assembler les fonctionnalités étendues pour composer votre avis sur l'application.

Animations dynamiques et jQuery

Apple est également réputé pour ses superbes animations de transition. Leur attention au détail dans la conception et la fonction est incroyable - couvrant toute l'étendue de leur portefeuille de logiciels. Et en tant que concepteur Web publiant sous Apple, vous constaterez peut-être que votre site d'application pourrait utiliser une touche magique.

Reeder pour Mac est magnifique et le site de démonstration convient tout aussi bien. Notez que les URL de page sont extrêmement simples et faciles à transmettre à des amis ou via les réseaux sociaux. De plus, la navigation est maintenue dans une colonne latérale, tandis que le contenu de la page est réduit au strict minimum.

Bien que Reeder dispose de vitesses de page rapides, il ne s'agit que d'un exemple parmi de nombreux sites Web d'applications. Si vous appréciez ces animations dynamiques, jetez un œil à la bibliothèque jQuery et à l'interface utilisateur de jQuery. Ce sont deux bibliothèques JavaScript très populaires avec des fonctions prédéfinies pour les effets de page? et vous pouvez construire beaucoup! Pour une idée, vous pouvez profiter de ce petit tutoriel de style Apple utilisant jQuery pour créer un effet de fondu d'écran.

Galerie d'inspiration

Comme mentionné précédemment, aucune étude de cas ne serait complète sans une petite vitrine de conception.Vous trouverez ci-dessous quelques exemples de la mise en page préférée de mon site Web pour les applications OS X préférées. Vérifiez-les et dites-nous ce que vous pensez! Et si nous avons manqué les superbes mises en page d'applications que vous aimez, assurez-vous de nous le faire savoir dans les commentaires.