Share
Partir de zéro à chaque fois que vous modifiez un dessin est une perte de temps, surtout lorsque vous travaillez au-dessus d'un produit existant. Sur le marché Envato, nous avons déjà une apparence visuelle établie et nous travaillons sur un guide de style pour rassembler tous les éléments de l'interface utilisateur..
Ce dont nous avons besoin, c'est d'un moyen facile de créer un prototype cliquable à l'aide de notre bibliothèque d'interface utilisateur. Un gabarit avec toutes les pièces de Lego déjà là, prêt à être construit.
Au cours de ce tutoriel, je vais utiliser mes propres expériences avec Envato Market pour illustrer le processus. Cependant, toutes les techniques discutées seront applicables à votre propre situation.
La première étape dans mon cas a été de créer le modèle imitant notre guide de style.
J'ai commencé par ajouter toutes nos polices d'icônes: Considérant que nous avions une police d'icônes que nous souhaitions utiliser dans nos conceptions Sketch, la police d'icônes devait d'abord être installée:
La meilleure façon de procéder consiste à ouvrir la police dans Font Book. “Vue du répertoire” (⌘ + 2) doit être actif pour voir tous les glyphes disponibles. Copiez chaque glyphe et ajoutez-les à une planche d'art dans Sketch.
Ensuite, j'ai fabriqué à la main tous les différents éléments de l'interface utilisateur. Chaque élément a été ajouté à sa propre planche d’art et ensuite enregistré en tant que symbole:
Je donne à chacun un nom. Les noms coïncident avec les classes utilisées dans la construction réelle, mais c'est à vous de voir comment vous abordez ceci:
Frappé Entrer. Terminé.
J'ai répété ce processus pour chaque type d'élément d'interface utilisateur majeur que nous avons actuellement catalogué dans le guide de style. Le résultat de ce travail laborieux a été la création de 89 symboles au total..
La dernière pièce du puzzle était la typographie. Nous avons 17 variations typographiques différentes, donc chacune a été transformée en style de texte dans Sketch.
Pour ce faire, ajoutez une zone de texte et stylisez le texte en utilisant les options de la barre latérale:
Ensuite, transformez-le en style de texte:
Quand tout est fini, on économise en allant Fichier> Enregistrer en tant que modèle…
Maintenant, nous sommes prêts à rock 'n' roll!
Une fois que toutes les icônes, les principaux éléments de l'interface utilisateur et la typographie étaient prêts, nous étions prêts à commencer à nous moquer.
La création d'un nouveau fichier à l'aide du modèle Guide de style du marché Envato nous fournit tous les plans de travail, symboles, polices d'icônes et styles typographiques que nous avons créés..
Pour commencer une nouvelle maquette, je retire d’abord tous les planches d’art. Les symboles créés précédemment seront toujours accessibles car ils sont incorporés dans le modèle. J'utilise Font Book pour copier rapidement les icônes à utiliser dans la maquette. Ensemble, cela signifie que je peux commencer avec une table rase et avoir toujours un accès rapide à tous les actifs dont j'ai besoin. Bonheur zen!
Ensuite, j'ajoute une nouvelle planche graphique:
Maintenant je suis prêt à ajouter nos blocs de construction.
Boom! Le voilà:
Déplacez-le en place:
Ajoutez ensuite le pied de page pour terminer la configuration de la page vierge. Voila!
Remplissons maintenant la page fictive avec un formulaire qui renvoie à une page de confirmation. Nous ajouterons ensuite cela à un projet InVision dans lequel nous pouvons obtenir les réactions de collègues et tester le flux en envoyant un lien aux utilisateurs testant la nouvelle interface..
Cela prend très peu de temps et la meilleure chose à faire est qu'aucun de ces éléments ne doit être personnalisé pour l'interface. Tout est une question d'utilisation des blocs de construction que nous avons créés dans le modèle..
Exportons maintenant ces images sous forme d'images en sélectionnant les planches et en allant dans Fichier> Exporter:
La dernière étape, et la plus importante, consiste à télécharger les maquettes sur InVision et à partager le lien avec vos collègues et à tester les utilisateurs pour recueillir des commentaires..
Ici, j'ai créé un nouveau projet InVision et y ai téléchargé les maquettes exportées. Cliquez par exemple sur la page de destination pour l'ouvrir:
À l'aide de l'outil de construction, je crée un hotspot pour me connecter à la page de confirmation:
Enfin, je partage le prototype avec d'autres en disant quelque chose comme:
«Hé, si vous avez une seconde, j'aimerais connaître votre opinion sur cette nouvelle page de confirmation sur laquelle je travaille. Découvrez-le sur http://invis.io/RG1XC6XPA ”
Oui, vous pouvez suivre ce lien pour jouer avec la maquette.
C'est tout! Notre premier cycle de feedback est terminé.
Il s'agit du meilleur processus que j'ai découvert à ce jour en ce qui concerne l'obtention rapide d'un prototype sur l'écran de quelqu'un..
Cela dit, ce n'est toujours pas idéal. Dès que notre bibliothèque d'interface utilisateur change, quelqu'un (actuellement moi-même) doit mettre à jour le modèle d'esquisse manuellement. Le processus idéal serait celui où nous pourrions utiliser HTML et CSS pour créer des symboles d'esquisse permettant de garder le guide de style et le modèle d'esquisse en parfaite synchronisation..
Accentsconagua