Moqups : un aperçu et un examen

Comment savoir qu'une idée est bonne ou mauvaise sans la tester ?

Le wireframing, les maquettes et le prototypage sont des éléments nécessaires de la conception numérique. La visualisation de vos concepts vous permet de simuler vos conceptions, d'essayer différentes expériences utilisateur et de tester divers parcours et flux d'utilisateurs avant de mettre quoi que ce soit en direct.

Dans le passé, les concepteurs devaient imprimer leurs conceptions et présenter au client un PDF. Aujourd'hui, il existe des outils pour vous aider à trouver et à résoudre les problèmes de conception avant qu'une conception ne soit rendue publique ; élaborer les composantes esthétiques et techniques d'un design ; et testez l'expérience avant tout le monde.

Vous améliorerez également votre relation avec le client - s'il suppose quelque chose (ce qu'il fera), vous pouvez gérer cela au début au lieu d'entendre « Oh, je pensais que… » plus tard, quand il sera trop tard .

Moqups est un outil de conception Web qui peut vous aider à créer des wireframes, des maquettes et des prototypes dans un seul environnement. Vous pouvez naviguer entre les projets et faire passer votre conception de la basse fidélité (étapes initiales et esquisses) à la haute fidélité (plus approfondie et détaillée). Dans cet article, je vais faire un tour et vous montrer à quoi ressemble ce processus à chaque étape du processus, y compris mes dernières réflexions à la fin de l'article.

Que pouvez-vous faire avec Moqups ?

Vous pouvez créer un certain nombre de conceptions avec Moqups : diagrammes, organigrammes, plans de site, wireframes, maquettes, tableaux et graphiques. Passons en revue.

Vous remarquerez que je ne parle pas spécifiquement de prototypage ici. Il y a une raison à cela, et j'y reviendrai plus tard.

Diagrammes et organigrammes

Presque tous les projets de conception Web commencent par un diagramme, un organigramme ou un plan du site, et les membres de l'équipe ont tendance à y revenir pour référence en cours de route. Avec Moqups, vous pouvez créer toutes sortes de diagrammes :

• Diagrammes conceptuels
• Arbres de décision
• Organigrammes avec interactions utilisateur
• Organigrammes des workflows logiciels
• Les cartes mentales
• Plans du site
• Diagrammes de cas d'utilisation

Avec les pochoirs d'organigramme, vous pouvez avoir une longueur d'avance sur toutes sortes de diagrammes. Vous pouvez également utiliser une extension de diagramme pour faire évoluer un flux selon vos besoins. De plus, vous pouvez modifier l'apparence du diagramme pour le personnaliser.

Wireframes et maquettes

Avec les wireframes , votre équipe peut comprendre des choses comme la hiérarchie des informations, la densité des pages et le flux d'utilisateurs au début d'un projet. Des formes simples et du texte d'espace réservé remplacent les éléments de conception plus avancés que vous ajouterez à l'avenir. Vous n'avez pas encore à vous soucier de l'image de marque ou du design ; au lieu de cela, vous n'avez qu'à vous soucier de la structure et des exigences clés du site Web.

Avec les maquettes , votre équipe peut obtenir des commentaires dans les premières étapes de la conception. Vous vous baserez sur l'esquisse du wireframe pour visualiser le contenu et démontrer comment il fonctionnera de manière très basique. La conception est mise en contexte pour la rendre plus belle et visualiser le résultat final. Au lieu de voir un design sur une page, les clients peuvent voir à quoi ressemblera le design sur leur site Web ou leur application.

Créez dans l'ordre qui vous convient

La beauté de Moqups est que vous pouvez rebondir entre vos wireframes et vos maquettes comme vous le souhaitez - et vous n'avez pas nécessairement à créer l'un avant l'autre. Par exemple, vous pouvez commencer de manière traditionnelle, avec un wireframe puis une maquette. Vous pouvez ensuite revenir à la structure filaire pour apporter les modifications dont vous avez réalisé que vous aviez besoin lors de l'évaluation de la maquette. Ou, vous pouvez d'abord créer une maquette, puis passer à l'étape du wireframing pour comprendre les détails. Vous pouvez également ignorer complètement la maquette et créer un prototype basse fidélité à partir d'une structure filaire.

Tableaux et graphiques

Si vous avez besoin de présenter visuellement des informations à votre équipe, vos clients ou vos investisseurs, Moqups vous permet de créer toutes sortes de tableaux et de graphiques :

• Graphiques en aires
• Diagramme à barres
• Graphiques à colonnes
• Graphiques en anneau
• Graphiques linéaires
• Camemberts

Fonctionnalités de Moqups

Voici les principales caractéristiques de Moqups, suivies d'une brève liste d'avantages supplémentaires.

Bibliothèque intégrée avec graphiques et polices

• La bibliothèque intégrée comprend des milliers de jeux d'icônes. Il existe également des pochoirs prêts à l'emploi qui ont été conçus pour des cas d'utilisation courants, ainsi que des kits de pochoirs personnalisés pour la conception d'applications mobiles Android et iOS.
• Alignez, redimensionnez, faites pivoter ou stylisez des objets. Vous pouvez également modifier en bloc, grouper, verrouiller et renommer des éléments. Des ajustements précis peuvent être effectués avec des guides, des grilles et des règles personnalisés.
• Google Fonts est intégré afin que vous puissiez choisir parmi des centaines de polices. Les commandes avancées vous permettent de modifier le texte pour qu'il corresponde à vos conceptions. (Vous voulez savoir comment choisir les meilleures polices pour les logos ? Nous avons un article pour cela.)

Organisez vos projets

• Glissez-déposez vos pages pour les réorganiser ou les organiser dans des dossiers.
• Le panneau Pages facilite la recherche et la navigation dans vos dossiers.
• Avec les pages maîtres, vous pouvez appliquer automatiquement les modifications à toutes les pages associées.

Intégrations et collaboration

• Moqups a des intégrations avec des outils comme Dropbox, Google Drive et Slack.
• Votre équipe peut collaborer tout en travaillant à distance grâce au cloud (et voici également d'autres façons pour votre équipe de discuter).
• Obtenez des commentaires directement sur la conception elle-même et apportez des modifications sans avoir à vous envoyer différentes versions.

Plus de fonctionnalités

• Éditeur glisser-déposer facile à utiliser (les débutants peuvent avoir une courbe d'apprentissage, mais ce n'est pas majeur)
• Téléchargez vos propres images
• Alignement du composant logiciel enfichable lors de l'alignement des éléments
• Échelle sans perte de qualité
• Exportez votre travail au format PDF ou PNG

Utiliser les Moqups

Je vais juste vous parler de mon expérience avec Moqups. Il se passe beaucoup de choses – ce n'est pas déroutant, il y en a juste beaucoup là-bas – donc je vais parler des fonctionnalités avec lesquelles j'ai joué et que je pensais être cool ou utiles. À la fin de l'article, je vais vous donner mes réflexions et mes sentiments généraux sur les Moqups, y compris les inconvénients courants et pour qui c'est le mieux.

Premiers pas avec Moqups

La configuration avec Moqups est super facile, et je vous suggère de commencer par le compte gratuit (je parlerai de ce qui est inclus à ce sujet dans la section Tarification plus tard).

Création d'un dessin

J'aime beaucoup l'éditeur glisser-déposer. Dans certains éditeurs, vous cliquez sur un élément et il apparaît immédiatement sur le projet, puis il peut être gênant de s'en débarrasser. Moqups me donne l'impression d'avoir un peu plus de contrôle sur ce que j'ajoute et me permet d'explorer les options sans m'inquiéter de cliquer accidentellement sur quelque chose et de l'ajouter sans m'en rendre compte. De plus, lorsque vous faites glisser un élément vers votre projet, vous pouvez voir à quoi il ressemblera, puis le remettre en place si vous décidez que vous n'en voulez pas.

Travailler avec un dessin

Lorsque vous survolez les différents éléments de votre conception, un contour bleu apparaît pour vous montrer les différents éléments de la page. Pour travailler avec un élément, cliquez pour le sélectionner. Un menu s'ouvrira sur la droite avec des options personnalisées.

Couleurs du projet

J'aime la partie « Couleurs du projet » du sélecteur de couleurs. Cela a permis de faire correspondre facilement la couleur du cœur dans le coin supérieur gauche avec la couleur du texte.

Enregistrement d'éléments en tant que modèles

Une fonctionnalité utile de Moqups est que vous pouvez enregistrer des éléments en tant que modèles, puis les ajouter facilement à d'autres pages tels quels. La conception originale sera conservée – couleur, taille, etc. Cela contribue à créer une continuité dans votre conception.

Fonctionnalités de collaboration

Si vous êtes un utilisateur de Google Drive, les commentaires auront une apparence et un comportement que vous connaissez bien. L'ajout d'un commentaire est très simple et vous pouvez déplacer le commentaire avant ou après l'avoir écrit pour que son placement ait un sens.

Si vous avez beaucoup de collaborateurs et de commentaires, cependant, ce petit volet de commentaires peut rapidement devenir incontrôlable. Vous pouvez créer une règle pour votre équipe selon laquelle les commentaires sont marqués comme résolus lorsqu'ils ne sont plus nécessaires.

Tarification des moqups

Avec le plan gratuit, vous pouvez créer un projet comprenant jusqu'à 200 objets. C'est quelque chose à considérer lors du choix entre travailler avec un document vierge et utiliser un modèle. J'ai opté pour le modèle Landing Page Wireframe, qui a immédiatement utilisé 125 des 200 objets. Je peux entrer et supprimer certains objets, bien sûr, mais pour certaines personnes, il peut être plus logique de repartir de zéro.

La seule chose pour laquelle le plan gratuit est bon est de tester Moqups, car il est probable que vous n'aurez pas un seul projet à concevoir. Le prix commence à 13 $ par mois, payé annuellement. Chaque plan vous permet de créer un nombre illimité de projets et d'utiliser un nombre illimité d'objets. La principale considération est donc le nombre de personnes qui utiliseront Moqups.

À moins que vous ne soyez une équipe de conception, vous voudrez le package Creative Team. Plus vous ajoutez de personnes, moins le coût par utilisateur est élevé. Par exemple, si vous avez 50 utilisateurs, le coût est de 3 $ par utilisateur pour un total de 149 $ par mois (payé annuellement).

Certains peuvent penser que le prix de Moqups est une bonne affaire, tandis que d'autres penseront que c'est trop coûteux. Cela dépend de combien vous allez l'utiliser et de la valeur que vous en retirez.

PS Avec le forfait gratuit, aucune carte de crédit n'est nécessaire - si vous voulez le tester et décider ensuite que ce n'est pas pour vous, vous n'aurez pas à penser à annuler avant d'être facturé.

Points faibles de Moqups

• Le plus gros inconvénient de Moqups est que vous ne pouvez pas l'utiliser hors ligne. D'un autre côté, le fait qu'il soit basé sur un navigateur est très pratique pour certaines personnes.
• Si vous avez des besoins de prototypage avancés ou si vous êtes pointilleux sur les fonctionnalités, ce n'est probablement pas l'outil pour vous.
• J'ai lu des critiques qui disent que Moqups peut être lent, prendre beaucoup de temps à charger et même s'arrêter de manière inattendue, mais je n'ai rien vécu de tout cela. Cependant, c'est quelque chose à surveiller lorsque vous ajoutez du contenu riche et créez des pages supplémentaires. Je n'avais aucune photo ou vidéo dans ma conception, ce qui a peut-être aidé à accélérer les choses. Si vos projets vont contenir beaucoup d'éléments riches, profitez du plan gratuit pour le tester.

À qui s'adresse Moqups ?

Moqups est idéal pour les non-développeurs à conceptualiser pendant les premières étapes de la planification du projet. Par exemple, un propriétaire d'entreprise ou un chef de projet peut transmettre son idée à l'équipe de développement et de conception, qui utilisera ensuite des méthodes plus avancées pour créer le produit réel ou un rendu haute fidélité.

Moqups est particulièrement utile pour les maquettes et le wireframing, mais il n'est pas aussi fort en matière de prototypage. Moqups n'a pas autant de fonctionnalités que les autres outils de prototypage, et les éléments de style ne peuvent pas non plus être personnalisés d'autant de manières que les outils concurrents. C'est à peine mentionné sur leur site Web.

Dernières pensées

Dans l'ensemble, j'ai aimé utiliser Moqups - et j'aurais aimé le savoir lorsque j'ai conçu mon site Web, car il est beaucoup plus réaliste que le design stylo et papier que j'ai esquissé. Cela a fonctionné comme il le dit, et même avec beaucoup d'options, rien n'était trop difficile à comprendre. Si vous avez déjà travaillé avec n'importe quel type d'outil de conception graphique - et je suppose que vous l'avez fait - celui-ci ne sera pas difficile à comprendre. Vous pouvez l'utiliser pour la première fois et terminer un projet à la fin de la journée (ou à la fin de l'heure), puis vous pouvez revenir en arrière et explorer toutes les options que vous avez manquées la première fois.

Le but des outils de visualisation est d'obtenir un produit final, n'est-ce pas ? Découvrez notre vitrine de conception Divi avec le travail de notre communauté géniale.

Image en vedette via Visual Generation / shutterstock.com