Écrire, concevoir et publier une étude de cas UX | Portfolio UI/UX

1. Bande-annonce: Vous parcourez Behance et vous voyez une étude de cas magnifiquement conçue et qui raconte une histoire captivante, et vous pensez, wow, je ne pourrais jamais le faire. Eh bien, il est temps de repenser ça. Je suis Maddy Beard. Je suis concepteur de produits et créateur de contenu design. J'ai travaillé pour des agences, des petites entreprises, grandes entreprises comme Adobe et startups technologiques effectuant des travaux de conception stratégique. [MUSIQUE] Tout au long de ma carrière, comme la plupart des designers, j'ai compris l'importance de réaliser des études de cas. Que vous souhaitiez décrocher un nouvel emploi, accroître votre crédibilité en tant que designer ou simplement partager votre travail avec la communauté qui garde votre portefeuille d'aujourd'hui, est extrêmement important. Croyez-moi, je comprends, il peut être tentant de terminer tout le travail acharné d'un projet, de poster quelques photos sur Instagram ou votre site Web, puis de passer à autre chose. Mais il vaut la peine de prendre un certain temps pour élaborer une étude de cas convaincante pour chaque projet que vous effectuez, il s'agisse d'un projet personnel, d'un projet pour un client indépendant ou pour l'entreprise que vous êtes travaillant chez. Dans ce cours, je veux vous aider à prendre tout ce travail génial, parfois désordonné d' un projet récent et à le façonner en quelque chose qui raconte une histoire et met en valeur vos forces en tant que designer. Vous serez en mesure d'utiliser ce processus pour les projets et projets précédents à venir. Ce cours est destiné aux concepteurs UX et produits à n'importe quel niveau, que vous souhaitiez montrer un projet à partir de l'école, afficher l'un de vos projets clients les plus récents ou que vous soyez dans l'industrie depuis un et vous voulez simplement une nouvelle façon de présenter vos études de cas avec un peu plus d'intention. Les vidéos qui suivent vous aideront à sortir avec quelque chose dont vous êtes vraiment fier. Voici ce dont vous aurez besoin, un projet que vous avez terminé récemment, j'espère avoir des notes ou des croquis ou tout type de travail de processus, Google Docs, Apple notes, ou quelque part pour décrire le contenu, accès à Adobe XD, Figma ou un outil de conception similaire. De jolies maquettes d'appareils que je peux vous pointer vers certains de mes favoris et un portfolio en ligne tel que Behance ou votre site personnel. Je vais vous guider à travers ces leçons en utilisant un exemple principal, une étude de cas que je vais réaliser pour un de mes projets les plus récents et parce que toute évidence, mon style n'est pas le seul style Je vais partager des tonnes d' autres exemples en cours de route. Les études de cas sont de loin la principale chose sur laquelle on me pose des questions sur mon Instagram et YouTube, donc je suis vraiment ravi de vous montrer enfin ce processus complet que vous pouvez faire vous-même. Plongeons directement dedans. [MUSIQUE] 2. Aperçu du projet: Le projet de ce cours consiste à créer une étude de cas solide à partir d'un projet déjà réalisé. Peu importe qu'il s'agisse du 1er ou du 31e projet que vous avez jamais réalisé, vous n'avez probablement jamais abordé études de cas exactement comme celle-ci auparavant. Au fur et à mesure, n'hésitez pas à mettre vos propres touches et suivre votre propre chemin si vous avez des idées différentes de ce que je montre. Mon travail consiste simplement à vous guider ce processus et à vous montrer ce qui fonctionne pour moi pour créer une étude de cas intéressante à lire et à examiner. abord, nous allons commencer par rassembler tous les éléments de votre projet. Ensuite, nous allons décrire et écrire le contenu. Ensuite, nous allons concevoir l'étude de cas dans Adobe XD, mais vous pouvez utiliser n'importe quel programme que vous souhaitez. En cours de route, je partagerai des conseils et des tutoriels sur des choses que vous voudrez peut-être inclure dans cette partie. Enfin, nous examinerons les meilleurs moyens de télécharger et de publier vos études de cas sur Behance, si c'est là que vous décidez de les présenter. Bien sûr, vous pouvez également le présenter sur votre site de portfolio personnel. Je vais partager une étape d'action à la fin de chaque leçon. Je vous recommande de me suivre tout au long de ce processus et de publier votre travail ci-dessous dans la section discussion pour obtenir des commentaires et poser des questions. Mais bien sûr, vous savez comment vous apprenez le mieux, alors n'hésitez pas à suivre la classe à n'importe quel rythme que vous souhaitez. Tout nouveau projet peut sembler intimidant, mais je vais vous guider à travers des étapes simples et simples pour que si vous suivez ce cours, vous aurez une étude de cas terminée d'ici la fin. [MUSIQUE] 3. Types d'études de cas: Au cours de mes recherches pour ce cours, j'ai examiné des dizaines d' études de cas et j'ai trouvé cinq catégories différentes dans lesquelles la vôtre pourrait s'intégrer. Jetons un coup d'œil à chacune elles et décomposons-les afin que vous puissiez déterminer le type d'étude de cas que vous allez réaliser pendant ce cours. Amélioration numéro 1, un produit existait déjà et l'objectif de votre projet était de l'améliorer d'une manière ou d'une autre, peut-être par de meilleurs flux d'utilisateurs, nouvelles fonctionnalités ou une meilleure organisation. Cette étude de cas réalisée par Amy Lima en est un excellent exemple car elle est déjà en activité depuis plus de 30 ans, mais ils voulaient pivoter pour vendre leurs polices d'assurance directement aux consommateurs. Pour ce faire, ils devaient améliorer leur expérience utilisateur afin de rendre la tâche assez simple pour que leurs milléniaux démographiques et technologiques ciblés puissent utiliser et faire confiance. Numéro 2, réimaginez. Vous remarquez une opportunité d' améliorer un espace problématique en utilisant nouvelles solutions qui n'ont peut-être pas été implémentées immédiatement. Ce projet de guide télévisé Abdallah Salem fait vraiment bien cela. Ils remarquent qu'il y a plus de choix que jamais en ce qui concerne ce qu' il faut regarder et que ces choix sont très fragmentés et dispersés autour de dizaines de fournisseurs et de plateformes. Leur solution comprenait la recherche universelle, la personnalisation et les recommandations intelligentes. Numéro 3, au sol. Votre projet s'étend de la conception à la sortie d'un nouveau produit. C'est ce que fait mon projet chez Bubble. Je considère que cette étude de cas « Eat Explorer » de Tony Jean a été mise à jour. Il s'agit d'une application de traduction pour les menus de restaurants pour aider à surmonter les barrières culturelles de la nourriture spécialement conçue pour les étudiants internationaux. Numéro 4, visionnaire. Votre projet est de nature conceptuelle et n'est pas nécessairement lié à une entreprise, bien qu'il ait idées futuristes et des opportunités pour les entreprises. Je dirais que les trois études de cas sur lesquelles j'ai travaillé chez Adobe entrent dans cette catégorie. Ce projet, une bonne voisine de Julie Sandusky, est conceptuel, mais il a beaucoup d'opportunités dans le monde réel car il était basé sur recherches réelles et des problèmes de réduction du gaspillage alimentaire par faciliter le partage des aliments au sein des communautés. Numéro 5, point culminant. C'est certainement moins courant en ce qui concerne les portefeuilles, mais il reste certainement un travail précieux. Avec ce type, votre projet est plutôt une analyse d'ensemble de données, montrant les résultats de recherches susceptibles de contribuer à façonner un projet ou d'aider d'autres concepteurs à connaître un domaine spécifique. Cet article de BMR détaille l'état actuel des expériences de paiement et de commerce électronique à travers huit pièges courants et bonnes pratiques. Déterminer la catégorie dans laquelle se situe un projet vous aidera à comprendre l' histoire que vous allez raconter, que nous aborderons beaucoup plus en détail dans les prochaines leçons. Mais la seule action de cette leçon consiste à y réfléchir et à voir si l'un d'entre eux décrit le projet avec lequel vous travaillez. Une fois que vous avez obtenu cela, n' hésitez pas à approfondir l'un des exemples que j'ai montrés. Je vais laisser un lien dans la section des ressources vers une petite base de données où j'ai rassemblé tous les très bons exemples d' études de cas que j'ai trouvés au cours de mes recherches. N'hésitez pas à vérifier cela et je vous verrai dans la prochaine leçon où nous allons commencer à compiler tous les documents de votre projet préparer à déchiffrer cette étude de cas. 4. Compiler les pièces: Avant d'aller plus loin, je voudrais vous donner un aperçu de ce qui constitue une étude de cas convaincante. Quels sont les incontournables, quels sont les bons à avoir ? quoi devriez-vous vous concentrer, sur quoi ne devriez-vous pas vous concentrer ? Maintenant, rappelez-vous que nous allons entrer beaucoup plus en détail sur toutes ces choses dans les prochaines leçons, donc je ne vais pas passer trop de temps sur eux, mais je veux vous donner un aperçu rapide pour que vous puissiez Gardez-les à l'esprit lorsque vous rassemblez vos documents. Mes incontournables sont un problème ou un énoncé d'opportunité. Quels sont les objectifs ? À quoi ressemblerait le succès ? Votre rôle et avec qui vous avez travaillé, non pas les personnes spécifiques, mais leurs rôles et la façon dont l'équipe s'est réunie. Pourquoi avez-vous pris certaines décisions ? Qu'est-ce qui a motivé votre orientation de conception et votre hiérarchisation ? Habituellement, cela prend la forme de recherches, formelles ou informelles. Certains travaux de processus, visuels de vos livrables finaux et résultats ou mesures de succès. Certaines choses intéressantes peuvent être une explication approfondie de vos recherches et de vos résultats, qui peuvent être des citations ou des données, un système visuel ou des directives de marque. Plus d'artefacts de processus tels que l'empathie, les cartes, personas, les sitemaps, les flux utilisateur. Des maquettes interactives pour mettre en évidence des fonctionnalités spécifiques. Peut-être une feuille de route future si quelque chose n'était pas en mesure d'être priorisé ou si certaines initiatives ont été soulevées qui seraient bénéfiques à l'avenir. Enfin, les défis auxquels vous avez fait face et comment vous les avez surmontés. Je tiens à souligner que vous n'êtes pas obligé de le faire et, en fait, vous ne devriez pas inclure toutes ces choses. Si vous étiez débordé d' entendre toute ma liste, imaginez à quel point quelqu'un serait débordé de voir votre étude de cas qui comprend toutes les choses possibles. Le but de ce cours est de vous apprendre à raconter une histoire convaincante. Une histoire convaincante ne comprend pas des tonnes et des tonnes de détails monotone. Gardez toujours à l'esprit votre lecteur. Combien de temps doivent-ils réellement lire cela et comprendre cela ? Il s'agit de rester concis. Mais il est important de tout rassembler d'abord , puis de déterminer ce qui est important et ce qui n'est pas dans la narration. Cette leçon, nous allons tout compiler, et plus tard, nous allons passer au crible ce dont nous n'avons pas besoin. Cela dit, créons un nouveau dossier sur notre bureau et étiquetons le nom de notre projet. Par exemple, je vais nommer mon étude de cas de bulles, puis créer quelques sous-dossiers. Voici ceux que je recommande la recherche, c'est ici que vous pouvez mettre choses sur l'analyse concurrentielle, les données, les enregistrements d'entretiens ou les notes, recrutement de matériel, les sondages, les résultats, etc. Le dossier suivant est celui des esquisses. Cela peut inclure des numérisations de vos esquisses analogiques ou captures d'écran à partir de croquis sur votre iPad ou ailleurs. Ensuite, les fichiers XD, vous avez peut-être différents fichiers pour vos filaires, différentes itérations, vos conceptions finales. Maquettes. Si vous avez déjà marqué quelque chose ou enregistré des visites pas à pas, vous pouvez les placer là-dedans. De plus, vous pouvez y coller le modèle de maquette que vous souhaitez utiliser, mes favoris sont liés ci-dessous dans la section des ressources. Ensuite, vous trouverez les résultats, les analyses de données ou les devis liés à votre solution réelle et à ce que vous avez testé et validé. Il s'agit des résultats des mesures de succès. Enfin, j'ai un dossier appelé Behance, c'est finalement la guerre qui exportera nos derniers fichiers d'étude de cas. Prenez tout ce que vous avez obtenu de ce projet et placez-le dans tous les différents dossiers. Ne vous inquiétez pas si vous n' avez pas toutes ces choses, c'est très bien, mais ne vous sentez pas limité à tous les exemples que j'ai donnés. Vous pouvez suivre votre propre chemin en fonction de votre projet, si vous le souhaitez. Encore une fois, incluez tout plus tard, nous déterminerons ce qui est réellement pertinent. Je vous recommande également de revoir ces éléments au fur et à mesure que vous l' organisez dans les dossiers. Cela rafraîchira votre mémoire car vous n'avez peut-être pas vu ce projet depuis un moment. Une fois que vous aurez rempli ces dossiers avec tous les éléments de votre projet, nous passerons à la leçon suivante, qui décrit votre étude de cas à l'aide de structures d' histoire. [MUSIQUE] 5. Décrivez la structure de votre histoire: [MUSIQUE] Très vite avant de nous lancer dans la rédaction de nos grandes lignes, je veux partager avec vous l'erreur numéro un que je vois commet tant de gens lorsque je passe en revue portefeuilles, et il s' agit de travail de processus . Oui, vous devez vous concentrer sur certains des processus que vous avez effectués, mais cela ne signifie pas définir chaque étape du processus UX. Je pense que tant d'études de cas que j'ai lues par des designers juniors, elles décrivent un processus UX idyllique très générique, ne fait que donner des définitions de différents exercices. Par exemple, quelque chose comme ensuite, j'ai créé une persona utilisateur. Une persona utilisateur est un archétype dont les objectifs et les caractéristiques représentent les besoins d'un plus grand groupe d' utilisateurs, puis ils incluent un instantané de leur persona utilisateur. Cela ne donne aucun aperçu de la façon dont vous êtes arrivé là où vous l'avez fait. Les gestionnaires d'embauche et les autres concepteurs savent déjà ce qu' est un personnage et les clients potentiels qui pourraient examiner votre étude de cas. Ne vous souciez pas de sa définition exacte. Ces personnes veulent savoir pourquoi vous avez déterminé que utilisateurs étaient importants cadre de ce projet, comment vous avez trouvé les informations à l' intérieur et, surtout, ce que cela a aidé. vous découvrirez ou décidez. Pensez à la valeur de cette étape et si ce n'est pas une partie importante de l'histoire, il suffit de la sauter. Je suis toujours ramené à ce point très important de raconter une histoire avec votre étude de cas. Comme n'importe quelle histoire, aucune structure ne sera exactement la même, mais cela pourrait vous aider à y penser comme ça. L'énoncé du problème est votre incident incitatif, le résultat final est votre résolution, et entre les deux, vous aurez un point culminant ce qui est la découverte ou l'action la plus importante qui soit a conduit au résultat final et saupoudré autour du fait que vous aurez d' autres informations qui enrichissent l'histoire et peignent le tableau. Voyons maintenant un exemple avec le projet sur lequel je travaille. Pour chaque histoire, vous devez d'abord créer le décor. Pour moi, je pense qu'il est important de définir qui était l'équipe et quels étaient nos rôles. Maintenant, l'incident incitant ou le problème ou l'opportunité de l'action croissante, je veux inclure mes objectifs, donc quoi ressemblerait le succès, puis quelques filaires, styles américains, caractéristiques hiérarchisation, flux utilisateur et itérations de conception. Tout cela mène au point culminant qui pour cette histoire, est le lancement de notre MVP ou de notre produit minimum viable pour nos utilisateurs bêta. Ensuite, pour l'action suivante, j'inclurai les données collectées et les informations recueillies lors du lancement. Pour ce qui est de la résolution, je vais inclure les indicateurs de succès finaux. C'est la structure de mon histoire, mais n' oubliez pas qu'il existe différents types d'études de cas. Que se passe-t-il si le vôtre n'est pas un projet complet mais l'une des quatre autres catégories ? Prenons une minute pour illustrer structures d'histoires potentielles pour les quatre autres catégories que nous avons décrites dans moins de trois, en commençant par une amélioration. Une étude de cas d'amélioration pourrait ressembler à ceci. Nous avons l'énoncé d' opportunité du problème comme étant l' incident incitatif, puis nous avons des recherches qui nous mènent à hiérarchisation des caractéristiques, ce qui est l'incident incitatif. Déterminer sur quoi nous allons travailler. Nous pourrions rencontrer certains défis, ce serait donc quelque chose à décrire ensuite. Alors que vous faites face à ces défis, vous travaillez probablement sur des conceptions et des itérations menant au point culminant, qui est un lancement de fonctionnalités. Lancer ce que nous pensons améliorer le produit et après cela, en conclusion, nous parlerons bien sûr de savoir s'il a réellement amélioré le produit. Quels ont été les résultats ou indicateurs de succès de ce projet ? Ensuite, c'est réimaginer. Encore une fois, nous commencerons par l'énoncé du problème ou de l'opportunité. Ensuite, nous pourrions inclure du contenu sur l'analyse des solutions actuelles déjà existantes, car si nous réimaginons quelque chose, il y a des chances qu' car si nous réimaginons quelque chose, il y une analyse concurrentielle qui nous avons fait tout au long de ce projet. Ensuite, vous pouvez décrire les principaux moteurs ou, sur la base des recherches que vous avez effectuées, que voulez-vous que la nouvelle solution dispose-t-elle ? En amont de cette nouvelle solution, vous pouvez décrire la recherche, votre stratégie inclut des images filaires et des conceptions. Le point culminant ici est évidemment la nouvelle solution proposée. Ensuite, vous voudrez peut-être montrer les réactions que les gens ont eues face à cette nouvelle solution ou aux résultats des tests que vous avez obtenus. Enfin, comme cela ne fait que réimaginer et qu' il ne s'agit que d'une solution proposée, vous pouvez conclure les étapes suivantes, points à retenir ou un résumé, car ce n'est probablement pas la fin de la route pour ce projet. Ensuite, c'est visionnaire et encore une fois, vous en avez probablement assez d' entendre cela, mais nous commençons toujours par le problème ou l'opportunité. Ensuite, comme il s'agit plutôt d'un projet conceptuel, vous voudrez peut-être énoncer votre hypothèse pour parler des avantages que vous imaginez que cette solution pourrait provenir . Ensuite, commencez à vous lancer dans vos recherches, différentes itérations, peut-être certains défis auxquels vous êtes confronté, tous menant à cette solution potentielle. Ensuite, tout comme la dernière, vous pouvez parler de certaines réactions que les gens ont eues à cette solution potentielle si vous étiez en mesure de la montrer à utilisateurs potentiels ou des entreprises et de la conclure avec quelles que soient les prochaines étapes qui pourraient en découler. Enfin, la combinaison. Ici, vous allez commencer par un problème ou une question. Vous pouvez énoncer votre thèse ou votre proposition et la plupart de cette étude de cas sera constituée de preuves et d'exemples. Le point culminant ici est l'action que le lecteur devrait prendre et après cela, pour conclure , vous pouvez simplement résumer les résultats que vous avez partagés. Maintenant, c'est à ton tour. Allez-y et dessinez une structure d'histoire basée sur tout ce que vous avez appris ici. Il peut s'agir d'un projet que j'ai déjà partagé ou d'utiliser quelque chose d' un peu différent en fonction de votre projet et de le remplir avec ces points d'histoire, en réfléchissant à l'histoire de votre projet déplié. Comment êtes-vous passé du problème à la solution ? N'hésitez pas à prendre une photo ou une capture d' et à la partager ci-dessous dans la section discussion. J'aimerais bien le voir et je sais que d'autres étudiants bénéficieraient d'un tas d'exemples différents. Dans la leçon suivante, nous allons utiliser cette petite esquisse de structure d'histoire pour créer notre plan , puis commencer à écrire la copie qui va constituer votre étude de cas. [MUSIQUE] 6. Rédiger le contenu: Maintenant, il est temps de vraiment se faire craquer sur cette étude de cas. Si vous êtes comme moi, écrire le contenu est de loin la partie la plus intimidante. Mais ne vous inquiétez pas, nous allons décomposer cela en morceaux digestibles. Une fois que vous aurez terminé cette partie, le reste du processus se déroulera naturellement. J'aimerais commencer par ouvrir un nouveau Google Doc. Puisque je déteste commencer par une page blanche, je vais créer un plan à puces basé sur la structure de l'histoire que nous avons déjà créée. Commençons à taper ça. Nous commençons par quelques informations générales. Voici le moment, le qui, et un peu plus d'informations sur mon rôle. Ensuite, l'énoncé du problème. Ici, j'aurai l' énoncé de problème ou l'opportunité. Ensuite, je pense que je veux avoir ici quelques visuels de cette opportunité, et cela aura plus de sens mesure que vous apprendrez à connaître un peu mon projet, alors que nous travaillons là-dessus. Ensuite, j'appelle cette section la route vers le MVP. Objectifs ou à quoi ressemblerait le succès, la hiérarchisation des fonctionnalités, nous inclurons les filaires , les styles d' interface utilisateur, les flux utilisateur , les itérations de conception, et ici je pense vouloir montrer chaque fonctionnalité ou flux. Mettez des visuels. Ensuite, c'est le lancement, de sorte que le point culminant. Parlez du lancement de MVP auprès de nos utilisateurs bêta. Je pourrais commencer à parler de marketing, alors comment nous avons obtenu les utilisateurs de la bêta. Après ce lancement initial, je parlerai des défis et des améliorations, sorte que certaines données collectées et des informations que nous avons recueillies, plus de hiérarchisation des fonctionnalités et d'autres itérations. Enfin, la résolution sera des indicateurs de succès, des points à retenir et des apprentissages. Maintenant que nous avons ce squelette avec lequel travailler, nous pouvons prendre les prochaines heures, peut-être beaucoup plus vite si vous êtes un rédacteur rapide, et commencer à ajouter quelques explications à chacun de ces points. Je vais le faire maintenant et revenir parler de la façon dont je l'ai abordé. Je vais passer par là à un niveau élevé, mais bien sûr, vous pouvez jeter un coup d'œil à l'étude de cas en direct si vous voulez lire chaque mot. Tout d'abord, passons en revue les informations de fond. J'ai décidé que je voulais inclure la chronologie, les membres de l'équipe, puis un peu plus sur mon rôle puisque mon rôle n'était pas seulement dans la conception de produits, mais j'ai fait beaucoup d'autres choses aussi. Je voulais m'assurer que c'était clair. Ensuite, j'ai pris le temps d' écrire mon énoncé de problème. Cela m'a vraiment pris du temps. Je vais le lire pour vous, car c'est l'une des parties les plus importantes de l'étude de cas. Une grande partie des choses juteuses sur les réseaux sociaux se produisent dans la section commentaires. Puisque les réseaux sociaux évoluent de plus en plus vers un contenu vidéo abrégé, pourquoi ne pas commenter le même pas ? Nous remarquons que cela se produit déjà, mais il n'existe pas d'excellents outils ou plateformes qui l'encouragent. Ce contenu de commentaires qui pourrait être si riche, drôle, informatif ou perspicace, se sent tout simplement amateur. Donc, le problème. J'ai noté ici que je voulais inclure un visuel de l'effet d'écran vert sur TikTok parce que c' est un exemple de ce qui se passe déjà, mais cela semble vraiment amateur parce qu'il y a n'est pas beaucoup qui aide les gens à faire cela. Cet effet d'écran vert est bon, mais il est super glitchy et n'a tout simplement pas l'air très professionnel. Ensuite, nous saisissons l'opportunité. Nous avons profité de cette occasion pour créer Bubble l'application de commentaires de vidéos sociales qui permet aux utilisateurs de saisir n'importe quel contenu sur le Web, d' enregistrer un court commentaire vidéo par-dessus et d' obtenir des réactions de leur amis. Tout cela est mon problème et mon énoncé d'opportunité. Ensuite, j'ai ça qui pose un peu le décor, mais pour être honnête, je ne suis pas totalement sûr de l'utiliser ou non. C'est peut-être exagéré. Ensuite, si vous le remarquez ici, je ne nomme pas ces sections en titre du processus UX. Je leur nomme quelque chose de plus spécifique au projet. Cette rubrique principale va s'appeler Road to MVP. J'expose les objectifs et, à cause de ces objectifs, quelles sont les caractéristiques que nous avons fini par vouloir prioriser. Chaque fois que j'ai des points à puces dans le plan, ce seront en fait points puces dans l'étude de cas. Tout ne doit pas être écrit sous forme de paragraphe. Les points puces sont un très bon moyen de faire passer votre point sans forcer quelqu'un à lire autant. J'ai ici d'autres notes sur ce que je veux inclure. Après la hiérarchisation des fonctionnalités, il se peut que je veuille afficher un flux animé pour chacune de ces fonctionnalités. Peut-être des filaires ou une esquisse de carte de parcours pour chacun eux, puis des itérations d'interface utilisateur. Je veux choisir l'un des écrans et montrer comment l'interface utilisateur a évolué de la première itération à la dernière. Peut-être esquisser certaines choses qui sont entrées dans ce processus comme, nous n'avons pas aimé cela à cause de XYZ, cela n'a pas bien fonctionné avec les utilisateurs à cause de XYZ, et montrer comment nous sommes passés de A à Z. Ensuite, je vais vous montrer un peu plus sur le système de conception. Cela n'est pas nécessaire à 100 %, mais comme je l'ai dit, j'ai aussi fait d'autres choses que la conception de produits. J'ai également beaucoup travaillé sur l' image de marque, donc j'ai pensé que ce serait bien de le montrer ici. Je veux souligner certains défis et compromis que nous avons dû faire. Parce que lorsqu'il s'agit d'un MVP, c'est juste le produit minimum viable. Je veux juste montrer certains des compromis que nous avons dû faire. Ensuite, je parlerai du lancement de la bêta, du lancement du MVP et de la façon dont nous avons obtenu ces utilisateurs bêta, un peu de marketing puisque j'ai eu travaux de conception marketing qui ont été réalisés dans ce projet. Après cela, quels sont les points de vue et les améliorations qui en sont ressortis ? Les données que nous avons collectées, et plus précisément l'endroit où je vais obtenir ces données, comme les rapports de bogues que nous avons, commentaires des applications dans l'application Bubble. Plus de hiérarchisation des fonctionnalités, et vous remarquerez ici que vous pouvez lire ce que nous voulons améliorer après avoir reçu des commentaires. Enfin, le lancement public. Quels en ont été les résultats ? Nous avons tous ces résultats que j' ai obtenus et tous les points à retenir dans l'apprentissage. Peut-être que vous n'avez pas toutes ces données, c'est tout à fait correct. Vous pouvez simplement montrer peut-être une citation de ce que quelqu'un a dit lorsqu'il a interagi avec cela qui a montré qu'il pourrait s'agir d'une bonne solution potentielle. citations positives, négatives, des choses comme ça. Vous pouvez également simplement partager vos plats à emporter et les enseignements tirés du projet, surtout s'il s'agit d'un projet scolaire ou de l'un de vos premiers projets, ou d'un projet de bootcamp. Tout ne va pas avoir toutes ces données, et c'est tout à fait très bien. Par exemple, certains des apprentissages les plus personnels que je voulais partager, j'y inclus à la toute fin. Travailler rapidement et obtenir des commentaires dès le début a été quelque chose que j' ai vraiment tiré de ce projet. C'est quelque chose que je n'étais pas très doué avant commencer le projet et j'ai juste appris à quel point il est important et je me suis beaucoup amélioré tout au long de ce travail. Je souhaite maintenant partager quelques conseils généraux pour rédiger ce type de contenu. Tout d'abord, privilégiez les titres et les sous-titres. Cela aidera vraiment à trouver un équilibre entre la profondeur et la digestibilité d'un coup d'œil. est très important d'avoir une étude de cas écumable, surtout pour les gestionnaires d'embauche. Essayez d'écrire comme si vous parliez ce projet à un ami designer. Vous ne seriez pas coincé dans les mauvaises herbes avec les détails, mais vous mettrez en évidence les choses les plus importantes ou les plus intéressantes. Ne définissez pas le processus UX, parlez de ce que vous avez réellement fait et racontez cette histoire. Restez bref. Je n'aurais pas plus de trois phrases par paragraphe. Si une section est longue, pensez à a, coupant les peluches ou b inutiles, divisant en deux sections qui ont chacune un point principal. Revenez à la quatrième leçon si vous avez besoin d'un rafraîchissement sur les incontournables et les plus agréables à avoir. Enfin, n'écrivez pas ce que vous pourriez montrer avec des visuels. Au fur et à mesure que vous écrivez, notez simplement quels visuels vous allez montrer où. Habituellement, je mets ces notes en italique entre parenthèses pour qu'elles se démarquent du contenu écrit. Enfin, n'hésitez pas à consulter les exemples de ma mini base de données si vous êtes bloqué. Mais ne soyez pas paralysé par le piège de comparaison. Le projet de chacun est tellement différent, alors essayez d'y aller avec votre arme. L'action de cette leçon est la plus difficile, mais vous pouvez le faire. Va écrire ce contenu et je vous promets que si vous y réfléchissez, le reste de ce processus se déroulera en douceur. Comme toujours, n'hésitez pas à poser des questions dans la section discussion, et je serais heureux de vous aider si je le peux. Au cours de la prochaine leçon, nous allons ouvrir Adobe XD ou l'outil de conception de votre choix, et préparer votre fichier . Revenez et je vous verrai dans cette leçon quand vous serez prêt pour cela. [MUSIQUE] 7. Configurer votre fichier Xd: Quand il s'agit de configurer votre fichier, deux options s'offrent à vous. Il est maintenant temps de décider si vous souhaitez optimiser votre étude de cas pour Behance ou votre site personnel. Je vais vous montrer rapidement comment faire les deux. Mais quels sont les avantages et les inconvénients de chacun ? À mon avis, vous ne pouvez pas vous tromper avec Behance, surtout si vous êtes à la recherche de nouvelles opportunités ou si vous souhaitez faire passer votre travail devant d' autres designers, Behance est c'est un endroit idéal pour ça. Parce que j'ai été présenté sur Behance, je reçois de nombreuses demandes d'emploi dans mes DM Behance. Cela dit, lorsqu'il s'agit de Behance, il y a beaucoup moins de flexibilité en termes de présentation de votre contenu, en particulier de votre texte. C'est pourquoi j'adopte l'approche de conception que je fais en présentant tout le texte dans Adobe XD et en les exportant au format PNG. Cependant, avec cette approche, vous ne pouvez pas optimiser d'autres points d'arrêt, particulier mobiles, donc j' essaie généralement de garder le texte plutôt volumineux. Cela m'amène aux pros de l' optimisation pour votre site personnel, comme sur Webflow, Squarespace, ou partout où vous hébergez et créez votre site Web. Si vous le faites, vous pouvez traiter cela comme un projet de conception de page Web réel, car vous avez réellement le contrôle de la mise en page exacte et de la façon dont elle évolue sur différents points d'arrêt. L'autre pro de cela est d'avoir votre propre petit espace sur Internet vous donne généralement l'air un peu plus professionnel et vous avez un contrôle total sur ce que l'utilisateur voit en regardant. votre étude de cas. Ce sont les avantages et les inconvénients à mon avis, mais pourquoi ne pouvez-vous pas avoir le meilleur des deux mondes ? Il existe en fait deux façons de le faire. Numéro 1, possédez votre propre site Web personnel et, dans la section Travail, créez des miniatures pour chaque œuvre reliée au projet Behance correspondant. C'est ce que je fais maintenant. Notez que le projet Behance est ouvert dans un nouvel onglet afin que les utilisateurs ne soient jamais retirés de mon site. Numéro 2, optimisez votre travail pour Behance sur Behance, mais aussi une version sur votre portefeuille personnel. En fonction du nombre d'études de cas que vous possédez et de leur profondeur, cela peut prendre beaucoup de temps. C'est quelque chose que j'ai personnellement voulu faire depuis longtemps, mais je n'ai pas encore pris le temps de le faire. La bonne nouvelle, c'est que si vous décidez de commencer par Behance, vous pouvez toujours utiliser le design Behance que vous créez et y revenir plus tard pour le construire dans Webflow ou Squarespace. Vous n'avez pas besoin de concevoir des mises en page complètement différentes. Cela dit, la seule différence dans la façon dont vous configureriez votre tableau artistique pour chaque approche est la hauteur de vos tableaux artistiques. Si vous décidez d'optimiser Behance, vous allez créer une pile verticale tableaux d'art de 1920 pixels de largeur sur 1080 pixels de hauteur. Gardez toujours la même largeur, mais vous pouvez varier un peu la hauteur et cela n'aura pas d'importance. Ensuite, sur le côté, créez un autre tableau d'art de 808 x 632 pixels. Il s'agira de votre vignette. Si vous mélangez complètement Behance et que vous souhaitez simplement utiliser XD pour concevoir la mise en page de la page que vous allez créer dans votre créateur de site Web. Vous allez simplement concevoir sur une seule carte graphique de 1920 pixels de large qui finira par être aussi longue que vous le souhaitez. Ensuite, je recommande également de créer une longue planche d'art avec une largeur adaptée aux mobiles. J'utilise 375 pixels car c'est la plus petite largeur de téléphone commune. Gardez à l'esprit que la création d'une page Web dans Webflow ou Squarespace ne fait pas partie de cette classe. [MUSIQUE] Si vous n'avez pas encore d' expérience dans ce domaine ou vous n'avez pas de portfolio personnel pour le moment, je vous recommande de rester avec Behance pour le moment. C'est à peu près tout pour la configuration, assez facile. Nous allons ensuite remplir votre panneau des ressources de conception et votre fichier XD avec tous les styles dont vous aurez besoin pour votre étude de cas. 8. Définir vos styles: Maintenant que notre fichier XD est entièrement configuré, simplifions les choses et remplissons notre panneau de ressources avec tous les styles dont nous aurons besoin à l'avenir. C'est très simple car vous voudrez probablement utiliser les mêmes styles que ceux que vous avez utilisés dans le projet lui-même. Cela peut être aussi simple que de parcourir vos bibliothèques XD et extraire celle que vous utilisez pour votre projet. Si vous ne l'avez pas fait ou si vous ne connaissez pas le fonctionnement des bibliothèques dans XD, c'est vraiment simple. Allons-y maintenant. Il y a trois éléments que vous conservez une bibliothèque, couleurs, des styles de type et des composants. Pour une étude de cas comme celle-ci, les couleurs et les styles de type sont certainement les plus importants. Dans ce dossier de projet je vais juste attirer votre attention sur la gauche où nous avons notre panneau de ressources. Vous pouvez voir que nous avons des couleurs, styles de personnages et des composants. Les composants sont comme des symboles, mais nous allons encore une fois nous concentrer sur les couleurs et les styles de texte. La façon dont vous les faites peupler ici est très simple. Disons que nous supprimons cela pour l'instant, ce rouge, et que je veux l'ajouter. Je ne fais que sélectionner un élément de cette couleur, et je viens ici et je clique sur le bouton Plus, puis nous appelons cet enregistrement rouge. Vous pouvez également faire la même chose pour les textiles. Peut-être que je veux un style pour ce tag, je peux juste frapper plus ici. Mais que se passe-t-il si je veux pouvoir accéder à ces ressources à partir d'un fichier différent comme mon dossier d'étude de cas ? Vous pouvez vraiment facilement le publier en tant que bibliothèque. Nous allons en arriver à cette icône de partage. Cela va me dire que ce fichier actuel est prêt à être publié, alors je clique simplement sur Publier. Maintenant, si je passe à mon fichier d' étude de cas , je peux aller ici, cliquer sur Afficher les bibliothèques, et je peux trouver cette bibliothèque ici où je peux extraire tous ces mêmes styles. Si vous n'avez même pas envie de faire face à cela, vous pouvez simplement copier et coller certains éléments ou écrans de votre fichier saisir les couleurs et les styles de texte et les ajouter à une nouvelle bibliothèque dans cette étude de cas. fichier. Bien sûr, vous ne vous limitez pas à quoi que ce soit ici. Je vais probablement devoir agrandir beaucoup de ces styles de textes, car avant de concevoir une application mobile, je vais maintenant concevoir une étude de cas Behance. Vous devrez peut-être également ajouter d'autres styles de texte, et vous pouvez même modifier les choses et utiliser une police complètement différente. Vous pouvez utiliser différentes couleurs si vous le souhaitez, c'est à vous de choisir, mais c'est tellement plus facile, à mon avis, d'avoir simplement cet endroit où commencer. Il est également important de noter que vous pouvez basculer entre vos bibliothèques et les ressources de document que vous possédez, sorte que ces ressources spécifiques à ce document plutôt que de les extraire d'un bibliothèque différente. À ce stade, vous pouvez également commencer à introduire différentes icônes, logos ou illustrations, si cela est pertinent pour votre projet. Vous pouvez soit les garder sur le côté, soit appuyer sur la commande K et les transformer en composants qui vont vivre dans cette section pour être insérés chaque fois que vous en avez besoin, et nous allons approfondir les visuels dans la prochaine leçon, donc si vous n'avez pas encore quelque chose de ce genre, ne vous inquiétez pas. Une fois que vous avez des styles prêts dans votre dossier d'étude de cas, n'hésitez pas à passer à la leçon suivante où je vais répondre à l'une des questions les plus courantes que je me pose sur mon Behance. études de cas. [MUSIQUE] 9. Obtenez ce look sans couture: [CONTEXTE] Je veux répondre à une question fréquemment posée avant de nous pencher sur la construction de cette étude de cas, comment faire en sorte que mes études de cas ressemblent à une page Web fluide et transparente, page Web fluide et transparente, même s'ils sont composés d'un tas de tableaux d' art différents et la réponse est que des éléments se chevauchent. Permettez-moi de vous montrer quelques exemples. Il s'agit d'une de mes anciennes études de cas et je veux vous montrer combien d'éléments qui se chevauchent j'utilise pour obtenir ce look. Tout d'abord, nous parlerons des éléments d'arrière-plan. Si nous déplaçons cet iPhone pour l'instant, vous pouvez voir que la couleur d' arrière-plan de ces deux tableaux d'art est cette couleur gris beige. Ce que j'ai sur le dessus, c'est cette forme de vague blanche. Ce que j'ai fait, c'est que je l'ai effectivement dupliqué sur ces deux tableaux d'art, donc si vous voyez, si je le supprime, vous pouvez voir qu' il y a en fait deux formes distinctes. Si je clique simplement sur « Commande C » et que je vais sur ce tableau d'art et que je clique sur « Commande V » il va par défaut coller en place. Mais si je me contente de le scotch jusqu' à ce qu'il soit parfaitement en ligne comme ça et que je fais « Commander le support gauche » jusqu'à ce qu' il passe tout à l'arrière. J'ai ensuite créé cette forme qui se poursuit sur deux tableaux d'art différents. C'est juste le contexte. Je le fais dans quelques endroits différents. Ici, j'ai utilisé cette forme de vague verte, au lieu d'avoir cette transition très nette où elle ressemble définitivement à deux tableaux d'art distincts, j'ai eu cette forme de vague verte pour qu'elle s'écoule un peu plus facilement dans ce contenu. Je fais la même chose ici avec cette forme, et je le fais aussi avec d'autres éléments, par exemple, cette maquette d'iPhone, vous pouvez voir qu'il s'agit en fait de deux images différentes. Je l'ai dupliqué sur ce tableau d'art, puis je l'ai repris pour qu' il s'aligne parfaitement et qu'il ressemble une continuation parfaite de l'élément visuel. J'ai fait la même chose avec cette image. Ici, je l'ai fait avec cette maquette. Les gens se font trébucher avec ça parce que tableaux d'art agissent comme des masques. Vous ne pouvez pas simplement jeter un élément entre deux tableaux d'art et obtenir l'effet exact que vous voulez. Au lieu de cela, vous devez le copier manuellement, le coller et l'aligner vers le haut. Qu'il est dupliqué sur un tableau d'art et l'autre. C'est super facile, mais il suffit de zoomer complètement et de vérifier que la suite correspond parfaitement. Il va sans dire que vous devez avoir vos tableaux d'art exactement alignés les uns contre les autres pour que cela fonctionne. C'est ça. C'est un conseil simple, mais cela vous donne la possibilité de faire défiler votre projet Behance en douceur comme un site Web et très flexible avec votre apparence. Essayez-le avec quelques formes , masques ou photos différents et voyez si vous pouvez jouer avec la façon dont cela fonctionne, alors vous serez prêt à appliquer la technique lorsque nous commencerons construire votre étude de cas [ARRIÈRE-PLAN] [MUSIQUE] dans la prochaine leçon [MUSIQUE]. 10. Réalisez cette étude de cas !: Maintenant que vous disposez de toutes les parties nécessaires pour créer cette étude de cas, il est vraiment temps de commencer à les déconcerter ensemble. Allez-y et ouvrez tout ce que vous avez. Vous devez avoir le fichier de conception vide que vous venez de configurer pour votre étude de cas, tous les fichiers de conception de votre projet lui-même, votre plan écrit et votre dossier rempli de notes de projet et de travaux en cours. et des choses comme ça. La première chose que j' aime faire est de créer l'image d'en-tête qui donnera le coup d'envoi de mon étude de cas. Cela peut être dans n'importe quel style que vous voulez. En plus de la chose la plus importante qui est un visuel fort dans cette section d'en-tête, j'aime également inclure le titre de mon projet, une description d'une ligne et un peu d'informations de fond pour un contexte immédiat. Ensuite, je commence à parcourir les différentes sections de mon contour, à copier et à coller la copie dans mon fichier d'étude de cas, l' exposant sur le tableau d'art, et tout le temps en pensant à ce que je peux montrer plutôt qu'à dire. Par exemple, dans mon énoncé de problème, vous vous souvenez que j'ai référencé l'effet d'écran vert sur Tiktok. Je vais montrer une capture d'écran réelle, peut-être même un GIF. Il y a un visuel associé au verbal qui fait vraiment ce qui se passe maintenant et il y a cette opportunité de trouver une meilleure solution. [MUSIQUE] Une fois que j'ai disposé deux ou trois sections, j'aime m'assurer qu'elles s'écoulent bien ensemble et qu'elles présentent une certaine variation visuelle. Parfois, je le fais avec des couleurs d'arrière-plan, parfois avec des formes, des images, des choses comme ça. Une fois que j'ai fait cela, je peux répéter ce modèle tout au long de l'étude de cas en utilisant des styles cohérents d' en-tête et de corps de texte. [MUSIQUE] Comme tout autre élément dans le design, il n'y a pas de formule exacte à ce processus, donc la meilleure chose que je puisse faire est de vous montrer comment je l'aborde et de vous pointer vers d' autres grands exemples dans cette base de données que j'ai mentionnés dans la section des ressources. Mais avec tout ce qui est dit, je veux parcourir différentes façons de présenter des informations visuellement. C'est ce que nous allons faire lors de la prochaine leçon. 11. Présenter les informations visuelles: Tout au long de votre étude de cas, il y aura plusieurs possibilités différentes pour vous de présenter des informations visuellement. Cela va aider l'étude de cas à être beaucoup plus digeste, moins lourde en texte. Il y a huit façons principales que nous allons parcourir : données, iconographie, graphiques, faits saillants, points à puces, citations, images et maquettes. Au fur et à mesure, je vais vous montrer de nombreux exemples tirés d'autres études de cas, donc si vous voulez les examiner dans leur intégralité, consultez simplement la mini-base de données liée dans la ressource section. Parlons tout d'abord des données. Chaque fois que vous parlez de mesures ou de recherches, envisagez de le présenter avec un graphique à barres, un diagramme à secteurs ou quelque chose d'autre visuel que les spectateurs peuvent comprendre d'un coup d'œil. Iconographie, lorsque vous avez une section comportant plus de deux ou trois points différents, voyez si vous pouvez utiliser une série d' icônes pour présenter ou représenter chacune d'elles. Graphiques. Les visuels ne doivent pas simplement signifier des images, des formes ou des icônes. La façon dont vous disposez du texte peut également contribuer à rendre une section plus facile à lire et à comprendre. Vérifiez s'il existe des sections de votre étude de cas dans lesquelles vous pouvez organiser visuellement des idées et du texte. Surlignements, tout comme l'utilisation d'un style de texte plus grand pour vos en-têtes, évidence de points importants est un autre excellent moyen de rendre votre étude de cas plus digeste et plus écumable. Puces, essayez d'éviter longs paragraphes de textes car ils ne sont pas facilement scannables. Utilisez des puces chaque fois que vous le pouvez. Citations, si vous avez un devis vraiment informatif pendant votre recherche ou qui montre l'impact de votre solution. Vous pouvez l'amplifier en le concevant pour se démarquer de votre étude de cas. Imagerie, j' aime personnellement utiliser l' imagerie pour garder mon étude de cas attrayante. Ce type de visuel ne crée pas ou ne brise vraiment pas votre étude de cas. En fait, si vous en utilisez trop, cela peut réellement détourner l'attention de vos points principaux, alors assurez-vous que toutes les images que vous utilisez sont pertinentes. J'essaie généralement de photographier moi-même des images, mais quand je ne peux pas, je compte sur Unsplash. Ils disposent de nombreuses options de qualité supérieure libres de droits. Enfin, des maquettes. maquettes sont un élément très important de la plupart des études de cas, alors assurez-vous d'utiliser ou de créer des maquettes de haute qualité. J'ai inclus certains de mes favoris dans la section ressources de cette classe. N'hésitez pas à les garder simples ou les personnaliser comme cet exemple. Certains d'entre eux peuvent ne pas être pertinents pour votre étude de cas et c'est tout à fait correct. La pire chose que vous puissiez faire est inclure tout et de surcharger votre étude de cas, ce qui rend cela vraiment déroutant et diluant votre message. Donc, en cas de doute, restez concis. Avant de passer à la leçon suivante, voici votre étape d'action. Concevez chaque section en suivant votre étude de cas écrite. Cela peut sembler intimidant, mais tout ce que vous faites, c'est combiner la partie écrite de votre étude de cas avec n'importe quel visuel ou visuel pertinent. Vous avez déjà fait tout le travail acharné de raconter l'histoire. N'hésitez pas à laisser des espaces vides ou à créer des formes d' espace réservé pour toutes les zones dans lesquelles vous souhaitez inclure des animations. [MUSIQUE] Nous allons nous attaquer à cela dans la prochaine leçon. 12. Créer un GIF animé: Mes amis, nous approchons vraiment de terminer ces études de cas. Dans cette leçon, je vais vous expliquer comment créer un GIF animé à inclure dans vos études de cas, peu importe où vous finissez par un GIF animé à inclure dans vos études de cas, publier. Pour mon étude de cas de bulles, il n'y a pas beaucoup d' animation impliquée dans le projet. Pour vous montrer cela, j'ai sauté sur l'un de mes précédents projets et études de cas appelés phase. C'est ce que nous regardons ici. Si vous faites défiler vers le bas, vous pouvez voir que je l'ai conçu comme j'ai conçu mon étude de cas bouillonnée. plans de travail empilés verticaux comme celui-ci ont tous la même largeur. Je veux vous montrer ce que je fais lorsque je décide d'avoir une animation dans l'une de ces sections. Pour cette section, je voulais montrer à quoi cela ressemblerait lorsque quelqu'un a fait glisser sur cette échelle et sélectionné un numéro. J'ai créé une animation simplement en dupliquant ce plan de travail deux fois ici et en manipulant le design. Chaque chose reste la même, à l'exception de ces quelques éléments. [BRUIT] Ceci, je viens de passer aux sept, et cette ligne que je viens traîner pour être assez longue pour atteindre cela. Ensuite, j'ai juste dupliqué cette section sur ce plan de travail suivant et fait la même chose, déplacé ce sélecteur sur huit, puis je l' ai câblé en mode prototype. Si nous passons en mode prototype, j'ai fait un déclencheur temporel et j'ai mis ça en boucle. Après 0,5 seconde, il s'animera automatiquement sur cet écran. J'ai fait de l'assouplissement, de la facilité et de la sortie, puis je viens de faire la même chose ici après 0,7 seconde, puis après 0,7 seconde de plus, ça va revenir au début. Si vous n'êtes pas très familier avec animation et l'utilisation de l'animation automatique dans XD, j'ai des tutoriels sur ma chaîne YouTube que vous pouvez utiliser comme ressources pour y rattraper. C'est ce à quoi cela ressemble ici, c'est ce que vous regardez ici, c'est simplement une animation en boucle qui montre un peu de mouvement ici, ce qui le rend un peu plus visuellement intéressant. Maintenant, afin de capturer cela sous forme de vidéo, ce que [NOISE] veut faire, c'est de revenir en arrière pour lire ce prototype et nous allons juste atteindre un record. Je veux m'assurer que ma souris est complètement hors du chemin, mon curseur, et je vais laisser cela jouer à travers la boucle quelques fois pour m'assurer que nous en avons au moins un très bon plein de l'animation dans cette vidéo. Ensuite, j'arrêterai d'enregistrer et je vais enregistrer ce MP4. Nous avons cette animation ici, et je vais l' ouvrir dans QuickTime Player afin que nous puissions réduire cette animation à un cycle complet. Dans QuickTime, je vais juste appuyer sur Command T pour couper, et je vais juste trouver une boucle [MUSIC] parfaite. Juste là, ça a l'air bien et ensuite je vais faire la commande S pour sauver. [BRUIT] Je vais juste appeler cela coupé, et nous pouvons nous débarrasser de celui-ci plus long là-bas. Maintenant, une application très facile que j'ai appris à utiliser pour transformer un MP4 en GIF s'appelle gifski. Vous pouvez le trouver dans l'App Store. On dirait que dans l'App Store sur Mac, il y a aussi un outil appelé GifTuna que vous pouvez utiliser si vous utilisez un PC Windows, que je pense que c'est la même chose. Nous allons ouvrir ça, [BRUIT] et ça ressemble à ceci, cette jolie petite fenêtre quand vous l'ouvrez, et je vais juste faire glisser ce MP4 directement dans cette fenêtre. Les seuls paramètres que nous voulons modifier sont la largeur, nous allons faire les années 1920, car c'est la largeur du reste de nos plans de travail. Nous voulons nous assurer que la boucle est toujours activée. Nous avons la qualité jusqu'à la hausse et la taille estimée n'est que de 1,9 mégaoctet. cette façon, d'habitude, surestime la taille, je vais vous montrer ce qu'elle finit par être. Je remarquerai que si vous avez une animation beaucoup plus longue, vous devrez peut-être diminuer un peu la qualité, mais d'après mon expérience, cela n'a jamais fait une énorme différence. Il a toujours l'air de très haute qualité, c'est pourquoi j' adore cet outil et c'est gratuit si je ne l'ai pas déjà mentionné. Je vais toucher Converti. Cela a pris moins de 20 secondes, donc maintenant nous allons simplement enregistrer sous, et nous allons l'enregistrer sur notre bureau. Maintenant, je vais simplement sélectionner dessus et cliquer sur la barre d'espace pour prévisualiser à quoi cela ressemblera. Comme vous pouvez le constater, c'est de très haute qualité, la vitesse est agréable, elle n'est pas bruyante ou décalée du tout, toutes les couleurs sont super précises. Si vous aimez ce qui vous semble, répétez le processus pour toutes les autres animations que vous souhaitez inclure dans votre étude de cas et placez tous vos fichiers GIF dans le dossier Behance que vous souhaitez inclure dans votre le dossier Behance que vous réalisé au début de la classe. Je nomme généralement ces fichiers avec des chiffres en fonction l'ordre dans lequel les plans apparaîtront, dans votre étude de cas. Vous pouvez mélanger ce GIF avec tous vos P et G que vous exporterez lors de la prochaine leçon. Vous connaissez votre étape d'action pour cette leçon, allez de l'avant et créez vos gifs et placez-les dans le dossier organisé comme vous le souhaitez. Dans la prochaine leçon, nous allons exporter le reste de votre étude de cas et le télécharger sur Behance. [MUSIQUE] 13. Exporter et télécharger: [MUSIQUE] Tout d'abord, oui, vous l'avez fait. Votre étude de cas est enfin terminée, félicitations. Il ne vous reste plus qu'à le préparer à publier. Selon l' approche que vous adoptez, vous allez avancer dans l'une des deux directions suivantes. Si vous construisez réellement cette étude de cas sur Squarespace ou Webflow, vous n'allez pas exporter ces tableaux artistiques. Dans ce cas, vous voudrez simplement exporter les éléments visuels individuels, tels que vos images, vos formes, vos maquettes. Vous pouvez simplement enregistrer tous ces éléments dans un dossier et ensuite, lorsque vous allez créer votre page, vous pouvez simplement les intégrer. Cependant, je pense que la plupart d'entre vous ont optimisé pour Behance. Si c'est le cas, vous pouvez faire glisser le curseur, sélectionner chaque tableau graphique, appuyer sur « Commande E » pour exporter et exporter ces SPNG dans le dossier Behance que vous avez créé précédemment. Encore une fois, si vous voulez rester organisé, j'aime généralement nommer ces tableaux d'art par ordre croissant, en commençant par le haut, à un, puis 2, 3, 4, etc. afin qu'ils puissent rester organisés dans votre Dossier Behance. Ensuite, accédez à votre compte Behance et cliquez sur « Partagez votre travail ». Cela ouvrira un nouveau projet. Une remarque ici, vous allez voir prototype comme une option d' importation depuis XD ou Figma et vous pouvez vous sentir libre de le faire. Cependant, il arrive parfois qu' un prototype sans contexte n'apporte pas grand-chose à votre spectateur. N'oubliez pas que l'objectif de votre étude de cas est de raconter comment vous avez résolu ce problème. Avant d' ajouter un prototype, demandez-vous où ou si ce prototype s'inscrit dans votre histoire. Cliquez ensuite sur « Image », accédez à votre dossier Behance et sélectionnez tous les PNG et GIF que vous souhaitez télécharger. Une fois ces charges chargées, vous remarquerez qu'il existe un espacement par défaut entre eux. Pour supprimer cet appui sur « Styles » sur le côté droit et le changer de 60 pixels à zéro, puis appuyez sur « Enregistrer ». Assurez-vous que vos images sont dans le bon ordre. Si vous devez modifier la commande, survolez une image, cliquez sur cette icône bleue d'édition et sélectionnez Réorganiser le projet. À partir de là, vous pouvez modifier et enregistrer la nouvelle commande. Une chose à noter, si vous utilisez des GIF avec couleurs d' arrière-plan qui ne sont pas blanches, vous remarquerez peut-être quelque chose d'un peu funky. Étant donné que votre GIF est peut-être d'une qualité d'image différente de celle de vos PNG, la couleur a peut-être légèrement changé au cours du processus. Si c'est le cas, ne vous inquiétez pas, c'est une solution très facile. Revenez dans XD et sélectionnez tous les tableaux d' art statiques ayant la même couleur d'arrière-plan. Accédez à l'outil Pipette et échantillonnez la couleur d'arrière-plan GIF exportée. Dans XD, il ressemblera à deux couleurs d'arrière-plan différentes, mais une fois qu'elles seront toutes dans Behance, elles seront parfaitement cohérentes. L'action de cette leçon est simple. Il suffit de suivre les étapes que j'ai faites pour tout télécharger dans un projet Behance et dans la leçon suivante, nous ajouterons la touche finale, comme votre vignette, votre titre de projet, description et toutes les balises. On se voit bientôt. 14. Terminer et publier !: Voici la touche finale. Vous avez téléchargé toutes vos images dans votre projet Behance, et j'espère que vous avez parcouru pour vous assurer qu'il n'y a pas de fautes de frappe ou de choses bizarres et funky. Maintenant, il est presque temps de cliquer sur « Publier », aller dans les paramètres et de télécharger une vignette de projet. Au début du cours, je vous ai demandé de créer un tableau d'art pour cela, mais si vous ne l'avez pas encore conçu , pas de soucis, je vais vous donner quelques conseils. Numéro 1, n'utilisez pas trop de texte, mais incluez une description très courte afin que quelqu'un sache à quoi s'attendre lorsqu'il clique dessus, propose des maquettes pertinentes pour que les spectateurs sachent ce qu'il y a le résultat du projet a été. Choisissez l'écran le plus intéressant à afficher sur votre maquette. Personnellement, j'aime prendre la conception de mon en-tête et l' adapter à cette miniature pour qu'elles finissent par être super similaires. Ensuite, donnez un titre à votre projet. Le titre n'a pas trop d' importance si vous l'utilisez simplement comme portfolio, mais si vous essayez d' en obtenir des tonnes d'utilisation sur la plateforme, essayez de le nommer quelque chose que les gens pourraient rechercher. Les deux projets que j'ai présentés étaient appelés Smart Diffuser App et Cycle Syncing App. Mais pour être honnête, mes titres n'ont peut-être rien à voir avec la mise en vedette. Qui sait ? Ensuite, ajoutez quelques balises. C'est une autre occasion de réfléchir aux termes de recherche pertinents pour votre projet. Je commence généralement par l'interface utilisateur, l'UX, conception de produits, puis je suis plus spécifique, comme l'automatisation future des applications mobiles, conception d' applications et autres choses comme ça, puis je remplis les outils que vous avez utilisés dans le catégories dans lesquelles votre projet fait partie. Enfin, vous allez ajouter la description que je copierai et collez habituellement l' une des premières sections de mon étude de cas pour ce paragraphe qui présente bien le projet et c'est tout. Relisez tout une fois de plus , puis cliquez sur « Publier ». Être présenté sur Behance ne devrait pas être votre objectif, car pour être honnête, vous avez très peu de contrôle là-dessus. Toutefois, vous voudrez peut-être savoir que votre projet n'est envoyé à l'équipe de curation Behance qu'une seule fois lors de votre première publication. Ne téléchargez donc pas simplement la moitié de votre étude de cas, puis revenez la terminer plus tard, publiez-la uniquement une fois que vous avez terminé. Vous connaissez votre action ici, remplissez tous les champs de ce projet Behance et cliquez sur « Publier ». Sérieusement, vous devriez être vraiment fiers de vous d'être venus aussi loin. C'est beaucoup de travail. J'espère vraiment que vous partagerez le lien avec moi dans la section de discussion ci-dessous. J' aimerais vraiment voir ce que vous avez créé et je sais que autres élèves de la classe pourraient vraiment profiter de ces idées comme une source d'inspiration. [MUSIQUE] 15. Conclu: abord, je tiens à exprimer mes remerciements avoir terminé ce cours. Vous êtes un grand pas de plus vers l'obtention de ce prochain emploi, gagnez en crédibilité en tant que designer et inspirez la communauté créative. Honnêtement, j'ai eu tellement de plaisir à vous guider dans le processus d'écriture, conception et de publication de vos études de cas approfondies. N'oubliez pas de télécharger vos projets ci-dessous dans la section communauté des classes, je veux vraiment savoir sur quoi vous avez travaillé. Vous pouvez vous sentir libre de publier le lien vers votre projet ou de télécharger quelques-uns de vos tableaux d'art préférés ou tous vos tableaux d'art, c'est à vous de choisir. Si vous avez aimé ce style d'enseignement, n'hésitez pas à consulter mon autre cours ici sur Skillshare. Il s'appelle Intro to UI UX pour les graphistes ainsi que ma chaîne YouTube et Instagram, où je partage également du contenu de conception tout le temps. Merci de rester avec moi tout au long de ça, et j'espère vous voir dans un autre cours ou une autre vidéo très bientôt. Au revoir. [MUSIQUE] Mes mains sont tellement froides. [BRUIT] Très générique idyllique, comment dites-vous cela ? Idyllique. Idyllique. Allez, mon pote, tu peux le faire.