Avez-vous déjà essayé d’assembler des meubles Ikea sans suivre les instructions ? Vous savez ce qui se passe. Vous vous retrouvez avec des pièces que vous n’utilisez jamais et des tas de vis et de boulons » supplémentaires « . Le résultat ? Des bureaux bancals et des étagères qui basculent à chaque fois que le chat saute dessus.
Comme les meubles de bricolage, un excellent site web a besoin d’un ensemble d’instructions pour bien fonctionner. Avant que le design, les images ou même la couleur n’entrent en jeu, la façon la plus intelligente de construire un site web est de créer un squelette des modèles de pages basé sur votre carte du site. C’est ce qu’on appelle le « wireframing ».
Il existe des dizaines d’outils de wireframing de sites web et de prototypage d’interfaces graphiques pour vous aider à jeter les bases de votre site. Voici 5 de nos préférés.
1. Balsamiq Mockups
L’un des outils de wireframing les plus populaires disponibles, Balsamiq Mockups offre une expérience intentionnellement lo-fi pour deux raisons : premièrement, cela permet de rester concentré sur la mise en page et la navigation et deuxièmement, c’est tellement basique que votre client peut y jeter un œil et savoir que la conception réelle n’est pas encore entrée en jeu. Un autre gros avantage est leur communauté en ligne active pour partager des idées.
2. HotGloo
HotGloo se concentre sur une interface utilisateur propre avec une fonctionnalité de glisser-déposer simple pour un wireframing interactif et réactif. C’est un outil de wireframing facile à apprendre pour le web et le mobile qui offre une collaboration d’équipe sur les projets en temps réel. Vous pouvez également envoyer des liens de prévisualisation aux clients.
3. Mockingbird
L’outil de wireframing Mockingbird basé sur le web a un objectif en tête : être » l’outil de wireframing le plus facile et le plus convivial qui existe. » Créez des wireframes propres et choisissez parmi une forte offre d’éléments d’interface utilisateur.
4. Axure RP
Avec Axure, aucun codage n’est nécessaire pour créer des wireframes pour les sites web ou les applications mobiles. Les tutoriels en ligne d’Axure adoptent une approche ludique pour vous apprendre à utiliser leur outil de wireframing.
5. Sketch
Sketch est construit exclusivement pour les utilisateurs de Mac et iOS. L’interface utilisateur est aussi éloignée de l’approche lo-fi de Balsamiq que vous pourrez trouver pour le wireframing. En fait, Sketch se rapproche dangereusement de la conception web réelle et c’est ainsi qu’ils l’aiment. Vous en ferez autant, une fois que vous aurez fait l’expérience de la commodité des frameworks Apple et de l’intégration d’iCloud et du travail en toute transparence entre votre Mac ainsi que votre appareil iOS.
