Gagner du temps en prototypage

Tester votre mise en page responsive sans contenu

Font, prototype & wireframe

J’ai souvent rencontré ces problèmes lors de la création de nouveaux projets. Je me suis rendu compte que je perdais énormément de temps pour des choses qui n’avaient pas de valeur, et c’était entièrement de ma faute. J’ai donné le choix au client pour quelque chose qui est difficile à comprendre et à visualiser : valider une mise en page responsive.

Généralement le workflow est le suivant :

  • Travailler dur pour mettre en place les idées du client, avec une mise en page originale de maquette statique.
  • Créer des pages — sans contenu — avec du lorem ipsum.
  • Envoyer un concept initial au client avec des arguments expliquant pourquoi la proposition n’était pas réalisable.
  • Recevoir un email de retour sans commentaire constructif excepté ce n’est pas le bon contenu, pourquoi le texte est en latin, cela n’a aucun rapport avec mon produit…

Tout ces échanges par email font perdre du temps à tout le monde et gérer les retours clients devient très vite chronophage.

Solution

Redacted Font masque le texte en blocs d’informations. Les informations sont illisibles mais cela permet d’imaginer la future mise en page sans se soucier du contenu.

Voici un exemple :

Wireframe & prototype font

Redacted font sur une homepage

Le principal avantage de cette solution est de tester votre mise en page à l’endroit où vous devez prendre vos décisions de design : dans un navigateur web.

Mise en place

Vous souhaitez utiliser Redacted Font ? Vous devez ajouter les polices de caractères à votre projet. Ajoutez aussi ces déclarations dans votre feuille de style :

  @font-face {
    font-family: "Redacted";
    src: url("redacted-font/fonts/web/redacted-regular.eot");
    src: url("redacted-font/fonts/web/redacted-regular.woff2") format("woff2"),
         url("redacted-font/fonts/web/redacted-regular.woff") format("woff"),
         url("redacted-font/fonts/web/redacted-regular.otf") format("opentype"),
         url("redacted-font/fonts/web/redacted-regular.svg#filename") format("svg");
  }

Une fois que votre police est disponible, vous pouvez l’utiliser pour remplacer votre texte afin de valider votre mise en page :

  .prototype {
    font-family: "Redacted";
    color: #999;
  }

  .prototype-script {
    font-family: "Redacted Script";
    color: #999;
  }

Redacted Font possède des variations comme Regular, Script, et Bold Script qui fonctionnent dans différentes tailles.

Exemple

Si vous souhaitez tester la mise en page de votre site, vous devez le faire dans un navigateur. Créer une maquette fixe pour un contenu fluide & responsive n’a pas de sens.

Démonstration

En utilisant cette solution dès aujourd’hui vous gagnerez un temps considérable en évitant les commentaires inutiles. Redacted Font vous permet de créer des prototypes qui représentent l’espace réel, sans les problèmes de “faux contenu”.

Font, prototype & wireframe