 Merci de nous avoir introduit, un tout bien tout honneur, donc oui on va vous, on va vous parler d'histoire de couple effectivement, Mathieu qui est donc designer, moi-même qui suis développeur front end avant guichet pour le terme français, on va vous parler un petit peu de notre expérience et en même temps de ce qu'on a pu entendre autour de nous, l'organisation du travail de manière assez sectorisée, si tu peux passer sur la chambre, vous avez peut-être déjà tous vu cette image, je vais m'écarter un peu parce que je suis un petit peu grand, j'adore cette image en fait parce qu'elle est assez marrante, surtout quand on voit Mathieu en bébé comme ça avec un pinceau, il faut l'imaginer en fait, c'est rigolo. Du coup pour moi j'aime moyennement l'image que Mathieu a de moi qui se trouve donc, tiens tu peux passer sur la suivante, on va se concentrer là-dessus principalement, du coup j'aime pas trop mon image mais bon bref, cette image parle bien, j'aime bien, on voit vraiment une sorte de sectorisation et c'est vrai qu'on est encore dans cette idée que Thomas disait tout à l'heure en fait, on va se retrouver avec un designer qui va envoyer sa maquette au développeur et puis démerde-toi, ça va se passer comme ça globalement. Donc on va essayer de discuter autour de ça pour améliorer la communication entre les différents pôles, on va se concentrer que là-dessus parce qu'on pourrait parler du chef de projet aussi mais il y aurait beaucoup de choses à dire, en 20 minutes ça va pas être possible, du coup on va se concentrer là-dessus et on va essayer de voir quelques outils, donc un côté un peu plus pratique de la théorie de ce matin que Thomas nous a présentés de manière plus large, on va se concentrer sur quelques outils qui nous nous ont aidés à mieux communiquer. Ok, alors qu'on soit en agence à distance ou en freelance, donc je pense que ça regroupe un peu près tout le monde qui est ici, que notre communication soit directe donc quand on parle, l'un avec l'autre ou autour d'un café, autour d'une bière ou indirecte, donc SMS, tout se revenait, inexistante c'est pas terrible parce que quand on parle pas, on échange pas grand chose. L'absence de communication c'est jamais bon, c'est jamais bon parce que ça conduit à une vision très différente d'un projet, quand on reçoit un brief chacun a une façon très personnelle souvent d'interpréter le brief en lui-même donc ça peut aussi amener une interiorisation des problèmes. Donc quand on a un problème, si on n'en parle pas, le problème monte, monte, monte et au final explose d'une manière habituellement très sale et on sent des animosités nettres entre les personnes ce qui est toujours source de conflits et au final qui n'est vraiment pas productif. Et effectivement donc ces conflits ça amène des paires de temps donc parce qu'on se comprend pas, on n'arrive pas à communiquer entre nous et donc des retards et défauts dans le projet parce que c'est avant tout ça ce qu'on cherche, on travaille pas ensemble juste comme ça pour le fun, on travaille ensemble pour mener un projet à bien de bout en bout. Donc on va passer sur un petit exemple. C'est l'exemple de la navigation, je pense que tout le monde a connu ça, il y en a dans quasiment tous les sites, si ce n'est tous les sites finalement. La différence d'interprétation qu'on va avoir d'un même projet, là en l'occurrence de la navigation vient de notre expérience et de notre parcours et aussi de nous-mêmes en tant qu'individu de nos préférences. Une navigation, volontairement c'était re-tipé, pour moi c'est ça, boost trap, yolo, ça marche, nickel, parfait, il y a des munis de rouleaux, il y a même un champ de recherche. Oui mais en fait moi je la vois plus comme ça avec un méga menu de la mort, donc un truc, bon là je ne peux pas encore passer au flat design parce que je trouve ça un peu ponas. Donc avec effectivement des ongles partout, des supers icônes, des icônes ici qui sont préparés de la même taille qu'ici avec des petits encars et un petit bloc de texte parce que c'est toujours rigolo. Et ça au final c'est ce que veut le client. Donc on l'a tous reçu, on l'a tous reçu, le menu classique envoyé dans le powerpoint ou même directement dans le mail, on le connaît, ou encore pire le petit dessin envoyé et scanné. Donc un méga menu quoi, mais un méga menu. Pas très flat non plus celui-là, c'est surconciel quoi. T'as un point de vue au art précien, d'ailleurs avec n'importe quel CMS en fait une navigation souvent elle est intégrée à un système bien plus complexe que juste des liens ou une liste de liens. Si jamais vous commencez à faire des choses un peu extravagantes en termes de design, on regarde pas comme ça. Il va falloir taper là-dedans pour faire plein de modifications et ça c'est juste le début du walker nav menu. Pour ceux qui ont déjà dû taper là-dedans, c'est vachement intéressant. On s'y perd un petit peu au début, mais on montre vite en compétences en fait, on est obligés de monter en compétences. Surtout quand le designer justement il envoie la maquette et démerde avec ça. Parce que mes petites icônes elles sont toujours mignons, mais il faut bien faire ça. Voilà, ça faut les rajouter quelque part à un moment les icônes. L'admine de walker pas c'est pas prévu pour apprendre. Et ça bien sûr ce n'est que pour un élément d'un site web. Je vais juste donner l'exemple de la navigation. Là on n'a pas les que de la navigation, ça peut être plein de choses différentes. Il y a tellement de choses sur un site web. Et du coup comment est-ce qu'on fait pour améliorer ça ? Parce que le constat c'est chiant. Il faut trouver des solutions parce que sinon on n'avance pas. Donc moi typiquement il y a des choses que je me moque. Typiquement le code, je m'en fous. Ça ne m'intéresse pas, ça ne m'intéresse pas, mais pas du tout. Donc le code propre et stylé ça ne m'intéresse pas. Tant que la maquette est parfaitement respectée, que les couleurs sont respectées parce que oui, c'est important, qu'on respecte à peu près même bien la maquette que j'ai designée c'est mieux. J'aime bien me sentir respecté dans mon travail quand même. Pareil, la grille, je ne la fais pas pour des prunes. Il y a une raison pour laquelle j'utilise 12 colonnes. Pareil, les tailles de typo, je ne mets pas partout du 16 parce que c'est million. Des fois je mets du 15. Les marges, oui parce que le white space on aime bien. Moi j'aime bien en mettre beaucoup. Et effectivement les 300 icônes que je me suis tapées pendant deux semaines, et bien j'aimerais bien qu'elles soient jolies à l'écran et pas bourrées n'importe comment dedans. C'est pareil, vite fait. En tant que développeur du coup, les couleurs rouge c'est rouge. Globalement, pas grand chose frais. Les tailles de fonte, je vais prendre un M. Si je fais ça proprement, sinon je me fais 100 pixels. La plé faire, je ne vais pas charger une fonte pour rien, je vais mettre la georgia, ça ressemble, c'est pareil. C'est tellement proche en plus. Ok, ça marche. Marge des grilles, ok, bootstrap. Par contre, je vais faire attention au nommage des calques de Mathieu. Parce qu'en fait, quelques 1, quelques 2, quelques 3, le meilleur, copie quelques 1, copie quelques 2. Je suis un expert en copie collé. Franchement, j'ai pas le temps moi de nommer les calques. Tout le monde parler ce matin aussi, l'organisation des calques en groupe, en objet, c'est magnifique. Le designer fait ça et on l'aime tout de suite. Je vais faire attention aux problèmes de performance. Je reviens sur le plé faire, par exemple, que je ne veux pas charger, je vais mettre georgia à la place. Si il me met 10 variantes de 5 fonds différentes, je pense que je lui envoie mon clavier dans la tête. Mais moi, sur mon iMac, c'est toujours super joli. Moi, c'est tout ce qui m'intéresse. Oui, oui, je sais. Le code propre est maintenant, je vais faire attention forcément nécessairement, et surtout, le plus important, gagne du temps pour pouvoir jouer avec mes collègues, qui eux, ont beaucoup de temps à perdre. Et au final, il ne faut pas oublier qu'on a un objectif, c'est le projet, souvent pour un client, ça peut être des projets internes, mais souvent pour un client. Et lui, il n'en a complètement rien à faire que vous ayez des problèmes de couple. Il veut voir son projet aboutir et surtout l'histoire de planning, timing et monnaie. Donc le but, ça avant tout ne finira pas vers l'autre. Comme disais Geoffrey dans son introduction, les métiers, effectivement, on a trop tendance à les s'augmenter. Moi, je suis designer, effectivement, mais rien ne m'empêche de prendre en compte ce que le développeur dit. Donc effectivement, des fois, j'aime bien. Écoutez quand même ce qu'il me dit, parce que ça peut être intéressant, et moi même, ça ne peut me permettre de faire un meilleur design. Et lui-même, ça lui permet d'améliorer sa conception graphique de la vie. Donc échanger des connaissances. Le but, c'est un peu d'échanger effectivement des connaissances. Il ne va pas obligatoirement m'apprendre comment fonctionne le walker de WordPress. Ça ne m'intéresse pas. Par contre, il va m'expliquer qu'est-ce que je peux en faire. Donc quelles sont les fonctionnalités de base ? Qu'est-ce que je peux faire avec ça ? Important aussi, c'est qu'on harmonise nolexique. Ce que moi, je n'ai pas la haideur. Ce que lui, il n'a pas la haideur, c'est peut-être pas obligatoirement la même chose. La nav, ce n'est pas exactement la même chose pour lui, si on parle de la nav, qui est dans la sidebar, dans l'haideur ou à quelconque endroit. Et pareil, ce qui est important, toujours, c'est discuter ensemble. Beaucoup. Pas boire des bières. Mais les bières, mais ils arrivent. Oui, mais les bières, ça dépend d'un coup personnel et tout ça. Donc bon, l'important, c'est effectivement d'échanger ensemble, d'arriver à fusionner nos métiers et de faire ensemble quelque chose de productif et donc de réussir le projet qu'on nous affilait sans se prendre la tête. Donc, moi, ce que je peux faire pour aider mon développeur chéri, je peux faire un style guide. Donc un style guide, c'est assez simple. C'est ce que Thomas montrait ce matin. Donc, c'est des éléments, c'est des couleurs, c'est des typos. Donc effectivement, dire que la typo, c'est la Georgia, limite mettre le lien vers la fonte, si c'est une Google fonte. La couleur directement, lui donner le code EXA de la couleur, ça l'empêchera d'aller avec la pipette sur son écran avec un programme qui n'est pas allé à tant moins la bonne couleur ou que ne sais-je. Rassemblez et ordonnez les éléments graphiques. Ça peut paraître anodin comme ça, mais réunir toutes ces icônes dans un dossier avec, par exemple, des icônes en SVG, des PNG, etc. C'est important. Et lui, ça va lui éviter de péter un câble, d'aller le chercher effectivement dans tous mes câbles, tous mes calques parfaitement bien nommés. Donc pareil, chose qui est importante, si son exclu de la créa, il va m'embêter au final. Donc demander son avis quand je fais une créa, un truc un peu sympa, et que je sais qu'il n'est pas oubliatement simple à réaliser, lui il va pouvoir me dire, par exemple, ah, je ne sais pas faire, ou bien je vais me renseigner comme ça quand on aura fini la créa et moi je ne saurais faire. Pareil, explique citer les types de contenus. Donc un site web, c'est avant tout d'information. C'est articuler du contenu et le design est là pour servir le contenu. Donc il va montrer et mettre en exergue des éléments de ce contenu. Donc lui expliquer comment est-ce que je conçois les différents types de pages, par exemple, s'ils aient des custom post types, si je sais à quoi ça rime, utiliser des métaquets, ce genre de choses. Lui envoyer des exemples, si je vois sur des sites, des choses que j'ai déjà vu aute part. Des animations par exemple notamment, ça peut aider, surtout quand on reçoit juste un PSD sans aucune animation. De mon côté, si jamais Mathieu ne vient pas vers moi régulièrement pour montrer ce qu'il est en train de faire, c'est moi qui vais aller vers lui. Peut-être même dans une réunion tout au début du projet directement, discuter de choses et d'autres. Mais en face de design, par exemple, aller le voir régulièrement pour voir ce qu'il a proposé. Avant même d'aller envoyer sa maquette au client ou de la faire valider, alors que moi j'ai rien vu. Après, je vais devoir me la taper quand même, il ne faut pas oublier. Expliquer, ça va en fait avec tout les points vous en semble, expliquer mes propres limites en termes techniques pour éviter d'avoir à revenir sur la phase de design si jamais je ne suis pas capable de faire quelque chose que lui a proposé au client. Ca évite de passer des allers-retours. Je ne sais pas faire, je n'ai pas envie de faire. Ce soit nos limites techniques, les limites de WordPress ou nos limites avec WordPress. Ou même des limites dans le budget du client. Lui expliquer comment fonctionne WordPress, un peu plus en détail. Ca peut l'aider peut-être à faire des choix parfois graphiques qui pourraient me faire gagner du temps par exemple en phase d'intégration, toujours pour entrer dans le budget ou dans le timing. Donc lui dire que je ne suis pas capable de faire quelque chose mais surtout arrêter de lui dire que je ne suis pas capable de faire quelque chose. C'est-à-dire qu'il va falloir que je monte en compétences à un moment. Si je dis sans arrêt, je suis désolé, je ne sais pas le faire, je vais passer pour un pignou. Donc, la deuxième fois je ne sais pas le faire, je me forme, je prends un peu de temps pour le faire. Si je n'ai pas le temps pendant le projet, ce ne sera pas grave, ce sera pour le prochain projet. Mais prendre le temps, si vous êtes en agence d'avoir une demi-journée par semaine pour monter en compétences ou une journée. Comme Google, il y a 20% du temps, je crois, qui a loué à des projets à des sites projects des projets à part. Et du coup, vous montez en compétences pendant ces projets et vous avez plus de liberté. Et fournir éventuellement des contenus type, parce qu'il n'est pas censé forcément connaître WordPress. Bon, il est là et c'est qui connaît WordPress quand même, sinon il ne serait pas là. Mais il n'est pas censé connaître WordPress sur le bout des doigts, donc au moins lui présenter des contenus type de WordPress qui peut designer directement en amont, en fait. Ne pas arriver sur la production et finalement plier un truc qui n'est pas prévu, qui n'est plus dans WordPress, qui n'est pas prévu dans le design. Et en fait, c'est tout moche. Donc ça peut... Ça peut éviter ce choix mieux. Donc pour se faire, on arrive à la partie vraiment intéressante. Quand on communique déjà, c'est bien. Maintenant, on peut avoir des outils qui facilitent la communication. Donc toujours intéressante, maintenant au goût du jour, je pense qu'on est tous là un peu parce qu'on aime faire de la veille. Donc on va vous présenter quelques outils. Voluntairement, on ne les a pas tous mis, parce qu'il y en a vraiment une pléthore. Les outils qu'on utilise et qu'on a testé principalement, donc ici, si vous voyez, il y a principal, donc ça, ça permet de faire des animations à partir de maquettes. Marvel App, qui est très proche d'Invision qu'on a présenté. Screen Hero, donc c'est de la VOIP et du partage d'écran. Brackets, donc un éditeur de code. Donc on va se focaliser sur la ligne du bas ici, quelques outils qu'on connaît pour la plupart. Donc le premier, Invision. Pour ceux qui ne connaissent pas. Ça permet en fait d'uploader ces fichiers Sketch, ces fichiers PSD et directement de les voir en rendu réel entre guillemets dans son navigateur en taille 100%. L'intérêt d'Invision, ce n'est pas uniquement effectivement de le voir dans son navigateur, parce que ça, au final, ce n'est pas tellement intéressant. Ce qui est possible de faire, surtout, c'est des maquettes interactives. Donc vous pouvez définir des zones de clic, de hover, sur vos maquettes et ainsi reproduire au final une maquette complètement fonctionnelle. Donc vous cliquez sur les éléments et vous pouvez vous balader dans ce qui semble être un site réel mais qui est au final qu'une série d'images. Très intéressant. L'outil propose des flux de discussion. Donc par exemple, vous pouvez cliquer sur la nav et ajouter un petit commentaire, par exemple. Non, là c'est moche, ça va pas. Ce n'est pas la bonne typo. On peut faire des tests en live sur smartphone et tablette. Il y a une app iOS qui est très très bien faite. Donc vous pouvez directement aller par exemple chez votre client et lui montrer une série JPEG et où il pourra interagir directement dessus. LiveShare, donc LiveShare c'est comme son nom l'indique, c'est du partage d'écran en live. Donc on peut faire une mini réunion dessus et voir directement les points et faire évoluer la chose. Faire des présentations de PowerPoint sans PowerPoint. Il propose aussi un workflow de base intéressant. Donc le workflow c'est par exemple maquette en cours de réalisation continuellement en développement d'intégration terminée ou qui fonctionne comme très low pour ceux qui connaissent. On peut déplacer les maquettes de colonne en colonne pour le faire évoluer. Les assets, donc très pratique pour réunir tous les éléments graphiques. Pas besoin dans ce cas-là d'inviter quelqu'un dans un dossier de box, alors que son dossier de box explose déjà son quota. Donc on retrouve tout à cet endroit-là avec les fichiers source, les fichiers PNG, les icônes, tout ça. Ce qui est très cool avec Intelligeon aussi c'est l'intégration avec d'autres services. Donc c'est une très bonne start-up qui fait beaucoup beaucoup de choses et qui a noué des partenariats solides avec notamment Dropbox. Donc vous vous applaudez vos screens dans un répertoire Dropbox. Intelligeon va les scanner et va directement les inclure dans votre projet. Pareil pour Sketch, vous vous applaudez votre fichier Sketch. Il va directement mettre tous les calques ou tous les artboards dans le projet Intelligeon. Donc ça, ça ressemble à Intelligeon un ami quelques screens. Donc ça, c'est les flux de discussion. Vous voyez, on peut mettre un petit pin de sué et donc on continue avec les petites discussions. On peut aussi mettre des groupes très intéressants. On peut avoir un groupe de personnes qui est designer, donc qui va designer des choses et qui va donc en parler dans un groupe qui s'appelle ici Everyone. Il n'y a pas encore collaborateur ou Dev, donc chacun, chaque groupe peut interagir entre eux de ce qui les intéresse principalement. Dev, c'est vachement pratique en fait. Surtout si j'ai des choses à dire sur ce qu'il a proposé sur une maquette. Ça me permet de retrouver moi mes notes plus directement et surtout de caser ça dans la catégorie Dev tout simplement. Pareil, en haut, c'est donc le système de workflow avec Unhold, donc en attente. En Inprogress, donc les choses qui sont en train d'être réalisées. Donc là, un petit exemple de comment créer des maquettes interactives. Vous voyez, vous définissez une zone ici sur le petit bouton avec, donc dans ce cas-là, on clique en Over avec l'endroit vers la maquette où c'est réalisé et là, un petit screen des assets. Pareil, Sketch. Alors pour ceux qui ne connaissent pas, Sketch, c'est un outil du style Photoshop. Ça fonctionne uniquement sur Mac. Mais c'est l'application géniale pour réaliser des maquettes web que ce soit iOS, Android, tout. Tout ce que vous pouvez maquetter, vous pouvez le faire là-dessus, c'est juste génial. C'est très facile à préander parce que venant de Photoshop, ça peut paraître un peu bizarre. L'export des éléments est vraiment simplifié. Vous pouvez sélectionner chaque icône, chaque petit élément et définir par exemple que ça, ça sera exporté en SVG, ça sera un PNG, ça sera etc. Et après, avec un seul bouton, tout exporté dans un dossier. Très pratique. La transposition vers du CSS, du SAS, du less, est très simplifiée. En fait, les options que je vais vous montrer sur la site suivante, vous vous rappelleront exactement ce que vous pouvez écrire en CSS avec des Line8, des fonds de size, etc. Sketch Mirror, connecter par exemple votre iPhone ou votre iPad et voir directement pendant que vous designz sur votre Mac le pendant sur votre iPhone. Très pratique aussi pour designer des apps directement et interagir avec elle. L'intégration avec InVision Slack, donc InVision, comme je vous ai présenté, Slack que je ferai vous présenter tout après. Et surtout, un truc très important, la communauté qui est derrière Slack. Pardon, Sketch. La communauté qui est derrière Sketch, je vais vous proposer une source graphique plus que Photoshop, ce qui est bizarre, mais de meilleure qualité surtout et énormément de plugins. Les plugins pour Sketch sont réalisés en JS. Donc pratiquement tout le monde peut faire des plugins, il y a des vrais petits perles. Je vous ai mis un petit lien là, si certains sont intéressés pour une petite sélection de plugins que j'avais réalisé. Donc ça c'est Sketch. Alors j'ai essayé de mettre sur un screen pratiquement toutes les fonctionnalités de Sketch. Donc c'est un peu beaucoup. Donc là vous avez toutes les pages séctions de votre maquette que vous pouvez réaliser. Vous voyez, il y a front-end desktop, front-end tablette, mobile, etc. Donc ça, ça vous permet d'organiser vos artboards qui sont derrière. Donc là c'est après toutes les artboards. Donc les artboards, c'est par exemple une page de maquette dans votre site. Donc derrière là vous pouvez voir Imageify. Donc et après ici, ça c'est pour l'export. Donc à chaque fois chaque artboard peut être exportée. Donc ça vous permet d'exporter tout de suite les 22 pages Sur la droite là vous avez donc la typo, la fonte, les espaces, etc. Et donc ici tout ce qui est export. Donc vous voyez pour un seul élément vous pouvez définir plusieurs exports. Un X de X donc avec les suffixes et le type de fichier qui vous sortira à l'export. Quelques plugins très pratiques pour échanger Sketch Major. Donc ça vous permet de mettre un calque sur votre maquette et d'afficher par exemple entre votre titre et le bloc d'en dessous Sketch Sync synchronisez les styles calques et palettes dans Google Spreadsheet. Ce plugin va simplement vous prendre tous les styles qui ont été définis dans Sketch et va vous les envoyer dans un Google Spreadsheet. Donc après vous avez plus qu'à l'envoyer à votre développeur si jamais vous récupérez et faire du copier coller des valeurs, c'est magique. Sketch Data Populator Goodbye Loremi Psoom Quand on fait des maquettes souvent on n'a pas les contenus parce qu'il est dommage on devrait commencer par ça mais des fois ce n'est pas possible. Par contre il est possible avec Sketch d'utiliser un petit plugin qui va vous permettre à partir d'un fichier Gison qui est souvent disponible quand on est en train de développer en parallèle des applications clients. On peut peupler sa maquette avec des vraies données. Icon de fonte pour utiliser des Icon de fonte. Photoshop plus besoin tellement de le présenter donc les gestions des arbores dans les dernières versions c'est toujours un logiciel très utilisé donc on est obligé de l'en mentionner. CSS Hat une extension assez intéressante qui vous permet de convertir votre PSD vers du SaaS ou du CSS guide guide pour des guides donc réaliser ces belles grilles magnifiques. Je vous as surveillé Adobe est en train de sortir un nouveau produit qui s'appelle Comet donc il y a un genre de sketch pour tous les utilisateurs que ce soit Windows ou Mac parce que bon sketch c'est mignon mais c'est encore toujours Mac only. Ok je vais accélérer un petit peu parce qu'on va manquer de temps ce nom. Ce là qui n'est plus trop à présenter mais je vais quand même présenter très rapidement nous on a complètement complètement abandonné le mail depuis qu'on l'utilise on peut discuter instantanément avec tout le monde se faire des reminder quand on veut les mises à jour d'une vision sont directement intégrées à Slack ce qui fait que quand il me dit film a catch je suis au courant c'est pratique on peut partager des documents très facilement et surtout les rechercher et les retrouver très rapidement coupler la screen hero ça permet de carrément faire du Skype non c'est plutôt du partage d'écran il n'y a pas de visio mais ça permet de faire du partage d'écran très rapidement donc concrètement là on a une recherche par exemple on a plein de marqueurs différents qui permettent de faire des recherches très optimisées là on a l'intégration d'une vision et sinon plus globalement on peut on peut juste discuter faire un peu du monde de temps en temps ça fait pas de mal vous pourrez du coup vous lirrez ça plus tard mais il y a des choses très intéressantes sur ces slides je passe à très l'autre et rapidement que vous utilisez ça en bord perso ou sur un projet de manière plus globale ça vous permet d'avoir une vision je vais passer directement ça ça permet d'avoir une vision plus globale du projet et surtout de voir où en sont les étapes avant ou après au moins pour savoir ce que vos collègues sont en train de faire on peut intégrer facilement des images on a tout un système de marqueurs de couleur ici pour vous gérer ça vraiment comme vous voulez en fait on peut carrément avoir des commentaires à l'intérieur de chaque tâche merci ok donc ça c'est juste pour vous montrer les commentaires ça permet toujours d'échanger plus rapidement avec ses collègues et enfin l'avocode qui est fait par les développeurs de CSS HAT justement ils ont sorti un outil qui permet de récupérer des informations d'un fichier Photoshop ou Sketch que vous savez sur Mac ou sur PC donc ça marche dans les deux cas et en fait il fait un peu comme une vision il vous liste tous les artboards tous les tous les calques tous les éléments de votre document et vous permet d'interagir directement avec les éléments pour notamment ressortir du code alors là on voit du code mais je vous montrerai plus en détail et surtout de de permettre en plus de préparer votre code pour du less du sas un peu tout ce que vous voulez là par exemple je suis en train de faire un remplacement de cette couleur par un nom de variable et à partir du moment où ou avocode va trouver cette couleur sur votre document ailleurs il va automatiquement remplacer remplacer le nom de variable donc ça vous permet de préparer votre code directement en étant sur la Mac en fait donc là on retrouve la liste complète des éléments que Mathieu aurait lui sur son fichier Sketch là c'est directement intégré ici là j'ai sélectionné un bouton par exemple ici et j'ai le code qui correspond bon il y a des choses un peu bizarres ici il y a wheat c8 c'est des choses que vous n'utiliserez pas forcément mais par exemple là j'ai primary color qui a été remplacé en fait parce que j'ai fait le remplacement avant on retrouve aussi les variables déclarées ici par exemple et enfin on peut sélectionner ces différents éléments là ici et les préparer ici pour l'export et préparer d'avance en fait les différents formats qu'on va utiliser c'est à dire prévoir par exemple pour du 2x donc qualité Ritina un export SVG par exemple et puis pour les autres on export PNG pour chaque élément et à la fin vous exportez tout en même temps là on est sur la partie commentaire il y a aussi une partie commentaire un peu comme une vision ça fait un peu d'oulons il faut essayer de pas trop multiplier les outils mais on vous les présente après vous en faites ce que vous voulez donc là on peut aussi commenter directement sur les différentes maquettes enfin pour du WordPress de manière plus précise vu qu'on est là pour du WordPress j'en parlais tout à l'heure mettre du contenu fictif pour Mathieu par exemple il faut pas oublier de designer tout ça FakerPress ça fait très bien c'est un petit plugin il y a un lien sur le truc coloré donc on mettra les slides en ligne vous aurez accès à ce contenu quand vous travaillez très très régulièrement avec différents outils essayer de conserver les mêmes quitte même à les faire évoluer si vous en avez les moyens à contribuer à ces plugins idem pour les thèmes finalement et le dernier truc manger du codex manger des conférences comme celle-ci manger du code décomposer les plugins que vous trouvez qui répondent partiellement à vos besoins si ça répond partiellement vous décomposez tout le plugin essayez de voir comment il est fait et vous essayez de recoder les parties qui vous manquent vous montrez forcément en compétence et quand vous montrez en compétence le designer il est content parce qu'il peut faire un peu ce qu'il veut vous arrivez facilement à répondre aux besoins du projet en bref donc communique à plus c'est mieux surtout mieux utiliser des outils parce que parler c'est bien mais interagir c'est encore mieux travailler mieux ensemble arrêtons d'être chacun campé dans nos positions moi je suis pas que designer je sais aussi comprendre un peu ce qui me dit quand même je suis un être humain moi j'ai déjà fait du sketch voilà et moi je me fais même du sas automédicier certaine tâche parce qu'effectivement exporter les 300 icônes c'est chiant et long donc ensemble travaillons mieux donc maintenant si vous avez des questions on a essayé de pas être trop long merci je pense qu'on aura 2-3 vous verrez peut-être après Charles bonjour vous parlez énormément donc du travail entre designer développeur pas forcément après du rôle aussi parfois que peut avoir un intégrateur entre les deux mais c'est surtout aussi du travail qui peut être fait en amont via des prototypes pages ou ce qu'on appelle communément aussi du wireframe avec des logiciels professionnels comme justin mine ou AXUR ou ce genre de choses et est-ce que c'est des choses que vous-même vous utilisez pas du tout vous êtes directement sur la maquette alors nous c'est un peu spécial parce qu'on travaille actuellement donc au startup chez WPMEGA qu'on remercie chaleureusement encore une fois mais on a travaillé en agence effectivement pour présenter des wireframe pour avoir ses avantages et ses inconvénients certains clients adhéront totalement au wireframe pour eux ils arriveront à se projeter mais la plupart des gens en fait ont besoin d'un aspect visuel ils ont besoin d'avoir une maquette même pas obligato finalisé mais juste voir quelques couleurs voir un peu près comment ça va s'articuler donc ça ça dépendra vraiment de ton client effectivement c'est toujours mieux pour dégrossir un gros projet notamment au niveau de l'architecture d'information donc effectivement on place des éléments textuels ou images à des endroits plus ou moins intéressants après ça dépend vraiment de ton client à ce niveau là mais effectivement c'est plus intéressant de d'abord commencer toujours par une phase de wireframe que ce soit personnel ou à valider avec le client moi par exemple maintenant je réalise le wireframe tout seul parce que je suis le seul designer chez WPMEGA et donc je le fais moi-même donc on en discute après effectivement et on travaille là dessus mais en agence pas obligatoirement tout dépend après de ton client c'est un outil qui peut être effectivement très puissant des fois le wireframe ça sert vraiment uniquement en interne pour se mettre d'accord sur l'organisation des contenus ensuite on passe en phase de design et on revient à notre conférence globalement l'iterration est toujours assez importante d'accord merci moi j'ai été confronté par exemple quand le designer est du côté client comment vous gérer parce que bon le designer il a des idées en tête et moi en tant que développeur j'ai un peu peur de lui dire enfin je sais pas dire non souvent donc c'est difficile à gérer du coup vous montez plus vite en compétences non mais blague à part c'est toujours un peu difficile effectivement quand on est face surtout à un prestateur externe qui t'envoie la maquette etc le mieux effectivement dans ce cas-là c'est de prévoir une petite réunion ou que tu as un petit call rapidement pour synchroniser vos horloges donc effectivement de lui dire ce que tu attends comme ça lui par exemple il peut te faciliter le travail à ce niveau-là comme dire je pense que c'est même quelque chose qu'il apprécierait enfin je pense que toi t'apprécierais si maintenant quelqu'un t'appelle même un prestateur externe c'est toujours un être humain en face faut pas l'oublier comme ça ça lui permettra peut-être d'économiser un max de temps par exemple tout ce qui est dans WordPress il n'a pas besoin de designer les 20 sympas c'est pas la peine donc il a un design 3 de moins lui ça lui fait quelque chose de doré clairement le copier collé tout ça et du coup peut-être effectivement discuter plus avec lui et effectivement peut-être à toi ton niveau si tu peux toujours dire non à certaines idées qui te semblent mauvaises je pense que toi ça te fera du bien déjà et puis lui ça lui te permettra peut-être de se remettre en question sur certains points donc évoluer lui aussi donc ensemble vous arrivez toujours à trouver le meilleur de chacun pour que le client au final ou le projet que vous faites soit le meilleur possible au final j'ai rien à rajouter il est vraiment bon bon et bien du coup on a un peu explosé le temps désolé désolé ça arrive merci