Les bases de la conception web : création de pages d'accueil marketing qui génèrent des résultats

1. Introduction: Je m'appelle Dennis Field. Je fais partie de l'évangéliste ici chez InVision ainsi que de designer. Dans ce cours, je vais vous apprendre comment créer une page d'accueil marketing efficace pour votre produit. En tant que concepteur, vous devez naturellement passer de la conception pour joli à la conception pour les conversions. Et grâce à l'évolution de l'industrie et à la demande des clients, j'ai grandi pour devenir concepteur web. Toutes ces expériences m'ont conduit à InVision. Nous aidons les designers du monde entier et les entreprises du monde entier exploiter leur plein potentiel créatif en utilisant des fonctionnalités telles que le prototypage, commentaires, la gestion des actifs, ainsi que le partage en direct. choses que je peux vous enseigner dans ce cours sont toutes des choses que j'ai apprises passant de la conception de la page à conception réelle avec l' intention d' aider réellement mes clients et entreprises à déplacer l'aiguille plus. Il va y avoir quelque chose pour tout le monde dans son cours. Que vous commenciez tout juste ou que vous conceviez depuis un certain nombre d'années. Vous avez peut-être du mal à savoir comment mettre en page la page, comment obtenir réellement les résultats que vous voulez. Donc, je pense que ces compétences fondamentales vous apporteront beaucoup de valeur. 2. Projet: Vous avez été chargé de concevoir une page d'accueil de Mac application de médias sociaux constamment social. Votre objectif est de créer une nouvelle page d'accueil qui augmente les inscriptions. Je choisis cette tâche, car je pense qu'il est important pour vous comprendre les fondamentaux essentiels qui sont nécessaires pour offrir plus de valeur à vos clients dans l'organisation à mesure que vous grandissez en tant que concepteur. Vous apprendrez des principes tels que la conception, la narration et la mise en page sont des choses que vous devez considérer et garder à l'esprit lorsque vous ne concevez pas seulement ce projet, mais aussi pour les projets de la fonctionnalité. Pour le bien de ce projet, conversions sont nos inscriptions, mais la convergence pourrait être tout ce qui concerne votre projet. Vous apprendrez également à créer un prototype dans InVision, ainsi qu'à gérer le processus de rétroaction. Pour ce projet, vous aurez besoin de Photoshop ou Sketch de votre choix, ainsi que d'un compte InVision gratuit auquel vous pouvez vous inscrire sur invisionapp.com. Vous pouvez vous attendre à ce que ce projet vous prenne une heure à une heure et demie, selon la complexité de votre conception. Lorsque vous terminez votre projet, assurez-vous de partager votre lien de prototypage InVision et une capture d'écran de votre projet dans la galerie de projets Skillshare. Rappelez-vous, la meilleure façon d'apprendre est de faire. À mesure que vos objectifs changent, fur et à mesure que votre audience évolue, vous devez toujours revoir cette conception pour l'optimiser. Commençons. 3. Objectifs, histoire, preuve sociale, conversions: Chaque fois que vous concevez quelque chose, vous devez avoir un ensemble d'objectifs clairs. Sans ça, tu ne fais que concevoir. Donc, la première chose que nous devons faire est de définir nos objectifs. Pour Simply Social, nous allons avoir trois objectifs. Le premier objectif est, dans l'ensemble, de mettre davantage l'accent sur les configurations. Numéro deux, nous devons présenter visuellement l'application. Numéro trois, il faut mieux expliquer l'histoire. Pour vous, vous avez peut-être un ensemble d'objectifs différent, mais il est important de définir ces objectifs avant de commencer à entrer dans votre conception. Donc, une fois que nous avons établi nos objectifs, nous commençons à parler d'histoire. L' histoire est vraiment, vraiment important pour toute page d'accueil ou tout type de design en général. Mais quand on pense à de grandes peintures, quand on pense à de grands dessins, il y a toujours un genre d'histoire qui se passe là. L' histoire peut venir sous la forme d'une copie. Il peut se présenter sous la forme de repères visuels. Tout ce que vous placez sur ce design ou sur votre page d'accueil doit se rapporter à l'histoire que vous essayez de raconter. Il est vraiment important de penser à l'histoire dans une page d'accueil de haut en bas, en commençant par qui nous parlons, à quoi voulons-nous qu'ils pensent et quel est l'objectif visé ? Tout cela s'entonnoir vers le bas dans l'appel clair à l'action et le paiement essentiellement. Donc, quand nous entrerons dans le croquis, nous en parlerons un peu plus. On parlera un peu de copie. Nous allons parler de la façon dont l'imagerie que nous allons utiliser. En fait, il joue un rôle clé dans cette histoire de ce design. L' autre élément dont nous voulons parler est évidemment la mesure et les conversions. Il y a une tonne dont on peut parler avec conversion qui est probablement le mieux adapté à la maison, pas une classe bien sûr. Mais ici, je veux juste que vous sachiez que conversion doit être mesurée avec un certain nombre de facteurs. Vous pouvez utiliser de grands outils comme Google Analytics comme mesures, toutes les façons de les mesurer. Mais gardez à l'esprit qu'il y a un certain nombre de facteurs qui vont affecter votre conversion. Si vous faites beaucoup de publicité, cela va enchaîner beaucoup de trafic, certains qualifiés, d'autres non qualifiés à votre page d'accueil. Ça va fausser un peu ton numéro de conversion. Quand il s'agit de conversion, j'aime penser à ce qui se passe après la conversion. Donc, disons que vous obtenez un grand afflux d'absorption dans vos numéros de conversion, plus de gens s'inscrivent à votre application. Mais vous avez une autre chose. Vous devez vous inquiéter de ceux qui sont dans l'application maintenant qualifier les utilisateurs de l'application ? Donc, alors vous avez tout un autre ensemble d'optimisation qui doit arriver là. Donc, il n'y a pas de grand nombre de conversion. Vous devriez toujours filmer pour un nombre élevé, mais il n'y a pas non plus une mauvaise conversion parce qu'il y a tellement de choses que vous devez tirer et selon l'endroit où vous êtes avec votre produit, vos chiffres vont être un un peu différent. Mais gardez à l'esprit qu'il y a un certain nombre de facteurs qui vont y jouer. Donc, la prochaine partie du projet, nous allons commencer à esquisser ces idées et je vais entrer dans ces principes de l'histoire et de la mise en page un peu plus. Mais passons à esquisser quelques idées, parler de ces idées et à voir ce que nous voulons faire et ce que nous voulons idéalement choisir pour passer ensuite à la haute fidélité. 4. Conception et design: D' accord. Alors, parlons de certains de ces concepts. Nous allons entrer dans quelques idées que nous voulons faire le but d'augmenter les inscriptions à Simply Social. Donc, il y a un certain nombre de façons de faire et il y a un certain nombre de facteurs que nous allons jouer. Pour moi, j'aime généralement commencer par un peu lâche, je ne sais même pas si je veux les appeler filaires, mais juste des croquis lâches généraux qui commencent à mettre l'accent sur les domaines clés de la conception avant de commencer à passer à ce que je veux faire sur l'ordinateur. Donc, commençons par quelques choses clés à garder à l'esprit en ce qui concerne le modèle d'utilisateur. Donc, évidemment, vous avez traditionnellement une navigation qui se trouve en haut de la page. En cas de doute, il est préférable de le laisser là. Il y a des choses qui ont changé au fil du temps, une étant le logo. La beauté de notre évolution est que nous nous sommes lentement éloignés de la nécessité d'un véritable lien homelink. Maintenant, nous avons le grand modèle d'utilisateur de pouvoir cliquer sur votre logo pour vous ramener à la maison. Donc, toutes les choses que vous voulez, plus ou moins, assurez-vous que vous avez dans votre conception à un moment donné. L' autre chose à penser sont votre pied de page et ce qui s'y passe. pieds de page sont généralement utilisés pour certaines choses dont vous n'avez pas vraiment besoin de distraire votre histoire principale. Ce sont des choses comme les liens de support et des choses qui n' évoluent pas vraiment dans l'histoire de votre design. Donc, parlons de, le modèle utilisateur de défilement de votre page. C' est vraiment génial comment des applications comme Facebook, Twitter ont permis à tout le monde d'embrasser l'idée du défilement. Mobile a évidemment joué beaucoup dans cela aussi bien. Donc, maintenant on n'a pas trop à s'inquiéter d'un pli. C' est discutable, mais je suis un grand croyant au plus on doit raconter notre histoire, plus on devrait l'utiliser. Donc, nous savons que les gens vont être d'accord pour faire défiler la page, nous savons aussi qu'il y a beaucoup d'autres indices mobiles que les gens ont pris en charge. L' icône du hamburger est une chose à penser. Je veux dire, c'est quelque chose que vous pouvez utiliser dans votre conception parce que maintenant les gens comprennent, si je clique dessus, je vais voir plus d'options. Donc, quand il s'agit de vous concentrer sur votre histoire, gardez ces choses à l'esprit. Utilisez-les là où vous le pouvez, mais n'avez jamais essayé de briser nécessairement ces modèles d'utilisateurs parce que c'est là que vous perdez votre audience ou votre visiteur. Donc, dans ce design, nous allons avoir notre navigation, notre pied de page. Nous allons évidemment avoir un héros, qui a tendance à être un autre modèle d'utilisateur que les gens veulent voir. Et c'est ta porte d'entrée, la couverture de ton livre. C' est une histoire de haut niveau qui commence là. Vous avez évidemment vos liens de navigation. Et puis tout ici et comment tout cela commence à se réunir est un peu plus ouvert à l'endroit où vous pouvez mettre dans ces domaines. Donc, pour commencer, peut-être avec notre objectif d'expliquer l'application un peu mieux. Nous avons peut-être une idée que nous voulons vraiment jouer l'idée qu'avec Simply Social, c'est une application qui vous permet de connecter tous vos comptes de médias sociaux en un seul endroit et vous allez avoir toute cette grande activité sur les médias sociaux. Nous allons vraiment vouloir le montrer visuellement. Donc, nous avons peut-être des versions graphiques de comptes de médias sociaux assis là-bas. Il se peut que nous ayons une sorte de gros titres qui va vivre ici. Vous allez vouloir évidemment à ce stade commencer à introduire l'idée d'un appel à l'action. Vous avez peut-être quelqu'un qui vient sur ce site, ils sont déjà vendus dessus. Ils savent déjà de quoi il s'agit et ils sont prêts à agir immédiatement. Donc, ce que vous pouvez faire est que vous pouvez évidemment, et vous voyez cela dans beaucoup de sites, vous voulez commencer à ajouter votre, nous allons l'appeler CTA. Ça commence à ouvrir cette discussion, ok. Maintenant, nous avons un certain nombre de choses qui fonctionnent ici. Nous avons une compréhension claire de ce que le produit va être. Peut-être, dans ce cas, nous avons une bonne copie que nous voulons un titre simple et concis. Et la chose à propos de Simply Social est ce que nous faisons, c'est que nous simplifions les réseaux sociaux ou le réseautage. C' est peut-être une idée d'un titre. Très direct. Je ne sais pas, nous devrons tester cela, nous pouvons utiliser des applications de test utilisateur cool pour le faire. Mais commençons par quelque chose pour faire circuler quelques idées. La prochaine chose que vous voulez faire est de commencer à considérer ce qui se passe en bas de la page, non ? Nous avons cette idée de la façon dont nos yeux bougent. Beaucoup de fois, avec les pages d'accueil typiques, vous allez tomber dans ce mouvement de l'œil modèle Z, où quelqu'un va commencer par le logo, passer à travers, et commencer à descendre la page. Donc, nous voulons tirer parti de cela dans notre conception. Nous voulons nous assurer que chacun de ces mouvements que vous frappez quelque chose d'important, quelque chose qui va vraiment mettre en valeur votre histoire. Si vous faites quelque chose qui est probablement plus éditoriale ou axée sur l'histoire, peut-être que c'est une mise en page de blog, vous pouvez commencer à entrer dans une mise en page F, où votre modèle F, où la plupart des gens scannent la page et se déplacent à travers un F comme ils lisent. Mais pour la plupart des conceptions visuelles de page d'accueil, vous cherchez un moyen Z ici. Donc, c'est là que vous allez cliquer sur cette page, traverser, croiser la navigation, descendre, puis quitter. Donc, gardez ceux-ci à l'esprit lorsque vous commencez à penser à cette mise en page en termes de point de vue de la scanabilité. D' accord. Donc, j'ai cette pensée rude autour d'un héros. L' autre partie que nous voulons faire est que nous voulons montrer visuellement notre application un peu plus. Donc, peut-être ici si c'est un objectif de notre part, peut-être qu'on commence à introduire des captures d'écran, peut-être que c'est bien quand on le peut. Encore une fois, nous allons raconter l'histoire que c'est évidemment une application, l'histoire vit évidemment à l'intérieur du web. S' il s'agit d'une conception mobile, c'est une excellente utilisation de l'endroit où vous commencez à voir conceptions photoshoppées dans des appareils car cela aide avec cette histoire. Lorsque vous scannez la page, vous savez immédiatement ce qui va se passer ici, vous savez ce que c'est. Vous verrez cela avec les pages de destination du livre beaucoup. Même s'il s'agit d'un livre électronique, il est important de le mettre en contexte. Donc, si c'est un livre électronique et qu'il vit sur un livre, il y a une mise en page de livre, cela donne au public ou au visiteur une compréhension claire et très rapide de ce qu'il va télécharger. Donc, dans notre cas, ce que cela est en fait va être un type d'application qui vit à l'intérieur du web. Donc, peut-être que c'est une bonne occasion de s'engager dans une certaine interactivité. Peut-être une bonne façon de montrer qu'il y a nos différents écrans, utiliser de jolis éléments de navigation conventionnels qui cyclent le design. Peut-être que pour l'histoire que vous voulez aussi commencer à parler un peu trois ou quatre différents dans les éléments clés qui composent Simply Social. Alors, peut-être que tu veux en parler. Vous voudrez peut-être apporter cela dans cette page un peu. Ce n'est pas quelque chose où nous vous disons que nous sommes un site de médias sociaux, créons votre compte et commençons à publier ici. Nous disons que nous nous connectons à vos comptes de médias sociaux. Donc, il est vraiment clair à l'avance que, l'objectif ici est de prendre votre réseau de médias sociaux, mettre dans cette application, et nous allons le rendre simple pour vous, nous unifions les choses. Vous pouvez également parler un peu de la façon dont il est sécurisé. Je pense que souvent, il y a une préoccupation quant à ce que vous allez faire avec ces informations si je connecte mes comptes ? Eh bien. Simplement social, ce n'est pas seulement un excellent moyen de gérer simplement vos médias sociaux, mais aussi un moyen sécurisé de le faire. Ensuite, je pense qu'une chose clé ici est de dire aussi que vous pouvez maintenant poster sur ces comptes de médias sociaux aussi. Donc, vous obtenez quelques idées sur ce que vous pouvez réellement faire ici sans même commencer et vous inscrire pour un compte encore. Au fur et à mesure que vous continuez à déplacer la page, nous avons besoin d'un bel élément descriptif. Il pourrait s'agir d'un paragraphe de copie, mais nous devons nous assurer que nous leur racontons une histoire simple, quant à ce que fait ce produit. Donc, vous avez la porte d'entrée, ou la couverture du livre et vous les déplacez à travers. Ainsi, vous pouvez avoir une copie descriptive simple qui sauvegarde l'instruction ci-dessus. Au fur et à mesure que vous continuez à passer, vous allez entrer dans des éléments comme la preuve sociale, il est vraiment important d'inclure preuves sociales dans votre conception et lorsque vous racontez votre histoire, car c'est la preuve convaincante mécanisme. Les gens sont plus disposés à s'inscrire ou à investir de l'argent dans une application, ou quoi que ce soit, lorsque la fiducie a été créée. C' est là que vraiment obtenir de grands témoignages ou logos entrent en jeu qui dit, « Nous sommes garants de cela, nous avons investi dans cela, et nous avons fait le premier bond, nous pensons que vous devriez aussi. Donc, quand vous pouvez tirer parti de ceux-ci et les exploiter efficacement, et que vous pouvez exagérer les témoignages, mais si vous avez des acteurs vraiment clés que vous pouvez entrer dans votre produit et votre application, faites-les en parler, assurez-vous certainement que vous en avez et n'ayez pas peur de l'utiliser. Donc, nous allons vouloir nous assurer que nous avons l'aspect de la preuve sociale ici. Ce que ça fait maintenant, c'est vous commencez évidemment avec le haut niveau rapide, plonger dans certaines fonctionnalités si vous voulez poser la question « Ok, eh bien, qu'est-ce que cela signifie pour moi ? » Vous commencez à bien ce que vous pouvez faire, c'est que vous composez, connectez-vous à un compte sécurisé, et puis évidemment hey, ces gens géniaux utilisent et je devrais évidemment l'être. C' est ce que ça fait pour vous et pour votre histoire. Alors que vous continuez à passer à travers cela, vous pouvez regarder cette histoire et vous pouvez dire bien, peut-être que nous devons aborder cela un peu. Peut-être qu'il est logique de dire d'accord, voici ce que nous faisons, voici pourquoi nous le faisons, et puis voici les fonctionnalités si vous voulez obtenir un peu plus pour voir l'interface, et ensuite vous entrez dans les aspects de preuve sociale. Donc, au moment où vous arrivez au bas de cette page, ajoutez mes données de pied de page ici, vous devriez avoir vraiment bien pris des livres d'action d'une sorte ou d'une autre. Peut être aussi simple inscription, pour être un formulaire, il y a beaucoup de choses dont nous pouvons parler quand il s'agit du mécanisme de conversion réel ici, et il y a beaucoup d'études autour de lui, c'est juste un bouton qui s'ouvre dans un modèle. C' est à ce moment que vous faites votre première action, et nous en parlerons un peu plus quand nous entrerons dans la fidélité supérieure, ici, mais nous allons juste commencer à exposer ça. Donc, cela pourrait être une option potentielle à envisager. Je voudrais probablement affiner ça un peu plus, alors voyons comment on peut améliorer ça. Vous pouvez commencer ici et encore, vous allez continuer avec votre jeu de base de modèles d'utilisateurs ici nous allons juste dire assez, nous savons ce que cela va faire et notre pied de page ici. Nous pensons que cela fonctionne, mais avec nos objectifs à l'esprit, je pense que nous pouvons faire un peu mieux peut-être mélanger ces deux mondes un peu mieux. Je pense que ce que vous pourriez envisager de faire si nous commençons à penser au modèle Z ici. Peut-être qu'il est important d'apporter un appareil photo ici. Dans mon esquisse, je le garde généralement très lâche parce que c'est la façon dont j'aime esquisser. Ensuite, nous avons peut-être notre gros titre ici, et ensuite notre appel à l'action. Ce que cela va faire, peut-être la navigation, c'est quand vous vous déplacez sur la page que vous aimez. » Ok, c'est tout simplement social ». C' est un peu ce que tu veux que je fasse, c'est confiant, on a des informations, alors je vais creuser un peu plus profondément. Mais immédiatement après ça, je vais tirer en face, et je vais voir wow, d'accord. C' est ce que l'application est. Selon ce que j'ai mis ici, ce soit une photo du flux d'activité, que ce soit une photo du profil d'une personne, cela va raconter une grande histoire. Il va vraiment dire ce que c'est sans même arriver à le lire. Donc, c'est beaucoup plus efficace du point de vue de la scannabilité. Ensuite, je pourrais affiner cela et maintenant ce serait une bonne occasion de peut-être faire suivi en mettant ma copie descriptive et le titre, peut-être ici. Donc, je peux avoir un sous-en-tête qui commence à sauvegarder cela avec un petit paragraphe. Peut-être alors j'entre dans mes trois caractéristiques distinctes sur le produit. C' est là que vous entrez dans ce que vous composez connecté c'est un compte sécurisé et cetera. Vous pouvez commencer à voir à nouveau si nous passons à l'aspect évolutivité pour ceux-ci. Parce que nous sommes dans un monde très rapide, nous n'avons pas tendance à lire beaucoup si vite que vous commencez par le succès de haut niveau de ce qui est simplement social. Donc, une fois que vous avez affiné cela, vous commencez à voir que vous condensez un peu cette histoire sur la page. Vous créez beaucoup de repères visuels ici aussi, avec le chevauchement qui pourrait se produire ici avec l'appareil, alors vous commencez à entrer dans peut-être une façon différente d'afficher les détails plus fins de simplement social. Ils peuvent à ce stade poser la question, y a-t-il d'autres que je dois savoir à ce sujet que je ne sais pas encore avant de m'engager à vous donner mon adresse e-mail, et de m'engager à rejoindre simplement social ? C' est quand vous pouvez commencer à utiliser cet espace, et quand je dis remplissage, mais c'est quand vous commencez à entrer dans certains des détails les plus fins de votre application. Donc, pour simplement social peut-être que nous commençons à, peut-être avoir une façon cool d'afficher les différentes captures d'écran de l'application. Je ne sais pas. Peut-être qu'ils vont sur la page comme une grille. Ou peut-être qu'ils sont tous empilés ici et nous avons ici quelques éléments interactifs qui leur permettent de plonger plus profondément et presque faire une visite rapide avant qu'ils ne s'engagent. Peut-être que c'est ce qui vit ici. Ce que cela fait, c'est maintenant que nous avons pris une partie de cela, l'avons fait ici, maintenant nous obtenons cette étape facultative vraiment raffinée pour ceux qui veulent plonger un peu plus profondément dans ce qui simplement social peut-être. S' ils ont d'autres questions. Donc, une fois que vous allez et de, une fois que vous avez examiné cela, toile de fond de votre histoire, nous commençons à atteindre nos objectifs, nous sommes évidemment en train de rendre l'application beaucoup plus interface, et certaines applications n'ont pas besoin de vous inquiéter à ce sujet comme Facebook, LinkedIn, Twitter, si vous regardez leurs pages d'accueil, nous en savons assez sur eux que nous n'avons pas vraiment besoin de l'histoire est en fait, une fois que vous entrez dans l'application. Donc, ils ont un grand luxe d'être en mesure de créer des pages d'accueil qui sont super efficaces, et si vous les regardez, il suffit de créer un compte, comme il n'y a pas grand-chose là-bas autre que cette simple déclaration, et puis ils veulent juste que vous vous immergez dans l'application, parce que c'est là qu'il commence à vraiment prendre vie. Mais tout simplement social n'est pas tout à fait là. La plupart des applications ne le sont pas. Il faut des années pour arriver à ce niveau de confiance et compréhension que le monde raconte son histoire pour eux. Donc, dans ce cas, nous avons besoin de beaucoup de ces éléments pour nous assurer que tout le monde comprend ce qu'est simplement social. Ensuite, vous apportez votre, il est toujours agréable de nouveau, si vous l'étape personne a encore des questions, vous allez probablement dire « Hé, ne soyez pas inquiet parce que ces gens géniaux utilisent réellement notre et vous devriez rejoindre le club » c'est essentiellement ce que fait cet élément de preuve sociale. Nous pouvons même faire avancer cela avec, peut-être quelques icônes de médias sociaux et combien d'adeptes nous avions déjà et intérêts que nous avons en dehors de simplement social autour de notre communauté ? Quelle est la taille de notre communauté ? Avons-nous des milliers et des milliers d'abonnés Twitter ? Notre page Facebook est-elle super massive ? Comme tout ce qui sont des indices visuels qui aident les visiteurs de votre site à comprendre que c' est un endroit que je dois être et que je devrais investir dans. Alors, peut-être comme toujours, vous allez suivre ça avec ce gain. Donc, si vous commencez à passer par ce concept, vous pouvez commencer à voir où je pense que nos objectifs sont un peu mieux atteints. Nous avons frappé sur les bons indices visuels de ce qu'est l'application, nous avons fait un très bon travail, je pense que je l'ai expliqué. Puis aussi sauvegarder cette histoire avec des preuves, puis les conduire clairement vers le bas dans la page avec un bel appel à l'action, puis vous entrez dans le pied de page. Donc ce sont des idées lâches, je vais probablement maintenant juste encadrer cela un peu plus, travailler à travers eux comme une étape suivante, puis nous allons sauter sur l'ordinateur, et nous allons développer ces principes et nous allons parler de la façon dont la photographie, joue un rôle dans cette histoire, la domination et la couleur, tous les autres éléments qui vont commencer à apporter peut-être ce concept à la vie un peu plus. 5. Création du design [Partie 1]: Maintenant que vous avez nos idées lâches, nous allons commencer à passer à un design plus haute fidélité. Je pense que parmi les deux, je pense que le deuxième concept commence à fonctionner un peu mieux pour nos objectifs en termes de point de vue de la hiérarchie alors que vous numérisez rapidement que certaines choses apparaissent déjà, alors nous allons aller dans cette direction. Alors, n'hésitez pas à utiliser Sketch ou Photoshop, c'est votre choix pour les besoins de cela. Je vais simplement utiliser Photoshop parce qu' envision a quelques intégrations vraiment cool ici que nous pouvons utiliser plus tard pour aider à ajuster cela pour la dernière petite poussée. Mais pour l'instant, nous allons juste commencer par un document. J' en ai déjà un créé ici pour le temps mais si vous voulez des dimensions pour travailler avec, pour cela j'ai cette configuration à 1500 pixels par 4355 pixels. C' est un endroit pour commencer. Encore une fois, nous avons ces superbes moniteurs maintenant. Il a tiré parti de la taille des écrans pour raconter notre histoire un peu mieux. J' ai des guides que j'ai déjà marqués ici, mais c'est encore une fois, nous allons juste mettre ces idées à l'écran et ensuite nous pourrons finesse à partir de là. Donc, en fonction de votre niveau de compétence, nous n'allons pas aborder les choses les plus fines à propos de Photoshop, mais il y a plein d'autres ressources intéressantes ici sur Skillshare, je suis sûr que je vais vous aider avec ça. Commençons donc par tirer d'abord certains éléments avec lesquels nous allons travailler. Nous avons ce design, évidemment nous avons besoin d'un logo. J' ai une ligne directrice de marque que je vais tirer sur certaines choses que nous avons déjà sont simplement sociales. Ceux-ci sont tous sauvegardés dans le dossier des actifs du curriculum du projet, alors n'hésitez pas à saisir cela ou, comme je l'ai dit, utilisez le vôtre. Nous allons donc profiter de cette occasion pour parler un peu d'images. Nous savons qu'avec tout simplement social, nous parlons à un jeune professionnel. Quelqu' un qui est vraiment actif sur un certain nombre de sites de médias sociaux. Peut-être que cette personne utilise LinkedIn, Facebook, Twitter, Instagram. Leur monde est très consommé dans les réseaux sociaux. C' est un endroit pour commencer. J' ai trouvé cette très belle image ici que je pense que nous pouvons utiliser pour commencer à raconter notre histoire un peu. Donc, pour cela, nous allons répartir cela en un peu plus sur la raison pour laquelle je pense que cette image va fonctionner vraiment bien pour nous. Je vais retourner ça et commencer à en parler un peu plus. Je vais juste couper ça très rapidement en regardant la masse. Je veux qu'il soit là. C' est à peu près où puis-je trouver que 800 pixels est un bon endroit pour avoir cette coupure. Donc, cette image qui fonctionne pour moi, est que nous voulons raconter une histoire que tout simplement social va simplifier votre vie sur les médias sociaux. Il y a quelque chose de vraiment cool dans ce gars qui surplombe quelque chose d'aussi occupé qu'une ville, mais dans cet espace tranquille de s'asseoir au bord du lac ici. Il correspond un peu à notre démographie. Que le beau avantage que nous avons ici, il est arqué dans notre ce qui, espérons-le, sera notre interface. Il va naturellement mettre votre œil dedans. Typiquement, il y a beaucoup de choses agréables qui se produisent lorsque vous commencez à utiliser des images ou des visages les pointant dans votre code d'action. Vous commencerez à voir une absorption juste à partir de ce petit changement. Naturellement, en tant qu'humains que nous suivons , nous devons regarder les visages et nous suivons les yeux, mais c'est vraiment soigné quand vous commencez à créer ce mouvement tourbillonnant dans votre plan d'interface. Évidemment, c'est probablement un peu trop fort d'un traitement ici. Vous pouvez voir des choses valides qui se passent. Donc, ce que nous allons probablement faire est de poster d'autres images ici et ensuite nous parlerons de la façon dont nous pouvons remettre cela en arrière quand il s'agit du traitement de nos images. Laissez-moi ouvrir un dossier d'actifs. J' ai déjà une image de MacBook ici. C' est déjà découpé avec l'interface dedans. Vous les gars, vous allez probablement le faire vous-même, mais pour le temps, j'ai juste pensé que ce serait bien d'avoir déjà ça là-dedans. Donc, vous pouvez voir aussi bien que cela regarde, il y a toujours un problème. Nous avons un problème de domination ici. On essaie de faire trop. On doit vraiment reculer ça. La bonne chose quand vous utilisez photos de très haute qualité est que vous avez beaucoup de choses formidables avec lesquelles vous pouvez travailler. C' est la clé pour créer une page d'accueil vraiment efficace est de commencer par de superbes photos. Peut-être que nous pouvons simplement simplement changer cette question dominante en le ramenant juste un peu et vous commencerez à voir comment il commence à sortir de la page un peu ici. Maintenant, vous commencez à voir cet accent ici qui se passe sur simplement social, mais vous avez aussi ce coup de mode de vie vraiment cool qui commence à fonctionner évidemment avec un design. Tu racontes déjà cette histoire quand on n'a même pas eu les détails des choses. Permettez-moi de tirer quelques éléments de navigation ici. Je vais les faire glisser de notre tableau de marque ici. Nous allons faire une belle petite tournée et ensuite, en termes de quelque chose à penser, vous verrez que j'ai cet endroit vraiment sympa ici. En cas de doute aérer votre design. Les choses peuvent devenir un peu trop serrées et chaque fois vous concevez ce que vous faites, c'est confondez votre histoire ou que vous essayez d'avoir les gens en prendre trop à la fois, donc j'aime vraiment l'air du côté de l'espace autour de votre logo. Vous voulez avoir ces moments de pauses dans votre histoire afin que les gens puissent consommer ce que vous essayez de leur dire inconsciemment ou directement. Donc, jetons juste quelques éléments de navigation ici. Encore une fois, on va juste ruiner ça dedans. Nous allons finaliser ça, c'est loin d'être comme un design final, mais nous irons à partir de là. Peut-être que nous avons un lien vers le support ou nous avons un support de tournée peut aller sur le pied de page, mais nous allons juste le coller ici dans le haut de la navigation et ensuite je suppose que nous allons avoir la possibilité pour quelqu'un de se connecter, parce que nous allons évidemment avoir un grand appel à l'action, qui est en fait l'inscription, sorte que nous n'avons peut-être pas nécessairement besoin d'inclure cela ici pour le moment. D' accord. Alors, on y va. Vous commencez donc à voir comment ce design commence à jouer. Regardons notre élément de titre standardisé ici. Nos manchettes, désolé. Apportez ça. Toujours voir quelques problèmes de valeur ici, donc nous allons essayer de remettre cela un peu plus là où nous pouvons. D' accord. D'accord, et encore une fois, on est en rude. Ensuite, nous apporterons notre atout de bouton standard puisque nous l'avons déjà depuis notre page de destination précédente, et beaucoup de fois vous n'avez pas besoin de redessiner des choses pour recréer la roue, mais notre conception précédente avait déjà une très belle lignes directrices établies. Donc, nous allons juste réutiliser là où nous pouvons, mais aussi juste plus ou moins faire un meilleur travail en mettant l'accent sur certaines choses sont nos objectifs. Donc, cela ne signifie pas toujours que vous devez redessiner toute votre marque pour augmenter vos conversions. Donc, vous commencez à voir comment cela se forme vraiment, je pense, bien à nouveau, le point de vue de la hiérarchie des choses. Vraiment les mettre dans l'histoire puisque c'était pour revenir à notre concept ici. Vous avez toutes ces pièces qui commencent à jouer bien ensemble. Ce chevauchement va être vraiment sympa, mais nous devons vraiment tirer un peu ce repère visuel mais appelons le héros dans un bon endroit et passons un peu vers le bas de la page. Lorsque vous pouvez penser à des sections, vous allez faire un peu mieux en termes d'aménagement des choses. Naturellement, votre esprit va se concentrer sur ceux-ci lorsque vous commencez les séparer plutôt que de tout mettre sur la page en même temps. Maintenant, nous avons ce truc visuel vraiment cool qui se passe ici. On a cette couleur qui commence à te faire passer. Ça commence vraiment à apparaître ici pour que nous sachions que quelque chose d'important va devoir arriver ici. C' est là que nous avons commencé et nous voulions commencer à expliquer la substance de ce que nous entendons par réseaux sociaux simplifiés, comme m'expliquer cela. C' est ce qu'on va faire ici. Si vous revenez à notre esquisse, nous voulions vraiment souligner ainsi que nos objectifs ce qu'est Simply Social, une meilleure façon que nous ne l'avons fait par le passé. Donc, la façon de le faire est que vous pouvez utiliser la copie, dans notre cas, nous allons avoir un beau titre ici et je pense que nous allons avoir une belle déclaration simple qui n'est pas beaucoup, mais cela donne juste le ton pour toute cette section. Donc, j'ai une copie, comme je l'ai dit, déjà faite ici, mais vous allez utiliser votre copie. N' hésitez pas à noter votre propre copie pour Simply Social. Que ferais-tu de mieux ici pour rendre cette conception beaucoup plus efficace dans vos points de vue. J' adorerais voir ça. Donc, je vais tirer quelques autres éléments. Maintenant, vous commencez à voir où nous avons cette énorme avance et nous commençons à la décomposer, et vous pouvez déjà dire d' un point de vue visuel que nous allons commencer à casser cela en une histoire plus profonde autour Simply Social. Donc, nous allons continuer ce thème autour de l'imagerie, autour de cette idée de prendre quelque chose de si complexe et chaotique comme les médias sociaux, et de le combiner avec cette tranquillité que Simply Social fera. Nous l'avons fait avec cette belle photo de ce type apaisant regardant quelque chose de si complexe. Mais je pense que nous pouvons le faire ici aussi et nous allons utiliser ce même thème de la nature pour y arriver. Donc, nous avons cette très cool, encore une fois, une image de fond vraiment cool. Cela a déjà été créé donc je vais juste déposer cela directement dans. Il a eu une très belle valeur ici qui se passe. Donc, tu as ce tir vraiment cool et orageux. Je vais vous montrer l'original maintenant revers et maîtrisé. Donc, nous avons une description très claire de ce qu'est Simply Social, mais nous voulons plonger un peu plus en profondeur dans ces trois domaines d'intérêt. J' ai pris un peu de temps pour peaufiner ça. Ces trois domaines devraient être facteurs de différenciation clés qui vous distinguent de votre concurrence. Nous allons juste vraiment jouer l'idée que vous pouvez poster, vous pouvez connecter tous vos comptes, parce qu'il y aura toujours des questions sur quels comptes puis-je me connecter à Simply Social. Nous allons répondre à cette question très rapidement et nous allons parler de la façon dont cet avantage de Simply Social et l'idée d' un simple site de réseautage social comme celui-ci et de tirer cela sur un seul endroit va réellement augmenter votre engagement auprès de toutes les personnes avec lesquelles vous interagissez régulièrement. Donc nous allons commencer par comme si c'était mis en place... Nous allons avoir quelques icônes ici. Les icônes sont un excellent moyen de, encore une fois, petit repère visuel illustrant ce qu'il s'agit de quelque chose. C' est soigné comment ce design se sent. Il y a beaucoup de choses complexes qui se passent, mais pourtant ça semble toujours contrôlé. C' est parce que nous avons clairement défini nos objectifs. Nous avons clairement dit que notre chose dominante ici est de montrer l'application un peu mieux et nous allons aller dans ces petits morceaux, mais nous ne perdons pas l'accent sur l'affichage réel de l'interface et nous utilisons le pour, plus ou moins, mettre en place une belle toile de fond que tout cela vit sur le dessus de. Évidemment, vos visiteurs vont dire que je me demande pourquoi ils ont utilisé cet arbre ici ou ce décor orageux , mais il joue un peu dans le fond ou dans le subconscient. Ils peuvent poser la question, mais vous voulez évidemment avoir une réponse et nous le faisons. D'accord. Donc, j'ai une copie que je vais remplir ici. Nous allons dire Connect et nous allons dire Engagement ici parce que ce sont les trois avantages que Simply Social vous offre ici. Il vous donne la possibilité de poster, de vous connecter et de vous engager. On n'a pas besoin de tout dire. Nous n'avons pas besoin d'entrer dans tous les petits détails, ce que je pense que souvent les sites de marketing font et je pense que c'est là que la conversion commence à tomber est parce que plus vous partagez parfois d'informations, le plus de questions qui sont soulevées à vos visiteurs et plus ils sont confus. Donc, chaque fois que vous pouvez plus ou moins garder les choses vraiment, vraiment concentrées, et vous pouvez voir le thème clé ici est de définir ces objectifs, tenir à ces objectifs, et de garder les choses vraiment, vraiment concentrées quand vous pouvez dans contrôler cette attente. Donc, ici vous pouvez commencer à voir que nous avons cette section qui fonctionne pour nous et j'aime ça. On peut travailler avec notre rédacteur, je suis en train de resserrer tout ça. Mais pour le vrai, nous avons des différentiateurs clés sur lesquels nous nous attaquons. Il se trouve d'une façon vraiment agréable de l'exposer, peut-être qu'il y a une occasion ici de créer des alignements pour les relier un peu. Donc, comme vos yeux se déplacent ici, vous pouvez voir que ce ne sont pas trois choses distinctes, mais c'est une unité. Nous pourrons resserrer cela une fois que nous aurons atteint l'étape finale. 6. Création du design [Partie 2]: Passons à la façon dont nous voulons afficher nos fonctionnalités réelles. Si nous revenons à notre croquis, nous avons maintenant l'occasion de mettre en évidence quelques parties de l'application. Pour résumer, on a un peu fait fonctionner le héros, ça prépare notre histoire, on traverse ici, on entre dans les détails plus fins, c'est un peu la prochaine hiérarchie de notre histoire, qu'est-ce que ces petits pois de haut niveau ou le deuxième niveau I devinez ce qu'est simplement social. Maintenant, on veut percer un peu plus profondément. Il y a toujours d'autres questions, eh bien, à quoi ressemble l'écran de composition ou à quoi ressemble mon profil ? Si je dois me mettre ici. Parce que la chose cool à propos de Simply Social est que vous pouvez également vous connecter individuellement avec certaines personnes, sorte de créer votre propre mini-profil ici avec vos autres comptes de médias sociaux connectés ensemble. Donc, il y a évidemment une question de savoir comment je vais être consulté en ligne ? Donc, ce sont toutes les choses que nous allons commencer à répondre dans cette section. Donc, commençons avec notre genre de toile de fond à nouveau. Nous avons déjà une image de fond vraiment cool. Maintenant, nous regardons à nouveau, quelque chose d'orageux qui doit être contenue. J' ai toujours ce genre d'assise ici, on va juste apporter ça. Pour faire ces effets, c'est en quelque sorte que c'est vraiment à peu près. Juste une question de jouer avec les opacités pour les amener à fonctionner comme ils le font. Mais vous pouvez voir, il y a beaucoup d'images ici, mais rien n'est accablant ce que nous voulons que les gens sortent de cette page. Donc, je vais tirer dans ces éléments, je les ai tous sortes de déjà créés. Je vais les amener et voir comment ça peut fonctionner. Peut-être que nous voulons nous concentrer sur un à la fois ici, alors peut-être que nous allons juste couper ça, commencer à voir comment les choses pourraient devenir, peut-être que nous avons un titre, quelque part dans ce titre pourrait rester en haut, qui se sentent un peu bizarre pour être honnête, et vous considérez la façon dont vous numérisez la page, sorte de casse ce flux, donc peut-être qu'il est préférable de décaler comme nous l'avions initialement esquissé. Je pense que je vais désactiver ça. Parce que ça fait vraiment sortir ça de la page. Ça crée vraiment une dimension qui est cool ici. Alors, il nous faut des contrôles, d'accord ? On peut les utiliser, ça pourrait tourner tout seul ou on pourrait faire un peu des deux. Peut-être qu'ils cyclent seuls, mais nous avons aussi la possibilité de se connecter avec eux si nous le souhaitons. Donc, j'ai quelques icônes de plus. On va mettre en évidence quelques autres choses, non ? Nous voulons mettre en évidence le flux peut-être, quoi ressemble le flux pour votre profil ? Une sorte de fil public, comment est la composition ? C' est peut-être, à quoi ressemble un profil ? Nous ferons des tests autour ces scénarios pour nous assurer que c'est exactement ce dont nous voulons parler. Mais en ce moment, on va juste les mettre en jeu, ça devrait être de la marine. [ inaudible] ici. Vous pouvez cliquer dessus, vous verrez ces changements, et nous pouvons probablement aussi regarder peut-être un type de travail de ligne qui fonctionne avec ça quand nous serrons les choses. Donc, maintenant nous avons le troisième, je suppose que vous pourriez dire le troisième chapitre de l'histoire, peu rugueux ici. La prochaine partie revient à notre croquis, la preuve sociale. C' est une sorte de là que vous commencez maintenant à les déplacer dans le genre de fin du livre ou de fin de l'histoire. Vous copiez ce joli flux, menant vers le haut, en les tirant à travers. C' est un bon moment de capture, votre œil rebondit sur la page vraiment sympa, nous rencontrons. Donc maintenant, nous voulons faire quelque chose ici qui, je pense, compense ce que nous faisons dans cette section, mais commence aussi à introduire une partie de cette preuve sociale. Donc, nous avons un autre cool continuer avec ce thème, une autre façon vraiment géniale de montrer un peu d'agitation. Mais nous allons le maîtriser avec une certaine opacité visuelle. Donc, je vais juste déposer ça pour vous les gars. Encore une fois, n'hésitez pas à utiliser n'importe quelle combinaison de couleurs. Nous pensons que cela fonctionne, parce que je pense qu'il commence à sandwich ce vraiment sympa quand vous passez par la page, rebondit, cet appareil vraiment bien aussi. Donc, quand il s'agit du mode de test réel, vous pouvez faire un certain nombre de choses. Vous pouvez en quelque sorte les mettre dans une grille, juste une sorte de les laisser tourner la page, nous pouvons devenir un peu plus interactifs, peut-être qu'il y a un carrousel qui défile, peut-être qu'il y a des cartes réelles, il y a beaucoup de choses visuelles que vous pouvez faire ici. Mais l'important est, en fait, juste de mettre l'accent sur la preuve sociale, et je vois qu'il y a quelques éléments de preuve sociale sur la page aussi. Il y a des témoignages, et puis je pense que nous voulons commencer à faire un peu de partage des médias sociaux, des preuves sociales aussi. Mais, ici, nous voulons juste nous assurer que nous laissons les gens prendre un moment, pause et consommer ces témoignages. Donc, nous allons garder cela à l'esprit pendant que nous concevons ceci. On a le beau thème d'aller avec une très belle icône, ramener ce gars à l'intérieur. Il se trouve juste sur la page. Nous avons un autre témoignage ici, et il peut, qui apportera. Maintenant, passer à une mise en page centrée, fonctionne ici, parce que nous avons une sorte de mise en page centrale qui se passe ici. Nous avons en quelque sorte alterné cela, donc quand il s'agit de la mise en page, certains pensent que casser un peu ça pendant que vous travaillez sur la page. Je pense que ce que nous allons faire, c'est simplement montrer le coup de tête, la description de qui vient cette personne, et nous laisserons ça s'asseoir ici aussi. Il y en a déjà deux qui sont là. Peut-être que nous avons [inaudible] Je pense qu'il y a une autre excellente occasion de faire des pièces visuelles interactives ici. J' aime mettre un peu d'interactivité partout où nous pouvons, mais je ne vais pas laisser trop de pouvoir. Comme je l'ai dit, le but ici est vraiment de parler plus de la mise en page, narration plutôt que comme exactement comment faire un certain nombre de traitements réels ici. Donc, sentez-vous confiant certaines de ces images est une bonne façon de faire ça pour vous les gars. Donc, ça commence à être vraiment sympa. Je veux dire, il pourrait y avoir des contrôles ici, peut-être sur mobile, je pense l'expérience mobile peut-être juste passer par là avec votre pouce. Peut-être que ce sont d'autres types de gestes, il y a beaucoup de choses que nous pouvons faire ici, quand vous commencez à optimiser autour du mobile. Mais, pour l'instant, je pense que cela commence à vraiment se façonner bien. D' accord. Alors, pendant que vous traversez, vous vous demandez toujours : sommes-nous sur le but ? On se distrait par rapport au but ? Parce que vous allez commencer à diminuer maintenant, et je pense que, comme dans le croquis, nous avons fait un très bon travail pour les mettre au point au bon moment, et les tirer dans l'action Goto. Donc, dans cette conception particulière, et vous pouvez avoir quelques designs, où l'objectif de votre page d'accueil peut-être trop non seulement augmenter les inscriptions, mais peut-être que vous voulez aussi augmenter l'inscription à la newsletter, donc il y a un nombre de choses qui peuvent se produire sur une page d'accueil, mais il est important de toujours souligner un. Ce sera un domaine où je vais vous montrer une bonne façon de faire ça. Beaucoup de fois, c'est une question de la façon dont vous l'avez configuré sur la page. Alors, passons dans une sorte de zone de contact ici. Je pense que pour ça, on va juste garder ça simple et de couleur, au lieu de le faire... parce que maintenant, on veut, comme je le dis, on veut les finir. Je pense que c'est un excellent moyen d'introduire un formulaire de contact. Mais nous allons aussi avoir des preuves sociales supplémentaires ici. Peut-être que nous allons leur donner l'option. S' ils ne sont pas prêts à s'inscrire, nous allons peut-être leur donner la possibilité de nous suivre un peu. Peut-être voulons-nous les amener dans un type d' interaction avec notre entreprise ou avec le produit. Mais s'ils ne sont pas prêts à s'inscrire, nous voulons leur donner une autre légère touche potentielle et une petite occasion de les convertir en autre force, en un autre entonnoir. Donc, je pense que c'est ce que nous allons faire ici, c'est que nous allons pousser le contact ou le formulaire d'inscription. Mais aussi, peut-être regarder faire quelque chose ici pour promouvoir et montrer leur preuve sociale, mais aussi pour leur donner la possibilité de nous suivre sur Facebook ou Twitter. C' est un traitement très simple ici. On va juste éliminer ce formulaire ici très vite. Encore une fois, j'ai un formulaire que nous avons déjà utilisé dans une conception précédente, que nous savons fonctionne réellement de vue du formatage et du point de vue de la conversion réelle. Le problème avec ce design n'était pas entièrement de savoir si notre formulaire était en train de convertir autant, s'ils avaient l'histoire complète du produit en termes de fonctionnalité de notre appel à l'action. Parce qu'il y a beaucoup de choses que vous pouvez faire ici. Quand il s'agit de vos conversions, vous pouvez simplement avoir un bouton ici qui est-. Inscrivez-vous. Ça marche très bien. Il y a beaucoup d'études autour. Si vous leur faites s'engager à cela et qu'il apparaît un modal, vous serez en mesure d'obtenir le reste des informations pour nous. Les choses fonctionnent vraiment bien si on les entrer dans le... obtenir une partie de leurs informations tôt, et en quelque sorte les conduire directement dans l'embarquement réel. Donc, notre formulaire et le bien de cela, est simple formulaire d'inscription, et ils vont continuer, et cela va effectivement les prendre directement dans l'application réelle, où ils peuvent commencer à engager plus. Donc, je vais éliminer ce formulaire rapidement. Ensuite, nous parlerons dans cette section, et nous parlerons de la façon dont tout cela va fonctionner ensemble. Donc maintenant, nous avons notre formulaire d'inscription, nous avons équilibré ça d'une manière que... Évidemment, la première chose que nous voulons qu'ils fassent est de commencer. Nous voulons les obtenir. S'ils ne sont pas prêts à le faire, nous allons simplement voir s'ils vont s'engager à l'une de ces deux options. Encore une fois, vous pourriez simplifier cela beaucoup plus si vous le souhaitez, et simplement utiliser un appel à l'action qui ouvre un modal ou les emmène vers une autre page, et tout ce qu'ils font est de se concentrer sur cela. Mais nous avons constaté que nous avons eu de bonnes conversions autour d'eux juste commencé lentement dans le processus d'intégration dès le début. Ensuite, nous allons envelopper cette conception avec un pied de page rapide. Donc, l'étape suivante est, je vais terminer cette conception, puis nous allons la mettre en perspective et discuter de la façon d'obtenir des commentaires de votre base d'utilisateurs existante ou au sein de votre équipe interne. 7. Collaboration et commentaires: D' accord. Donc, maintenant, nous sommes prêts à adopter ce design et nous sommes prêts à recevoir des commentaires à ce sujet. Nous allons le faire en l'intégrant dans InVision. Je crée un bon prototype et je vous montre comment le partager avec d'autres membres de votre entreprise ou avec des clients existants. Vous obtenez des retours rapides de haut niveau avant de commencer affiner votre idée un peu plus et à la remettre au développement. Donc, la première chose que vous devez faire, est que vous devez créer un compte InVision gratuit si vous ne l'avez pas déjà fait. Vous pouvez le faire en vous inscrivant sur invisionapp.com, entrant vos identifiants, puis vous aurez un compte gratuit qui est bon pour un projet. J' ai déjà un compte, donc ce que je vais faire est de prendre et de créer un projet. C'est très simple. Je vais juste appeler cette page d'accueil Simply Social. Ça va être un ordinateur de bureau. Il y a beaucoup de choses que vous pouvez faire autour du mobile, mais c'est un projet de bureau, donc je vais juste le créer. La prochaine chose que vous voulez faire est d' intégrer vos conceptions dans InVision. Vous pouvez le faire en les faisant glisser et les déposer ici, sur le forum de navigation, mais j'aime utiliser InVision sync, ce qui est vraiment cool et une excellente façon d'obtenir des choses dans InVision en faisant mises à jour à la volée sans avoir à glisser-déposer quoi que ce soit à peu près pour le reste du projet, ainsi que d'accéder à un tas d'autres ressources partagées avec votre équipe. Ainsi, cela fonctionne avec Dropbox, ainsi que sur votre disque local. Donc, nous avons maintenant nos écrans à l'intérieur d'InVision à l'aide de la synchronisation InVision. Maintenant, nous voulons prototyper ceux qui rendent ces cliquables, afin que nous puissions obtenir des commentaires réels de leur part dans leur contexte sans avoir à leur envoyer des JPEG par e-mail. Alors, allez ici. Nous allons faire quelques changements rapides ici. Nous allons rendre ce fond noir juste pour laisser ça apparaître un peu plus, mais nous sommes prêts à commencer le prototypage. La première chose que vous voudrez peut-être faire est de commencer à lier cela, très rapidement sans écrire de code. Venez ici et nous avons ce modèle d'utilisateur dont nous avons parlé qui va parcourir toutes les pages qui vont être simplement un modèle et nous pouvons appeler ce nav. Puisque nous savons que ça va aller sur toutes les pages, nous allons le faire aller à la page d'accueil réelle. Je fais cela aller à la page d'accueil, puis cliquez sur Enregistrer. Cela va en fait aller à un Tour, et peut-être que nous voulons réellement le conduire vers le bas, ou un endroit sur l'écran. Donc, peut-être que quand je mets cela pour descendre à cette section, ou qu'il pourrait descendre à une URL externe, cela n'a pas d'importance. Donc, maintenant, nous avons ce bouton S'inscrire. Comme évidemment, nous voulons le ramener au formulaire d'inscription. Je veux faire cette transition en douceur, et ensuite nous allons aussi rapidement prototypes. Ceci, nous pourrions prototyper, mais pour des raisons de vitesse, nous allons juste faire rapidement le prototype dans cette section en ce moment. Donc, facilement faire est simplement hotspot. On va porter ça à Témoignage 2, voir ça l'est. Nous allons maintenir cet endroit pour les pages et déposer, et ensuite nous allons le faire ici pour aller à Témoignage 3, et si nous testons tout cela très rapidement, vous verrez, une fois que vous aurez obtenu ça aller à la démo réelle, comment c'est tout va au travail. Donc, je suis en mode aperçu, juste en cliquant sur le globe oculaire, nous pouvons arriver ici, vous cliquez sur S'inscrire et vous conduit juste vers le bas sur la page. Je clique sur Angela Wells, ça va l'amener au premier plan. Eh bien, en fait, appliquez ça à toutes les pages là-bas. Donc, ce que nous allons faire est, nous allons rapidement prototyper le reste de ceci sous ces autres pages , puis nous allons parler de la façon de préparer le terrain pour les commentaires et commencer à obtenir des commentaires à ce sujet. Donc, nous avons tout prototypé et il est prêt à partager. La première chose que je veux faire en premier, en tant que designer qui se prépare à présenter cela, je veux laisser quelques notes, peut-être avoir quelques discussions rapides. Si vous avez cette fonctionnalité sympa appelée Tours, qui nous permet de faire de petites notes avec notre équipe sans avoir à entrer et laisser les commentaires nécessaires. Cela, vous pouvez simplement appeler le point Tour. Donc, peut-être, je vais suggérer et je veux faire ici est, nous pouvons en fait faire un GIF animé pour faire défiler les pensées de flux. Ce sont toutes des choses qui commencent juste quelques discussions. Ce ne sont pas vraiment des commentaires exploitables, mais ce sont des choses auxquelles vous pensez peut-être. Nous pouvons aussi le faire avec une autre section, peut-être que nous faisons la même chose ici où nous disons : « Est-ce la meilleure capture d'écran ? Peut-il être mieux ? » Je vais juste noter, peut-être le rédacteur, nous avons parlé de ceux à travers, peut-être, « Nous devons affiner une copie. Pouvons-nous faire entrer le rédacteur ? » Pour juste faire quelques petits points de discussion avant de nous plonger plus profondément sur ce sujet, donc avec nos équipes. Donc, c'était en mode Aperçu. Nous sommes prêts à partager ça. Donc, pour ce faire, vous pouvez soit aller dans Photoshop, créer une session LiveShare vraiment cool en utilisant notre petit plug-in cool appelé LiveShare PS. Une fois qu'il sera chargé, vous serez en mesure de créer une session de collaboration virtuelle qui tire réellement cette vue de votre conception dans le LiveShare, sorte que vous pouvez collaborer en interne avec votre équipe en de sorte que vous pouvez collaborer en interne avec votre équipe entemps réel pour mettre en place cette conception avant de le faire tester. Ou, vous pouvez simplement aller ici, créer une simple petite URL de partage, définir quelques paramètres, puis commencer à recevoir des commentaires. Donc, je vais utiliser une route de partage et ce qui va se passer, c'est, vous allez obtenir une URL, charger cette page, puis nous allons commencer à recevoir des commentaires. Voici à quoi ressemble le lien de partage. Donc, vous pouvez voir, nous avons fait ces marques qui viennent très belles petites balises ici qui vous aident à illustrer les points de Tour réels que vous avez laissés ou les points de discussion que vous avez laissés pour votre design. N' importe qui peut entrer ici, cliquer dessus, y répondre, vous pouvez les parcourir. C' est une excellente façon de présenter vos idées quand vous ne pouvez pas être là. Donc, nous avons envoyé ceci à partir d'un commentaire et nous avons déjà reçu quelques commentaires qui sont en réponse au point de Tour réel faisant un GIF animé. Tu peux dire : « Super ! Faisons en sorte que cela se produise », mais nous avons aussi d'autres commentaires qui commencent à tomber ici. « Peut-on déplacer ce bouton vers le haut ? Il y a un besoin en ce moment. Il y a un peu d'espace supplémentaire ici dont nous n'avons pas besoin, alors peut-on resserrer ça ? » Ce sont tous les commentaires qui arrivent sur votre design en temps réel. Donc, comme vous le voyez, « Sonne génial », il gère les commentaires à la volée. Ensuite, dans votre compte InVision, vous pouvez commencer à voir ces conversations se dérouler. Pour que vous puissiez répondre. « Chose sûre. Faisons-le », et commence vraiment à avoir cette collaboration interactive qui se déroule dans l'ensemble de votre conception. L' autre grande chose est que, puisque nous avons tout cela dans InVision sync, vous pouvez effectuer ces modifications immédiatement dans Photoshop. Nous pouvons déplacer ce bouton vers le haut et nous allons effectivement cliquer sur Enregistrer. Dès que cela se synchronise avec le serveur, maintenant ce changement sera réellement reflété en temps réel. 8. Synthèse: Alors que vous commencez à pousser votre design vers la ligne d'arrivée, c'est probablement un bon moment pour commencer à faire appel à votre concepteur ou vous êtes ingénieurs et vos développeurs pour commencer à recevoir leurs commentaires et laisser quelques notes qui les concernent en particulier. Vous pouvez facilement le faire. Vous avez évidemment vos 12 points, mais vous pouvez aussi le faire avec des notes de développement vraiment cool. Donc, ici, vous pouvez simplement dire, « Cela aura besoin d'un code supplémentaire que nous n'avons pas. » Vous pouvez dire une note de développement disant : « Ceci est un report de la dernière page de destination. » Toutes les notes que seuls les développeurs verront lorsqu'ils choisissent d'afficher. Donc, la belle chose à propos l'URL de partage est que vous pouvez partager cela avec vos ingénieurs et eux aussi, peuvent cliquer sur et interagir avec le concepteur. Ils peuvent également laisser leurs propres commentaires si nécessaire. Donc, d'autres excellents outils que nous avons pour travailler avec vos développeurs sont Snaps, qui vous permet de prendre des pages réellement codées ou n'importe quelle page URL et de les intégrer dans votre compte InVision. Il y a aussi la capacité des ressources partagées où les développeurs et les ingénieurs peuvent entrer et réellement télécharger tous les fichiers source, images, polices dont ils ont besoin pour pousser cela à la ligne d'arrivée. Donc, InVision commence à prendre le relais. Vous passez en quelque sorte à un rôle de support , mais tout est toujours géré via la plateforme InVision. 9. Conclusion: Donc là, vous l'avez. Quelques principes fondamentaux clés que vous pouvez commencer à utiliser pour augmenter les conversions ou tout projet à l'avenir. Alors rappelez-vous, les commentaires sont une partie très importante du processus créatif, il est important de l'embrasser. Au fur et à mesure que vos objectifs changent, vous devrez changer votre design. Je suis heureux de voir lequel vous créez, s'il vous plaît partager avec moi dans une galerie de projets ci-dessous. 10. Explorez les cours de design sur Skillshare: façon.