30 Sep 2016 /

Dans le but de partager notre expérience avec nos lecteurs web designers, nous vous présentons ici un retour sur les outils de mockups online ou offline que nous avons pu tester et que nous utilisons (pour certains).

Pour la majorité des web designers et des agences web, la gestion des plannings et des délais peut devenir un casse-tête quand de nombreux projets se superposent. L’objectif est donc clair pour tous : ne pas perdre de temps. Et dans cette course à l’optimisation des tâches, nous pourrions facilement être tentés par des choix que nous regretterions rapidement. Avant de foncer tête baissée dans Photoshop, il est indispensable de verrouiller tous les aspects ergonomiques et expériences utilisateurs à l’aide de mockups (appelés aussi wireframes ou fils de fer). La validation de ces éléments avant même de penser design graphique vous permettra de gagner un temps précieux dans la suite de votre projet. En clair : validez le concept de votre site avant de penser à sa coquille.

Il existe plusieurs outils qui vous permettront intuitivement de réaliser ces maquettes fonctionnelles, appelées mockups. Vous pouvez bien sûr utiliser Photoshop ou Illustrator pour les réaliser manuellement, mais ces outils, dotés de bibliothèques de formes ou de modules fréquemment utilisés en web design, vous feront gagner un temps fou. Au fil du temps et de nos différents projets en web design, nous avons pu en tester plusieurs.

Draw.io

Accessible en ligne et en version gratuite, Draw.io fait partie de nos outils de mockups favoris. Sa bibliothèque de boutons, cadres, formulaires, images … est très complète et permet de composer assez rapidement un mockup performant.Autre avantage de Draw.io : la possibilité de partager ses mockups sur Google Drive. Super pratique pour les utilisateurs d »outils collaboratifs Google (comme c’est notre cas !)

Mockingbird

Moins complet mais beaucoup plus simple d »utilisation (selon nous) que Draw.io, Mockingbird a le mérite de n »avoir qu »une seule zone très intuitive qui regroupe tous les icônes et formes proposées. Un simple glisser-déposer sans devoir chercher dans quelle rubrique se trouve la forme que vous souhaitez, et le tour est joué.Autre atout de Mockingbird : la possibilité de travailler à plusieurs sur le même mockup.

Moqups

Dans le même esprit que Mockingbird, Moqups fait partie des outils très simples à utiliser. Possibilité aussi d »inviter vos collaborateurs et de laisser des notes sur vos mockups.Moqups est une web app, donc accessible en ligne.mockups-webdesign-Moqups

Balsamiq

Certainement un des outils de mockups les plus célèbres, Balsamiq a la particularité d »être un logiciel offline que vous installerez sur votre machine.\r\nTrès complet et très simple d »utilisation, il est à juste titre l »outil préféré de nombreux web designers. Nous ne l »utilisons pas à l »agence, par pure sensibilité de présentation : Balsamiq est un outil de mockups « crayonné », ce que nous apprécions un peu moins…Balsamiq-MockupsVoilà pour ceux que nous avons utilisé ! Il en existe d »autres qui vous conviendront peut-être davantage. En voici quelques uns :