Comment se lancer avec UXPin
Au fur et à mesure que nous abordons le domaine de la conception mobile, de la conception d'applications et de la réactivité, nous nous intéressons de plus en plus à l'expérience utilisateur (UX), au wireframing, au prototypage interactif et aux maquettes. Il existe une tonne d'outils destinés à ce créneau et ils couvrent toute la gamme des monstres complexes, chargés de caractéristiques, à rares et à peine utiles. Un des outils qui a attiré mon attention est UXPin, simplement parce qu’il a été développé par des designers pour des designers.
Avant d'aller de l'avant… une mise en garde. Si votre entreprise préfère posséder le logiciel, UXPin ne vous convient pas. Tout le travail effectué dans cette application est effectué dans le navigateur et les projets que vous enregistrez sont enregistrés dans votre compte.
Pour démarrer avec UXPin, vous lancez un navigateur et vous dirigez vers UXPin. À partir de là, vous pouvez vous inscrire pour un essai gratuit ou organiser un plan mensuel en fonction de vos besoins. Le processus d'inscription est assez simple et une fois que vous avez défini votre nom d'utilisateur et votre mot de passe, vous êtes prêt à commencer.
Comment démarrer un projet dans UXPin
Lorsque vous vous connectez, vous accédez au tableau de bord et vous pouvez décider de créer une nouvelle structure filaire, un nouveau projet mobile ou un projet Responsive Web Design. Il existe également des plug-ins pour UXPin qui vous permettront d'importer vos projets Photoshop ou Sketch. Pour cela, je vais créer une bannière avec du texte et ajouter un bouton de courrier électronique à la bannière. Pour ce faire, j'ai sélectionné Créer une nouvelle structure filaire.
Comment utiliser l'interface UXPin
La surface de conception est divisée en quatre zones. Dans la zone noire à gauche, vous trouverez une série d’outils permettant de revenir au tableau de bord, d’ouvrir les éléments à utiliser, d’ouvrir le panneau Éléments dynamiques, de rechercher des éléments, d’ajouter des notes à la page et d’ajouter des membres à l’équipe. En bas se trouve un bouton qui ouvre un court tutoriel, un autre qui vous permet d’accéder à votre compte et un autre qui permet d’accéder à la FAQ, vous permet de poser des questions et même de faire des commentaires.
Dans la zone bleue en haut se trouvent une série d’outils et de propriétés. Les boutons plus sombres sur le côté droit vous permettent de modifier votre conception, d'ajuster les paramètres du projet, de partager la page et de faire une simulation de la page dans le navigateur.
Le panneau Eléments vous permet de saisir les éléments de la surface de conception, de nommer votre projet et d’ajouter ou de supprimer des pages.
La bibliothèque Elements est une agréable surprise pour les concepteurs UX. Cette liste déroulante vous permet de choisir parmi environ 30 bibliothèques allant d’iOS à Android. Lolipop. Vous avez également accès aux éléments Bootstrap et Foundation, aux icônes Font Awesome, Gesture pour mobile et à une collection de widgets sociaux.
04 de 09Comment ajouter un élément à une page UXPin
Pour commencer, j'ai fait glisser l'élément Box sur l'aire de conception et, lorsque je relâche la souris, le Panneau de propriétés s'ouvre. Le bouton Propriétés vous permet de nommer l’élément et de définir sa largeur, sa hauteur, sa hauteur et sa position. Vous pouvez également ajouter un rembourrage à l'élément, arrondir les angles et ajuster l'opacité. Cliquez sur le bouton Couleur d'arrière-plan pour ouvrir un sélecteur de couleur RGBA.
Vous pouvez également affecter une police, une bordure et un motif à l'élément sélectionné. L'éclair vous donne la possibilité d'ajouter de l'interactivité à un élément sélectionné.
05 de 09Comment ajouter et formater du texte dans UXPin
Pour ajouter du texte, faites glisser l'élément de texte vers l'aire de conception et entrez votre texte. Cliquez sur la propriété de texte bouton pour ouvrir les propriétés de la police et formater votre texte. Si vous avez besoin d’un bloc de texte factice, ajoutez un élément de texte et cliquez sur le bouton GÉNÉRER LOREM IPSUM bouton dans les propriétés de la police.
06 de 09Comment ajouter une image à une page UXPin
Il y a plusieurs façons d'accomplir cette tâche. Vous pouvez utiliser le Outil Image Dans la barre d’outils, ajoutez un élément Image à partir de la bibliothèque ou faites simplement glisser une image de votre bureau sur l’élément de la surface de conception, comme indiqué ci-dessus.
07 de 09Comment ajouter un bouton à une page UXPin
Bien qu’il y ait un élément Button, entrez “ Bouton " dans le Chercher Comme indiqué ci-dessus, la zone ouvre tous les boutons de toutes les bibliothèques. Faites glisser celui qui vous convient sur la surface de conception et utilisez les propriétés pour modifier la couleur, la police et même le rayon de la bordure. Pour changer le texte à l'intérieur du bouton, cliquez une fois sur le texte et entrez le nouveau texte.
08 de 09Comment ajouter de l'interactivité à une page UXPin
Ce n'est pas aussi compliqué qu'il y paraît. Pour l'entrée de courrier électronique, j'ai ajouté un élément d'entrée, l'ai redimensionné, entré le texte et mis en forme le texte. Avec l'élément d'entrée sélectionné cliquez sur le bouton Propriétés et, quand le Propriétés de l'élément apparaît cliquez sur le Visibilité bouton - le globe oculaire - dans le coin supérieur droit du panneau.
Sélectionnez le bouton et cliquez sur le bouton Bouton Interactions - le éclair - dans les propriétés. Lorsque le panneau Interactions s'ouvre, sélectionnez Nouvelle interaction. Sélectionnez Click dans la liste déroulante Trigger. Dans la zone Action, sélectionnez Afficher l'élément. On vous demandera maintenant quel élément afficher. Cliquez une fois sur le site du canon et cliquez sur l'élément d'entrée. Une fois l'élément identifié, vous pouvez maintenant déterminer s'il faut l'animer ou non. Dans ce cas, j'ai décidé d'afficher la zone de saisie avec une facilité d'accès et je suis parti avec la valeur de durée par défaut de 300 ms.
Je souhaite également que le bouton se déplace d'environ 65 pixels vers la droite lorsque l'utilisateur clique dessus. J'ai sélectionné le bouton, ouvert le panneau Interactions et sélectionné Nouvelle interaction. J'ai utilisé ces paramètres:
- Déclencheur: Cliquez sur
- Action: Déplacer par
- Direction de déplacement: 65 px sur l'axe des x
- Animation: Linéaire
- Durée: 300 ms
Pour supprimer une interaction, sélectionnez l'élément et ouvrez le panneau Interactions. Sélectionnez l'interaction dans le panneau et cliquez sur la corbeille pour la supprimer.
09 de 09Comment tester votre page dans UXPin
Étant donné que vous travaillez dans le navigateur, les tests sont extrêmement simples. Clique le Simuler la conception bouton. La page s'ouvrira dans le navigateur et vous pourrez tester le moyen. Un panneau sera également ajouté sur le côté gauche de la page pour permettre les commentaires, un plan du site s'il y a plusieurs pages, des tests de convivialité, le partage en direct, la modification et un retour au tableau de bord.
Au bas de la page se trouve un autre petit panneau qui vous permet d'afficher les éléments interactifs, d'afficher ou de masquer des commentaires et de partager le lien du projet avec d'autres personnes.
