Imaginez ou pensez à ce client qui vient à vous et vous charge de concevoir un site Web. Il se peut que vous deviez concevoir le thème qu'il va utiliser, et que ce soit la première impression qu'il laissera sur les milliers ou millions de personnes qui vont le visiter. Comment le lui présenteriez-vous ? Prendriez-vous des captures d'écran d'un site Web sur lequel vous avez travaillé sur le design et les leur montreriez-vous ? Ne serait-il pas préférable d'utiliser une maquette Web ?
Attendre, Vous ne saviez pas qu'il y avait aussi une maquette web ? Eh bien, ce sujet vous intéresse. Et beaucoup. Parce que vous pouvez donner à votre présentation une meilleure présence et rendre le client beaucoup plus heureux après avoir vu des images où il semble que le site Web soit déjà opérationnel. Et la vérité est que cela ne vous coûtera pas si cher de le faire.
Qu'est-ce qu'une maquette de site Web
Tout d'abord, expliquons un peu ce qu'est un maquette de site web. Comme vous le savez, une maquette est en fait une représentation "d'image réelle" qui montre à quoi ressemblerait le résultat final de votre travail.
Dans le cas d'un site Internet, serait une image du résultat de cette page Web.
Ce type de collage ils servent à donner plus de réalisme à l'oeuvre, puisque plusieurs fois, lorsque vous le présentez, il peut être vide ou ne pas représenter à cent pour cent ce que vous avez fait. De plus, le client a une manière plus visuelle de se faire une idée.
Et vous direz, pourquoi ne pas lui montrer le site sur lequel vous avez travaillé ? Cela pourrait se faire, mais pas comme une présentation du travail mais vous devriez laisser le client naviguer sur le Web qu'il apprenne à la connaître à fond et, souvent, ils n'ont pas le temps de le faire, alors vous ne vous assurez pas qu'il a tout vu.
D'un autre côté, avec une maquette Web, vous y parviendrez car vous mettrez en évidence tout ce que vous voulez voir dans ces images.
Comment sont-ils fabriqués
Maintenant, comment ces maquettes Web sont-elles faites ? Existe-t-il un programme pour les créer ? S'agit-il de collages tirés d'Internet ?
En réalité il existe plusieurs outils gratuits qu'ils peuvent vous donner un coup de main pour les créer, et qu'ils peuvent vous donner des options, pas seulement avec les exemples que nous allons vous donner un peu plus tard.
Avec cela, vous pouvez même en créer une collection pour ce client, en plaçant le design dans différentes séquences qui rendent le résultat final bien meilleur.
Ces outils sont :
Gliffy
Cet outil est en ligne et c'est gratuit. Avec lui, vous pouvez créer une maquette Web parce que a de nombreux schémas et une API avec laquelle vous pouvez faire le travail en quelques minutes.
En fait, c'est un des plus utilisés et cela vous donne beaucoup d'options.
Cacoo
Dans ce cas, nous devons vous avertir que, même si nous allons nous concentrer sur le partie gratuite, l'outil c'est aussi payant et cela veut dire sera plus limité dans ce que vous pouvez faire.
Pour vous faire une idée, vous ne pouvez exporter que dans PNG (il n'est donc pas si personnalisable si vous souhaitez l'utiliser avec d'autres clients).
La bonne chose est que si vous travaillez avec une équipe, vous pourriez travailler ensemble en même temps (c'est-à-dire en temps réel).
Wireify
Wireify est l'un des outils peut transformer un site Web en un wireframe et, avec elle, travailler avec le client vous montrant le web à votre goût. Mais bien sûr, ici il faudrait choisir une photo d'un ordinateur, d'une tablette ou d'un mobile pour monter le résultat de ce programme.
Comme vous l'avez peut-être deviné, tous les outils vous donnent une image du web design, mais il faudrait réellement l'assembler en une image réelle. Pour cela, vous devez accéder à des photos où sont affichés des ordinateurs, des mobiles, des tablettes afin d'insérer votre design par-dessus et d'obtenir une photo qui unit les deux (et qui a l'air bien).
Pour ce faire, vous pouvez utiliser des maquettes prêtes à l'emploi ou les créer vous-même avec un programme de retouche d'image.
Maquette Web que vous pouvez télécharger
Si vous ne voulez pas être trop débordé pour présenter le travail, nous vous laissons ici quelques exemples de maquette de site web que vous pouvez télécharger et utiliser. Vous gagnerez du temps.
Maquette de site Web réaliste
Nous commençons avec une scène que n'importe qui pourrait avoir. Il s'agit d'un bureau et d'un écran d'ordinateur en haut (clavier et souris en bas). En arrière-plan une bibliothèque avec des livres. Cependant, cette bibliothèque est en noir et blanc, tout comme les éléments décoratifs du bureau (plus de livres et une lampe) et le mur, qui est dans un ton gris.
Parce que? Pour que le regard soit focalisé sur la page affichée par le moniteur. dans ton cas pourrait être l'accueil de la page, ou des pièces représentatives que vous souhaitez montrer au client.
tu le télécharge ici !.
Maquette de site Web simple
Une représentation plus simple, où avec un fond gris (bien qu'il puisse être personnalisé) il ne montre pas d'écran dans lequel nous aurons inséré la page Web.
Il ressort que, si vous regardez l'écran, il a une partie plus claire et une partie plus sombre, car il simule que la lumière tombe dessus.
Cela peut être intéressant pour les pièces où vous voulez le client les regarde exclusivement.
tu le télécharge ici !.
Maquette Samsung Galaxy S5
Il s'agit en particulier d'une maquette du Samsung Galaxy S5, mais cela peut être parfait pour vous de montrer, dans la même image, trois parties de la conception Web que vous avez créées afin que le client apprécie à quoi cela ressemblerait sur un mobile.
Gardez à l'esprit que Google permet désormais aux entreprises de faire plus que utiliser un site web responsive, c'est-à-dire qu'il a l'air bien que vous utilisiez un ordinateur, une tablette ou un mobile. Par conséquent, il ne suffit pas qu'il soit beau sur l'ordinateur, vous devez vous assurer sur toutes les autres plates-formes.
Vous pouvez le télécharger ici !.
Maquette pour tablette et mobile
Dans ce cas, vous ne pourrez pas afficher 100 % du Web sur une tablette, mais vous le pouvez sur le mobile. Et c'est que si vous voulez montrer votre conception sur ces deux appareils, vous pouvez également le faire, afin que le client ait une idée de son apparence.
Bien sûr, gardez à l'esprit que sur la tablette il sera affiché en format paysage tandis que le portable l'aura vertical. C'est une façon pour lui de voir votre conception changer pour s'adapter aux deux appareils.
Vous l'avez ici !.
Avez-vous des exemples de maquettes Web ? Vous pouvez les partager dans les commentaires.