La conception d’applications peut être un peu intimidante, surtout si vous êtes débutant ou que vous travaillez avec un nouveau designer. La terminologie des différentes étapes de production tend à se mélanger et à être utilisée de manière interchangeable. Pour les entreprises, il est essentiel de savoir ce que chaque étape implique pour savoir ce qu’on peut attendre de votre designer. Les designers devraient comprendre wireframe, mockup et prototype pour assurer leur réputation professionnelle et livrer ce qui est requis au client. Voici ce que vous devez savoir.
Wireframes
La plupart des gens, lorsqu'ils sont à l'école, apprennent la structure d'un plan. Il y a un sujet principal et ensuite les variables sont présentées pour donner à l'essai une forme et un ordre. Il n'y a vraiment aucun détail qui est présenté. Vous mettez simplement les idées dans un ordre logique afin de pouvoir les formuler plus tard. Le wireframing est très semblable au plan. C'est l'enveloppe très basique de la conception web ou d'application. C'est ici que vous obtenez la mise en page et l'ordre conceptualisé. Notez que ceci est la conceptualisation de la page et non pas la forme concrète de la page. Des boîtes simples pour les graphismes, des espaces réservés pour le texte, et des carrés pour la navigation peuvent être utilisés.
Notez que certains wireframes ont différents niveaux de détail. Certains peuvent seulement avoir le contour d'une boîte avec un X à l'intérieur pour les images tandis que d'autres peuvent avoir des descriptions détaillées de ce qui sera dans la zone désignée. Bien qu'il y ait beaucoup d'outils de wireframing sur le marché Balsamiq est notre favori.
Maquette
C'est la deuxième étape pour les concepteurs d'applications. La maquette est une représentation statique de l'application qui sera utilisée. Alors que le wireframe donne la mise en page de l'application qui sera conçue, la maquette donne à un client potentiel l'esthétique et les détails visuels dans leur place appropriée. C'est une image polie. Notez que les maquettes ne sont pas interactives. Cela ne signifie pas que vous (ou votre client d'ailleurs) ne devriez voir que l'écran initial. Les maquettes doivent être disposées de façon à ce que tous les écrans soient vus, mais dans un style fluide type storyboard.
Prototypage
La principale différence entre la maquette et le prototype est l'Interaction et l'Expérience Utilisateur. Alors que le wireframe était une série de formes et un peu de texte généralisé et que la maquette est une esthétique détaillée, le prototype est aussi proche du design que vous pouvez l'être, à l'exception de quelques ajustements au code et à la mise en page. Il est destiné au client pour qu'il puisse avoir un sentiment sur l'application. Le test et le retest du site ou de l'application sont essentiels à un bon prototype. En raison de la variable d'interaction de cette étape, les concepteurs auront besoin de comprendre des connaissances de base (et selon la complexité du projet parfois étendues) en HTML, XHTML, CSS, Java et PHP.
Il est important que les clients et les concepteurs comprennent que le prototype n'est pas le produit fini. Cependant, le prototypage est la dernière étape car cela nous permet d'obtenir une version cliquable précoce d'un produit qui peut être présentée aux utilisateurs/partenaires/investisseurs.
Les clients devraient garder à l'esprit que le temps alloué au prototypage est plus important comparé à la maquette ou au prototype. Heureusement avec KFG International vous pouvez obtenir votre prototype prêt en 48 heures ! Les changements sur une application ou un prototype de conception web ne sont pas des « corrections rapides » mais prend encore beaucoup moins d'effort que les changements effectués avec le produit MVP.
Outils pour le métier
Comme vous pouvez le voir, il y a plusieurs variables à prendre en compte lors de la construction ou de l'achat d'un wireframe, prototype ou maquette. Si vous souhaitez créer l'une de ces mises en page, vous aurez besoin du logiciel approprié et des connaissances nécessaires pour le faire.
Les wireframes, étant les plus simples et les moins chers des trois options, peuvent être créés en utilisant Balsamiq, Pencil and Paper ou tout programme informatique qui permet de créer des formes et du texte de base. Il est recommandé d'utiliser quelque chose de plus sophistiqué que le programme Paint standard (préférablement un programme qui dispose d'outils d'alignement).
Les maquettes exigent que vous ayez la capacité d'éditer des images, des graphismes, de modifier du texte et de créer des conceptions complexes. Le logiciel standard de l'industrie pour cela est Sketch, Figma ou les produits Adobe. En ce qui concerne l'éducation, vous devrez comprendre les bases de l'UI et de l'UX afin d'avoir la meilleure mise en page suggérée.
Le prototypage nécessite un ensemble d'outils complètement différent. Alors que vous aurez besoin d'avoir Photoshop, Illustrator ou un logiciel visuel plus avancé, vous aurez également besoin des moyens de coder. Sketch, Axure, et InVision sont quelques-uns des programmes que vous pouvez utiliser. Il existe d'autres programmes également, et vous êtes encouragés à trouver quelque chose qui réponde à vos besoins.
Avec n'importe quel design ou mise en page, le concepteur devrait tester le wireframe, la maquette ou le prototype dans différents navigateurs. Cela ne signifie pas que le site ou l'application doit être en ligne. Les modes d'aperçu sont généralement disponibles sur les logiciels, et lorsqu'ils ne le sont pas, un aperçu en cloud est disponible. Les professionnels sont encouragés à tester et à visualiser leurs wireframes, maquettes et prototypes dans différents navigateurs afin de garantir l'utilisabilité et la cohérence.
Résumé
Bien qu'il y ait des similarités entre les trois termes différents, ils ne sont pas interchangeables et donc les clients et acheteurs devraient comprendre les obligations et les attentes placées sur la commande. Lorsque vous concevez votre site ou application, il est toujours bénéfique de commencer au niveau le plus bas et de progresser vers les aspects plus complexes. Commencez par un wireframe, puis faites une maquette, et faites un prototype pour avoir la meilleure présentation du produit ou service futur.