Maintenant que nous avons déterminé les différents éléments de notre petite application, incluant ses différents états, nous pouvons commencer à créer en toute confiance les mockups visuels de chacun des éléments et de leurs différents états. Si vous êtes curieux d'une manière ou d'une autre à propos des détails concernant le design (couleurs, tailles de police, etc...), pendant que nous construisons tout cela, jetez donc un oeil au fichier original Sketch sur GitHub.

Commençons avec un artboard dans Sketch, et donnons lui comme couleur d'arrière plan un gris clair.

L'entête

Comme il ne s'agit que d'une démo, nous ne passerons pas beaucoup de temps à développer une image de marque pour notre application. Nous donnerons juste un peu de style au nom de notre application, en utilisant une police de caractère de Google Fonts. Dans le cas présent, j'ai choisi Pacifico. Si vous installez cette police de caractère sur votre ordinateur, vous pourrez alors voir à quoi elle ressemble dans Sketch.

Les entrées

Maintenant ils nous faut un texte en entrée, et un bouton de validation. C'est ici que l'utilisateur peut entrer un lien vers l'application dont il veut télécharger l'icône en haute résolution. Selon notre wireframe, nous placerons ceci sous l'entête, sur toute la largeur, afin que cela fonctionne depuis un desktop jusqu'au mobile.

Les sorties

Maintenant ajoutons la zone de contenu principale, dans laquelle nous afficherons l'icône récupérée grâce à l'API iTunes. Nous utiliserons l'icône de l'application twitter, en grande taille, à des fins de démo (que vous pouvez télécharger ici).

Note: Les icônes des applications iOS ne sont pas masquées par défaut. La forme de l'icône (telle que vue dans cet exemple twitter) est carrée. iOS applique des coins arrondis au niveau du système d'exploitation, donc pour notre application, nous devrons créer un masque pour les icônes iOS. Le masque n'est pas qu'un simple contour arrondi, c'est plus un carré aux coins arrondis. Plutôt que de le créer moi même, j'ai utilisé le template d'icône de Sketch, créé par Thibaut Ninove.

Les états du composant

Maintenant nous allons créer quelques mockups afin de nous aider à comprendre à quoi ressembleront les différents états du composant. Nous allons utiliser la zone de sortie principale pour afficher les différents états.

Pour l'état zéro (le chargement initial de la page), nous utiliserons une petite icône accompagnée de quelques instructions au format texte pour expliquer le fonctionnement de l'application.

Pour l'état de chargement en cours, nous collerons un overlay blanc par dessus la zone de sortie principale, avec un indicateur de chargement.

Et pour l'état Erreur, nous afficherons simplement quelques lignes de texte concernant l'erreur.

Jusqu'à la prochaine fois!

Et voilà ! Nous disposons de jolis mockups des différents composants de notre application, et nous sommes désormais prêts à commencer l'implémentation HTML, CSS et JavaScript !