Cet article s’adresse à : Les fondateurs de startups qui apprennent à faire des wireframes de logiciels ou de sites web et qui veulent connaître les meilleurs outils de wireframes disponibles. Avec cette ressource, vous pouvez apprendre à créer des wireframes par vous-même.
<–Retour à : « Comment créer un logiciel : Techniques de développement à apprendre »
Il peut sembler ennuyeux d’esquisser chaque page du produit logiciel de votre startup ; cependant, cette étape de planification est un aspect essentiel du processus de développement. Dans cet article, nous décrirons ce qu’est un wireframe, son importance au cours du processus de conception et la manière de réaliser un wireframe pour votre propre produit. En outre, nous identifierons quelques outils clés de wireframe que votre startup peut utiliser tout au long du processus de wireframe.
Cet article s’adresse aux fondateurs de startups (en particulier les fondateurs non techniques) qui prévoient de développer un produit logiciel. Il se peut que votre startup dispose d’une équipe de développement et que vous ayez besoin de filmer le produit logiciel avant d’aller plus loin dans le processus de conception et de développement, et ce pour les raisons suivantes :
Il se peut aussi que votre entreprise externalise ou sous-traite le travail, et vous essayez de vous assurer qu’il n’y a pas de déconnexion entre les deux parties au cours de la phase de conception. Si votre startup recrute ou sous-traite une équipe de développement, assurez-vous de pouvoir décrire efficacement les grandes lignes de votre produit logiciel à l’aide de wireframes afin d’améliorer le flux d’idées.
Le développement d’un excellent produit logiciel nécessite beaucoup de planification et de rédaction afin de gagner du temps et d’économiser des ressources à long terme. Votre startup doit non seulement commencer à réfléchir à la manière dont l’utilisateur navigue sur la page, mais aussi à la manière dont les informations lui sont présentées.
Utilisez cette ressource pour apprendre à réaliser un wireframe efficace afin de produire un logiciel de qualité. En fin de compte, l’objectif est que, grâce à l’apprentissage des wireframes, votre startup soit en mesure d’ébaucher la conception du produit logiciel à peu de frais et rapidement. Plus les différentes itérations de la conception sont rapides, plus votre entreprise reçoit de commentaires, ce qui garantit que le produit créé est utilisable et souhaité par l’utilisateur.
Thèmes abordés :
Nous illustrerons ces idées par des études de cas d’entreprises et de fondateurs qui travaillent avec Altitude Accelerator.
Étude de cas : Robyn Halbot d’Analyticly sur l’utilisation des outils de wireframe
Principaux enseignements :Le wireframing consiste à créer la conception de base d’un produit logiciel au niveau structurel. Il s’agit de créer et d’évaluer la structure de navigation du produit afin de recevoir les commentaires des utilisateurs.
Votre startup ne peut pas se contenter de se précipiter, de commencer à coder le logiciel et de se concentrer uniquement sur les graphiques et les couleurs que vous utiliserez. L’équipe de développement doit d’abord planifier la présentation du logiciel. Ce processus s’appelle le wireframing.
Le wireframing est un moyen de concevoir un produit au niveau structurel (figure 1). Ce produit peut être un site web, un logiciel ou une application.
Les concepteurs utilisent les wireframes pour mettre en page le contenu et les fonctionnalités d’une page ou d’un écran de produit, en tenant compte des besoins de l’utilisateur. Les wireframes sont utilisés dès le début pour établir une structure de base avant que la conception visuelle et le contenu ne soient ajoutés.
Les wireframes sont comparables au plan d’un bâtiment. Les wireframes décrivent clairement et spécifiquement, tout en donnant aux membres de l’équipe (fondateurs, concepteurs et développeurs) une vue d’ensemble du produit. L’objectif d’un wireframe est de fournir une compréhension visuelle dès le début du processus afin d’obtenir l’approbation de l’utilisateur, des parties prenantes et de l’équipe avant la phase de création.
Lorsqu’ils discutent des wireframes, les acteurs du secteur décrivent généralement d’autres façons dont les startups peuvent maquetter leurs produits logiciels. Ces autres méthodes sont également utilisées pour déterminer la structure et le flux d’un produit, tout en améliorant l’expérience de l’utilisateur.
Les autres moyens dont disposent les startups pour maquetter leur produit logiciel pendant les phases de conception et de développement sont les suivants :
Les démonstrations cliquables et les prototypes sont plus complexes que les wireframes. Par conséquent, ils sont réalisés après l’approbation de l’image fil de fer afin de permettre un examen plus approfondi de l’expérience de l’utilisateur et de la fluidité du produit.
Lors de la réalisation du wireframe, les concepteurs créent une structure de navigation globale et secondaire afin de s’assurer que la structure et la terminologie utilisées sont représentatives des attentes de l’utilisateur. En outre, les wireframes présentent les informations qui seront affichées sur la page et transmettent l’orientation générale et la description de l’interface utilisateur.
Deux types de wireframes peuvent être créés : un wireframe basse fidélité et un wireframe haute fidélité. Un wireframe basse fidélité est une simple représentation abstraite de la présentation du produit logiciel pour faciliter une communication rapide (figure 2). Les wireframes haute-fidélité, en revanche, comportent un niveau de détail plus élevé avec l’ajout d’actions interactives et de dimensions spécifiques pour chaque élément de contenu (figure 3).
Dans l’ensemble, les wireframes se situent à mi-chemin entre les esquisses au crayon et au papier et le premier prototype du produit logiciel de votre startup. En passant du temps dès le début du processus à esquisser le produit, votre startup sera en mesure de créer un produit bien conçu et basé sur de nombreux retours d’utilisateurs.
Principaux enseignements : Les méthodes utilisées pour le wireframe d’un site web, d’une application mobile ou d’un logiciel ne diffèrent pas vraiment. Les startups peuvent utiliser les mêmes outils de wireframe pour chacun d’entre eux, mais il faut garder à l’esprit la façon dont l’utilisateur interagira avec le produit final pour s’assurer que le wireframe est approprié.
Le wireframing couvre les mêmes principes de base, que votre startup conçoive un site web, un logiciel ou une application. Quel que soit le contexte, le wireframing permet aux startups de se faire une idée précise de l’aspect et du fonctionnement d’un produit.
Vous trouverez ci-dessous quelques conseils à garder à l’esprit lorsque votre startup fait du wireframing pour chacun des types de produits.
Principaux enseignements :Le wireframing représente une part importante du processus de conception, qui ne doit pas être négligée au cours du développement. La création d’un wireframe permet d’accroître le retour d’information de l’utilisateur, mais il peut s’agir d’un concept difficile à saisir pour l’utilisateur.
La création de wireframes est une étape supplémentaire du processus de développement que certaines startups essaient de sauter afin de progresser plus rapidement dans le développement. Vous trouverez ci-dessous une liste d’avantages et d’inconvénients à prendre en compte lorsque vous décidez de créer ou non un wireframe.
Dans l’ensemble, l’Accélérateur Altitude recommande aux startups de passer du temps à créer des wireframes pendant le processus de conception. En effet, cela permet aux startups de mieux planifier le travail de conception, avant que le développement ne progresse au point où le travail doit être refait. Des outils simples de wireframe permettent aux fondateurs de créer eux-mêmes des wireframes pour économiser de l’argent.
Principaux enseignements :Avant de créer une structure filaire, vous devez mener une étude initiale auprès des utilisateurs. Asseyez-vous avec votre équipe et définissez l’objectif de chaque page du site. Vous vous assurerez ainsi que chaque page présente un intérêt pour l’utilisateur.
Avant que votre startup ne commence à élaborer le wireframe du produit logiciel, l’équipe doit s’asseoir et planifier les aspects clés des besoins de l’utilisateur lorsqu’il utilise le produit. Voici quelques questions clés auxquelles votre startup doit pouvoir répondre avant de travailler sur le wireframe :
Avant de rédiger le wireframe, surtout s’il s’agit de la première fois pour votre startup, regardez les exemples de wireframes disponibles en ligne. Il s’agit d’une bonne méthode pour trouver l’inspiration ou des conseils lorsque votre entreprise démarre.
Principaux enseignements :Les wireframes peuvent être créés à la main, à l’aide d’un stylo et d’une feuille de papier ou d’un tableau blanc. Les concepteurs peuvent également utiliser un logiciel de wireframing pour les aider à créer leur wireframe. Utilisez ce qui est le plus confortable pour votre startup, car le wireframe sera révisé plusieurs fois.
Les wireframes sur papier et stylo ou sur tableau blanc sont très faciles à modifier, ce qui peut s’avérer très utile lors des premières conversations sur le produit logiciel. L’utilisation de ces wireframes est également moins coûteuse à modifier qu’une version codée. En effet, les utilisateurs peuvent donner leur avis à chaque étape de l’idéation et de la conception.
En général, la plupart des startups commencent par travailler avec des wireframes dessinés à la main avant de passer à un logiciel plus tard dans le processus de conception. Le passage à des outils logiciels plus tard permet aux startups de suivre les décisions plus détaillées plus facilement.
Les outils logiciels de wireframe permettent la collaboration entre les membres de l’équipe qui se trouvent dans des lieux géographiques différents. Ils permettent également aux startups de conserver un enregistrement détaillé de toutes les conceptions filaires. Cela permet aux startups de réviser facilement les versions précédentes de l’image fil de fer si elles estiment que la conception actuelle ne convient pas.
Bien qu’ils soient plus coûteux que les wireframes dessinés à la main, les outils logiciels peuvent également permettre aux startups de passer plus facilement du wireframe au prototype. Une liste d’outils logiciels de wireframing recommandés est présentée plus loin dans cet article.
Les startups doivent utiliser des méthodes de dessin à la main ou des logiciels clients pour réaliser leur wireframe, en fonction de ce qui leur convient le mieux. Certaines préfèrent commencer à dessiner à la main, tandis que d’autres, plus techniques, peuvent utiliser des outils logiciels. En étant à l’aise avec la méthode du wireframe, votre startup sera en mesure de créer rapidement de multiples itérations de wireframes pour le produit logiciel.
Principaux enseignements :Les wireframes doivent être simples dans leur conception. Cela permet aux utilisateurs de se concentrer sur la navigation dans le logiciel proposé sans se laisser distraire par des éléments visuels.
Lors de la création d’un wireframe, les startups doivent s’en tenir à une conception simple. Cela permet aux concepteurs, aux parties prenantes et aux utilisateurs de se concentrer sur la navigation du site. Plutôt que de voir toutes les parties se concentrer sur les éléments visuels du logiciel, les startups devraient se concentrer sur la création, rapide et peu coûteuse, d’un wireframe.
Les startups devraient se concentrer sur la création, rapide et peu coûteuse, d’un wireframe qui peut être facilement modifié. Cela permet aux startups de créer de nombreuses itérations du wireframe au cours du processus de conception.
Les startups doivent créer un schéma simple qui se concentre sur la navigation dans le logiciel proposé. Cela permet de s’assurer que tous les commentaires des utilisateurs sont centrés sur la valeur et l’intuitivité de la conception proposée pour l’utilisateur.
Éléments de conception qui devraient être inclus dans un modèle filaire :
Voici un exemple de fil de fer bien conçu qui contient des éléments de conception (figure 4). En regardant l’image fil de fer, les utilisateurs peuvent facilement voir la navigation présente dans la page.
Des carrés et des rectangles ont été utilisés pour montrer l’emplacement des images. Les utilisateurs peuvent ainsi donner leur avis sur l’emplacement des images et indiquer s’il y a trop ou pas assez d’images sur la page.
Le fil de fer est créé en niveaux de gris pour éviter toute distraction visuelle due à l’utilisation de couleurs. Une navigation claire a également été mise en place grâce à l’utilisation de boîtes indiquant la nouvelle page à laquelle l’utilisateur accède s’il clique sur la boîte.
Une police de caractères cohérente est utilisée dans l’ensemble de la structure filaire, ce qui facilite la lecture. En outre, la hiérarchie des informations a été affichée à l’aide de différentes tailles de police. Cela permet une conception simpliste mettant en valeur les éléments les plus importants de la page.
Dans l’ensemble, il s’agit d’un exemple de fil de fer bien conçu. Il met davantage l’accent sur la structure de navigation de la page du logiciel que sur son aspect visuel.
Lors de la création d’un wireframe, veillez à ce que votre startup intègre les éléments de conception susmentionnés. Ainsi, l’image fil de fer créée ne comprendra que les éléments de navigation et de contenu de base, ce qui permettra aux utilisateurs de donner leur avis sur la conception.
Principaux enseignements :Les wireframes ne doivent pas contenir d’éléments de conception visuelle tels que des couleurs et des graphiques. Cela détourne l’attention de l’objectif d’un wireframe et les startups finissent par dépenser trop d’argent pour quelque chose qui sera révisé.
Lorsqu’elles apprennent pour la première fois à faire un wireframe, les startups peuvent être tentées d’ajouter beaucoup de couleurs et de graphiques. Ce n’est pourtant pas le moment de penser à ces éléments de conception.
Les wireframes sont utilisés pour planifier la conception. Ils doivent être créés rapidement et à peu de frais, car il y aura de nombreuses itérations du wireframe au cours de ce processus.
Les startups n’ont pas besoin de perdre du temps à rendre un wireframe attrayant si c’est pour le refaire la semaine suivante. Au lieu de cela, utilisez ces ressources pour mener des recherches et des tests auprès des utilisateurs afin de vous assurer que la conception en cours de développement est adaptée à l’utilisateur.
Les éléments de conception qui ne doivent pas figurer dans une maquette :
Voici un exemple de fil de fer mal conçu qui contient de nombreux éléments qui ne devraient pas s’y trouver (figure 5). En regardant cet exemple, vous remarquerez que vous évaluez immédiatement les éléments de conception visuelle plutôt que les éléments de navigation ou les éléments fonctionnels. C’est exactement ce que vous ne voulez pas !
Le fil de fer est couvert de distractions ! L’utilisation de plusieurs couleurs est source de confusion pour l’utilisateur, car tout se démarque désormais.
L’utilisation de différentes polices de caractères est également source de confusion, et l’utilisateur finit par se demander pourquoi ? En outre, le titre de la page est plus petit que le point de texte suivant. L’utilisateur ne sait donc plus quel est le sujet principal de la page.
L’ajout d’images dans les wireframes peut amener l’utilisateur à se demander pourquoi elles ont été sélectionnées. En outre, les utilisateurs pourraient commencer à se demander pourquoi des images aussi génériques ont été choisies pour cette page.
Dans l’ensemble, il s’agit d’un exemple de fil de fer mal conçu. Il se concentre davantage sur l’aspect visuel de la page du logiciel que sur la structure de navigation.
Lorsque vous créez une structure filaire, assurez-vous que votre startup n’inclut pas les éléments de conception susmentionnés. Ainsi, l’image fil de fer créée ne comprendra que les éléments de navigation et de contenu de base, ce qui permettra aux utilisateurs de donner leur avis sur la conception.
Principaux enseignements : De nombreux outils sont disponibles pour aider les startups à créer des wireframes. Évaluez le niveau technique de votre équipe et le nombre de projets de wireframes que votre startup va mener avant de déterminer l’outil à utiliser.
Le type d’outils utilisés dépend de la startup et de l’étape de conception à laquelle se trouve l’équipe. Une équipe de conception centralisée peut tracer rapidement un schéma filaire de base sur un tableau blanc au cours d’une réunion d’une heure. Une équipe distribuée, en revanche, doit pouvoir créer un wireframe numériquement et le partager facilement entre plusieurs collaborateurs.
En tant que fondateur d’une startup, vous n’avez même pas besoin d’avoir beaucoup d’expérience en matière de conception pour pouvoir utiliser la majorité de ces outils. Vous pouvez créer vous-même un wireframe afin d’obtenir les premiers commentaires des utilisateurs avant que votre produit n’entre dans la phase de développement.
Vous trouverez ci-dessous une liste des différents outils de wireframe disponibles pour les startups. Ces outils peuvent être utilisés par des personnes techniques ou non. Ces outils sont classés du plus recommandé au moins recommandé pour les startups.
Balsamiq est le meilleur outil de wireframing disponible pour les débutants. En conséquence, Balsamiq est l’outil de wireframing le plus utilisé par les startups qui travaillent avec l’Accélérateur Altitude.
Balsamiq est bon pour créer des esquisses rapides de wireframe. Cet outil utilise un système de grille pour permettre aux utilisateurs de voir la distance et la symétrie entre les éléments de conception. Balsamiq permet aux utilisateurs de créer des wireframes sans avoir à apprendre des outils complexes. Dans l’ensemble, il permet aux startups d’avoir un aspect un peu plus professionnel que la simple création d’un wireframe sur du papier brouillon.
| Plate-forme : | macOS, Windows, navigateur web |
| Coût : | 89 $ pour l’application de bureau. L’abonnement au cloud commence à 9 $/mois pour deux projets. |
| Points positifs : | Constructeur par glisser-déposer facile à utiliser. Peut être utilisé pour illustrer l’aspect du wireframe sur différentes tailles d’écran. |
| Négatifs : | Primitif pour des besoins de wireframing plus avancés. Difficile à utiliser lorsque plusieurs concepteurs doivent revoir le wireframe. |
InVision Freehand est un outil de wireframing basé sur le web qui est parfait pour la coloration sur un canevas de type tableau blanc. Cet outil est le plus basique de tous ceux recommandés. Par conséquent, il convient mieux aux startups qui aiment tout faire à la main, où tous les membres peuvent contribuer et réviser ensemble.
InVision Freehand fait partie de la suite InVision, de sorte que le wireframe créé à l’aide de ce programme peut être téléchargé dans un logiciel de conception de prototypes au cours des étapes ultérieures du développement. Cela permet de gagner du temps lors du passage à l’étape suivante du développement, sans avoir à repartir de zéro à chaque fois.
| Plate-forme : | Navigateur web |
| Coût : | Gratuit pour un projet, démarrage à 15 $/mois pour trois projets |
| Points positifs : | Basé sur le cloud, il permet à plusieurs personnes de visualiser et d’éditer le wireframe en même temps. Synchronisation en temps réel avec Sketch et Photoshop pour permettre à l’équipe de dessiner et d’annoter sur les prototypes finis. |
| Négatifs : | Les commentaires peuvent être perdus si le fil de fer est modifié de manière significative. Le comportement d’agencement des tableaux se modifie incorrectement lorsque vous déplacez une seule image, ce qui entraîne une perte de temps pour corriger l’emplacement des images. |
Sketch est le meilleur outil de wireframe disponible lorsque vous souhaitez transmettre le wireframe créé à une application tierce. Sketch est un outil de conception léger, simple et intuitif comparé à Adobe Illustrator. L’outil permet de créer rapidement des wireframes à l’aide d’artboards et de formes vectorielles.
Après la création de l’image filaire, les utilisateurs peuvent exporter l’ensemble de la conception ou des éléments individuels. En outre, les utilisateurs peuvent intégrer Sketch à des outils plus avancés dans le processus de conception. Par exemple, il peut être intégré à des applications de prototypage telles que Principle, Farmer et Marvel.
| Plate-forme : | macOS |
| Coût : | 99 $/an (après un an, vous pouvez toujours l’utiliser mais vous ne recevrez pas de mises à jour) |
| Points positifs : | De nombreux plugins intégrés permettent aux différentes équipes de communiquer facilement. |
| Négatifs : | Les petits problèmes sont fréquents (par exemple, les couleurs des polices ne changent pas et les décalages). Comme il s’agit d’une application de bureau, la collaboration peut s’avérer difficile. Les utilisateurs ne peuvent pas travailler simultanément sur un fichier de conception. |
Marvel est un outil de wireframing qui consiste principalement en des modèles de wireframes préconçus. Ces modèles permettent aux membres de l’équipe non technique de réaliser facilement des wireframes.
Marvel offre un prototypage interactif et un transfert de code. En outre, les membres de l’équipe peuvent être invités à collaborer et à commenter le wireframe.
| Plate-forme : | Navigateur web |
| coût : | Gratuit pour un utilisateur et deux projets, à partir de 12 $/mois pour le plan Pro qui comprend un utilisateur et un nombre illimité de projets. |
| Points positifs : | Peut compiler une bibliothèque d’éléments de conception qui peuvent être facilement récupérés tout au long du processus. |
| Négatifs : | Ne dispose pas de beaucoup d’outils pour créer des wireframes de haute fidélité. Les utilisateurs devront passer à Sketch pour créer une interface utilisateur plus soignée. |
Adobe Photoshop est un logiciel de conception avancé basé sur les pixels qui peut être utilisé pour créer des wireframes très détaillés. Photoshop n’est pas un outil créé spécifiquement pour le wireframing, son objectif principal est l’édition de photos.
Les startups ne devraient utiliser Adobe Photoshop que si des membres de l’équipe possèdent une expérience technique significative dans l’utilisation de cet outil. Les startups devraient plutôt utiliser un outil créé spécifiquement pour le wireframing, tel que Balsamiq.
| Plate-forme : | macOS, Windows, iOS |
| Coût : | 9,99 $/mois pour le plan de photographie creative cloud qui comprend l’accès à Lightroom |
| Points positifs : | Créer facilement des wireframes haute-fidélité sans changer de système de conception |
| Négatifs : | Steep learning courbe Difficile de transmettre les spécifications de conception à l’équipe de développement. Les start-ups devraient utiliser un outil de prototypage capable d’importer des fichiers Photoshop. |
Moqups est une plateforme basée sur HTML5 qui est mieux utilisée pour créer des flux de conception d’interaction de wireframing. Cet outil s’appuie sur l’organigramme de base comme concept de wireframe.
Moqups utilise des fonctions de glisser-déposer qui permettent un wireframing rapide et facile. Dans l’ensemble, cependant, cet outil ne se démarque pas de manière significative de tous les autres outils de wireframing concurrents.
| Plate-forme : | Navigateur web |
| Coût : | À partir de 13 $/mois (facturé annuellement) pour le plan personnel qui comprend un nombre illimité de projets pour un seul utilisateur. |
| Points positifs : | De nombreux modèles sont disponibles pour aider à démarrer le processus de conception Collaboration en temps réel |
| Négatifs : | Difficile de naviguer lorsque les utilisateurs commencent à utiliser le logiciel. Ne dispose pas d’une grande bibliothèque d’éléments, de sorte que les utilisateurs doivent créer des éléments spécifiques à la main si nécessaire. |
En outre, Ant Design peut être utilisé lors de la création d’un wireframe sans utiliser d’outil logiciel spécifique. Ant Design contient une collection d’éléments de conception d’interface utilisateur, et le code correspondant, qui peuvent être facilement ajoutés aux différents éléments de l’image fil de fer.
Le logiciel de wireframe doit être simple, avec des éléments faciles à déplacer qui permettent des changements rapides. Cela permet aux startups d’itérer et d’obtenir de nombreux retours d’utilisateurs avant la création d’un prototype. En restant simple, les membres techniques et non techniques de l’équipe de la startup seront en mesure de créer un wireframe.
Comment créer des prototypes et des démonstrations cliquables : outils logiciels pour commencer
Principaux enseignements :Il existe de nombreux outils logiciels de prototypage à la disposition des entreprises en phase de démarrage. En général, il existe des moyens de connecter les outils de wireframing utilisés à l’outil de prototypage ultérieur afin d’éviter tout retard de développement.
Une fois que votre startup a créé un wireframe à l’aide de l’outil logiciel de wireframing mentionné précédemment, l’équipe de développement peut commencer à créer un prototype ou une démo cliquable. Il existe différents outils logiciels qui peuvent être utilisés pour créer ces prototypes et démos cliquables.
Vous trouverez ci-dessous une liste des différents outils de prototypage et de démonstration cliquable disponibles pour les startups. Ces outils peuvent être utilisés à la fois par des personnes techniques et non techniques. Ces outils sont classés du plus recommandé au moins recommandé pour les startups.
InVision est le logiciel de prototypage le plus connu et le plus utilisé. Il permet aux startups de créer rapidement et facilement de superbes prototypes à montrer à leurs utilisateurs et aux parties prenantes.
Les startups n’ont qu’à télécharger la conception filaire et à transformer l’écran statique en un prototype entièrement cliquable. Pour ce faire, elles ajoutent des transitions et des gestes.
Les utilisateurs et les membres de l’équipe peuvent facilement donner leur avis directement sur le prototype grâce à la fonction Smooth Management. En outre, de nouvelles fonctionnalités de prototypage sont ajoutées en permanence pour améliorer le processus de prototypage.
Marvel est un autre outil de prototypage cliquable à la disposition des startups. Les écrans des outils de wireframing peuvent être téléchargés directement dans le programme. De même, les images de Photoshop et de Sketch peuvent être téléchargées.
Ces dessins peuvent être reliés entre eux afin de créer une structure de navigation. Des transitions et des gestes peuvent ensuite être ajoutés pour rendre le prototype plus réel. Les projets peuvent ensuite être partagés afin d’obtenir des commentaires et des réactions en temps réel de la part des utilisateurs et des autres membres de l’équipe.
Keynote est un outil de prototypage très simple qui ne nécessite aucune compétence en programmation. Cet outil est parfait si votre startup a besoin de créer un prototype rapidement ; cependant, il est dépassé par rapport à d’autres technologies disponibles
Les startups peuvent télécharger des captures d’écran de Sketch dans le programme sur une diapositive. Les startups peuvent ensuite simuler des boutons réels sur la diapositive et ajouter des liens pour relier une diapositive à une autre. C’est un peu comme travailler sur Microsoft Powerpoint.
Craft CMS dispose d’une collection de plugins qui permettent aux startups de réaliser des prototypes dans Sketch et Photoshop. Les planches d’art peuvent être reliées entre elles à l’aide de points chauds interactifs afin de créer un prototype cliquable.
Craft peut ensuite être utilisé pour envoyer les prototypes créés au logiciel InVision. Cela permet d’obtenir un retour d’information collaboratif sur le prototype nouvellement conçu.
En règle générale, tout logiciel de prototypage disponible implique le chargement de la conception filaire du produit logiciel de votre startup dans le programme. Les startups doivent ensuite définir les points névralgiques et choisir les types de gestes à utiliser pour les déclencher.
Analyticly est une application autonome qui permet aux entreprises de télécharger leurs données et de recevoir des informations et des recommandations de haute qualité, générées grâce à l’apprentissage automatique. Lors de la création de cette application, Balsamiq et Ant Design ont été les deux principaux outils de wireframing utilisés.
Analyticly a examiné les présentations d’écran des produits de ses concurrents au cours de la phase de conception du développement du produit. Balsamiq a ensuite été utilisé pour créer des wireframes pour chaque écran individuel de l’application en se basant sur l’inspiration tirée de l’examen d’autres produits, ainsi que sur les propres plans de conception de l’entreprise. Balsamiq a été choisi par Analytically parce qu’il s’agit d’un outil facile à utiliser qui peut être utilisé par des personnes non techniques pour créer des wireframes simples.
Ant Design a également été utilisé au sein d’Analyticly pour créer rapidement une maquette fonctionnelle qui a été fournie aux développeurs. Ant Design permet aux startups, en particulier aux fondateurs ayant des connaissances techniques limitées ou aux développeurs sortant tout juste de l’université, de créer une maquette fonctionnelle pour communiquer leurs idées de manière efficace. Ant Design fournit également le code de chaque élément de conception inclus dans la maquette afin que les startups puissent le copier et le coller dans l’environnement de développement intégré (IDE) utilisé.
Balsamiq et Ant Design ont été utilisés conjointement par Analyticly pour créer un prototype de base. Le wireframe créé par Balsamiq et les éléments de conception sélectionnés dans Ant Design ont été utilisés pour planifier et concevoir un prototype basé sur les besoins des utilisateurs et les éléments fonctionnels requis. Dans l’ensemble, ces outils ont été utilisés conjointement pour créer un prototype à moindre coût, plutôt que d’externaliser l’ensemble du travail au cours des premières étapes du développement du produit.
Les développeurs sont très visuels, c’est pourquoi les wireframes, qui comprennent un plan de tous les éléments présents sur chaque écran du produit logiciel, sont essentiels pour le processus de développement. Lorsqu’un wireframe est créé, il peut être utilisé pour évaluer les différentes options de mise en page de la structure du produit ainsi que la manière dont elles sont toutes reliées entre elles. Ce plan prédéterminé peut ensuite être communiqué aux développeurs afin qu’ils sachent exactement quels éléments fonctionnels sont nécessaires et où ils doivent être placés sur l’écran. « Une collection de captures d’écran et de wireframes est essentiellement une liste des plans de votre startup. Lors d’une session de planification, décomposez la maquette en tâches individuelles afin de créer un cahier des charges pour tout travail externalisé. Nous plaçons toutes les tâches individuelles sur un tableau Trello, un produit de gestion de projets et de tâches, afin qu’il soit facile de voir les progrès réalisés dans le cadre du projet de développement », explique Robyn Halbot, cofondatrice et PDG d’Analyticly.
Dans l’ensemble, Balsamiq et Ant Design ont été utilisés pour créer une maquette du produit logiciel de l’entreprise.
Ces outils de wireframing ont été utilisés pour concevoir le produit au niveau structurel. Une fois les wireframes terminés, Analyticly les a utilisés pour créer un plan détaillé que ses développeurs ont utilisé tout au long du processus de développement.
Principaux enseignements :Veillez à ce que votre startup recueille suffisamment d’informations en retour de la part des utilisateurs afin de répondre aux questions clés concernant le schéma de câblage développé. Veillez à vous demander si la navigation est appropriée et si tous les besoins et attentes des utilisateurs ont été satisfaits.
Les wireframes sont utilisés pour évaluer rapidement la conception proposée d’un produit logiciel. Ce processus permet de recueillir les commentaires des utilisateurs afin d’améliorer la conception.
Voici quelques-unes des questions courantes auxquelles votre startup devrait tenter de répondre au cours du processus de wireframing :
Lors de la collecte des commentaires des utilisateurs pour chaque itération du wireframe, assurez-vous que votre startup se concentre sur les questions ci-dessus. Cela garantit qu’à partir de plusieurs itérations, votre startup sera en mesure de créer le meilleur produit possible pour vos utilisateurs.
Principaux enseignements :Après le wireframing, les utilisateurs examinent et donnent leur avis sur le wireframe avant qu’il ne soit révisé. Une fois le wireframe approuvé, les startups passent à la création de maquettes et de prototypes plus détaillés avant de confier la conception à un développeur.
Les wireframes sont rapides, bon marché et impermanents. Après leur création, les wireframes sont destinés à être modifiés au fur et à mesure que les startups recueillent des informations par le biais d’études sur les utilisateurs et de commentaires des parties prenantes.
Recueillez les commentaires des utilisateurs et créez plusieurs itérations de l’image fil de fer. À ce stade, les utilisateurs accordent généralement plus d’attention à la fonctionnalité du logiciel et à l’expérience utilisateur qu’aux caractéristiques esthétiques des éléments à l’écran.
Par conséquent, les startups obtiennent généralement beaucoup plus de retours à ce stade qu’avec un prototype entièrement développé. Cela leur permet de s’assurer qu’elles créent le meilleur produit possible pour leurs utilisateurs.
Une fois les itérations des wireframes terminées, les startups passent au développement d’une maquette. Cette maquette est généralement considérée comme une représentation plus visuelle du produit logiciel développé.
Une fois la maquette créée et validée par l’utilisateur, les startups passent au prototypage. Il s’agit de la dernière étape du travail de conception avant qu’il ne soit confié aux développeurs. À partir de là, vous voudrez créer votre produit fonctionnel minimum viable.
La création d’un wireframe permet aux startups de planifier la disposition des écrans ou des pages et les modèles d’interaction des utilisateurs. Tout cela se fait sans introduire les détails distrayants des couleurs et des graphiques. Les wireframes doivent présenter une navigation claire qui ne nécessite pas l’utilisation de couleurs, d’ombres et de menus fantaisistes pour avoir un sens.
Les wireframes servent de langage commun entre les concepteurs, les utilisateurs, les parties prenantes et les développeurs. Ils sont créés d’une manière suffisamment complexe pour informer tout le monde. Et suffisamment simple pour ne pas être compliquée par trop de détails ou de langage de conception.
Dans l’ensemble, les wireframes permettent aux startups d’examiner et de planifier minutieusement une conception avant de commencer le développement d’un logiciel. Cela évitera aux startups de gaspiller des ressources et du temps sur des conceptions qui ne conviennent pas à l’utilisateur souhaité. Il suffit de s’asseoir avec l’équipe de conception et d’esquisser quelques idées sur la manière dont le produit logiciel sera conçu.
En fin de compte, le wireframing permet aux startups de planifier réellement la navigation et la présentation de leur logiciel. Plus les startups planifient au début du processus, plus elles sont assurées de disposer d’un produit de qualité à la fin du processus de développement.
Enseignements tirés
Félicitations ! Vous avez maintenant appris ce qu’est le wireframing et comment les startups devraient l’utiliser pendant la phase de conception du développement logiciel. Après avoir lu cet articWireframes can be created in different ways, such as on whiteboards or using software tools.
<–Retour à : « Comment créer un logiciel : Techniques de développement à apprendre »
© 2023 Altitude Accelerator | Brampton, Ontario, Canada
