Comment créer votre premier wireframe ?
Le wireframe, c’est bien plus qu’un anglicisme barbare. Le wireframe est la première étape entre l’idée d’un site...
Filtrer par catégorie
Filtrer par auteur
Le wireframe, c’est bien plus qu’un anglicisme barbare. Le wireframe est la première étape entre l’idée d’un site...
Publié par Melanie De Coster
Ce qui va le plus pénaliser un site e-commerce, ce ne sont pas les produits… mais bien la manière dont ils sont présentés....
Publié par Melanie De Coster
En design, chaque année voit certaines tendances s’imposer. Quelques-unes confirment leur impact, déjà noté les années...
Publié par Melanie De Coster
Un témoignage vidéo est un petit outil bien pratique pour faire votre promo, pour illustrer vos pages produits ou juste pour parler de vous....
Publié par Melanie De Coster
Même s’il est difficile de tout réinventer (et que nombre de designs puisent leurs sources dans les mêmes fontaines…...
Publié par Melanie De Coster
La vidéo, c’est le nouvel eldorado de la communication. Le seul problème, c’est que vous risquez de nous noyer dans la masse avant...
Publié par Melanie De Coster
Quand une image qui ne bouge pas peut bouger quand même c’est, au choix, une illusion d’optique ou le travail d’un graphiste...
Publié par Melanie De Coster
Un site internet, ou une application, peuvent devenir de véritables expériences immersives. Dans quelques années, peut-être que...
Publié par Melanie De Coster
Un logo, c’est une image. Mais c’est aussi une typographie. Que vous optiez pour le monogramme, le slogan ou juste le nom de votre marque, vous...
Publié par Melanie De Coster
En tant que créatif, la relation avec les clients représente une part importante de votre travail (que vous l’appréciez ou pas)....
Publié par Melanie De Coster
Le wireframe, c’est bien plus qu’un anglicisme barbare. Le wireframe est la première étape entre l’idée d’un site et sa...
Le wireframe, c’est bien plus qu’un anglicisme barbare. Le wireframe est la première étape entre l’idée d’un site et sa concrétisation.
Mais comment le faire, comment le commencer, jusqu’où devez-vous le peaufiner ? Voilà ce que nous allons étudier dans cet article (avec quelques petits outils en plus pour vous aider).
Un wireframe est une maquette d’un site, mais déjà réalisée et présentée via un ordinateur.
Il donne une idée générale de la présentation de la future page, mais aussi de la future arborescence du site, voire des interactions entre les éléments. Il y a donc déjà un petit aspect technique dans le contenu du wireframe (d’où l’utilisation de l’informatique) mais sans tous les petits détails graphiques (couleurs, images, animations…) qui rendront le site encore plus beau.
Il permet de revenir aux basiques des pages web, ce qui est utile à la fois pour la partie réflexion, de votre côté, et pour la partie présentation, envers le client.
Un wireframe, quand on le regarde de manière synthétique, c’est avant tout des délimitations de zones avec des carrés plus foncés présentant les parties qui seront réservées aux futures images, et d’autres plus claires, où le texte est synthétisé par de simples lignes.
Source : Balsamiq
Vous pouvez visualiser les possibles wireframes de nombreux sites grâce au plug-in Wirify qui transforme n’importe quelle page en sa plus simple expression (ce qui vous fournira déjà un premier aperçu de ce qu’est un wireframe).
Une bonne idée pour vous familiariser encore plus avec cette présentation est de vous appuyer sur des modèles préétablis, que vous pourrez ensuite modifier à votre guise. Vous en trouverez notamment sur LucidChart (avec des templates adaptés à plusieurs tailles d’écran).
Si un simple carnet et un crayon peuvent servir pour tracer les premiers traits de votre wireframe, vous irez encore plus loin avec des outils technologiques.
L’application Freehand vous permet de passer rapidement d’un brouillon de carré à une présentation nettement plus professionnelle.
Par ailleurs, cet outil est collaboratif (ce qui est plutôt pratique pour travailler en équipe). N’oubliez pas que le wireframe est aussi un moyen de communication, en interne comme à l’externe. Et le contenu est modifiable à volonté : un wireframe n’est jamais un produit fini mais juste une base qui peut être améliorée.
Balsamiq est également très bien réputé et dispose aussi bien de maquettes que d’une bibliothèque de composants assez riche.
Les bons outils, c’est bien. Mais encore vous faut-il savoir ce que vous allez inclure dans votre présentation.
Un wireframe, c’est un résumé d’une page web.
Vous devez donc y inclure tout ce qui est habituellement sur une page : header, footer, colonnes… Avec, comme nous l’avons vu précédemment, les zones déjà délimitées pour les images ou les textes, voire les vidéos (un carré barré d’une croix est l’icône d’une photo, une ligne représente un texte, un triangle dans un carré symbolisera une vidéo).
Quand le wireframe se développe, il peut être utile de hiérarchiser les contenus avec des différences de taille dans les typographies.
Le wireframe n’est qu’une étape dans la création d’un site. Mais c’est une étape essentielle pour avancer sereinement (et pour recevoir un retour de la part de vos clients).
Ensuite, vous développerez petit à petit ce wireframe pour y ajouter plus de design, plus d’interactions, plus de contenu… Mais ça, ce sera après !
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.
Le Lorem Ipsum est devenu un standard pour combler les zones de texte dans des mockups et prototypes, donnant une version plus complète du projet. Mais lorsque le texte...
Regardez attentivement votre calendrier. Il est un outil indispensable pour votre site internet. Non seulement parce que vous allez y noter toutes vos actions de communication, de...
Accueil / Archives de Melanie De Coster
Commentaires