Transcription
1. Introduction: Salut Menace Jo Jo et baser San Francisco. Je fais du design UX depuis plus de 12 ans. Ceci est un cours de niveau débutant et je vais vous enseigner un aperçu de haut niveau de l'efficacité que vous XT n'est pas processus. Je vais vous apprendre à concevoir et créer du poids Page à partir de zéro sera éteint et
soulignera quelques meilleurs processus très importants. Et je vais vous montrer comment tirer parti du libre vous a fait aimer pour gagner du temps. Ce cours est pour les personnes qui sont nouvelles à être éteintes ou vous processus d'ami supplémentaire pour un graphiste ou pour les débutants qui veulent vous apprendre le design X. Dans cette classe, vous apprendrez un aperçu du bon processus de conception UX. Comment utiliser des outils utiles de base dans Adobe XY. Comment créer une information, l'architecture et l'utilisateur pour la façon de créer des amis faible et haute fidélité y dans Adobe X'd comment partager et déplacer votre conçu pour les développeurs, les détenteurs
épais et les utilisateurs ou critique et commentaires. Donc, si j'ai déjà ils restent à un excellent processus efficace et n'oubliez pas de me
suivre et de voler la part
2. Comprendre la conception (haut niveau): conception UX dans la conception en général est de résoudre des problèmes de pensée critique, créer des expériences et de rendre visuellement attrayant et de bon goût ou même mémorable lorsque l' utilisateur expérimente ces lignes. Ne pas bien, les gens ne devraient pas vraiment remarquer du tout lors de l'utilisation du problème du produit. Travaillez nous. C' est supposé et être très intuitif. Bon design. Il crée des moyens de rendre l'information et la messagerie faciles à comprendre et à digérer chaque élément utilisé dans ceux-ci. J' ai été choisi pour une raison, et ce n'est pas là par accident. Étape 1. Comprendre l'aspect le plus important du désir de haute qualité est de vraiment comprendre l'utilisateur . Cela peut être fait assez facilement avec certaines techniques et questions. Nous devons demander et répondre à cette étoile avec l'utilisateur. Une fois que les problèmes auxquels l'utilisateur est confronté sont connus, nous pouvons commencer à réfléchir à la solution. Mais avant de concevoir vraiment la solution, nous devons travailler sur un autre aspect de la conception qui façonnera notre solution. Deuxième étape. Recherche Tout d'abord, nous devrions commencer à comprendre la marque. Comment est le projet ? Je travaille à m'aligner sur la marque pour comprendre la mission et les objectifs avant de passer
à l'étape suivante. Nous voulons identifier les problèmes des utilisateurs et la cour du cerveau et voir comment ils s'alignent avant d'aller dans la conception de la solution. Un bon processus de conception nous oblige à nous assurer que nous comprenons vraiment nos utilisateurs bien observer utilisateur dans leur environnement naturel pour le produit existant et essayer d'entrer dans leur tête en posant autant de questions que possible, comprendre ce qu'ils tentent d'atteindre, ce qu'ils aiment et n'aiment pas. Qu' est-ce que les utilisateurs ni veulent et attendent ? Quels sont les points douloureux ? Et nous pouvons utiliser ces informations pour former persona utilisateur. Étape suivante test utilisateur au stade précoce. Nous n'avons pas besoin d'interroger des millions d'utilisateurs. Le moyen efficace de tester au stade précoce est le test 3 pour lutter contre les utilisateurs ciblés avec un prototype de faible fidélité. Il va gagner du temps, et cela nous donne assez de données pour aller de l'avant avec le projet. Troisième étape sur les poux. Une fois que vous avez toutes les recherches, prenez toutes les données que vous avez et disposées visuellement dans yusor personas. Cela sera utile chaque fois que vous aurez besoin de revenir en arrière et de comprendre les utilisations également. Vous avez dit que personas sera un guide très utile lors des prochaines étapes de la conception. Si nous voulions travailler sur le site Web existant ou une application. Nous commencerons à analyser les données enregistrées. C' est tout ce que nous. Ils vont vers vous et c'est tout ce qui vient encore et encore des utilisateurs potentiels et qui
découvrent comment pouvons-nous nous rencontrer ? Il s'agit des besoins des intervenants et de l'utilisation. Il a besoin d'étape pour commencer à construire une étoile de conception réelle en créant l'
architecture d'information pour définir le contenu, hiérarchie et la recherche de chemin. Commencez à trouver une utilisation de flux, qui est comment l'utilisation de passer du point A au point B dans l'application et comment l'application interagit avec l'utilisateur. Lo Fidelity épouse amie est comme un plan de la star du design. Ceux-ci je bas pour le seul ami de fil pour faire passer l'idée, et il peut être partagé et obtenir des commentaires. Commencez à tester avec les utilisateurs en prototype. Observez comment ils l'utilisent. Est-ce qu'ils sont confus ? Est-ce que l'année est assez plusieurs ? Est-il facile de financer l'information ensemble restaurant de commentaires et raffiné et de s'assurer qu'il est encore besoin objectif d'entreprise et les besoins des utilisateurs. Après la conception, la critique, rétroaction et la reconception et la reconception un peu plus, vous
souhaitez partager constamment notre ami épouse faible fidélité, prototype pour tester et recueillir des commentaires avec le ting. Il ne fait que s'améliorer avec les collaborations avant nous. Ce sont des cadres en fil haute fidélité avec votre brainstorm, le sein ou et ils ont l'air et la sensation pour la conception visuelle globale. Ceux-ci je suis la couleur du motif, topographie, les icônes de
boutons, les images et plus encore. Finalisé le loyer de la femme de High Fidelity et travailler avec le développement afin de couvrir que ceux-ci ne sont pas dans un vrai produit. Cela nécessite la collaboration d'amour avec les développeurs, discussion
continue T retour et les sections de révision. Plusieurs vérifications critiques et il orations conduiront à la conception finale, qui fonctionnera bien pour tous les utilisateurs. Étape 5. Déjeuner Après le lancement de la Prada, il est plus à faire, c'est le moment de l'analyse des utilisateurs de Rio. Nous devrions nous poser des questions telles que. Comment les utilisateurs réagissent-ils ? Où nous luttons ? Est-ce que nous résolvons leurs problèmes en rial ? Les commentaires des utilisateurs nous aideront à comprendre nos erreurs et à obtenir des idées d'améliorations. Nous pouvons aller et nous trouvons le design pour la prochaine version du produit. Vous pouvez suivre toutes les étapes comme sûr pour la prochaine version du produit. Avec un certain reflet des commentaires des utilisateurs, vous obtiendrez des connaissances précieuses que vous pouvez utiliser pour vous assurer que les futurs projets et la conception incorrecte pour plus de fluidité
3. Outils de base Adobe XD: quand vous déjeuner sera XY. L' écran de bienvenue fournit un point de départ pour votre désir, et il comprend une ressource utile est de vous aider à démarrer. Lorsque vous êtes prêt à créer une nouvelle conception, cliquez en dessous de chaque préréglage pour, sauf pour les tailles supplémentaires. Une fois que j'ai créé un nouveau fichier, la première chose que je vais faire est de sauvegarder le fichier et de le lire. Vous avez des options pour l'enregistrer sur le tissu ou sur votre ordinateur. SS Le Mac significatif au sommet. Ils sont trois modes dans Adobe X'd conception prototype en partage. Utilisez-les. Je suis vieux. Pour concevoir les écrans, utilisez des interactions prototypes de fil de moto qui simuleront le flux du potier que vous concevez. Utilisez votre vote lorsque votre projet est prêt à être examiné. Tu es forte tournée pour dessiner. Objet sur votre sont pauvres En maintenant la touche Maj, vous pouvez dessiner un carré parfait à travers un but. En triangle, vous changez de crayon comme la touche Maj. Dessinez quelques lignes sinueuses avec la guerre de Penta. C' est une école de technologie. Je les souligne simplement et vous pouvez aller au panneau de propriété ici sur votre
droite . Juste pour laisser votre fonds préféré que vous voulez utiliser et changer la taille du fonds et le plaisir. Attends si tu veux. Utilisez le panneau SS pour gérer les couleurs, les cellules de
caractères et voir les taureaux de sorte que comme un objet peut appliquer le collier LA Kings panneau vous
permet d'ajouter appliquer et gestionnaire de Hawkings.
4. Architecture d'information: architecture de l'information. Nommez le fichier et saurez, cette paille ou un cercle et coloriez-le. Ajout d'une étiquette. Cole Home et Union Cane. Changement de style Fun à votre goût. Stock tirage Quelques lignes picotements. Deux pages sont connectées sous la page d'
accueil. Avoir la page de premier niveau dans la page de deuxième niveau comme exemples pour cette classe. Vous pouvez faire plus de pages dans les détails pour votre projet. C' est ça . Voici notre architecture d'information. Maintenant, vous pouvez clairement voir comment la taille du Web structuré.
5. Persona: persona passer par ce truc. Ouvrez le fichier personnel que WAAS dans la bordure fournie importer d'abord l'image
personnelle le R 4. Si vous êtes couramment,
voici le contenu dans la mise en page de conception d'un temple, il appuie sur le décalage commun et je deux important L'image. Maintenez la touche Maj enfoncée lorsque nous dimensionnons l'image pour éviter la distorsion. Maintenant, je voudrais embellir. Disposez un peu en ajoutant des couleurs dans de nouvelles tailles de téléphone rigides pour améliorer la
hiérarchie visuelle , en ajustant la taille du téléphone pour rendre la mise en page plus équilibrée et facile à
remonter remonter bord. Pour obtenir ce panneau de réparation ici, vous pouvez activer et désactiver la grille dans cette ligne de panneau. L' envie. Aligner un peu plus de quelques pieds. Teoh Moose Ce fichier personnel nous est votre base pour le futur projet.
6. Flux utilisateur: vous, monsieur. Flow open, Avoir un nouveau fichier, prénom et enregistrer le fichier. J' appellerai un flux de yusor. Et cela a fait la même chose pour les Knicks hors-bord, et nous utilisons des tiques vers trop rapidement. Dans mon téléphone, vous avez dit des informations que je protecteur que nous avons créé plus tôt nous le guide pour exposer le flux Nous sommes en train de créer la page d'accueil sur cette page partie de cette page. Maintenant, il y a ce picotement pour la page d'accueil, un logo texte pour la page sur la page d'accueil. Je veux avoir une couche de trois icônes d'action goto que beaucoup appuyez sur le changement à venir I pour importer les icônes. Je vais utiliser la même chose pour eux vous-même. Flux. Je vais créer à la voiture. Allez à la sélection de l'université ici. Pas seulement n'importe quelle couverture que vous préférez dans l'outil d'alignement Lisa de même taille pour aligner
les objets sélectionnés . Ajout de la page Action cacao. - Maintenant ce haut de la page logo et ces deux icônes à l'âge inférieur pour le pot une page. Je veux seulement montrer des images de beaux produits. Tout le monde veut un solide par picotement pour moi présenter les images du produit. J' utiliserais le bleu plus clair pour les images de l'espace réservé en maintenant la touche d'option pour dupliquer les images pour le pot de page détaillée, j'aurai une image de grande taille et une description pour les produits que nous étions. Angle droit indique les descriptions de texte. Vous pouvez également redimensionner le graphique en entrant la taille dans la ligne du panneau A du composant et réalignant la mise en page jusqu'à ce que vous en soyez satisfait. Il s'appuie sur les erreurs pour fournir la direction et l'interaction. Le cercle indique un lien. Utilisez la broche pour aller au drame. Pourquoi cela peut serrer la couleur a rencontré la taille du trait, aussi. Cela crée un autre lien de l'image du produit au produit,
at-il dit à Paige. - Je
vais dupliquer l'indicateur infligé, donc je n'ai pas besoin de dessiner à nouveau comme ça. Appel à l'action sur la page d'accueil pour les détails du produit. Page ceci à une autre action kowtow vers un produit jusqu'à ce que page ceci. Copiez le bouton sur la page d'accueil pour faire. Ce n'est pas cohérent pour moi. ai pris les détails pour les nombreux articles si vous voulez, mais je vais sauter la liste pour cette démo hier soir. En désintégration, le bâton est lié au panier. Euh, c'est ça frappe un exemple de haut niveau d'utilisation de flux
7. Wireframe faible fidélité: Fil quotidien Lofa. Amis Open Pre mate Low Fidelity épouse ami que WAAS fourni dans l'eau de classe. Cela mâche des fils pour le site de temps particulier pour naviguer à travers ces éléments réutilisables. Ouvrez un nouveau fichier et enregistrez-le sur le bureau. Et rappelez-vous à eux le tableau d'art. Utilisez les architectures d'information que nous avons créées comme guide pour mettre en page votre site Web. Maintenez la touche d'option enfoncée pour dupliquer l'hors-bord. La première chose que je mettrais sur le site, c'est un logo. Donc cette étoile qui met un logo dans notre femme. Les amis importent les icônes fournies dans une bordure transfrontalière. Ou vous pouvez en créer un nouveau à partir de zéro qui correspond à votre marque. Nous avons des terrains de shopping icône de menu à la recherche, et nous allons utiliser ces trois icônes sur tout le site. Cela a rendu le tout bleu comme le kit d'amis de fil. Allumez la grille. 10. Aidez à positionner les objets. Il est également utile pour créer un site web réactif en bref et voir des copies pour décrire le produit. Revenons à la femme Frank il et copié des éléments que pour notre projet, chaque page d'accueil est un grand votre image. Donc, la musique et voir les éléments actuellement promus quand ils prêtent aux sites. Un appel permanent à l'action est important pour ce site Web de Thomas. L' espace de maintien est venu à saisir dans la fenêtre. C' est ajouter Carrousel, se plaindre à la page d'accueil pour promouvoir le bas. Je voudrais juste utiliser des cercles pour Carrousel pour ces projets. Notre page d'accueil sport copier maintenant tout de la maison, page notre planche et le coller sur la page d'accueil avec nettoyage dépensé utiliser tinkle toe qui commence à elle. D' abord, j'étais à un mandat de perquisition. Placez des tests d'eau pour vous rappeler ce qu'il faut faire dans le champ de texte. Ajoutons beaucoup d'éléments énormément. Les liens de détail peuvent être ajoutés à l'architecture d'information. Pour cette version courte, nous n'en avons pas besoin maintenant. Je veux ajouter une ligne de séparation pour différencier les différentes sections pour une meilleure
hiérarchie visuelle . Je remettrai le local au menu. Ça va cendre les icônes des médias sociaux financer l'ami de la femme pré mai. Ce passage à la partie d'une page à nouveau. Cela réduit cet élément que nous avons déjà créé. Logo sur les inconvénients et l'espace réservé de l'image récite l'image pour représenter la Plata à un
nom de produit et stylisé les polices. Ce qu'on fait ici, c'est revenir en
arrière, arrière, arrière, en arrière. Une fois que je suis satisfait de l'aspect, de la sensation et de la position, je commencerai à impliquer. Gardez l'image dans le produit, passez par la propriété et cliquez sur Creepy. J' aime montrer 12 produits pour cette page au hater vers la page. dernier écran est HelpAge de notre parti. Je voudrais agrandir l'image pour mettre en valeur les produits. Ajouter hater subhater dans la description. Utilisez le rhum. C' est un peu pour notre description de l'espace réservé. - Copier icônes e de l'ami de fil de crémate Dernière ajouter un appel à Action Bouton un Dernier Pain,
Adelie épouse, France Born.
8. Wireframe haute fidélité: Salut, ami
Fagili. Il suffit de prendre le pain un front de fil quotidien et re enregistrer une scie haute fidélité loin de je
vais juste utiliser un court chaque œil pour haut et ce creuser avec même pour tous les vers le haut et lire Nom il Cliquez sur l'image Place quartier inclure idiot que les importations et votre image de la classe
fournie. Pour commander ceci. Choisissez l'image de la boucle d'oreille perle dans le quartier Image. Prochaine compétence Edo. Envoyez l'image à l'arrière. Maintenant, cela à une autre grille habituellement utilisé 24 colonnes pour la tombe afin que nous puissions mesurer la position des objets. Est remplacé le logo par le logo rial qui est fourni dans la classe quatre ordre, puis changer la couleur des éléments pour apporter collier. Pour cela, j'utilise, euh, a de la couleur. 33333 comme le collier d'introduction et cette annonce qui couvre dans le panneau Actifs sur le
côté gauche . Et maintenant, il y a changé le bouton dans cette DUI. Pour tous les boutons et les icônes du carrousel. Aussi les icônes pour le menu, panier et la loupe. - Passons à un deuxième aéroport. abord, cela a renommé nos conseils, qui haut pour Delhi ami fil, et puis ce retour à la première sont pauvres, puis copier le Al Amends. Jusqu' à présent, le premier notre conseil et D le Loaf Adelie éléments sur Second sont pauvres. Puis de nouveaux éléments sur le malade et le hors-bord. Maintenant ça. Remplacez ce logo, puis ceci. Comme les éléments qui se trouvent dans la section de menu. L' Angleterre a essayé Teoh et a changé l'Element Qala à votre goût dans ceci au Grey College. Il suffit de regarder. Et puis cela a fait le I horizontal dans le rose. Et enfin, il a changé le dos sur la couleur du menu. Et maintenant, c'est le style de rentrer à la maison, perfectionnant le look et la sensation hors des nombreux articles. Les nouveaux éléments ajustent les éléments à la position parfaite dans la taille, et une fois que vous êtes satisfait de l'aspect et de la sensation, c'est que nous pouvons passer au troisième hors-bord le détail du produit Page Sam T. Tout d'abord, cela remplace local et icônes et deuxième ce collier de test de match au cerveau, ouvrir la bordure de l'image. Et ainsi, comme les images de Bata et maintenant la magie. Il va arriver par glisser-déposer cette image que nous venons de la sélectionner dans la
grille répétée , et cela fait la même chose pour le Tex et un. Et enfin, la dernière page de la page détaillée du produit. Remplacez le logo et les icônes et faites correspondre. Cela a tapissé le cerveau et changer les couleurs de l'icône de boutonnage. Maintenant, il s'appelle l'appel à l'action et deux chariots et ce parfait positionné pour l'icône qui est clic ,
drogue
en cliquant sur la drogue à la 2ème 1 Je veux.
9. Prototype interactive: type de portail interactif Cliquez sur Thea Pores que vous voulez dire que l'écran d'accueil cliquez sur la grande icône dans le coin supérieur gauche. Bleu indique que sont pauvres est envoyé avec succès nous l'écran d'accueil. Cliquez sur l'objet que vous souhaitez quitter Select Shop maintenant, puis faites-vous glisser vers la page. Tu aimes relier Teoh. Revenons à la page d'accueil dans select et non pas un appel à l'action et un lien vers la page. Cela rend le local revenir à la page d'accueil est de cliquer sur l'Année dans le bouton et Naked, lié à la page Fatah. En fait faire le menu, mais lui revenir à la page d'accueil. Maintenant, il y a le bouton Faire la boutique maintenant lien vers la page vidéo parodie et bas revenir à la page d'
accueil. Un autre bas Golding Retour à la page d'accueil. Ce lien. Entendre trois images au produit. Ito Page. Maintenant, il a joué Icône dans le coin supérieur droit et vérifier le travail en faisant défiler vers le haut et vers le bas. Assurez-vous que tous les liens étaient correctement. Après avoir passé l'examen des liens, nous pouvons commencer à partager. Je vais travailler pour l'équipe pour P retour, euh, verse le point culminant dans
l'allié bleu Ah, ceux seront partagés. Il y a cinq préréglages du bâtiment, révision de la
conception, présentation
du développement, tests
yusor et personnalisés. Ce choix de développement pour ce projet par défaut. actifs globaux désactivés sont sélectionnés. ID nécessite uniquement un mot de passe pour ce projet. Cliquez sur Créer un lien pour télécharger le projet après son téléchargement, cliquez sur le Total généré votre L cliquez sur l'icône Bubble. Vraiment commentaires et utiliser la broche pour épingler la zone, vous mentez pour mener commentaire. Voici un moyen que vous pouvez voir le commun que l'utilisateur a fait l'icône de mixage. C' est dans l'icône de développement ici. développeur du visualiseur peut voir les spécifications de conception. Ils peuvent copier les actifs CSS Coal ou Donald. C' est très pratique.
10. Se terminer: merci beaucoup d'avoir créé votre projet avec capacité. XY J'espère que tu t'amuses à apprendre avec moi. Je crois vraiment qu'il est une application puissante pour obtenir votre idée croix si vous avez la première minuterie, Un graphiste, J'espère qu'il vous aide à donner vie à vos idées. Et j'adorerai le voir. Vous pouvez me suivre sur encore partager votre libre pour m'envoyer un message sur les réseaux sociaux via instagram ou chez moi sur allonger Et merci beaucoup pour regarder.
Jill Chu, Product Designer
