Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Designer une Application Web API-Driven avec Sketch

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Building a Mini, API-Driven Web App.
Planning a Basic API-Driven Web App
Building an API-Driven Web App With HTML and CSS

French (Français) translation by Soleshoe (you can also view the original English article)

Final product image
What You'll Be Creating

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.

Screenshot of basic artboard in Sketch

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.

Screenshot of the header component in 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.

Screenshot of the input component in Sketch

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).

Screenshot of the output component in Sketch

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.

Screenshot of the zero state in Sketch

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

Screenshot of the loading state in Sketch

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

Screenshot of the error state in Sketch

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 !

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.