Fermer

juin 19, 2018

Comment accélérer le processus Wireframing avec Photoshop et Adobe XD


À propos de l'auteur

Manuela est un illustrateur numérique de Naples, en Italie. Elle a commencé en tant que Web Designer mais a ensuite suivi sa passion principale: Adobe Illustrator. Le dessin est son …
En savoir plus sur Manuela

(Cet article est aimablement sponsorisé par Adobe.) Travailler avec des wireframes vous permet de faire preuve de créativité sans trop vous soucier du style ou du design de votre projet. Ce didacticiel vous apprendra à créer une page de destination pour un site Web de cours en ligne et vous proposera un modèle filaire mobile que vous pourrez utiliser pour vous entraîner et suivre.

Avant de commencer un projet de conception, il y a un mot qui vous suit depuis le tout début: wireframing . Aujourd'hui, nous allons apprendre à créer un fil de fer dans Adobe XD et comment implémenter des graphismes de Photoshop en utilisant simplement des bibliothèques.

Mais d'abord, qu'est-ce qu'un wireframe?

une représentation visuelle de la structure de votre projet. Il définit les os, les éléments qui vont fonctionner dans votre mise en page, et le placement du contenu pour votre prototype.

La grande chose à propos de wireframing est que c'est une combinaison d'éléments simples qui vous permettent de vous concentrer sur la fonctionnalité de votre projet. Dans cette étape, vous pouvez dessiner sans trop réfléchir sur le style et le design.

Il vous suffit de déterminer quels sont les objectifs de votre projet et comment les développer grâce au wireframing en utilisant des éléments simples. Au fur et à mesure que vous progressez dans le wireframing, vous développez les meilleures solutions lorsque le composant d'équipe fait des commentaires et suggestions sur votre croquis.

La première étape consiste à créer un projet et à l'appeler "sections". besoin de compléter les différentes étapes, jusqu'à la création de la «architecture» finale.

Créer un wireframe "à la main" d'abord a beaucoup de sens. Il vous aide à développer l'idée sur papier (sans limites numériques), et permet également à vos concepts de circuler facilement. Pour ceux d'entre vous qui travaillent en équipe, travailler avec du papier ne semble pas la meilleure approche si vous voulez partager vos idées avec toutes les personnes impliquées dans le projet – surtout si vous travaillez avec votre équipe en ligne.

Dans ce tutoriel, nous allons couvrir les étapes suivantes:

  1. Créer une structure filaire, sélectionner et insérer des actifs PS via des bibliothèques
  2. Mettre à jour les fichiers PS et voir les résultats dans Adobe XD.

Nous allons créer un ensemble d'objets à utiliser dans notre wireframe. Nous les mettrons de côté dans nos actifs car nous avons un panel supplémentaire d'où nous pouvons prendre nos outils.

Une fois que vous avez fini, vous pouvez le sauvegarder et le réutiliser pour de futurs projets, en utilisant les mêmes éléments.

Vous aurez besoin de ces éléments Photoshop que je suis prêt à utiliser dans notre structure filaire.

Voici ce que nous allons créer:


 wireframe
Wireframe ( Grand aperçu [19659020] mise en page complète « />
Mise en page complète ( grand aperçu

1. Créer un fil de fer et sélectionner et insérer des actifs PS dans les bibliothèques

Le meilleur endroit pour commencer à développer un filaire est de le dessiner à la main premier

Dans ce projet, je veux créer une page d'atterrissage pour un site de cours en ligne, je sais que j'ai besoin de communiquer des informations essentielles, il ne doit pas être parfait la première fois, mais à la fin , son efficacité dépend beaucoup de la façon dont j'ai organisé le fil de fer et à quel point il gns avec le but initial

Première étape : Voici mes propres wireframes dessinés à la main.


 wireframe
Grand aperçu

 wireframe
Grand aperçu

peut voir, il n'y a pas beaucoup d'informations sur eux. La première intention est simplement de montrer comment la mise en page sera composée et quels éléments doivent être considérés. Propre et simple.

Deuxième étape : Re-soumettre le fil de fer dans une taille plus petite et avec quelques notes de marge que j'utilise pour expliquer les éléments et leur utilisation:


 ] Grand aperçu </a data-recalc-dims=

Troisième étape : Commençons à créer notre wireframe numérique avec Adobe XD.

Ouvrez Adobe XD et choisissez "Web 1920" depuis la fenêtre ouverte.


 a choisi web 1920 dans adobe xd
Grand aperçu

Enregistrez votre projet en tant que "filaire" en sélectionnant Fichier Enregistrer sous .

Une fois votre fichier sauvegardé, créez un autre plan pour iPhone 6 / 7 Plus aussi

Cliquez sur le bouton A (Artboard) sur le côté gauche, et choisissez "iPhone 6/7/8" "Dans la barre latérale droite.


 création de planches pour les formats iPhone
Grand aperçu

 création de planches pour les formats iPhone
Grand aperçu [19659030] Et voici nos deux plans de travail: un pour le bureau et un pour le mobile


 créer deux plans de travail, un pour le bureau et un pour le mobile
Grand aperçu

Maintenant, nous pouvons commencer à créer nos objets filaires. Après nos croquis dessinés à la main, nous allons maintenant créer les mêmes objets dans XD

Hero Image
Sélectionnez l'outil Rectangle ( R ) et dessinez une forme où votre image de héros devrait être. Ensuite, prenez l'outil Ligne ( L ) et tracez deux lignes joignant les sommets.

Groupez la forme et les lignes et appelez le groupe "Hero":


 grouper des formes et des lignes
Grand aperçu

Passons maintenant à la section "Icônes". J'ai mis du texte devant mes icônes, et je vais représenter cela visuellement avec quelques lignes. Prenez l'outil Ligne ( L ) et tracez une seule ligne horizontale. Cliquez sur Répéter Outil Grille ( + R sur Mac ou CTRL + R sur Windows), et faites glisser votre ligne jusqu'à ce que vous ayez trois d'entre eux

 creatings icons

Nous avons besoin de trois symboles pour nos icônes, donc cliquez sur Ellipse Tool / E ) et dessinez un cercle. Cliquez à nouveau sur Répéter Outil Grille ( + R sur Mac ou CTRL + R sur Windows) et créer trois cercles. Ensuite, sélectionnez l'espace entre les cercles et faites-le glisser pour le rendre plus large.

 créer des cercles

Section Feature
Créer un arrière-plan gris clair ( # F8F8F8 ) à l'aide de l'outil Rectangle ( R ). Répétez les étapes de la section précédente Hero Image ci-dessus pour créer un espace réservé d'image, puis répétez les étapes de la section Icônes (également ci-dessus) pour créer une ligne pour le texte. Enfin, créez un simple bouton à l'aide de l'outil Rectangle Tool ( R )

Ceci est le résultat final:


 Résultat final
Grand aperçu

Pour la section Témoignage , répétez les mêmes étapes que précédemment afin de créer un espace réservé pour l'image et quelques lignes de texte. Comme vous pouvez le voir sur l'image filaire complète, il y a un symbole de guillemets que nous devons insérer.

Nous allons le faire en utilisant Photoshop.

Ouvrez le fichier Photoshop que j'ai fourni en cliquant sur sur ce lien .

Je veux insérer cette image comme symbole en utilisant des bibliothèques CC.

Dans Photoshop, soyez sûr de voir le panneau de bibliothèques en allant Fenêtre Bibliothèques . Créer une nouvelle bibliothèque en cliquant sur la petite icône en haut à droite (voir image):


 créant une nouvelle bibliothèque
Grand aperçu

J'ai intitulé ma bibliothèque "Wireframe". N'hésitez pas à donner le nom que vous désirez à votre bibliothèque.

Maintenant, cliquez et glissez le symbole que vous voulez avoir dans votre bibliothèque:

 cliquez et faites glisser les symboles dans la bibliothèque

Revenez à XD, Fichier Open CC Libraries et vous verrez le dernier symbole que vous venez de télécharger via Photoshop et la bibliothèque que vous avez créée


 symboles créés dans photoshop et déplacés vers adobe xd
Large preview

Faites glisser le symbole de la citation dans votre structure filaire dans XD et placez-le où vous le souhaitez.

 positionner les symboles dans votre structure filaire

Pour les sections "Prix, Inscription et Pied de page", nous les représenterons en utilisant des cases et des lignes supplémentaires comme celles que vous voyez dans l'image ci-dessous

Note : Vous pouvez trouver l'icône email dans le fichier Photoshop que j'ai fourni ici ].)

Suivez les étapes décrites dans la fonction s ection pour insérer le symbole dans la bibliothèque via Photoshop, ouvrez-le dans XD et faites-le glisser dans votre plan de travail filaire

Ceci est le résultat:


 résultat
Grand aperçu

Une dernière chose dont nous avons besoin faire avant d'aller de l'avant est de commander nos couches. Assurez-vous que vos calques sont activés en cliquant sur l'icône Layer ( + Y pour Mac ou CTRL + Y pour Windows).


 commander des calques dans adobe xd
Grand aperçu

Regrouper tous les éléments de la section dans des dossiers (je leur ai assigné le même nom que la section qu'ils représentent). De cette façon, tous vos éléments seront placés dans l'ordre et n'auront aucune difficulté à les trouver rapidement (voir image).


 grouper des éléments de section dans des dossiers
Grand aperçu

 grouper des éléments de section dans des dossiers
Grand aperçu

Nous avons terminé avec notre wireframe!

Dans la prochaine étape, nous allons construire notre conception en utilisant notre wireframe et en découvrant comment modifier les éléments des bibliothèques instantanément.

2. Ajout d'une couche de fidélité à votre wireframe

Nous venons de terminer notre wireframe et, à ce stade, nous pouvons le vérifier pour voir si nous avons manqué quelque chose. Une fois que nous sommes sûrs que nous avons toutes les informations nécessaires incluses dans le fil de fer, nous pouvons ensuite le partager avec l'équipe du projet.

Nous sommes prêts à passer à autre chose et à mettre à jour notre filaire et copie de l'espace réservé.

Allez-y et créez votre design. Dupliquer votre wireframe en l'enregistrant avec un autre nom (par exemple "Wireframe-Layout").

Premièrement, nous aurons besoin d'une image pour notre section Hero (Je suis allé en avant et j'ai utilisé celui-ci par ] Priscilla Du Preez de Unsplash. .)

Ouvrir l'image dans Photoshop, et réduire la taille de l'image en cliquant sur Image Taille de l'image ] et définissez la largeur à 3000px:


 réduire la taille de l'image
Grand aperçu

Enregistrez votre image et faites-la glisser dans vos bibliothèques.

Dans XD, faites glisser l'image des bibliothèques vers votre planche. Laissez-le correspondre à la forme que nous venons de créer comme espace réservé pour l'image.


 Glisser l'image des Bibliothèques vers votre Artboard
Grand aperçu

Je vais ajouter un logo et du texte à cette image; J'ai besoin que l'image soit un peu plus sombre pour que l'information soit facile à lire. Revenez dans Photoshop Bibliothèques et double-cliquez sur l'image dans le panneau. Une fois l'image ouverte, allez dans le panneau Calque, sélectionnez le calque d'image et cliquez sur . Ajoutez un style de calque en bas du panneau. Définissez un superposition de couleurs avec les paramètres comme indiqué ci-dessous:


 ajouter un logo et du texte à l'image
Grand aperçu

Enregistrez-le et il sera automatiquement sauvegardé dans tous vos bibliothèques. Revenez à XD et vous verrez l'image dans votre planche de travail mise à jour (pas besoin de la faire glisser à nouveau depuis la bibliothèque)

Note : Selon la taille de l'image,


 mise à jour des images dans les bibliothèques
Grand aperçu

Maintenant, insérons notre logo. Ouvrez le fichier Photoshop et faites glisser le logo «Learn!» Dans les bibliothèques. Ceci est la police que j'ai utilisée .


 insérer le logo dans photoshop
Grand aperçu

Comme notre arrière-plan est sombre, nous aurons besoin d'un logo blanc. Revenez à Photoshop et double-cliquez sur le logo des bibliothèques.

Saisissez l'outil Texte, mettez le texte du logo en surbrillance et rendez-le blanc. Enregistrez-le et il sera automatiquement enregistré sur votre planchette XD


 créant un logo while sur fond sombre
Grand aperçu

 créant un logo while sur fond foncé
Grand aperçu

] Insérer du texte et un bouton pour compléter la section Héros.


 insérer du texte et un bouton pour compléter la section Héros
Grand aperçu

Ensuite, je vais remplir la section suivante en ajoutant du texte et icônes Ceux que j'ai utilisés proviennent d'un pack gratuit que j'ai créé pour Smashing Magazine que vous pouvez trouver ici .

Comme précédemment, ouvrez les icônes et ajoutez-les à vos bibliothèques dans Photoshop, puis revenez sur XD pour les placer dans votre wireframe. Voici le résultat:


 ajouter du texte et des icônes, résultat
Grand aperçu

Passons maintenant à la section Feature . Comme précédemment, nous allons faire glisser une image sur l'espace réservé d'image (j'ai utilisé cette image par Sonnie Hiles trouvé sur Unsplash ). Ajoutez du texte et un bouton comme je vous l'ai montré dans les étapes précédentes


 section
Grand aperçu

Ouvrez le fichier Photoshop que j'ai fourni et ajoutez le symbole de contrôle dans votre Bibliothèques. Ouvrez les bibliothèques dans XD et placez l'icône près du texte. Utilisez la grille de répétition pour en faire trois copies:

 faire des copies d'une icône et les lire à côté du texte

Changeons maintenant la couleur du symbole de contrôle. Revenez à Photoshop, ouvrez-le à partir des bibliothèques et lui donner une superposition de couleurs comme indiqué ci-dessous:


 changer la couleur du symbole de contrôle
Grand aperçu

Enregistrez-le et voyez vos icônes dans XD directement mises à jour.


 changer la couleur du symbole du chèque
Grand aperçu

Finissons maintenant notre disposition

Pour la section Témoignage ajoutez du texte et une image pour le témoignage (j'ai pris mine de UI Faces ).


 Ajout d'un texte et d'une image pour le témoignage
Grand aperçu

Enfin, nous allons ajouter quelques informations pour le titre Price la section Subscribe et le pied de page. Vous pouvez trouver des tableaux de prix dans le fichier Photoshop que j'ai fourni . Faites-les glisser dans vos bibliothèques dans Photoshop, puis ouvrez les bibliothèques dans XD et faites-les glisser dans votre planche graphique. N'hésitez pas à les modifier comme vous voulez

Et … nous avons terminé!

Conclusion

Dans ce tutoriel, nous avons appris à travailler avec Photoshop et Adobe XD pour créer un wireframe, et comment y ajouter rapidement de la fidélité en modifiant les éléments des bibliothèques. Pour votre référence, j'ai créé un wireframe mobile que vous pouvez utiliser pour vous entraîner et suivre ce tutoriel. Suivez les étapes comme nous l'avons fait pour la version de bureau pour ajouter du texte et des images.

Laissez-moi voir votre résultat dans les commentaires!

Cet article fait partie de la série de design UX sponsorisée par Adobe. L'outil Adobe XD est conçu pour un processus de conception UX rapide et fluide car il vous permet de passer plus rapidement de l'idée au prototype. Concevez, prototypez et partagez – tout dans une application. Vous pouvez consulter des projets plus inspirants créés avec Adobe XD sur Behance et aussi abonnez-vous au bulletin d'information sur la conception d'expérience Adobe pour rester au courant des dernières tendances et idées pour UX / Conception de l'interface utilisateur

 Editorial de Smashing (il)




Source link