Comment accélérer le processus Wireframing avec Photoshop et Adobe XD
(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:
Créer une structure filaire, sélectionner et insérer des actifs PS via des bibliothèques
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:
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.
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:
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.
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.