Design Killer Mobile App Sites Web Conseils et exemples

La scène mobile a connu une croissance exponentielle au cours des deux dernières années. L'App Store iOS et les applications Android sur Google Play sont devenus les deux points chauds pour les passionnés de smartphones. Alors que le nombre d'utilisateurs de smartphones augmente, des centaines de développeurs d'applications mobiles lancent de nouvelles idées sur le marché..

Les applications les plus populaires sont accompagnées de leur propre site web. Cela peut être utile pour le marketing et pour faire connaître votre nom. C'est aussi une URL en ligne beaucoup plus jolie que celle de l'App Store. Je pense que toute application mobile réussie nécessite presque une présence sur le Web.

Dans cet article, je veux passer en revue certaines des tendances de conception les plus courantes pour les sites Web d'applications mobiles. Il n'y a pas de règles strictes que vous devez suivre pour construire une telle disposition. Il existe plutôt des directives et des tendances uniques que les concepteurs Web ont trouvées efficaces pour gagner un public. Couplé à mon Guide de développement iOS, vous pouvez créer une application mobile fantastique et construire son site Web..

Découvrez ces concepts ci-dessous et essayez d’en implémenter certains dans la mise en page de votre site Web..

Captures d'écran de l'appareil

Un élément essentiel pour tout site Web d'application mobile doit être une capture d'écran de l'application. Les visiteurs ne sont intéressés que par votre application, et quel moyen plus rapide de démontrer son objectif que par le biais de captures d'écran? Vous pouvez adapter les images de périphérique à n’importe quel style de mise en page afin que ce ne soit pas un facteur limitant..

Easy Chef est une application iOS espagnole qui utilise de nombreux clichés d'appareils. La partie supérieure de la mise en page présente un aperçu du diaporama de différentes vues. Mais lorsque vous faites défiler l'écran, vous remarquerez d'autres diagrammes utilisant les affichages iPhone. Ces panneaux incluent des étiquettes détaillées et des vues agrandies et agrandies. J'ai en fait écrit sur la conception de graphiques de produits informatifs dans un article plus ancien..

Une autre configuration intéressante peut être trouvée sur la page de la galerie Tweetbot. C'est un client Twitter très populaire pour iPhone et les développeurs ont rassemblé une vitrine coulissante de captures d'écran. Si vous essayez de gagner de la place dans votre mise en page, cela peut être une solution plus simple. Les visiteurs n'auront pas besoin de faire défiler la liste pour rechercher une vue spécifique. jQuery est facile à mettre en œuvre et vous pouvez rapidement créer un aperçu de l'écran de votre iPhone. Il peut être difficile d'inclure des détails supplémentaires, mais cela peut être ajouté dans une autre section.

Badges App Store

Cette technique semble également très pratique une fois que vous avez fini de créer l’application. Les badges sont rapidement reconnus comme des liens de téléchargement vers le marché des applications. Les utilisateurs d'Android et d'iOS ont la possibilité d'afficher les applications directement depuis leur navigateur, ou cela les redirigera s'ils sont visualisés sur un smartphone.

J'aime utiliser Instagram comme exemple car le site Web a été mis à jour pour adopter une nouvelle mise en page. Ils ont des badges prenant en charge Android Marketplace (Google Play) et iOS App Store. Les deux badges sont très simples dans la conception mais faciles à reconnaître d'un coup d'oeil. Si vous recherchez des modèles plus complexes, je vous recommande une recherche rapide. Les designers talentueux partagent souvent les concepts de badge de leur magasin d'applications pour des critiques constructives.

Réseaux sociaux mobiles

Facebook et Twitter sont passés au mobile, mais cela n'a pas empêché d'autres réseaux de se développer. Nous constatons que les réseaux sociaux utilisent des applications mobiles pour permettre une toute nouvelle plate-forme de communication.

Localmind est basé sur un concept similaire à Foursquare, dans lequel vous créez un compte et commencez à consulter des lieux locaux. Vous pouvez laisser des questions ou répondre aux questions d'autres personnes. Leur site Web est très amical et invite les nouveaux arrivants. J'aime particulièrement la section de bannière supérieure conçue avec un arrière-plan de carte personnalisé. Leur utilisation de dégradés et de texture de fond confère au site une vie à part..

Partage minimal de photos

Pose est un autre réseau mobile avec des idéaux similaires pour un design minimaliste. Vous pouvez télécharger l'application mobile pour les appareils iOS et Android. Le sentiment est similaire à weheartit mais c'est pour les amateurs de mode mobile. Toute l'application est axée sur la mode, les cheveux, le maquillage et le glamour.

Les utilisateurs peuvent prendre des photos de leur tenue, vêtements ou accessoires et les partager sur le réseau. Une chose à noter à propos de Pose est la rapidité avec laquelle vous pouvez naviguer sur le site. Il est facile de trouver le blog de l'entreprise, ses coordonnées, etc. D'autres sites Web d'applications négligent souvent ces fonctionnalités d'entreprise qui peuvent être un sujet délicat..

Si vous souhaitez attirer l'attention des médias, il est important que votre site Web ressemble à un véritable produit de réseau social. Vous essayez non seulement de vendre votre application (par des annonces ou par abonnement payant), mais vous vendez également le réseau lui-même. Les applications sociales peuvent certainement être plus délicates que la conception de sites Web d'applications classiques. Mais ils génèrent également beaucoup plus de téléchargements d'utilisateurs et c'est un nouveau domaine passionnant pour les téléphones mobiles..

De modestes débuts

Les concepteurs de sites Web ne sont pas toujours capables d'assembler des graphiques et des icônes scandaleux. Heureusement, les sites Web d'applications ne sont pas critiques quant aux prouesses d'Adobe Photoshop. Je pense en fait que le minimalisme peut fonctionner beaucoup mieux pour ce style de mise en page.

Leef App est un premier client nouvellement publié pour iPhone. Leur site Web comprend une belle capture d’application avec un gros bouton de téléchargement en gras. Tout le texte de la page est simplifié d'une manière similaire aux polices et aux palettes de couleurs d'Apple.

Ce qui rend le site Web de Leef remarquable, c’est la nature franche de chaque élément de page. C'est flagrant et direct avec rien caché ou mis de côté. Je recommande d'essayer ce style en tant que premier site Web pour application mobile, si ce n'est que pour la pratique. Vous pouvez apprendre beaucoup en minimisant les moindres détails et en vous concentrant sur ce qui attire l'attention.

Bel espace

Le site Web de la Wood Camera App est tout aussi simple. Leur mise en page ne contient qu'un fond blanc et un contenu centré. Ce contenu comprend des captures d'écran par défaut, un badge de la boutique d'applications et des fonctionnalités clés supplémentaires..

Si vous pensez que le minimalisme et l’espace blanc sont importants pour votre mise en page, restez-y! Wood Camera n'est pas une présentation de site Web époustouflante, mais elle est extrêmement facile à naviguer. Leur site ne contient même pas de lien vers un contenu alternatif en dehors de la page officielle du développeur. Cela permet de rester concentré sur l'application et sur ce qu'elle peut offrir, ce qui est beaucoup plus important que les graphiques flashy. Même si cela ne veut pas dire que les illustrations flashy sont une mauvaise idée, elles nécessitent simplement une mise en œuvre appropriée..

Illustrations colorées

Au contraire de l'approche minimaliste, c'est un travail avec des illustrations uniques, que j'adore totalement. Souvent, ce détail supplémentaire me vendra complètement l'application. Un exemple que je peux comprendre est l'application Barista pour iPhone. L'en-tête de leur site est criblé de petits cappuccinos et de boissons à l'espresso vectoriels.

Mais remarquez qu'il n'y a pas d'autres images lorsque vous faites défiler la page. Toute la section supérieure a été conçue spécifiquement pour l’application iPhone, semblable à un page de destination. Les vecteurs attirent tout de suite votre attention et permettent également de comprendre en quoi consiste l'application..

Kitchenator est une application iOS similaire qui convertit les unités de mesure pour la cuisson. Leur en-tête utilise des textures de bois riches, une nappe à carreaux et de petites cuillères d’eau. Cette image suggère le but de cette application avant même que vous ne parcouriez le contenu..

Ce style de conception imprègne réellement toute la mise en page. La zone de pied de page correspond à un fond en bois similaire et à la plupart des choix de polices. Ceci est un exemple de présentation de site Web très simple avec des graphiques très puissants.

Sites Web des App: Vitrine Premium

Quel article serait complet sans un peu de bonbon pour les yeux? En plus des techniques ci-dessus, j'ai également rassemblé cette belle galerie de sites Web pour applications mobiles; remarquez le logo et les schémas de navigation, ainsi que les URL de domaine. En étudiant ce que font les professionnels, vous pouvez comprendre les tendances en matière de conception et les utiliser dans vos propres projets..

App Bosquet