Conception d'une application Web basée sur des API dans Sketch

Ce que vous allez créer

Maintenant que nous avons pris en compte tous les éléments de notre petite application, y compris ses différents états, nous pouvons commencer en toute confiance à créer des maquettes visuelles pour chaque élément et l'état correspondant. Si vous êtes curieux de connaître les détails de la conception (couleurs, taille de police, etc.) au fur et à mesure de notre construction, consultez le fichier Sketch d’origine sur GitHub..

Commençons avec une planche graphique dans Sketch et donnons-lui un fond gris clair.

L'en-tête

Comme il ne s'agit que d'une démo, nous ne consacrerons pas beaucoup de temps à créer une marque complète pour notre application. Au lieu de cela, nous allons simplement styliser le nom de notre application en utilisant une police de Google Fonts. Dans ce cas, je suis allé avec Pacifico. Si vous installez la police sur votre ordinateur, vous pouvez voir à quoi elle ressemble dans Sketch..

L'entrée

Nous avons maintenant besoin d'une saisie de texte avec un bouton d'envoi. C’est là que l’utilisateur peut entrer un lien vers l’application dont il souhaite télécharger l’illustration d’icône haute résolution. Suivant nos structures en fil de fer, nous placerons ceci sous l'en-tête et nous le rendrons sur toute la largeur, de sorte qu'il fonctionne du bureau au mobile..

Le résultat

Ajoutons maintenant la zone de contenu principale où nous allons afficher les illustrations d’icône renvoyées par l’API iTunes. Nous utiliserons l'icône de l'application Twitter pleine grandeur à des fins de démonstration (que vous pouvez télécharger ici).

Remarque: les icônes d'application iOS ne sont pas masquées par défaut. L'illustration de l'icône (comme dans l'exemple de twitter) est carrée. iOS applique les coins arrondis au niveau du système d'exploitation. Pour notre application, nous devrons donc créer un masque pour les icônes iOS. Le masque n’est pas un simple rayon de bordure, c’est plus un «cercle». Plutôt que de le créer moi-même, j'ai utilisé le modèle d'icône Sketch créé par Thibaut Ninove..

Les états composant

Nous allons maintenant créer quelques maquettes pour nous aider à comprendre à quoi ressembleront les états des composants. Nous allons utiliser la zone de sortie principale pour indiquer ces différents états.

Pour l'état zéro (le chargement initial de la page), nous ajouterons un petit espace réservé pour les icônes ainsi qu'un texte d'instruction sur l'utilisation de l'application:

Pour l'état de chargement, nous allons coller une superposition blanche sur la zone de sortie avec un indicateur de chargement:

Et pour l'état d'erreur, nous allons simplement montrer un texte d'erreur:

Jusqu'à la prochaine fois!

C'est tout! Nous avons quelques maquettes visuelles de nos différents composants d'application et nous sommes maintenant prêts à implémenter avec HTML, CSS et JavaScript.!