{"id":1728,"date":"2022-12-18T15:13:10","date_gmt":"2022-12-18T14:13:10","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=1728"},"modified":"2022-12-18T15:15:59","modified_gmt":"2022-12-18T14:15:59","slug":"creer-un-mockup-de-site-internet-avec-draw-io","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/creer-un-mockup-de-site-internet-avec-draw-io\/","title":{"rendered":"Cr\u00e9er un mockup de site Internet avec draw.io"},"content":{"rendered":"\n

Pr\u00e9sentation de l’outil de draw.io ou diagrams.net<\/h2>\n\n\n\n

Avant de se lancer dans le d\u00e9veloppement d’un site Internet ou d’une application, il est bien de penser \u00e0 l’architecture des pages<\/strong> et de la base de donn\u00e9es. Il est possible de tout faire \u00e0 la main, d’utiliser un template ou l’on peut r\u00e9aliser une interface mais avant tout il faut la prototyper. Pour cela diagrams.net<\/a> aussi appel\u00e9 draw.io est l’une des meilleures solutions open source, qui est distribu\u00e9 gratuitement. Il est \u00e9dit\u00e9 par 2 entreprises, JGraph Ltd<\/strong> situ\u00e9 en Angleterre et draw.io AG<\/strong> en Suisse.<\/p>\n\n\n\n

\"\"
Draw.io est un outil de prototypage gratuit et en ligne<\/figcaption><\/figure>\n\n\n\n

Le prototypage<\/strong> aussi appel\u00e9 zoning<\/strong> n’est pas le template final, il va repr\u00e9senter une version simplifi\u00e9e des principales pages. Il sert \u00e0 poser les fondements du projet et permet d’am\u00e9liorer l’exp\u00e9rience utilisateur en anticipant certains probl\u00e8mes que l’on peut rencontrer dans le d\u00e9veloppement. Il existe des solutions professionnelles de prototypage comme Adobe XD<\/strong> ou Figma<\/strong> mais elles sont payantes ou alors tr\u00e8s limit\u00e9es dans leur version d’essai. En entreprise le prototypage va permettre de pouvoir valider les principales interfaces aupr\u00e8s de son client avant de faire appel au designer qui aura ainsi une bonne base de travail. Cela permet d’\u00e9conomiser du temps aussi bien sur la conception que sur le d\u00e9veloppement. <\/p>\n\n\n\n

Cet outil est aussi disponible dans la marketplace de Confluence<\/strong> pour \u00eatre utilis\u00e9 dans la plateforme de gestion de projets. Il reste gratuit pour une exploitation en dessous de 10 utilisateurs. R\u00e9aliser des mockups avec cette plateforme collaborative permet d’avancer plus rapidement sur les projets ce qui facilite le travail en \u00e9quipe.<\/p>\n\n\n\n

Un outil en ligne et hors ligne<\/h2>\n\n\n\n

Draw.io peut s’utiliser de 2 fa\u00e7ons, directement en ligne avec une web application<\/strong> ou alors on peut le t\u00e9l\u00e9charger pour une utilisation en local<\/strong>. Dans les 2 cas, il est possible de sauvegarder son travail dans un fichier .drawio<\/strong> puis de le r\u00e9 ouvrir quand on le souhaite. On peut sauvegarder le diagramme sur un drive comme Google Drive, One Drive, etc. C’est un outil disponible en de nombreuses langues et il permet de cr\u00e9er sa propre biblioth\u00e8que de composants ou d’en int\u00e9grer des toutes faites.<\/p>\n\n\n\n

Pour les int\u00e9grateurs qui utilisent le framework Bootstrap<\/strong>, il existe une biblioth\u00e8que compl\u00e8te qui reprend quasiment tous les composants de base. On peut ainsi r\u00e9aliser une maquette de n’importe quel type de projet sous Bootstrap. Des exemples sont disponibles \u00e0 la cr\u00e9ation d’un nouveau projet dans \u00e0 peut pr\u00eat toutes les cat\u00e9gories de diagrammes que propose le logiciel.<\/p>\n\n\n\n

\"\"
Int\u00e9gration de la biblioth\u00e8que de composants Bootstrap<\/figcaption><\/figure>\n\n\n\n

La plupart des composants int\u00e9gr\u00e9s peuvent se personnaliser au niveau des couleurs, de la typographie et des styles. Il est possible d’importer des images<\/strong> et m\u00eame des \u00e9l\u00e9ments vectoriels comme du SVG. On peut exploiter une librairie d’ic\u00f4nes comme Font Awesome pour un pr\u00e9 rendu assez sympa. Ci-dessous un exemple de maquette inspir\u00e9e de Google Drive.<\/p>\n\n\n\n

\"Maquette
Exemple de maquette d’une interface de type Google Drive<\/figcaption><\/figure>\n\n\n\n

Un point n\u00e9gatif est la gestion de la profondeur<\/strong> des \u00e9l\u00e9ments dans la zone de travail. Il est possible de mettre un \u00e9l\u00e9ment tout en haut ou tout bas, mais entre les 2 il faut d\u00e9placer l’\u00e9l\u00e9ment un par un en faisant un clic droit sur ce dernier puis en cliquant sur le bouton monter ou descendre. Il n’y a pas de raccourci clavier ce qui peut \u00eatre long quand il y a de nombreux \u00e9l\u00e9ments et que l’on doit mettre un composant au bon z-index.<\/p>\n\n\n\n

Mise en place de diagramme ou d’organigramme<\/h2>\n\n\n\n

Il est possible de concevoir toute sorte de diagrammes <\/strong>comme un sch\u00e9ma relationnel de base de donn\u00e9es, une architecture de site, un diagramme de s\u00e9quence, etc. Avec un syst\u00e8me de liaison fl\u00e9ch\u00e9e, il est tr\u00e8s simple de relier des \u00e9l\u00e9ments entre eux afin de former des relations. Cela peut \u00eatre utile pour les relations des tables d’une base de donn\u00e9es ou pour un diagramme de classes. De tr\u00e8s nombreux exemples sont disponibles \u00e0 l’ouverture du logiciel pour cr\u00e9er toute sorte de projets.<\/p>\n\n\n\n

\"De
De nombreux exemples de diagrammes sont disponibles<\/figcaption><\/figure>\n\n\n\n

En compl\u00e9ment du wireframe, il est possible de r\u00e9aliser des sch\u00e9mas professionnels<\/strong> directement avec cette application comme un organigramme d’entreprise par exemple. Les liaisons entre les composants sont relativement simples \u00e0 mettre en place et on peut tout personnaliser. Ci-dessous un exemple d’organigramme issu des templates disponibles.<\/p>\n\n\n\n

\"R\u00e9alisation
R\u00e9alisation d’un organigramme d’entreprise complet<\/figcaption><\/figure>\n\n\n\n

Pour aller plus loin<\/h2>\n\n\n\n

Sur le site Internet de drawio-app.com<\/a> on peut acc\u00e9der \u00e0 un blog ou \u00e0 une documentation pour plus de renseignements sur l’utilisation de cette application. Il y a des tutoriels sur diff\u00e9rents sujets comme la cr\u00e9ation de librairies et m\u00eame des articles sur des concepts plus g\u00e9n\u00e9raux. On peut acc\u00e9der aussi \u00e0 une cha\u00eene YouTube qui pr\u00e9sente le logiciel et certains concepts. <\/p>\n\n\n\n

Bien que Draw.io peut \u00eatre utilis\u00e9 pour r\u00e9aliser des maquettes assez pouss\u00e9es, il ne remplace pas un vrai outil de PAO comme Photoshop, Illustrator ou encore Affinity Designer. C’est un excellent outil de prototypage<\/strong> pour la cr\u00e9ation de maquette et le travail collaboratif. Sa facilit\u00e9 d’utilisation et sa gratuit\u00e9 en fait une solution avantageuse par rapport aux outils payants qui sont disponibles sur le march\u00e9.<\/p>\n

Bootstrap<\/a><\/div>","protected":false},"excerpt":{"rendered":"

Pr\u00e9sentation de l’outil de draw.io ou diagrams.net Avant de se lancer dans le d\u00e9veloppement d’un site Internet ou d’une application, il est bien de penser \u00e0 l’architecture des pages et de la base de donn\u00e9es. Il est possible de tout faire \u00e0 la main, d’utiliser un template ou l’on peut r\u00e9aliser une interface mais avant […]<\/p>\n","protected":false},"author":1,"featured_media":2528,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[23],"class_list":["post-1728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme","tag-bootstrap","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=1728"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1728\/revisions"}],"predecessor-version":[{"id":2529,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1728\/revisions\/2529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/2528"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=1728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=1728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=1728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}