Créer un site internet avec Adobe XD

[@IDE_photographisme]

Précisions suite à de nombreux commentaires similaires : Adobe XD est un outil de *prototypage* de site internet, il ne vous permettra en aucun cas de "créer un vrai site internet", mais uniquement sa maquette. Il faut ensuite faire un travail d’intégration et de développement pour « convertir » cette maquette en un site bien réel, et ce sont malheureusement des métiers bien différents de celui d'un graphiste (même si il est spécialisé UI/UX). Pour ceux donc c'est le métier, je vous laisse ajouter des précisions en commentaire.

[@woohami]

Bonjour, super vidéo, trés bein expliquée ! J'en profite pour demander à la suite de ce commentaire, est ce que, avec adobe XD, au chapitre animation complexe quand mon image s'agrandit, avec la description à côté, il est possible de mettre un carousel à la place de l'image ? Ou est-ce que c'est un travail que je devrais faire après en dev ? Merci si il y a une réponse :) Bonne continuation !

[@IDE_photographisme]

@@woohami j’ai pas la réponse sous le coude, mais peut être en fouillant sur le site Adobe XD tu trouveras des éléments de réponse. N’hésite pas à les partager ici d’ailleurs, que ça puisse profiter à la communauté ;) Merci pour ton retour en tout cas !

[@naelnoemamboundou3030]

Et comment faire pour transformer cette maquette en site reel ?

[@marinam8578]

@@naelnoemamboundou3030 il faut coder tout ça 😅 Non réellement aujourd'hui avec WordPress comme cms et des constructeur de pages comme elementor, Divi etc.. on peut faire beaucoup de choses.

[@2sslimebabyy_]

@@naelnoemamboundou3030 Bah il faut programmer (coder)

[@delphinebrunet5562]

Après 2 jours que formation où je ne comprenais pas tout à XD, le fonctionnement est devenu limpide grâce à ta vidéo ! Merci beaucoup ! :)

[@IDE_photographisme]

Ça fait plaisir à lire, merci Delphine ;)

[@monsieurframes]

Superbe merci beaucoup, actuellement en formation qualifiante de Designer / UI, ce tuto est magique et m'a permis de comprendre rapidement certaines notions, j'ai beaucoup aimé la partie parallax! ♥️

[@clemencemacary3008]

Bravo pour ce contenu si limpide, efficace et propre ! Meilleur contenu de formation KZbin sur Adobe XD que j'ai trouvé jusqu'à présent. You rock !

[@IDE_photographisme]

Merci Clémence, content que le contenu te plaise !

[@shadownuage18]

C'était la vidéo qui me fallait pour comprendre XD en 1 journée 🤞🏼 A voir après dans la pratique bientôt 🤟🏽

[@estebanevelette4156]

un des meilleurs tuto que j'ai vu, tu m'as tellement aidé tout ce que je cherchais était la merci a toi mille fois, même un an après :)

[@IDE_photographisme]

Merci Esteban, content de savoir que ça a pu t’aider ;)

[@K-micaz]

Merci (avec quelques années de retard haha) pour ce tuto incroyable ! 👌

[@zefitaro]

Super tuto, je découvre le logiciel et une vraie galère pour comprendre la logique d'animation donc un grand merci c'est beaucoup plus clair !!

[@aymerica]

Magnifique, c'est clairement expliqué. Je me rend compte que je fais pas mal d'erreur. On va arranger tout ça. Merci.

[@IDE_photographisme]

Au top si ça te permet de progresser !

[@melflo459]

merci beaucoup car je suis en licence conceptrice chef de projet web en reconversion et avec la covid on se mange bcp bcp de vidéo mais toutes celles que j'ai ingurgité sur xd n'avaient pas cette qualité et simplicité dans les explications , juste le côté prototype avec les liens qui sont moins précis mais c'est surement parce que je suis mal réveillée Donc merci bcp de m'avoir fait gagner un temps précieux avec xd qui en définitive n'est pas si compliqué que ça quand c'est très bien expliqué

[@IDE_photographisme]

Content de savoir que ça a pu te profiter ! J’ai prévu un peu plus de contenu détaillé sur XD prochainement ;)

[@christopheds2744]

Super ! Merci pour cette vidéo, je viens de te découvrir et ça à l'air top ce que tu propose.

[@TheOnlyOneGuyom]

Merci c'est clair et net. Y a plus qu'à s'amuser avec nos maquettes maintenant :)

[@dufresneali]

Merci pour ce tutoriel. A l'époque nous appelions ça maquette fonctionnel.

[@ibrahimammor7421]

Franchement bravo, je ne savais rien à rien mais tu m'as sauvé. Merci 👏🏻

[@IDE_photographisme]

Plaisir Ibrahim ;)

[@th.grif.4502]

Très sympa et très intéressant. Une belle approche. Merci

[@ekinoxconcept]

Superbe vidéo qui m’aide à comprendre beaucoup de chose sur Xd 🤙 Merci

[@loooup2568]

très belle vidéo bien expliqué. bravo

[@midou9]

super video. Tout ce qu'il faut savoir dans un mouchoir de poche.Top !

[@franck502]

Merci beaucoup pour cette vidéo ! C'est top ! Et surtout directement utilisable ;-)

[@Riseabovethechallenge1]

Merci beaucoup j'apprécie beaucoup ta sincérité.

[@pauwelsgnanih7136]

J'ai parfaitement compris, Je Like, Je m'abonne et je share. Merci à toi.

[@naelnoemamboundou3030]

Ça été très claire MERCI.

[@julesgaveglio]

merci pour ce tuto complet tout est super bien expliqué !

[@allophoto6295]

Merci beaucoup pour ton tuto, qu'il ne faut pas hésiter à réécouter pour tout assimiler....une question, comment tu fais pour avoir une maquette responsive design ? Est-ce que XD "traduit" automatiquement ta maquette pour les smartphones et tablettes ?

[@IDE_photographisme]

Hello ! Je peux me tromper mais je dirai qu'il faut créer des ensembles de plans de travail dédié au format que tu souhaites présenter. Ca va relativement vite quand tu as déjà créé ta maquette au format desktop (par exemple), surtout si tu as positionné tes images dans des blocs (container) comme présenté dans la vidéo. Il y aura juste un petit effort à faire sur la navigation mais du reste ça ne doit pas être trop compliqué. Donc je pense qu'il faut te cogner les 3 affichages à la mano (desktop / tablette / mobile)...

[@lawtiragetarot]

Bjr merci pour ce partage mais la musique en fond empêche de se concentrer ! c'est vraiment dérangeant. Dommage.

[@IDE_photographisme]

Merci pour ton retour, c'est bien noté !

[@infographie]

Excellent

[@MrsLalaina]

Hello ! Je suis actuellement en formation en Webdesign . On nous a appris à faire notre maquette graphique sur Photoshop puis par la suite importer notre maquette sur Adobe XD pour le prototypage. Mais je vois que l’on peut créer directement la maquette sur Adobe XD. Ma question est : pourquoi ne pas faire sa maquette sur Photoshop? Adobe XD possède t-il tous les outils nécessaires pour créer des effets ? Merci

[@IDE_photographisme]

XD ne possède pas tout les outils de manipulation des claques / images que possède Photoshop, je dirais donc que de créer sa maquette dans Photoshop et de l’importer ensuite dans XD est une très bonne méthode (plus versatile). Attention cependant à bien « fusionner » les calques qui comportent des effets ou des masques au risque d’avoir des problèmes d’affichage dans XD après importation. Bien penser à renommer proprement tous les claques pour pouvoir s’y retrouver dans XD :)

[@jordanacooper8108]

Tooooooooop !!!! Merci beaucoup 🙏🙏

[@antoinebonfils5202]

Excellent, merci à vous

[@mathiasluna8658]

merci pour les explications

[@juniordjessanofficial2195]

merci pour toutes vos formations qui sont de qualités, mais svp pour nous qui sommes novices encore veuillez svp aller un peu plus lentement, car c'est un peu accélerer.Merci

[@tanguyconstant917]

Bien joué

[@PopooChannel]

Hello ID-E Tu utilises XD pour la maquette + navigation et après pour le graphisme tu fais ta maquette web sur photoshop ?

[@IDE_photographisme]

Tu peux tout créer directement dans XD ou commencer la maquette dans Photoshop et ensuite l’importer dans XD

[@eiringlice4628]

Top ! Merci infiniment !

[@Tibiscuit_OW2]

Hey, très cool tuto ! Est-il possible de faire la même chose mais l'animation (la même que lorsqu'on clique sur "à propos") "démarre" avec le scroll de la souris ? Comme sur le site d'apple -> à chaque cran du scroll, ça fait un petit % de l'animation ? Merci !

[@IDE_photographisme]

Si c’est possible je n’ai pas encore trouvé comment ^^ À creuser …

[@daphnenougier]

Très utile merci😄

[@julienj9163]

Très sympa!

[@pixelandco7664]

Bonjour, serait-il du coup plus actuel ou plus judicieux d'envoyer son book interactif via un lien (fait dans XD) plutôt qu'un PDF interactif (fait en Indd)

[@IDE_photographisme]

Je n'avais pas envisagé ça comme ça mais ça me paraît être une excellente idée de différenciation, et beaucoup plus versatile au niveau des transitions / animations ! Bien vu !!!

[@omarfaruqlamarechimoun3053]

Super le tuto, j'aimerais que tu donne les étapes de conception de site après avoir fait la maquette

[@IDE_photographisme]

La maquette est à destination d’un intégrateur / développeur web qui va « morceler » le design en différents éléments à intégrer dans un environnement web (html / css / php / JavaScript / …). Ce sont des métiers bien différents de celui d’un graphiste, ce qui fait que généralement ce sont des prestataires différents.

[@elsadroz3132]

Bonjour Je suis graphiste et je m'intéresse au métier de Webdesigner, et je voulais savoir quand on a fini créé un site Web sur Abode XD. On peut l'envoyer directement au client ou il y a encore de la programmation

[@IDE_photographisme]

Bonjour ! Adobe XD ne permet pas de concevoir un site internet prêt à être mis en ligne : il faut le comprendre comme une maquette interactive, mais c’est uniquement une interface visuelle. Il faut ensuite faire un travail d’intégration et de développement pour « convertir » cette interface en un site bien réel.

[@nemelios6652]

@@IDE_photographisme merci de votre réponse :) Et comment il faut pour le convertir

[@IDE_photographisme]

@@nemelios6652 plusieurs options : Bosser avec un intégrateur / développeur Méthode plus artisanale : il semble qu’il y ait une passerelle entre Dreamweaver et Adobe XD, à creuser avec les ressources disponibles en ligne.

[@nemelios6652]

@@IDE_photographisme merci Je vais me renseigner

[@nemelios6652]

@@IDE_photographisme sinon peut on devenir Webdesigner à partir de wordpress

[@calibecalibe8393]

Excellent !

[@ghislainmbarga8019]

Très bonne vidéo, elle permet de comprendre bcp de choses. Merci. Mais après cette étape, comment on exporte ? Comment ça devient un site en ligne ?

[@IDE_photographisme]

Adobe XD n’est malheureusement utile que pour la réalisation de la maquette du site. Je te laisse regarder les réponses à d’autres commentaires similaires pour plus de précision ;)

[@moussaba3857]

Bonsoir je m'excuse pour cette formation vous utilisez quel logiciel de XD de 2000 combien j'aimerai savoir pour pouvoir le faire

[@Jordan-ie5nd]

Super vidéo ! Vraiment un grand merci . Est-il possible d'exporter un peu de css (styles des boutons, fonts et font-size utilsées etc) ?

[@IDE_photographisme]

J’avoue ne pas savoir répondre à ta question, à creuser sur ton moteur de recherche préféré ;)

[@margauxmtn]

Peut on réaliser un site internet sur Wix ou WordPress avec notre maquette XD sans coder ?

[@IDE_photographisme]

Bonjour Margaux, À ma connaissance Adobe XD permet uniquement de réaliser la maquette graphique (à la différence de Dreamweaver par exemple qui lui intègre le code en arrière plan).

[@AO-rp2zo]

Effectivement vous-pouvez faire un site avec c'est solution , mais pour avoir des fonctionnalité avancer il vous faudra payer ou alors avoir un connaissance en code POUR INTEGRER DU javascript si la solution le permets en gros c'est solution vous permette de faire des sites esthétiquement jolie mais tout ce qui est backend seras impossible et vous devrez payez des plug-in ... en brefs une petit e-commerce oui une pages pour un resto ou autres services mais pour tout ce qui est gestion de membre et autre si vous n'avez pas de bonne connaissance en web développement je vous préconise de ne pas vous lancer dans tout ça car vous allé perdre du temps . La meilleurs solution est de faire son site par des pro en commençant par des petit site pour commencer et en fonction du succès du site augmenter le budgets pour l'optimisation !

[@maxgiam4864]

Merci pour cette chouette vidéo. Je viens de terminer grâce à elle un site pour une amie. J'ai acheté son nom de domaine et hébergement pour placer le site. Comment puis je faire à présent pour mettre le site en ligne? Merci

[@IDE_photographisme]

Hello, Comme je le dis dans la vidéo il s’agit de créer uniquement une maquette dynamique d’un site web, Adobe XD ne permet pas de procéder au développement et à l’intégration du site. Tu trouveras plus d’éléments de réponse dans des commentaires similaires au tiens.

[@alexandrebreton4720]

Si tu n'as pas ou peu de connaissance en développement, et selon l'utilisation prévu du site, je pense que tu peux simplement utiliser un Wordpress. Les différents builders (notamment Elementor en version gratuite) permettent de créer rapidement l'équivalent de la maquette réalisée sous XD.

[@gregdev6470]

Super merci

[@smon1494]

salut je voulais juste savoir comment on fait un bouton qui nous redirige vers un autre site internet merci d'avance

[@soultabs]

Super auto merci :)

[@drpopolinux7]

Excellente vidéo ! Par contre une fois le design fait, comment on aboutit au site web fonctionnel ? Ah oui et aussi, comment tu appelles la suite de nombres 21, 34, 55, 89, etc. ?

[@IDE_photographisme]

La suite de Fibonacci ;) Adobe XD est un outil de designer (Ui/Ux), mais qui ne permet pas de générer le code pour rendre le site fonctionnel. Adobe Dreamweaver quant à lui permet de générer le code au travers d’une interface visuelle, mais à ma connaissance pas de passerelle direct (à ce jour) entre XD et Dreamweaver. Il existe des articles comme celui-ci qui peuvent te renseigner sur ce point : mockitt.wondershare.com/adobe-xd/adobe-xd-to-dreamweaver.html

[@drpopolinux7]

@@IDE_photographisme Merci ! Dommage qu'il n'y ait pas encore cette "passerelle"... Que j'attends avec impatience si elle voit le jour.

[@julienj9163]

@@drpopolinux7 C'est un métier différent ;) En général le webdesigner exporte les ressources de la maquette (photos, icones...) pour que l'intégrateur ou le développeur puisse les mettre en place sur le site final.

[@Alice-vy2od]

Merci pour ce tutoriel ! J'aimerais exporter une maquette faite sur XD en psd pour un développeur. Savez-vous comment on peut faire ça ? Merci !

[@IDE_photographisme]

Hello Alice ! Je sais que l’inverse est possible, importer un psd dans XD, mais j’avoue ne pas savoir répondre à ta question… À investiguer ;)

[@chideickmignondjimbi5590]

J'aimerai reproduire la même maquette comment faire pour avoir les ressources utiliser ?

[@andrekombila1196]

Il est possible exporter en téléchargeant un plugin dans le logiciel.

[@gervaistsouka5672]

😁

[@andrekombila1196]

@@gervaistsouka5672 😂😂😂😂😂😂

[@rami1208]

jai beaucoup aimee

[@louis380]

Salut ! J'ai pas l'option délai dans le prototype

[@IDE_photographisme]

j'avoue ne pas savoir te répondre précisément, en cherchant peut être dans les options d'affichage ou sur le site Adobe...

[@marieb4639]

Il faut que tu selectionnes bien tout ton plan de travail et cela va apparaître dans tes choix ;)

[@Tibiscuit_OW2]

J'ai pas l'option délai que faire ?

[@meta_os]

Cool merci. Dans la vidéo tu disais au début qu'on enverra la maquette à notre client via un simple lien. 😷😷 Mais j'ai pas dans la suite de la vidéo

[@IDE_photographisme]

C’est une des options d’export, c’est très simple à générer (en gros un clic). Je te laisse regarder tu devrais trouver assez facilement ;)

[@ouivas-youioui6769]

Coucou sans indiscrétion, tu viens d'ou ? Merci

[@afisuyussuf7533]

Merci pour la vidéo, pourquoi ta pas laisser les images en description !

[@IDE_photographisme]

Le but étant de s’approprier le concept, et de l’adapter à sa propre maquette, ça ne me semblait pas particulièrement intéressant de fournir les images avec lesquelles j’ai travaillé :)

[@tomtomenvtt5838]

ensuite comment on le met sur internet svp ?

[@IDE_photographisme]

Adobe XD est un outil pour créer des maquettes de site internet, et ne permet pas à ma connaissance de migrer cette maquette pour créer un site en ligne. Il faut regarder du côté de Adobe Dreamweaver pour un compromis entre outil de développement web et interface visuelle facile d’utilisation.

[@milou2524]

Comment peut-on se procurer la police Open Sans?

[@IDE_photographisme]

Google font ?

[@milou2524]

@@IDE_photographisme oui je ne sais pas comment les intégrer à adobe xd pour pouvoir les utiliser

[@prophetichand2896]

@@milou2524 Normalement si vous ajoutez à Photoshop, les polices s'enregistrent dans les logiciels auxiliaires

[@sg-7753]

Bonjour, quelle est la manip pour copier le gabarit "portfolio zoom étape 1" ?

[@moussaba3857]

Le télécharger dans mon ordinateur

[@allophoto6295]

Quitte à la modifier légèrement ensuite ?

[@kael7597]

cool mais beaucoup trop rapide dans les explications pour les débutants:)