| date | slug | title | description | image | page_title | page_emphasis | changefreq | priority |
|---|---|---|---|---|---|---|---|---|
2015-07-20 |
wireframe-font |
Font, prototype & wireframe |
Utilisez Redacted Font pour tester votre design reponsive en évitant le lorem ipsum. |
Gagner du temps en prototypage |
Tester votre mise en page responsive sans contenu |
monthly |
0.5 |
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.
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 :
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.
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.
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.
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”.