hello world!
hello world!
Markup.io, l'outil génial pour soumettre un design

J'ai trouvé sur un groupe FB anglophone (le groupe officiel du génialissime outil Oxygen*), dans un commentaire noyé parmi un flot de commentaires, une PERLE.

Fini les captures d'écran annotées plus ou moins facilement ou pire les descriptions hyper détaillées du petit truc qui ne va pas dans le design de la page que vous essayez de valider avec votre client.e.

Je vous présente (roulement de tambour) : markup.io

Pour les freelances, le compte gratuit suffit amplement. Une fois inscrit.e, vous pouvez soumettre dans l'app autant de sites / maquettes que vous le souhaitez ou même de simples images :

Une fois soumis votre site (ou votre design seulement sous forme d'image, je parlerai de maquette dans la suite de cet article), vous accédez à une vue de tous vos "markup" :

J'ai masqué les sites et les noms mais dans les écrans vous voyez un aperçu de chaque site et vous pouvez nommer chaque projet, j'ai laissé mon site pour que vous voyiez (sauf la prévisualisation du site puisque j'ai privilégié l'aperçu du menu contextuel).

Vous voyez d'ailleurs que j'ai déjà fait une adepte qui a partagé un design avec moi...

En cliquant sur "Open MarkUp", cela ouvre... le markup, donc, dans une nouvelle fenêtre. Nous y revenons dans 5 mn.

En cliquant sur "Share" cela vous donne un lien que vous pouvez communiquer à votre client.e / partenaire pour qu'iel (c'est vraiment comme ça il ou elle en écriture inclusive ? beurk) puisse annoter votre maquette.

Vous lui expliquez qu'en suivant ce lien iel arrivera sur une page qui lui demande de s'enregistrer OU de continuer comme invité.e (guest) donc iel peut choisir cette option (ou créer un compte gratuit comme je l'ai fait) mais en invité.e iel doit quand même mettre un nom ou un pseudo (pour identifier qui a écrit quoi). Iel arrive ensuite là :

Sa souris s'est transformée en pointeur permettant de viser un point du site qu'iel veut commenter : iel clique et une fenêtre de commentaire s'ouvre. S'iel veut passer sur une autre page il faut utiliser les boutons du bas en passant de "comments" à "browse" et vice-versa. Si on clique sur un élément de menu en étant en mode comments il ne sera pas cliqué mais proposera de commenter cet élément de menu.

Vous pouvez également lui envoyer le lien de cet article pour les explications détaillées 😉

En fait on arrive sur une vue avec un panneau de commentaires ouvert à gauche, il faut le masquer en cliquant sur la petite flèche dans la pastille bleue sur la bordure pour voir l'aspect "réel" du site en version ordinateur. Il sera temps de rouvrir ce volet de commentaires pour les traiter ensuite.

Voici comment se présentent les commentaires :

Bon en vrai ici il y a un mélange de commentaires complètement inventés et de coucous de vraies copines mais l'idée y est.

Pour chaque commentaire, vous pouvez :

le passer en résolu ("resolve"), l'outil garde un historique (onglets du haut)
entamer une conversation menant à la résolution du sujet (Add a reply)...
... ou supprimer le commentaire (poubelle) si décidément Élise vous enquiquine 😉

J'apprécie particulièrement le fait que lorsque l'on clique sur un commentaire dans le volet de gauche, la partie droite se modifie pour afficher la zone concernée par le commentaire, même si elle se situe sur une autre page que celle sur laquelle on était avec le commentaire précédent...

Et bien sûr, l'outil ne serait pas complet s'il ne permettait pas d'annoter l'adaptation sur tablette et mobile mais c'est possible :

Le panneau de droite affiche alors la vue mobile qui peut être annotée comme le reste, l'outil permet de voir d'un seul coup d’œil les commentaires ne concernant QUE la vue mobile :

Je l'utilise depuis quelques jours seulement mais les premiers retours de clientes (j'ai le droit, pour l'instant mes cobayes ne sont que des femmes ah ah) sont enthousiastes.

N'hésitez pas à partager vos propres astuces en commentaires de cet article !

Vous aussi voulez donner votre avis sur mon site "entièrement à refaire" ? Allez-y, lâchez-vous les amis !

* Nota concernant Oxygen : j'ai adopté cet outil (j'ai déjà dit qu'il était génial ?) depuis presque un an maintenant pour tous mes sites et nous avons avec un collègue freelance créé une communauté francophone autour de ce builder et un site sur lequel nous avons avec l'aide de bénévoles traduit presque toute la documentation en français.
Oxygen permet de créer des sites rapides avec un code beaucoup plus propre et léger que celui produit par tous les autres builders du marché. Qui plus est, son modèle économique est vraiment avantageux avec une offre lifetime (paiement unique, sites illimités et mises à jour illimitées).
Vous ne trouverez pas ici de lien affilié pour Oxygen tout simplement parce qu'il n'y en a pas : l'outil est tellement génial qu'il n'a aucunement besoin de rémunérer des utilisateurs pour lui envoyer des clients 😉

Si vous avez repéré une erreur d'orthographe ou de grammaire, merci de m'en avertir en sélectionnant le texte concerné puis en cliquant sur Ctrl+Enter.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

One comment on “Markup.io, l'outil génial pour soumettre un design”

© 2009-2024 le WEB d'IMA | Site réalisé par ima | Mentions légales

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :