{"id":316,"date":"2014-10-29T15:20:38","date_gmt":"2014-10-29T13:20:38","guid":{"rendered":"http:\/\/purweb.fr\/purblog\/?p=316"},"modified":"2015-04-06T14:15:39","modified_gmt":"2015-04-06T12:15:39","slug":"wireframe","status":"publish","type":"post","link":"https:\/\/purweb.fr\/purblog\/projetweb\/wireframe\/","title":{"rendered":"Wireframe : la vision sch\u00e9matique de votre futur site"},"content":{"rendered":"

Le Wireframe<\/strong> est une repr\u00e9sentation sch\u00e9matique de votre futur site Internet. Il permet de mettre en relief la composition de vos pages Web. Tout comme l\u2019arborescence, c\u2019est une \u00e9tape qui vient en amont du projet. Le Wireframe vous permet de mettre en forme vos id\u00e9es sur la structuration de vos pages.<\/span><\/p>\n

Une fois l’arborescence termin\u00e9e (id\u00e9alement) ou bien en cours de r\u00e9alisation, vous pouvez cr\u00e9er vous-m\u00eame vos propres Wireframes. Litt\u00e9ralement, Wireframe se traduit par maquette de fil de fer. Il s’agit, au travers de cette m\u00e9thode, d’obtenir une vue g\u00e9n\u00e9rale et sch\u00e9matique<\/span> de l’ensemble des zones qui composeront votre futur page Web. Pour illustrer mon propos, voici un exemple de Wireframe.<\/p>\n

\"wireframe<\/p>\n

Le Wireframe<\/strong>, \u00e9galement appel\u00e9 zoning web, est une \u00e9tape aussi cruciale que l’arborescence<\/span>. Ces deux \u00e9l\u00e9ments repr\u00e9sentent en partie l’aboutissement du cahier des charges. Le Wireframe fait abstraction du graphisme et se focalise sur la disposition des contenus et des fonctionnalit\u00e9s dans la page. C’est la raison pour laquelle un Wireframe se base sur des formes simples et sans couleur.<\/p>\n

Comment faire un Wireframe ?<\/span>
\n<\/strong><\/h2>\n

Faire un Wireframe, ou du moins son esquisse, est \u00e0 la port\u00e9e de tous. Il vous est possible de participer \u00e0 cette \u00e9tape et de vous approcher du r\u00e9sultat final. Cependant, tout comme l’arborescence, il est pr\u00e9f\u00e9rable de faire appel \u00e0 un professionnel du web pour sa validation d\u00e9finitive.<\/p>\n

De m\u00eame que l’arborescence, un Wireframe peut \u00eatre r\u00e9alis\u00e9 avec la m\u00e9thode papier\/crayon ou encore avec Powerpoint. Cependant, votre futur site doit s’adapter \u00e0 tous les formats existants (smartphone, tablette, portable, pc, …), il est donc n\u00e9cessaire d’int\u00e9grer cette contrainte d\u00e8s cette \u00e9tape. Id\u00e9alement, vous devez utiliser la m\u00e9thode mobile first, qui fera l’objet d’un prochain article.<\/p>\n

Wireframe CC : Le meilleur outil pour \u00e9laborer vos Wireframes
\n<\/strong><\/span><\/h2>\n

Wireframe CC est un outil en ligne qui ne n\u00e9cessite aucune installation sur votre ordinateur et qui dispose d’une interface tr\u00e8s intuitive. Voici le lien \u00e0 suivre pour le tester : https:\/\/wireframe.cc\/<\/a><\/span><\/p>\n

Sa prise en main, d’une facilit\u00e9 enfantine, est d\u00e9concertante. Proposant les formats smartphones, tablettes et sur mesure, l’outil vous permet de cr\u00e9er vos Wireframes pour les diff\u00e9rents terminaux, favorisant ainsi une conception adapt\u00e9e au responsive webdesign.<\/p>\n

\"wireframecc<\/p>\n

\"wireframecc<\/p>\n

Gr\u00e2ce au bouton \u00ab\u00a0Save\u00a0\u00bb, vous pouvez sauvegarder votre travail sous forme d’URL. Ce petit d\u00e9tail s’av\u00e8re d’une grande efficacit\u00e9, notamment si vous souhaitez partager vos Wireframes avec les diff\u00e9rents intervenants de votre projet Web. En obtenant un lien unique pour chacun de vos Wireframes, vous aurez ainsi la possibilit\u00e9 de dialoguer facilement avec votre prestataire et vos collaborateurs.<\/p>\n

L’approche Mobile First
\n<\/strong><\/span><\/h3>\n

D\u00e8s l’\u00e9laboration de vos Wireframes, vous vous apercevez que la mise en page sur petit format diff\u00e8re des formats les plus grands. Pour obtenir un r\u00e9sultat coh\u00e9rent, il est conseill\u00e9 de d\u00e9marrer par la cr\u00e9ation d’un mod\u00e8le de page au format smartphone avant de travailler sur les formats plus larges. C’est ce que l’on appelle l’approche Mobile First.<\/p>\n

Conclusion
\n<\/span><\/h3>\n

Tout comme l’arborescence, le zoning web est indispensable et le garant d’un projet web r\u00e9ussi. Si vous disposez de temps, n’h\u00e9sitez pas \u00e0 mettre la main \u00e0 la p\u00e2te. Ces \u00e9tapes ne n\u00e9cessitent aucun pr\u00e9-requis sp\u00e9cifique. En revanche, m\u00eame si vous atteignez un r\u00e9sultat fini, l’\u0153il et l’expertise de votre prestataire web est indispensable. Celui-ci doit imp\u00e9rativement valider avec vous l’arborescence et le Wireframe<\/strong> avant de poursuivre la r\u00e9alisation du site<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Le Wireframe est une repr\u00e9sentation sch\u00e9matique de votre futur site Internet. Il permet de mettre en relief la composition de vos pages Web. Tout comme l\u2019arborescence, c\u2019est une \u00e9tape qui vient en amont du projet. Le Wireframe vous permet de … Continuer la lecture de Wireframe : la vision sch\u00e9matique de votre futur site<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n\t\n\t\n