{"id":5782,"date":"2018-03-23T10:30:27","date_gmt":"2018-03-23T09:30:27","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=5782"},"modified":"2025-08-20T17:17:20","modified_gmt":"2025-08-20T15:17:20","slug":"outils-creer-wireframes-mockups","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/","title":{"rendered":"10 outils pour cr\u00e9er vos wireframes et mockups"},"content":{"rendered":"

Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage<\/a>.<\/p>\n

Nous vous proposons aujourd’hui une petite s\u00e9lection d’outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.<\/p>\n

Les outils de cet article ont \u00e9t\u00e9 s\u00e9lectionn\u00e9s par notre \u00e9quipe et ne sont pas sponsoris\u00e9s. D\u00e9couvrez comment sponsoriser votre outil<\/a>.<\/p><\/blockquote>

Marvel App<\/a><\/h2>\n

Avec Marvel App, vous pourrez cr\u00e9er des prototypes pour iPhone, Android, iPad, TV et m\u00eame pour Apple Watch.<\/p>\n

Marvel App est aujourd’hui devenu un incontournable gr\u00e2ce \u00e0 sa compatibilit\u00e9 avec Photoshop et Sketch<\/a>, la synchronisation possible avec Google Drive et Dropbox, et la possibilit\u00e9 de transformer vos prototypes en pr\u00e9sentation anim\u00e9e.<\/p>\n

N’oublions pas de citer la possibilit\u00e9 de partager son travail et d’\u00e9changer avec ses collaborateurs.<\/p>\n

\"Cr\u00e9ation
Source : Marvel App<\/a><\/figcaption><\/figure>\n

Outils gratuit avec 2 projets
\nPrix : \u00e0 partir 12$\/mois
\nApplication disponible sur App Store et Google Play<\/p><\/blockquote>\n

 <\/p>\n

Invision<\/a><\/h2>\n

Ajouter des interactions, des r\u00e8gles CSS, interagir avec vos collaborateurs, acc\u00e9der \u00e0 son historique de modifications et suivre son activit\u00e9 sont autant d’actions possibles avec ce second outil bien connu dans le monde du prototypage.<\/p>\n

L\u00e0 encore vous allez pouvoir cr\u00e9er des wireframes<\/a> pour tout type d’appareil et synchroniser vos projets d\u00e9velopp\u00e9s sur Sketch et Photoshop. Invision met \u00e9galement \u00e0 disposition une application desktop.<\/p>\n

\"Cr\u00e9ation
Source : Invision<\/a><\/figcaption><\/figure>\n

Outils gratuit avec 1 projet
\nPrix : \u00e0 partir 15$\/mois
\nApplication disponible sur App Store et Google Play<\/p><\/blockquote>\n

 <\/p>\n

Weld<\/a><\/h2>\n

Avec Weld, vous allez pouvoir cr\u00e9er facilement vos mockups avec de simples drags and drops. Il est \u00e9galement possible d’ajouter des animations et de l’interactivit\u00e9 \u00e0 vos prototypes.<\/p>\n

Avec cet outil, vos cr\u00e9ations seront enti\u00e8rement responsives<\/a>.<\/p>\n

\"Cr\u00e9ation
Source : Weld<\/a><\/figcaption><\/figure>\n

Outils gratuit avec 3 projets<\/p><\/blockquote>\n

 <\/p>\n

Wireframe CC<\/a><\/h2>\n

Si vous pr\u00e9f\u00e9rez un outil rapide et peu complexe, alors Wireframe CC est sans doute fait pour vous.<\/p>\n

Avec un nombre de fonctionnalit\u00e9 r\u00e9duit, vous ne pourrez que positionner vos \u00e9l\u00e9ments pour prototyper vos sites Internet et applications. Toutefois, vous aurez la possibilit\u00e9 d’annoter vos \u00e9l\u00e9ments.<\/p>\n

\"Cr\u00e9ation
Source : Wireframe CC<\/a><\/figcaption><\/figure>\n

Outils gratuit avec 1 projet
\nPrix : \u00e0 partir 16$\/mois<\/p><\/blockquote>\n

 <\/p>\n

Mockingbird<\/a><\/h2>\n

Voici un deuxi\u00e8me outil tr\u00e8s facile \u00e0 prendre en main sp\u00e9cialement con\u00e7u pour la cr\u00e9ation de wireframes.<\/p>\n

Que vous soyez d\u00e9butant ou exp\u00e9riment\u00e9, vous trouverez tout le n\u00e9cessaire pour vos cr\u00e9ations gr\u00e2ce \u00e0 une centaine de modules que vous pouvez ins\u00e9rer avec un simple drag and drop.<\/p>\n

Vous pourrez ensuite relier vos wireframes afin de les pr\u00e9visualiser de mani\u00e8re interactive et m\u00eame les partager avec vos collaborateurs pour qu’ils puissent les modifier en m\u00eame temps que vous.<\/p>\n

\"Cr\u00e9ation
Source : Mockingbird<\/a><\/figcaption><\/figure>\n

Outils gratuit avec des fonctionnalit\u00e9s limit\u00e9es
\nPrix : \u00e0 partir 12$\/mois<\/p><\/blockquote>\n

 <\/p>\n

Axure<\/a><\/h2>\n

Consid\u00e9r\u00e9 comme un outil professionnel, il vous faudra sans doute un petit temps d’adaptation avant de prendre en main cet outil, mais les possibilit\u00e9s sont nombreuses.<\/p>\n

En plus de l’ajout de notes et commentaires, il est possible de travailler \u00e0 plusieurs sur un m\u00eame projet en m\u00eame temps, rendant ainsi la collaboration tr\u00e8s efficace.<\/p>\n

\"Cr\u00e9ation
Source : Axure<\/a><\/figcaption><\/figure>\n

Outils gratuit pour les \u00e9tudiants et professeurs
\nPrix : \u00e0 partir 29$\/mois
\nUniquement disponible sur ordinateur – Mac et PC<\/p><\/blockquote>\n

 <\/p>\n

Pingendo<\/a><\/h2>\n

Si votre d\u00e9sire est de cr\u00e9er un prototype HTML<\/a> utilisant Bootstrap, alors vous aller certainement utiliser Pingendo.<\/p>\n

Gr\u00e2ce \u00e0 des templates d\u00e9j\u00e0 \u00e0 votre disposition, vous pourrez facilement les personnaliser si vous ne souhaitez pas tout cr\u00e9er de A \u00e0 Z. Et pour ceux aimant mettre les mains dans le code, vous trouverez votre bonheur gr\u00e2ce \u00e0 l’\u00e9diteur int\u00e9gr\u00e9.<\/p>\n

\"Cr\u00e9ation
Source : Pingendo<\/a><\/figcaption><\/figure>\n

Outils gratuit pour une utilisation non commerciale avec la marque d\u00e9pos\u00e9e sur chaque page
\nPrix : 99$ (paiement unique)
\nApplication disponible pour MacOSX, Windows et Linux<\/p><\/blockquote>\n

 <\/p>\n

Justinmind<\/a><\/h2>\n

Cette application est tr\u00e8s compl\u00e8te et vous permettra de cr\u00e9er vos prototypes pour web et mobile avec une interface drag and drop. Tout comme dans l’outil pr\u00e9c\u00e9dent, des templates sont \u00e0 votre disposition que vous pourrez modifier \u00e0 votre guise.<\/p>\n

Vous pourrez ajouter des interactions, animations, effets en transitions avanc\u00e9es pour ensuite tester en un clique votre exp\u00e9rience utilisateur. Un espace collaboratif est \u00e9galement mis \u00e0 disposition.<\/p>\n

L’interface de cette application est tr\u00e8s proche de celles d’Adobe. Le prise en main sera donc moins difficile pour ceux connaissant la suite Adobe.<\/p>\n

\"Cr\u00e9ation
Source : Justinmind<\/a><\/figcaption><\/figure>\n

Prix : \u00e0 partir de 19$\/mois
\n30 jours d’essai
\nApplication t\u00e9l\u00e9chargeable sur votre ordinateur<\/p><\/blockquote>\n

 <\/p>\n

Proto.io<\/a><\/h2>\n

Cet outil est tr\u00e8s ax\u00e9 sur la cr\u00e9ation de prototypes pour mobiles mais vous pourrez tout de m\u00eame \u00e9diter des cr\u00e9ations pour le web.<\/p>\n

Tr\u00e8s complet, vous pourrez importer vos designs de Sketch et Photoshop, modifier et ins\u00e9rer de nouveaux composants, ajouter des animations, pr\u00e9visualiser vos cr\u00e9ations directement depuis votre smartphone, les partager et effectuer un travail collaboratif.<\/p>\n

\"Cr\u00e9ation
Source : Proto.io<\/a><\/figcaption><\/figure>\n

Prix : \u00e0 partir de 24$\/mois
\n15 jours d’essai
\nApplication mobile t\u00e9l\u00e9chargeable pour pr\u00e9visualiser vos cr\u00e9ations<\/p><\/blockquote>\n

\u00c0 lire aussi : Comment cr\u00e9er un wireframe d’application mobile ?<\/a><\/p><\/blockquote>\n

 <\/p>\n

Origami Studio<\/a><\/h2>\n

D\u00e9velopp\u00e9e par les designers de Facebook, Messenger et Instagram, cette application est d\u00e9di\u00e9e \u00e0 la cr\u00e9ation de prototypes pour mobiles Android et iOs.<\/p>\n

Vous avez la possibilit\u00e9 d’importer vos contenus Sketch pour ensuite les ajuster et les animer. La pr\u00e9visualisation pourra quant \u00e0 elle se faire directement sur votre mobile, vous permettant ainsi de tester grandeur nature votre prototype.<\/p>\n

\"Cr\u00e9ation
Source : Origami<\/a><\/figcaption><\/figure>\n

Outil 100% gratuit
\nApplication t\u00e9l\u00e9chargeable uniquement sur Mac<\/p><\/blockquote>\n

Lire aussi :<\/strong> Comment cr\u00e9er un wireframe pour votre site internet<\/a><\/p><\/blockquote>\n

 <\/p>\n

Pour la cr\u00e9ation de vos wireframes et mockups, n’\u00e9hsitez pas \u00e0 faire appel \u00e0 un professionnel du webdesign<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd’hui une petite s\u00e9lection d’outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins. Les outils de cet article ont \u00e9t\u00e9 s\u00e9lectionn\u00e9s par notre \u00e9quipe et ne […]<\/p>\n","protected":false},"author":5,"featured_media":5833,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[106],"class_list":["post-5782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-outils"],"acf":[],"yoast_head":"\n10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-23T09:30:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"10 outils pour cr\u00e9er vos wireframes et mockups\",\"datePublished\":\"2018-03-23T09:30:27+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\"},\"wordCount\":1026,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png\",\"keywords\":[\"Outils\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\",\"url\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\",\"name\":\"10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png\",\"datePublished\":\"2018-03-23T09:30:27+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"description\":\"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png\",\"width\":800,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 outils pour cr\u00e9er vos wireframes et mockups\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/totolazza.com\",\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog","description":"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/","og_locale":"fr_FR","og_type":"article","og_title":"10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog","og_description":"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.","og_url":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-03-23T09:30:27+00:00","article_modified_time":"2025-08-20T15:17:20+00:00","og_image":[{"width":800,"height":400,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png","type":"image\/png"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"10 outils pour cr\u00e9er vos wireframes et mockups","datePublished":"2018-03-23T09:30:27+00:00","dateModified":"2025-08-20T15:17:20+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/"},"wordCount":1026,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png","keywords":["Outils"],"articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/","url":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/","name":"10 outils pour cr\u00e9er vos wireframes et mockups - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png","datePublished":"2018-03-23T09:30:27+00:00","dateModified":"2025-08-20T15:17:20+00:00","description":"Avant de vous lancer dans la cr\u00e9ation de votre site Internet ou de votre application mobile, vous allez devoir passer par la phase de prototypage. Nous vous proposons aujourd'hui une petite s\u00e9lection d'outils qui vous permettront de r\u00e9pondre \u00e0 tous vos besoins.","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-outils-wireframe-mockup-1.png","width":800,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"10 outils pour cr\u00e9er vos wireframes et mockups"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/totolazza.com","https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/5782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=5782"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/5782\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/5833"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=5782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=5782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=5782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}