Je m'appelle Marina Chernyshova, je suis créatrice de produits et mentor. Dans mon article précédent, « ”, J'ai expliqué pourquoi, à mon avis, les startups en phase de démarrage n'ont pas toujours besoin d'un designer à temps plein et comment aborder la conception du premier prototype d'un point de vue théorique. Dans cet article, je voudrais vous inviter à examiner le côté plus pratique. Je partage les sources utiles que les fondateurs et les entrepreneurs en démarrage peuvent utiliser pour construire leur premier prototype. Vous avez un budget limité ? Utilisez ces méthodologies de conception pour créer votre premier MVP sans faire appel à un designer à temps plein Si vous avez l'intérêt et le temps de concevoir entièrement votre produit vous-même, je vous recommande d'apprendre Figma. Figma est un logiciel de conception basé sur le cloud qui est principalement utilisé pour dessiner, concevoir et prototyper des idées avant une étape de développement de projet. Avec cet outil, les concepteurs peuvent travailler ensemble pour créer les mises en page, ajouter des images, expérimenter avec des couleurs et des polices, et bien plus encore, le tout via un navigateur Web. Figma est un instrument puissant mais très facile à utiliser en même temps et très utile pour la communication entre tous les membres de l'équipe. En plus de Figma, il est très pratique d'utiliser FigJam et Figma Slides. FigJam est un outil de tableau blanc spécialement conçu pour le travail d'équipe collaboratif. Il permet aux équipes de collaborer en temps réel, de visualiser des idées et de réfléchir ensemble. Figma Slides est un outil de présentation conçu pour les designers et leurs équipes. FigJam et Figma Slides sont utiles aux personnes qui utilisent déjà Figma pour avoir toutes leurs conceptions, tableaux blancs et présentations dans un seul écosystème. Maquettes filaires Les wireframes sont des représentations visuelles schématiques et approximatives d'un produit numérique, tel qu'un site Web, une application ou une interface logicielle. Dans mon article précédent, j'ai expliqué ce qu'est le flux utilisateur : il s'agit d'un diagramme visuel qui trace le chemin emprunté par un utilisateur à travers un produit ou un site Web pour accomplir une tâche ou un objectif spécifique*.* Sur la base du flux utilisateur, vous pouvez créer la première version simple des wireframes. Les wireframes sont nécessaires pour comprendre la structure du produit avant que vous ou votre équipe ne commenciez à le concevoir. Ils aident les équipes à s'aligner sur les exigences, en gardant les conversations sur la conception UX concentrées et constructives sans se laisser distraire par les nuances de conception telles que les couleurs, les polices et les icônes. Les wireframes peuvent être réalisés de différentes manières, ils peuvent être très détaillés ou peu détaillés. Voir ci-dessous quelques exemples de base : Image de gauche (interface utilisateur de type filaire avec blocs de contenu) Image de droite (interface utilisateur haute fidélité avec graphiques et composants détaillés) Le wireframe peu détaillé comprend Le wireframe très détaillé comprend Concentrez-vous sur la structure, la mise en page et le flux utilisateur Se concentrer sur les fonctionnalités détaillées et les éléments de conception spécifiques Esquisses basiques en niveaux de gris ou en contours Peut contenir des couleurs, des séparateurs et des éléments spécifiques comme des graphiques Utilise des espaces réservés pour les images de textes Inclure du contenu réel ou représentatif Généralement statique, peut indiquer la navigation avec des flèches Souvent interactif, correspond aux actions potentielles de l'utilisateur Je recommande de commencer par le plus simple possible : organiser les écrans principaux avec des en-têtes et des boutons approximatifs et ne pas trop s'embêter avec les textes. Si vous travaillez dans Figma, les cadres peuvent être créés immédiatement dans une taille réaliste grâce aux modèles. Pour créer des wireframes plus détaillés avec des éléments d'interface plus réalistes, vous pouvez utiliser des ressources Figma prêtes à l'emploi pour le wireframing afin de gagner beaucoup de temps (par exemple ). cette bibliothèque À ce stade, vous pouvez déjà créer un prototype sans prêter attention aux détails comme les couleurs ou les polices, et le montrer à l'un de vos amis. S'il s'agit d'une application mobile, vous pouvez ouvrir le lien depuis votre téléphone pour lui donner un aspect plus réaliste. Il est important de vérifier qu'il existe toutes les transitions nécessaires entre tous les écrans et qu'un utilisateur peut revenir en arrière ou annuler l'action. Bibliothèques de composants prêts à l'emploi Il n'est pas nécessaire de tout concevoir à partir de zéro. Il est très utile d'explorer les ressources prêtes à l'emploi de la communauté Figma que vous pouvez utiliser pour concevoir votre produit. Il existe de nombreuses bibliothèques disponibles dans Figma, telles que Material UI. Ces bibliothèques contiennent de nombreux éléments utiles, allant d'un ensemble d'icônes à des pages déjà assemblées. Les éléments contiennent généralement déjà tous les états (états de survol et de sélection, avertissements, descriptions, etc.). Des abstractions d'interface complètes peuvent être assemblées à partir de petits composants, par exemple une boîte de dialogue modale avec des boutons et des tableaux à l'intérieur. En plus des éléments eux-mêmes, il peut y avoir des instructions sur la façon de les utiliser correctement avec des marges, des espacements, etc. Ces bibliothèques ont développé des composants et même des mises en page entières que les développeurs peuvent utiliser. Si nécessaire, vous pouvez y ajouter vos propres éléments ultérieurement. Par exemple, si vous avez besoin de graphiques, vous pouvez les prendre dans une autre bibliothèque. Si vous avez besoin d'un élément non standard, il peut être conçu à partir de zéro et ajouté à la bibliothèque avec tous les états. Ressources graphiques prêtes à l'emploi Tout produit peut paraître beaucoup plus mature et réfléchi grâce à des graphiques équilibrés et bien conçus : illustrations, icônes, animations, etc. Il n'est pas nécessaire de perdre du temps supplémentaire sur ce point, vous pouvez également utiliser des ensembles prêts à l'emploi. Il existe de nombreux ensembles de ce type dans différents styles et couleurs. Vous pouvez également les trouver dans le ou si vous aimez les graphismes 3D. Souvent, les grands ensembles sont payants pour une utilisation commerciale, mais ils sont assez abordables. Communauté Figma Communauté Spline Ces ressources peuvent être utilisées non seulement dans votre produit, mais également pour vos supports marketing, vos images de réseaux sociaux et vos pitch decks. Vous pouvez y trouver différents modèles de présentation et les modifier en fonction de votre style. Références et inspirations Il existe plusieurs plateformes collectant les flux d'utilisateurs et les captures d'écran de différents produits, telles que ou . Vous pouvez les explorer pour analyser vos concurrents ou simplement pour vous inspirer. Ils sont vraiment utiles lorsque vous travaillez sur une fonctionnalité particulière et que vous savez qu'il s'agit d'un modèle UX répandu, comme la vérification ou l'enregistrement d'un élément dans les favoris. Vous pouvez les parcourir par catégories ou rechercher une certaine fonctionnalité par mots-clés. pageflows.com mobbin.com Pour travailler sur une expérience utilisateur fluide, il est toujours préférable de s'appuyer sur des solutions existantes car elles sont claires et familières aux utilisateurs. Même si vous travaillez sur des fonctionnalités innovantes, vous pouvez toujours utiliser des modèles similaires dans un autre domaine. Conclusion De nos jours, le marché numérique est très compétitif et les utilisateurs sont habitués à une bonne expérience utilisateur et une bonne interface utilisateur. Il est préférable de ne pas négliger cela, même au stade initial du développement du produit, car cela représente une perte de temps inutile en « décorations », mais d'essayer de l'utiliser comme un avantage concurrentiel. À mon avis, il y a un équilibre entre l'absence totale de design et le temps passé à concevoir parfaitement chaque écran. Une expérience utilisateur fluide peut être obtenue grâce à la simplification et en évitant les étapes et actions inutiles, et une interface utilisateur acceptable peut être très simple mais attrayante. L'essentiel est de ne pas hésiter à utiliser des solutions toutes faites et de ne pas sauter d'étapes avant la conception comme la création du flux utilisateur. Dans ce cas, le risque de faire une erreur ou de perdre du temps est considérablement réduit, ce qui économisera vos ressources et n'affectera pas la motivation.
