Réussir en tant que designer : Comment travailler avec les développeurs

1. Introduction: Salut, je suis Vincent. Je suis designer et développeur. En tant que concepteur, je comprends la frustration qui surgit sur certains projets de design web, où peut-être vous récupérez votre design de votre développeur et cela semble mauvais. Mais en tant que développeur, je peux comprendre la frustration des attentes non communiquées ou impossible de respecter les délais. La bonne nouvelle, c'est que ce sont tous les deux des problèmes qui peuvent être résolus. En communiquant plus efficacement, nous pouvons collaborer plus efficacement. Nous devenons des collaborateurs et non des adversaires, et c'est ce que cela ressent parfois. Ce cours est fait pour vous si vous êtes un concepteur qui prend en charge vos premiers projets de design web et que vous êtes curieux de savoir comment fonctionne le processus moderne. Ou si vous êtes un designer qui n'a jamais travaillé avec un développeur et que vous ne savez pas par où commencer, peut-être que vous avez un peu peur de demander. Mais c'est aussi pour vous si vous êtes un concepteur web, vous n'êtes pas satisfait de la façon dont vos projets se sont déroulés dans le passé. Pour notre projet de classe, nous allons prendre un design existant et le transformer en un système de conception en le décomposant en composants. Au cours du processus, vous apprendrez de nouvelles façons de penser à la conception et vous apprendrez également de nouvelles façons de communiquer avec votre développeur. Vous aurez finalement quelques outils pour mieux collaborer, et vous vous sentirez un peu moins comme si vous parlez deux langues différentes. Je suis excité de commencer. Allons-y. 2. Qu'est-ce est la solution que nous faisons les objets maintenant ?: Qu' est-ce qui ne va pas dans la façon dont nous faisons les choses maintenant ? Si vous êtes dans ce secteur depuis un certain temps, vous savez, relations de concepteur et de développeur peuvent se détériorer avec le temps. Par exemple, dis-moi si tu as déjà ressenti ça. Peut-être que vous envoyez votre designer, votre design à votre développeur, et vous le récupérez et c'est comme complètement faux et vous êtes comme si mon design était génial jusqu'à ce que le développeur y arrive. Ou peut-être qu'ils disent qu'ils pourraient le construire en trois semaines et que ça fait six ans, comme c'est le problème ? Pourquoi ne peuvent-ils pas obtenir le bon positionnement ? Est-ce un problème avec tous les développeurs, comme tous ces problèmes continuent à venir. Qu' est-ce qui garde, pourquoi ne peuvent-ils pas juste vierges ? Ce sont toutes des questions de communication. À titre d'exemple, pensez à votre restaurant préféré. La plupart des restaurants sont divisés en l'avant de la maison et l'arrière de la maison, l'avant de la maison est le personnel d'attente, l'hôte, l'hôtesse, etc. Maintenant, dans un mauvais restaurant. Ces deux parties de la maison ne communiquent pas, et par conséquent, vous obtenez un personnel d'attente surdoué. Vous ne voulez pas renvoyer votre burger parce qu'il pourrait revenir avec quelque chose de plus dedans, mais dans un bon restaurant de votre restaurant préféré, ces deux moitiés de la maison communiquent librement. Ils peuvent même savoir quelque chose sur le travail de l'autre, comme peut-être que le personnel de cuisine apporte parfois un repas à un client, ou que le serviteur prépare une salade. Même s'ils semblent parler deux langues différentes, ils communiquent et collaborent efficacement. Comment pouvons-nous en faire davantage dans l'industrie de la conception et du développement ? Eh bien, d'abord, regardons comment ça tombe en panne. Nous allons regarder ça dans la prochaine leçon. 3. À quoi ressemble le processus de conception Web typique à partir de maintenant ?: À quoi ressemble le processus de conception Web typique ? D' accord. L'heure de l'histoire. Disons que vous êtes un designer indépendant, si vous ne l'êtes pas déjà, et que vous venez de trouver un nouveau client, prenons le à partir de là. A quoi ça ressemble ? Je dois noter que cela s'applique aussi précisément aux équipes ou aux organismes internes. Elle s'applique également au développement d'applications. Je parle juste du développement web parce que c'est ce que je sais, mais c'est probablement un processus similaire tout au long. Ça fait des semaines de réunions. Vous êtes d'accord sur la direction. Vous êtes excité de commencer, le client est excité de commencer, et vous êtes comme, allons-y. Tu travailles seul pendant un moment. Vous concevez votre page d'accueil, vos pages internes, etc. Vous les envoyez au client. Le client approuve enfin. Ça fait quatre mois de révisions et tu es enfin là. Il est presque temps pour le lancement et vous avez un délai de six mois pour ce projet, donc il vous reste deux mois. Tu es presque là. Vous l'envoyez au développeur et le développeur dit : « Je ne peux pas le faire dans deux mois. » Pire encore, ils vous disent  : « Je ne peux pas faire ça dans quatre mois. J' ai besoin d'au moins six mois de plus pour construire ce projet tel qu'il est conçu. » C' est terrible nouvelle. Tu ne peux pas revenir au client avec ça. Qu'est-ce que tu fais ? Vous dites : « Très bien, développeur, faites de votre mieux et nous reviendrons dans quelques semaines. » Ils commencent, et ils vous envoient leurs prototypes, et devinez quoi ? C' est une benne en feu. Il y a des gros titres au mauvais endroit, des choses de la mauvaise couleur, rien ne fonctionne correctement. Tout est buggy. C'est comme, qu'est-ce qu'ils ont fait tout ce temps ? Ne s'en soucient-ils même pas ? Qu'est-ce qui donne ? Il reste un mois dans le processus et le client se rend compte soudainement qu'il a oublié la page super importante. Il doit être là pour un lancement. Vous avez furieusement conçu une nouvelle page, et vous l'envoyez à votre développeur même si c'est probablement un peu rugueux sur les bords. Le développeur le développe furieusement et il revient, et encore une fois, tout est buggy, tout va mal. C' est quoi leur affaire ? Enfin, c'est la semaine de lancement, les sites buggy, personne n'est content, il a été stressé toute la nuit, le client n'est pas content, et le site est en retard. C' est un scénario exagéré, mais peut-être que cela vous semble un peu familier. Peut-être que vous avez vécu quelque chose de similaire. Où va ce processus mal ? Eh bien, je dirais, juste ici, au tout début. Qu' aurions-nous pu faire différemment au début pour commencer à résoudre ces problèmes ? 4. Participer des développeurs tôt: J' espère que vous n'avez pas expérimenté un projet comme celui que nous venons de parler dans la dernière leçon. Mais il est probable que ça ait pu sembler un peu familier. Vraiment pourquoi ça ne le devrait pas ? Je veux dire, c'est un processus assez courant. Vous concevez, vous envoyez au développeur, ils le développent et vous continuez à leur donner des coups de pied jusqu'à ce qu'ils obtiennent correctement et finalement ils le lancent. Qu'est-ce qui ne va pas avec ça ? Eh bien, le problème est que le bon design prend beaucoup de temps, cela prend un certain temps. calant le développement dans la dernière minute possible comme ça, les développeurs finissent par se précipiter et faire un travail de mauvaise qualité. Un autre problème avec cela est que les développeurs manquent de contextes, comme pourquoi est-ce que je construis ce que je construis ? Quand cette décision a-t-elle été prise et pourquoi ? Dans l'exemple de projet, le concepteur est parti pendant des mois. Le problème avec cela est que plus vous passez concevoir sans aucune contribution du développeur, plus votre conception a tendance à s'éloigner de la réalité. Parce que cela peut se révéler des mois plus tard, vous avez conçu quelque chose qui n'est même pas possible à mettre en œuvre dans le temps que vous avez alloué pour le projet. Peut-être que vous pensez, qu'en est-il de la conception par comité ? Suis-je à risque de ruiner mes conceptions en laissant un développeur entrer dans le processus. Le design va changer. Mais ce n'est pas une mauvaise chose. Par exemple, un développeur peut vous aider à comprendre ce qui est même possible à mettre en œuvre dans le temps et le budget alloués. Ils peuvent également trouver d'autres problèmes, comme des problèmes d'accessibilité dans un design. Peut-être que votre design est beau, mais il ne tient pas compte des utilisateurs à faible vision et un développeur peut vous aider à le repérer. Ils peuvent même connaître de nouvelles technologies ou techniques qui peuvent améliorer la conception. Ce sont tous des changements, mais ils sont tous de bons changements. Il est important qu'ils soient découverts avant de passer quatre à six mois, ce qui rend le pixel de conception parfait. Comment impliquons-nous les développeurs dès le début ? Parlons de ça dans la prochaine leçon. 5. Comment puis-je faire participer les développeurs de Get au début ?: Comment puis-je impliquer les développeurs dès le début ? Qu'est-ce que ça veut dire ? Quand devrais-je les impliquer ? Eh bien, quand vous avez un nouveau projet, quelle est la première chose que vous faites ? Vous avez une réunion de lancement ? Avez-vous une réunion avec le client, pour juste comprendre exactement ce dont ils ont besoin. Une sorte de réunion ? Vraiment, à tout moment très tôt dans le processus, est un bon moment pour impliquer les développeurs. Le plus tôt sera le mieux. Beaucoup d'équipes impliquaient des développeurs, ici, quand ils devraient vraiment être impliqués, ici, très tôt. Cela signifie pas grand design révèle, surtout pas au développeur. Par exemple, pour de nombreuses personnes, le processus de conception commence par une réunion comme celle-ci, où le livrable est peut-être un organigramme. Vous essayez de cartographier, comment le client du site, passe du point A au point B. C'est là que le développeur devrait être impliqué. Beaucoup d'agences de design pensent que cela ressemble à ceci, mais cela devrait ressembler à ceci, où tous ceux qui touchent le projet y sont inclus tôt, dans le processus. Vous lui faites esquisser sur un tableau blanc si c'est ce qu'il faut. Ensuite, tout au long du processus, maintenez-les impliqués. Posez beaucoup de questions. Résistez à la tentation d'y aller, et concevez par vous-même pendant des mois et des mois. Si vous n'êtes pas sûr de ce dont ils ont besoin, ou si vous n'êtes pas sûr de ce qui est techniquement possible, demandez même si cela signifie que vous leur envoyez des conceptions inachevées, ou des actifs bruts comme des trames filaires. C' est bon. Toute information peut nous aider. Maintenant, en fin de compte, vos processus sont à vous de décider. Je ne vais pas vous dire comment travailler, mais, si vous pouvez impliquer vos développeurs tôt, faites-le. Le résultat est que le développeur est impliqué dans le succès du projet. La relation est plus collaborative, plus interactive, moins contradictoire, et finalement elle conduit à des utilisateurs plus heureux, et des clients plus heureux, ce qui est important. 6. Améliorer le processus de mise en place de conception: La deuxième chose que nous pouvons faire pour améliorer nos relations avec nos développeurs et nos collaborations est d'améliorer notre processus de transfert de conception. Maintenant, le transfert de conception est le processus que vous utilisez pour transmettre vos conceptions à vos développeurs afin qu'ils puissent commencer à faire leur travail, et c'est un problème difficile. En fait, vous vous souviendrez que c'est là le processus du point de vue du concepteur dans notre projet imaginaire, c'est là qu'il semblait mal tourner. Le développeur n'était pas d'accord sur la portée. Ils n'ont pas pu le faire à temps et quand ils l'ont fait, c'était buggé et mauvais. On dirait qu'ils ne s'en fichaient pas. Mais comment notre processus de conception peut-il améliorer cela ? Eh bien, je pense que pour comprendre cela, il est utile de penser à ce qu'un développeur a réellement besoin d'un design. Qu' est-ce qui se passe dans leur esprit quand ils obtiennent un design d'un designer et qu'ils commencent à se développer ? Pour vous donner une idée claire de cela, passons par un fichier de conception que je viens de recevoir. Disons que je suis le développeur dans ce terrible projet imaginaire et voir mon processus de pensée là-bas. Quand je reçois un design, l' une des premières choses que je commence à construire est ce que je considère comme le cadre du site. Nous parlons de tout ce qui apparaît sur chaque page, comme votre en-tête, votre pied de page ici, et tout ce qui pourrait apparaître partout sur le site. Ensuite, je vais passer dans d'autres sections importantes comme cette image de héros ici. Tous les appels marketing courants, des choses comme ça, et je deviendrai de plus en plus granulaire au fil du temps au point que je construis des petits modules individuels comme celui-ci. Mon objectif est en fin de compte, aussi fidèlement que je peux, recréer ce design mais de le faire en code. Parfois, le fichier de conception, comme vous le verrez, rend cette tâche difficile ou même dans certains cas impossible. Dans un processus plus collaboratif, j'aurais été là pour toutes les réunions de conception qui ont mené à ce design final ici que je viens d'obtenir. Mais disons par souci d'argument que je n'ai pas de contexte, je viens de recevoir ce design du concepteur avec l'espoir que dans quelques semaines, ils ont un site Web de travail. Parlons de certaines des choses de cette conception qui le rendent difficile et à son tour, vous apprendrez quelques-unes des choses dont vos développeurs auront besoin de vous quand ils obtiennent un fichier de conception [inaudible] vous. de suite, l'une des premières choses que je regarde est la structure de superposition. Vous pouvez voir dans notre panneau Calques, certains noms de calque sont utiles comme j'ai un logo ici. Là aussi, chaque groupe de couches est ouvert, ce qui est vraiment aggravant pour travailler avec. Mais nous avons quelques noms de couches ici, mais les couches principales, les groupes, sont tous numéro un, numéro deux. Vous avez la recherche aléatoire, laissez-moi trouver un exemple, des formes ici. Je ne sais pas quelle est la forme deux, la forme quatre, la forme trois. Qu'est-ce que c'est que tout ça ? Les couches sont très désorganisées, ce qui en fait un fichier vraiment lent et difficile pour moi de travailler juste à partir du [inaudible]. Je dois aller manuellement et sélectionner les choses et bricoler jusqu'à ce que j'obtienne la bonne partie. La deuxième chose que je remarque ici est que dans la navigation là-bas. 7. Présentation des systèmes de conception: Vous pouvez être habitué à penser à votre conception Web comme des pages et des mises en page. Peut-être que c'est ce que vous avez l'habitude de remettre à votre développeur, vous êtes habitué à leur envoyer un grand PSD plein de designs de pages entières. Mais si vous y pensez, vous n' êtes vraiment pas en train de concevoir une page entière, n'est-ce pas ? Vous concevez un système, un système par lequel d'autres personnes créent des pages. Peut-être que votre développeur crée ces pages. C' est un système composé de composants modulaires et réutilisables. Nous parlons de titres, de vidéos et de curseurs et de tout ce qui est destiné à être réutilisé dans le site Web et le design. Pensez en termes de LEGO, pas de mise en page. Donc, vous devez toujours faire vos mises en page complètes, mais une fois là-bas, une fois que vous êtes satisfait avec eux, peut-être que vous commencez à diviser les choses en petits composants réutilisables. Vous pouvez également penser en termes de directives pour leur utilisation. Par exemple, combien de pixels vont entre ce module et ce module, ce composant et ce composant. Ce composant peut-il apparaître à côté de cet autre composant, des choses comme ça. Maintenant, ce n'est pas censé être une classe de systèmes de conception. Il y a beaucoup de meilleures classes pour cela, dont certaines sont ici sur Skillshare. Donc, je vais lier à quelques d'entre eux. C' est vraiment juste pour vous faire penser à briser vos designs et nous pouvons parler du « pourquoi » dans la prochaine vidéo. 8. Mais, mais, mais...: En pensant à des systèmes de conception, vous pouvez avoir quelques objections à l'esprit. Peut-être que vous pensez, qu'en est-il de la mise en page et de la composition ? Si je décompose mon design en pièces et pièces individuelles qu'un développeur peut assembler d'une manière ou d'une autre, cela ne va pas ruiner mon design ? Eh bien, tout d'abord, on pense comme ça quand on se développe. Quand je reçois un nouveau projet, l'une des premières choses que je fais est de commencer à diviser les choses en petits morceaux réutilisables pour que je puisse construire des choses plus tard sur la route. Cela fonctionne comme ça de toute façon, que le design en soit responsable ou non. Mais deuxièmement, vous pouvez toujours concevoir dans le navigateur. Pensez au navigateur comme un autre outil de conception. Ce n'est pas parce que le design ne se produit pas dans Photoshop, ou Sketch, ou quel que soit votre outil, que cela ne se produise pas. Vous pouvez toujours concevoir directement. Vous pouvez toujours nous dire aux développeurs comment assembler les choses pour qu'il ressemble bien. Vous pouvez aussi penser, composants ne me limiteront-ils pas, quel point mes créations peuvent être créatives et belles ? Eh bien, non. Ces composants, rappelez-vous, peuvent être assemblés. S' est accroché comme des briques Lego. Regarde cet éléphant. C' est un éléphant géant fait de minuscules morceaux de Lego. Vos composants ne vous limitent pas. En outre, il est important de noter que vos composants eux-mêmes peuvent être plus élaborés. Vous n'êtes pas limité en termes de design. Vous pensez peut-être aussi, mais cela n'a aucun sens pour mes clients. Comme il y a des petites entreprises et elles n'ont tout simplement pas le budget pour quelque chose comme ça. Je dirais que le système de conception n'a pas besoin d'être très large, détaillé et élaboré. En fait, même un simple peut offrir beaucoup de valeur. Par exemple, si vous avez divisé votre design en pièces individuelles, vous pouvez livrer rapidement une nouvelle page. Cela aurait beaucoup aidé dans notre exemple de projet, où le client avait cette demande de dernière minute pour une page, et le développeur n'a pas pu la livrer à temps. S' il avait pu entrer dans sa poubelle de petits morceaux pour l'assembler, le concepteur n'aurait même pas eu à sauter dans l'outil de conception. Les systèmes de conception permettent une remise en douceur aux développeurs. Ils n'ont pas à deviner autant. Une fois le système conçu, vous pouvez créer de nouvelles fonctionnalités et de nouvelles pages sans trop de tracas. C' est en fin de compte moins de frustration pour tous ceux qui participent au processus. 9. Exemple de système de conception: Revisitons ce PSD d'avant. Celui que le concepteur a centré le développeur et nous avons traversé et toutes les questions qu'ils avaient. Souvenez-vous de toutes ces questions. Examinons à travers ce que ce processus pourrait ressembler si le concepteur avait conçu avec des composants à l'esprit. À quoi ressemble le fait d'avoir un fichier de conception qui prend en considération les composants et les systèmes de conception dans le cadre du processus de conception Regardons ce fichier. C' est un kit d'interface utilisateur d'une designer nommée Meagan Fishers, c'est une designer web. C' est dans Adobe XD. Si vous n'êtes pas familier, c'est le programme de conception de l'interface utilisateur d'Adobe. C' est excellent si vous n'êtes pas familier, allez-y et téléchargez-le. C' est gratuit, c'est vraiment bon. Ils ont beaucoup de kits d'échantillons. Ils les appellent des kits d'interface utilisateur, mais c'est un peu la même chose qu'un système de conception. Juste ici sous le fichier, Obtenez des kits d'interface utilisateur. Vous pouvez obtenir celui avec lequel je travaille ici sous plus de kits d'interface utilisateur. Regardons cela et voyons ce qui rend cela différent du PSD. À première vue, cela semble très similaire. Il y a cette section marketing ici. Plus de sections marketing. Des éléments de base du site comme votre nerf, votre logo et éventuellement votre pied de page. J' ai un bon point de départ. Mais qu'est-ce qui rend cela différent du PSD ? de suite, si nous zoomons un peu, vous pouvez voir comment elle a cette configuration en carton. Vous avez le principal marketing de la page d'accueil avec toutes les informations marketing. Puis elle vous emmène avec des tableaux d'art à travers un flux d'inscription. Vous pouvez voir toutes les étapes du processus d'inscription pour cette application imaginaire qu'elle a conçue. Ensuite, vous avez vos écrans de tableau de bord ; Tableau de bord 1, Tableau de bord 2, Tableau de bord 3, etc. jusqu'au service de réservation. Toutes ces choses me donnent déjà un contexte plus large de la façon dont toutes ces choses s'intègrent. Vous remarquerez qu'il n'y a pas d'états Hover ou quoi que ce soit comme ça. Où est le système de conception, où les composants ? Si nous zoomons un peu plus loin, vous pouvez voir que nous avons plusieurs autres tableaux d'art ici à considérer. Maintenant, nous allons zoomer sur celui-ci ici. Elle appelle ça un kit d'interface utilisateur, mais c'est un système de conception. Vous pouvez utiliser ces mots de façon interchangeable. Maintenant, nous avons déjà des exemples de styles typographiques de base. Nous avons notre en-tête est 1-4. On dirait que nous avons des étiquettes de texte et de formulaire et d'autres éléments mineurs. Si vous zoomez un peu plus loin, vous pouvez voir qu'elle a des styles de police et des noms de police et exactement où ils sont utilisés. Le titre et le corps des textes. Ce sont des choses descriptives qui nous disent quand utiliser quoi. Nous avons également des échantillons de couleur, chacun avec le numéro hexadécimal de la couleur. Le tableau d'art suivant s'appelle Appels à l'action et icônes. Vous avez déjà une idée de ce que chacun de ces éléments doit être utilisé. Elle utilise les noms des tableaux d'art, comme vous pouvez le voir, les noms des calques dans Photoshop. Ils sont un peu plus utiles parce qu'à l'intérieur de ce tableau d'art, vous pouvez voir sur la base de ces gros titres, quelle est l'intention de chacun d'entre eux. Il s'agit d'un appel à l'action sur l'obscurité ou l'appel à l'action marketing. On peut retourner à notre tableau d'art marketing ici. Vous pouvez voir que nous avons, appel marketing à l'action sur le noir, puis à l'appel marketing à l'action sur la lumière. Ils correspondent parfaitement à celui qu'elle a conçu. Elle a aussi des états Hover. Vous pouvez voir l'état du survol illustré par la petite icône de la souris. Ensuite, vous voyez un produit CTA primaire. Qu' est-ce que le produit primaire ? Reprenons le zoom arrière. Cela correspond au produit réel que l'utilisateur utilisera. Vous pouvez voir le bouton correspondant juste ici, Réserver un service. Cela me donne déjà beaucoup d'informations juste basé sur la façon dont elle a nommé des choses sur les situations qui appellent à l'utilisation de laquelle de ces boutons. Elle a aussi inclus les états Hover, ce qui est génial. Nous avons les styles alternatifs sur la lumière et puis il ou elle a inclus un style handicapé. C' est un état dont nous n'avons pas parlé quand nous avons regardé le PSD tout à l'heure. Les styles désactivés se produisent si vous ne voulez pas que l'utilisateur puisse cliquer sur un bouton dans une certaine circonstance. Peut-être qu'ils ont entré des informations non valides et que vous ne voulez pas qu'ils progressent tant qu'ils ne l'ont pas corrigée. L' état des personnes handicapées a besoin d'une conception. Nous avons également un style CTA secondaire avec la petite icône à gauche. Vous voyez cela répété ici. Ici, nous avons des icônes, qu'ils sont tous rassemblés ici en un seul endroit, ce qui est génial. Je ne peux pas vous dire combien de fichiers de conception j'ai obtenu là où les actifs étaient tous dispersés sur le disque dur des concepteurs. Je devais aller les poursuivre et trouver exactement quels biens j'avais besoin. Pas seulement ce dont j'avais besoin, mais les récoltes dont j'avais besoin. Parfois, l'actif n'était pas préparé dans le PSD d'une manière que je pouvais utiliser sur le site Web. Elles sont toutes prêtes à partir, prêtes à exporter ici. Que nous parlons d'actifs, allons zoomer et regarder ça. Elle a toutes ses images ici. Tout prêt recadré et prêt à partir. Ce sont tous les côtés, il ressemble à toutes les images de la barre latérale. Je peux voir exactement où chacun est utilisé et quand. C' est déjà simple pour moi de l'exporter et de le déposer dans mon code. Ça rend mon travail beaucoup plus facile. Si nous regardons le prochain tableau d'art, nous avons des champs de formulaire. Il semble que chaque élément de forme majeur soit pris en compte. Nous avons nos entrées de texte ici. Si nous zoomons, vous pouvez voir que nous avons placé un exemple de texte d'espace réservé. Nous avons l'état actif où le texte de l'espace réservé disparaît. Nous avons un actif avec l'utilisateur ayant mis du texte et puis nous avons un état d'erreur, ce qui est génial. C' est génial d'avoir tout cela ici prêt pour que je commence à transformer cela en code. Elle a également conçu des bascules personnalisés et des éléments multi-sélection. Ce sont des éléments de formulaire plus spécialisés que vous verrez. Si vous cliquez l'un, l'autre s'éteint et si vous cliquez sur l'autre, la précédente s'éteint. Nous avons tous nos états Hover, tous nos états actifs présents et comptabilisés. Ensuite, on a des listes déroulantes. À quoi ressemble-t-il lorsque le menu déroulant est fermé ? A quoi ça ressemble quand il est ouvert ? À quoi ressemble-t-il lorsque l'un des éléments de la liste déroulante est survolée. Alors, à quoi ressemble la liste déroulante sélectionnée ? C' est un autre état dont nous n'avons pas parlé une fois que l'élément est dans son état final. A quoi ça ressemble ? J' ai une sélection plus personnalisée ici avec quelques images et quelques textes optionnels ici Ensuite, nous avons des cases à cocher, qui encore une fois nous avons un état d'erreur zones de texte. C' est un qui se décoiffe souvent. Ces petits composants de service qui décrivent un service et peut-être ce sont des états différents. On dirait qu'elle a oublié de mettre à jour l'étiquette ici, mais c'est bon. Je peux généralement avoir une idée de ce que son intention est ici à partir de la conception et de la voir à la fois hors contexte. Comme à quoi ça ressemble-t-il par lui-même ? Mais aussi dans le contexte de la conception finie. La prochaine chose que nous pouvons regarder est nos éléments de la barre latérale. Vous vous souvenez peut-être de la barre latérale utilisée. Ici, nous avons non seulement une barre latérale, mais aussi une deuxième barre latérale qui se produit plus tard lorsque l'utilisateur va plus loin dans l'application. Nous avons des exemples de ce à quoi ils ressemblent, quoi ressemble chaque élément sur Hover, et quand vous avez cliqué dessus, même ici, et puis il y a une autre petite barre de progression ici qu'elle a conçue. Chaque état obtient son propre design de sorte qu'il n'y a aucun doute sur ce à quoi il ressemble. Quand ils sont démarrés, quoi ressemblent-ils quand ils ont fini ? Tout est bien là. Nous avons tous les états avec cette barre latérale remplie pour nous. Maintenant, nous avons à nouveau des composants marketing, basés sur le nom du tableau d'art. Je peux deviner que cela n'est utilisé que sur la section marketing du site, donc nous avons cet appel à l'action avec la navigation en haut, un autre appel à l' action et juste plus de composants. Une chose à faire ici est de savoir comment, si nous revenons à gauche, nous commençons par quelque chose de simple comme la typographie, couleurs, les boutons et leurs états. Nous devenons de plus en plus complexes progressivement à mesure que nous allons à droite, et vous pouvez voir qu'au moment où nous arrivons aux composants de service, nous parlons d'éléments du site qui sont assez compliqués, composés d'éléments plus petits de étapes précédentes. Vous pouvez voir un exemple de nos boutons de service ici, un petit composant de carte ici avec toutes nos icônes. Ce sont tous des exemples de composants qui ont été extraits et qui sont reproductibles. Ensuite, vous pouvez les voir plus tard utilisés dans l'application réelle, dans le contexte de l'application où l'utilisateur va passer par pour réserver un service pour leur modèle. Peut-être que cela semble compliqué et c'est juste beaucoup de travail, et c'est le cas. Mais quels sont les avantages ? Pourquoi le ferais-tu comme ça ? Eh bien, tout d'abord, il y a très peu de questions pendant que je travaille sur où les choses vont et ce qu'elles font. Donc, même si peut-être quelque chose n'est pas pris en compte, comme un état de vol stationnaire d'un certain élément, basé sur toutes ces informations supplémentaires, je peux faire une supposition plus précise si je le dois. Il réduit considérablement les allers et retours, et toutes les lacunes que ce fichier de conception laisse à ma connaissance, peuvent être comblées par la communication. Je peux poser des questions, mais moins d'entre elles, donc c'est moins aggravant pour vous et ça prend moins de temps pour nous deux. Le fichier semble manquer des styles mobiles, mais c'est bon. Supposons que j'ai été inclus ici dans le processus de conception jusqu'à présent, et nous avons décidé mutuellement que le client n'avait pas besoin de styles mobiles. Peut-être que le client ne veut pas explicitement les styles mobiles et parce que leurs clients ne l'utilisent pas. C'est bon. Mais s'il s'est avéré que le concepteur avait complètement oublié mobile et qu'il y a un brouillon pour le faire, il n'y a pas autant de choses ici que je ne peux pas comprendre par moi-même. Il y a certaines parties de celui-ci que j'aurais certainement des questions sur ce qu'ils pourraient ressembler sur mobile. Comme ceci est un élément assez large. A quoi ça ressemble ? Comment ça se décompose ? À quoi cela ressemble sur mobile ? Ça pourrait être dur pour moi de deviner. Mais pour la plupart, puisque nous travaillons avec des composants, je peux essentiellement comprendre à quoi cela ressemblera sur mobile et je peux aider le concepteur et lisser le processus pour eux. Tout ce qu'ils ont à faire est de me fournir des bases et certains éléments qui n'en tiennent pas compte. Alors, quels sont les avantages d'Adobe XD ou autre chose comme ça, comme Sketch sur quelque chose comme Photoshop ? Eh bien, si vous travaillez avec Photoshop depuis un moment et que c'est là que vous êtes à l'aise, c'est bon. Mais ces outils offrent des avantages assez significatifs. Par exemple, quand nous parlons de composants, regardons un exemple. Disons que le client décide de cette couleur ici, que nous pouvons voir en cours d'utilisation sur le site de marketing. C' est juste là, je crois. Disons qu'ils décident que c'est trop large et qu'on doit le changer. Eh bien, ouvrons la barre latérale, parce que XD a déjà le concept de composants intégrés, nous pouvons juste changer cela une fois. Disons que nous voulons restreindre cet appel et que nous voulons le rendre plus étroit également. Maintenant, c'est évidemment un changement laid, mais puisque nous le changeons une fois là-bas, le changement se propage à tout autre composant basé sur lequel est plus proche de la façon dont les choses fonctionnent lorsque nous écrivons du code. Vous changez les choses une fois et ça se répète partout ailleurs. Un autre exemple. Disons que le client dit que j'ai juste besoin de toutes ces images pour être rondes. Normalement, dans Photoshop, vous devriez partir, ok, je dois changer toutes ces choses individuellement et cela prend une éternité, et puis si le client veut que ça change à nouveau, alors vous devez tous les changer à nouveau. Ça prend un certain temps. Mais ici, vous changez l'un d'entre eux parce qu'ils sont tous liés, parce qu'ils sont tous basés les uns sur les autres, ils changent tous en même temps, ce qui rend les choses beaucoup plus faciles pour vous. Une autre chose intéressante que XD fait pour nous est, disons que le client a décidé qu'il voulait mobile. Normalement, dans Photoshop, vous devriez entrer et juste positionner manuellement toutes ces choses comme si vous deviez comprendre cet oiseau descend ici et ensuite dans quel ordre ces choses se cassent ? Parce qu'ils vont se déplacer dans un ordre spécifique sur le web. Vous devez comprendre tout cela dans votre fichier et le faire un par un, mais XD nous permet de, si vous prenez cette poignée, il sait que ce sont des éléments individuels là-bas, et vous pouvez voir qu'il les décompose en leur propres colonnes. Ensuite, nous avons une version mobile de ce module qui nécessite très peu de travail supplémentaire de notre part. Vous vous souvenez peut-être quand je regardais le PSD que j'ai dû sortir le petit outil de mesure, j'ai utilisé par habitude l'outil de capture d'écran sur le Mac, et je l'utilise pour mesurer les pixels entre les éléments. Mais dans XD et d'autres outils comme Sketch et un autre appelé Figma, vous pouvez appuyer sur la touche Alt et vous montrer la distance au bord du tableau d'art de tout ce que votre souris est terminée. Si vous maintenez la touche Alt, si vous avez un élément sélectionné, vous maintenez la touche Alt et déplacez la souris sur n'importe quel élément suivant que vous mesurez la distance, vous pouvez voir qu'il me dit exactement la distance en pixels à partir de l'élément suivant. C' est 32 pixels. Cette colonne mesure 32 pixels de large, et cette gouttière est ici 34 pixels de large, ce qui est vraiment pratique pour moi. Quand je travaille, je n'ai pas besoin d'y retourner et de demander encore et encore. Je n'ai pas besoin d'ouvrir mon outil de mesure encore et encore. J' appuie juste sur Alt et je peux voir juste là quelle est la distance exacte. Je vais brièvement aborder les capacités de prototypage de XD, et il y a d'autres outils qui le font. Mais si j'appuie sur le bouton de lecture ici, je reçois un aperçu de l'application. Vous pouvez effectivement relier les tableaux d'art de telle sorte que lorsque vous appuyez sur Play, vous obtenez un prototype du site et il est en fait interactif. Vous pouvez l'utiliser pour créer des balises assez détaillées, y compris des animations et des choses comme ça. Donc c'est défilant. Je peux interagir avec elle d'une manière que je puisse interagir avec un site Web réel. Voyez ce qui se passe lorsque je clique ici. Ouais, ça m'amène à la page suivante de ce flux. Vous pouvez donc le faire en allant dans l'onglet prototype, et vous pouvez créer des liens entre les tableaux d'art et aussi entre les éléments des tableaux d'art, composants individuels des tableaux d'art, de sorte que lorsque vous appuyez sur le bouton de lecture, vous pouvez cliquer sur cette chose et il vous amène à l'écran suivant, puis nous pouvons lier. Si nous voulions aller pour un plus complet, nous pouvons lier cela à là et voyons ce qui se passe quand j'appuie sur Play et cliquez dessus et ça me mène à l'écran suivant. Donc, vous avez une idée ici que c'est vraiment plus conçu pour le web et pour les interfaces d'une manière que Photoshop ne peut tout simplement pas le suivre. C' est juste que ça ne fait pas la plupart des choses. Cela rend votre travail plus facile en tant que concepteur, mais aussi en tant que développeur, cela rend mon travail beaucoup plus facile. Il y a tellement moins de creuser et tellement moins de frustration avec l'utilisation de ces programmes par rapport à quelque chose comme Photoshop. Pour votre projet de classe, j'aimerais que vous conceviez un système. Alors prenez un vieux design de votre choix ou commencez à nouveau et décomposez-le en composants. Votre système de conception devrait inclure un guide de style pour la typographie. Ainsi, les en-têtes niveaux un à trois, paragraphe, les styles de liste, sont tous les deux ordonnés et non ordonnés. Les éléments de formulaire tels que les boutons et les entrées de texte, et les liens. Inclure aussi des états comme Hover et onclick sur les états pour les boutons et les liens. Incluez des nuanciers de couleur, des guides de couleur afin que le développeur sache quoi utiliser. Inclure au moins trois exemples de composants distincts. Cela peut sembler beaucoup, mais nous avons une liste de contrôle pour vous dans les ressources de la classe, donc vous n'êtes pas aveugle. Quand vous avez terminé, s'il vous plaît partagez-le. J' aimerais voir ce que vous venez avec et si vous avez des questions, n' hésitez pas à poser. Je suis sûr que moi ou d'autres membres de la communauté de partage de compétences pouvons vous aider. 10. Conseils de conception de système: Voici quelques conseils pour créer vos premiers systèmes de conception. Une des premières choses que vous pouvez faire est d'éviter de faire des changements arbitraires. Donc, par exemple, si vous voyez ce titre et que vous souhaitez vraiment que ce soit de petites majuscules, cela aurait l'air beaucoup mieux. Il est important de se demander si ce style est-il réutilisable ? Si je change cela, tous les autres titres devraient-ils changer ? En outre, comment cela affecte-t-il les éléments qui l'entourent ? Devront-ils changer parce que si celui-ci change de conception ? Je ne dis pas de ne pas faire de petites bouchons, suffit de considérer tout le système avant de le faire. Une autre chose que vous pouvez faire qui rendra la vie de votre développeur plus facile est d'être aussi détaillée que possible. Incluez des éléments comme des valeurs de couleur hexadécimale pour votre jeu de couleurs, distances de pixels entre les éléments, des choses comme ça. À titre d'exemple, voici une capture d'écran de Polaris. C' est le système de conception de Shopify. Vous pouvez voir non seulement ils incluent les couleurs principales de la marque, ils comprennent également diverses teintes des couleurs ainsi, le tout en hex. Ils incluent des informations détaillées sur l'espacement, mais pas seulement l'espace lui-même, comment choisir l'espacement, leur guide de style enseigne. Si vous n'avez pas réfléchi à des détails comme ceux-ci, votre développeur va avoir une tonne de questions. Ça rendra les choses un peu ennuyeuses pour vous, ou pire encore, elles vont commencer à se concevoir et nous savons tous comment cela peut se terminer. Ils pourraient également deviner mal et donner l'impression qu'ils ne se soucient pas de votre design et qu'ils ne se soucient pas si ça a l'air mauvais. Donc soyez détaillé. Si vous ne savez pas ce dont ils ont besoin, alors demandez-leur. Une autre chose que vous pouvez faire est juste d'explorer au-delà de photoshop. Photoshop est un vieux outil et il en fait beaucoup de ce dont nous parlons, très difficile et lent. Il n'a vraiment pas été construit pour concevoir des interfaces, mais il y a des outils spécialement conçus qui étaient, par exemple, l'un des plus populaires est appelé sketch. Il est utilisé partout dans ce secteur, mais Adobe dispose d'un outil gratuit appelé XD. Il va fonctionnalité pour fonctionnalité avec esquissé vraiment bon. Figma en est une autre qui est excellente. Tous les trois outils valent la peine d'essayer, vaut la peine de donner votre temps si vous l'avez. Voici un exemple de ce que cela pourrait ressembler à un XD. C' est encore une fois la conception des pêcheurs Meghan. Vous pouvez voir ici ce qu'elle inclut dans son fichier XD. Les outils de remise sont également super utiles. Il existe un autre outil spécialement conçu qui est juste là pour le transfert du développeur concepteur. XD a cette fonctionnalité intégrée, vous pouvez cliquer sur partager et partager votre conception avec votre développeur, mais il y a aussi quelques autres outils conçus pour cela. Le plus populaire est appelé Zeplin. C'est génial. Si vous téléchargez un fichier de conception très bien structuré, il peut réellement écrire du code pour votre développeur et obtenir certaines des tâches de travail occupé ennuyeux hors du chemin pour eux, ce qui est génial. Avocode est un autre qui fait quelque chose de similaire. En fin de compte, ces outils de conception améliorent la collaboration. Ils le rendent plus facile à concevoir, ils le rendent plus facile pour nous de construire. Les outils de transfert vous faciliteront la vie et la vie de votre développeur. Encore une fois, cela conduit à des relations plus collaboratives, moins accusatoires, ce qui est formidable. Alors s'il vous plaît essayez les nouveaux outils, et si vous ne l'avez pas déjà fait, je suis sûr que votre développeur vous en remerciera. 11. Créer de la confiance avec vos Devs: Le dernier et probablement le plus gros problème que ce processus de conception imaginaire avait été la relation contradictoire entre le concepteur et le développeur. Vous vous rappelez peut-être que le designer a dit Pourquoi ne peuvent-ils pas juste comprendre ça ? C' est un problème difficile à résoudre, mais c'est aussi assez important. Comment commençons-nous ? L' une des premières choses que nous pouvons faire est d'assumer une intention positive. Je sais à quel point il peut être frustrant de travailler si dur sur un design, l' envoyer au développeur, et il revient et tout est drogué et merdé. Une grande partie de cela peut être aidée par les choses dont nous avons parlé plus tôt, les exercices de collaboration, la conception et le système. Mais toujours invariablement, il y aura des incohérences, il y aura des bogues, il n'y a pas moyen de contourner cela. Gardez une tête fraîche, évitez de blâmer. Il y a tout ce qui aurait pu faire revenir le design d'une manière inattendue. qui n'est pas le moindre, parfois en tant que développeur, c'est tout ce que je peux faire pour que la chose fonctionne. Bien sûr, une partie de la conception va gâcher. Bien sûr, les choses vont glisser à travers les fissures. Le fait est que personne ne veut faire des trucs moches. C' est un travail difficile et souvent stressant. Supposons une intention positive et soyez patient. Si le développeur a des questions, répondez facilement et si vous avez des questions, demandez s'il vous plaît. Une autre chose que vous pouvez faire est de renoncer au contrôle. J' ai un secret pour toi. C' est quelque chose que tous les concepteurs ne veulent pas entendre, mais votre conception est terminée dans le navigateur. Ce n'est pas fini dans Photoshop, ce n'est pas fini en croquis. Nous, développeurs, prenons des décisions de conception tout le temps. On ne peut pas l'aider. Il y a toujours quelque chose que le design ne tient pas compte et nous devons prendre une décision. Vous pouvez y penser de cette façon. Si vous deviez embaucher un architecte et un constructeur pour construire votre maison, peu importe à quel point cet architecte était détaillé dans ses conceptions, les constructeurs vont devoir changer la conception même si c'est seulement un peu, ils le font pour rendre compte qu'il s'agisse d'un terrain inattendu ou quoi que ce soit, il est impossible pour l'architecte de rendre compte de tout, et c'est bon. Une autre chose à garder à l'esprit est que les appareils ont des limites. Vous pouvez regarder les sites Web sur les montres et les réfrigérateurs maintenant, écrans étroits, écran large, ordinateurs lents, rapides et lentes, connexions rapides. Il y a un nombre infini de variables qui peuvent affecter le produit final, et le développeur doit souvent prendre décisions de conception pour les adapter et c'est vraiment une bonne chose, parce que ce sont des décisions de conception que vous n'avez pas à faire. S' ils prennent la mauvaise décision, c'est bon. Il est juste temps d'itérer dessus. Rends-le mieux. Posez beaucoup de questions. Si vous voyez quelque chose qui est bizarre ou si vous n'êtes pas sûr d'où la chose va être utilisée. Si vous ne savez pas si quelque chose que vous concevez le plus possible, posez des questions à l'avance. Mais en travaillant de manière collaborative et itérative comme ça, nous pouvons faire des choses qui fonctionnent pour la plupart des gens la plupart du temps. Je suis désolé de le dire. Mais ça n'aura pas fière allure pour 100 % des gens, 100 % du temps, donc vous devez abandonner un peu ce contrôle. La troisième chose que vous pouvez faire est d'apprendre un peu sur ce que nous faisons les développeurs. Je ne vais pas te dire d'apprendre à coder, c'est ta vie. Tu fais ce que tu veux. Mais je dirai que c'est très utile. Ça peut rendre les choses plus faciles. Cela vous aidera à prendre des décisions de conception plus éclairées. Par exemple, et vous ne vous sentirez plus comme vous et votre développeur parlant deux langues différentes. Je ne dis pas que tu devrais être un développeur pro. Il pourrait juste être utile de commencer avec comme certains HTML et CSS comme quelques bases. Skillshare est une excellente ressource pour cela. Pensez au code est juste un autre outil de conception et votre ceinture utilitaire. Ce sont quelques bonnes façons de commencer à faire confiance à votre développeur un peu plus. 12. Mettre tout en œuvre: Ok, jetons un autre regard sur le processus de conception que nous avons traversé plus tôt, ce très mauvais projet. À quoi cela pourrait ressembler avec ces nouvelles techniques et idées en place ? Encore une fois, tu es un designer indépendant, tu viens de trouver un nouveau client. Vous avez votre réunion de lancement, mais parce que les développeurs dans la salle, que vous parlez, ils se rendent compte qu'ils ont travaillé sur un projet très similaire dans le passé, et ils offrent une suggestion sur la façon dont cela pourrait fonctionner. Le client aime ça, alors c'est là que vous commencez. Vous commencez tous les deux à prototyper des idées et finalement après avoir prototypage et jeté des idées et gardé les bonnes, vous atterrissez sur une direction vraiment solide et vous commencez à concevoir. Il est enfin temps pour les comps de haute fidélité. Vous parlez aux développeurs de ce dont ils pourraient avoir besoin, quoi vous concevez ? Quels périphériques sont vos équipements cibles, et vous avez travaillé ensemble une fois que les comps sont faits pour les décomposer en autres composants. Avec les composants et les guides de style, votre développeur peut se développer plus rapidement qu'il n'aurait pu le faire autrement. Le client peut tout d'un coup a page super importante une fois de plus, mais le développeur peut simplement la construire, parce qu'ils ont cette boîte de pièces Lego à partir de laquelle tirer. Vous n'avez même pas besoin d'ouvrir votre outil de conception. Personne n'a dû rester debout tard avant le lancement et le lancement arrive à temps. Peut-être que vous repérez quelques bogues, mais c'est bien parce que votre processus est itératif et vous pouvez rapidement les sortir du chemin. Vous pouvez même après le lancement, continuer à ajouter et à améliorer sur le site. Peut-être que le client a une autre demande pour une fonctionnalité. Vous pouvez l'ajouter assez facilement parce que vous ajoutez simplement un composant, vous ne concevez pas une mise en page complète. Évidemment, il s'agit d'un processus idéalisé, tout comme l'exemple précédent a été idéalisé dans la direction opposée. Il y aura toujours des bosses sur la route, mais avec la communication et quelques bons outils, vous lancerez de meilleurs projets. Maintenant que vous savez comment cela peut fonctionner, votre processus s'améliorera. 13. Conclusion: C' est vraiment censé être juste une amorce, juste pour vous faire commencer à penser à ces choses. Vraiment, c'est une pratique à long terme de carrière de travailler sur vos relations avec vos collaborateurs et d'améliorer votre processus. La meilleure chose que vous puissiez faire, c'est continuer à lire et essayer de nouvelles choses. Mais en résumé, nous avons parlé de trois choses qui peuvent vraiment améliorer, améliorer considérablement votre relation avec vos développeurs. La première chose : les impliquer tôt, puis les garder impliqués tout au long du processus. Cela signifie plus de conception dans le vide. Posez beaucoup de questions sur ce dont vous avez besoin pour exécuter correctement la conception. Plus de grand design révèle, car ils peuvent parfois faire dérailler un projet. Conception de systèmes, pas de pages. Décomposer les choses. Incluez des règles de topographie, des couleurs et des choses comme ça, mais aussi décomposer les choses en composants. Pensez-y comme des pièces Lego qui s'enfoncent ensemble. Ceux-ci sont plus rapides et plus faciles à construire, qui imitent vraiment la façon dont nous construisons sur le web de toute façon. La troisième chose dont nous avons parlé est de faire confiance à votre développeur. Vous ne pouvez pas contrôler à 100% le résultat de votre conception sur ce support. Il y a trop de variables. Une fois qu'il sort de Sketch ou Photoshop, il est hors de vos mains. En outre, les développeurs ont tendance à prendre des décisions de conception, donc ils vont faire des erreurs. La clé est d'être patient et de les aider. Maintenant, ce processus ne fonctionne pas pour tout le monde. Vous devrez probablement l'adapter à votre propre processus, à votre propre équipe, à votre façon de travailler. Mais encore une fois, c'est juste pour vous faire commencer à penser à ces concepts et l'améliorer, améliorer votre processus au fil du temps. Le résultat est de meilleures relations de collaboration avec vos développeurs, et finalement de meilleurs projets et un client plus heureux. J' espère que cela vous aidera. Sortez et construisez quelque chose de génial.