Une introduction Au Wireframing Avec Figma

Dans cet article, nous allons explorer ce qu'est le wireframing et pourquoi cela vaut la peine de le faire avec Figma , l'outil de conception d'interface utilisateur le plus utilisé sur le marché aujourd'hui.

Nous plongerons profondément dans Figma et apprendrons à concevoir des interfaces utilisateur avec lui - en creusant dans le wireframing au fur et à mesure.

BTW : si vous jetez un coup d'œil à l' enquête sur les outils de conception 2020 , Figma a gagné dans la plupart des catégories : flux d'utilisateurs, conception d'interface utilisateur, prototypage, transfert, systèmes de conception, gestion des versions, et même "le plus excité d'essayer en 2021".

Filaire

Les wireframes sont des diagrammes qui décrivent la structure d'une conception, et ils peuvent être de basse fidélité (pour la recherche d'utilisateurs) ou de moyenne fidélité (pour la recherche UX). Nous nous concentrerons sur ce dernier (recherche UX), et les visuels ne nous concerneront pas ici, car tout ce que nous voulons faire à ce stade est de comprendre le contenu et la mise en page (autrement connu sous le nom d '"architecture de l'information") .

Qu'est-ce qu'on filaire ?

Tout d'abord, un peu d'information sur l'interface utilisateur que nous allons créer. Il s'agira d'une structure semblable à un tableau montrant divers outils de conception UX et à quelle étape du flux de travail de conception UX chaque outil est utilisé. Les données seront soumises par l'utilisateur, l'objectif est donc de voir quel flux de travail de conception UX est le meilleur, plutôt le exagéré "quel outil de conception d' interface utilisateur est le meilleur ?"

Le wireframing m'aidera à comprendre comment structurer au mieux cette interface sans perdre de temps à comprendre les petits détails visuels. Cela n'aura pas l'air incroyable, mais c'est bien; il doit juste être suffisamment beau pour que les utilisateurs puissent me faire part de leurs commentaires.

Oui, c'est une vraie interface utilisateur. Pour le moment, je l'appelle "Toolflows".

Commençons!

Étape 1 : Configurer le plan de travail

La majorité des utilisateurs de mon site Web sont des utilisateurs de bureau, il est donc logique de filaire ma conception sur un plan de travail de bureau. Appuyez sur A sur votre clavier, puis cliquez sur Conception > Bureau > MacBook dans la barre latérale droite de Figma.

Créer des plans de travail dans Figma

Étape 2 : Recueillir les exigences fonctionnelles

En supposant que vous ou quelqu'un d'autre ayez fait des recherches sur les utilisateurs à un moment donné, nous devrons nous y référer pour créer notre wireframe. Lors de la recherche d'utilisateurs ( en particulier, des entretiens avec des utilisateurs, des groupes de discussion et des tests d'utilisateurs avec des structures filaires basse fidélité ), nous aurions été informés de toutes les exigences fonctionnelles.

Les nôtres sont :

  • filtrer par outil
  • nombre d'utilisateurs du workflow

Commençons le wireframing !

Étape 3 : créer du texte et des formes

Tout d'abord, il existe des kits filaires Figma , mais je n'en suis pas vraiment fan. Ils me font me sentir contraint de ne travailler qu'avec ce qui est disponible dans le kit, ce qui entrave la créativité.

Au lieu de cela, nous allons filaire en utilisant du texte et des formes.

Comme nous l'avons déjà appris avec le plan de travail, le moyen le plus simple de créer quoi que ce soit dans Figma est d'abuser des raccourcis clavier :

  • T : Texte
  • O : Ellipse
  • R : rectangle
  • ⇧⌘K : Image
  • ⇧L : Flèche
  • L : Ligne

Après cela, il suffit simplement de cliquer sur le plan de travail à peu près à l'endroit où vous souhaitez que l'objet apparaisse, puis vous pouvez utiliser votre souris et les touches fléchées pour ajuster la taille et l'alignement.

Raccourcis utiles :

  • ⌘-/+ pour zoomer.
  • ⌘D pour dupliquer les objets sélectionnés.
  • ⌘G pour grouper les objets sélectionnés (⌘rc pour sélectionner à l'intérieur).
  • Maintenez ⌘ lors du redimensionnement de la souris pour faire pivoter les objets.
  • Maintenez ⇧ lors du redimensionnement de la souris pour conserver les proportions.
  • Utilisez les touches fléchées pour déplacer les objets de 1px (Maintenez ⇧ pour 10px).
  • Touches fléchées + ⌘ pour redimensionner de 1px (Maintenez ⌘⇧ pour 10px).

Wireframing rapide avec Figma

Ensuite, nous passerons au style.

Étape 4 : stylisez, mais ne stylisez pas

En utilisant la barre latérale Design (espérons-le toujours visible) , nous pouvons modifier les styles des objets sur notre plan de travail, à la fois esthétiquement et pour spécifier plus précisément leur dimensionnement et leur alignement.

Que vous utilisiez la barre latérale Conception ou les touches fléchées pour dimensionner/aligner, maintenez ⌥ (option) pour mesurer la distance entre les objets.

Rappelez-vous, ne concevez pas grand-chose au-delà du dimensionnement et de l'alignement. Donnez des coins arrondis aux boutons (pour que nous puissions très clairement voir qu'il s'agit de boutons), des titres en gras, etc. Clarté, pas esthétique.

Redimensionner et aligner avec Figma

Et c'est tout; maintenant nous avons un wireframe. Cela étant dit, pour les conceptions qui nécessitent une interaction, nous voudrons démontrer comment exactement notre conception fonctionnerait, alors sans plus tarder, passons au prototypage . Le prototypage est l'étape où nous rendons la conception interactive (c'est-à-dire, donner l'impression que c'était la vraie chose).

Étape 6 : Créer des transitions

Le concept derrière cette étape est de dupliquer notre plan de travail, de montrer à quoi nous voulons que notre conception ressemble à la fin de l'interaction, puis de définir le déclencheur (animation facultative) qui initiera la transition entre les deux "états".

Commencez par dupliquer le plan de travail (⌘D), puis modifiez ce qui doit être modifié dans ce nouveau plan de travail. Dans mon cas, je souhaite afficher le menu déroulant, qui filtre les workflows par outil.

Créer une transition avec Figma

Ensuite, passez à la barre latérale Prototype avant de sélectionner l'objet qui sera le déclencheur de votre interaction. Pour moi, c'est le menu déroulant fermé du plan de travail original.

Une fois sélectionné, il devrait y avoir une icône circulaire + déplaçable . Faites glisser ce cercle sur le deuxième plan de travail pour créer une "connexion".

Créer des liens avec Figma

Étape 7 : Définir l'animation (facultatif)

Ensuite, nous devons définir une animation pour l'interaction afin que les utilisateurs puissent voir plus facilement ce qui a changé entre les deux états.

Les animations n'ont pas besoin d'être fantaisistes, puisque nous ne concevons qu'avec une fidélité moyenne pour le moment, donc à partir de la boîte de dialogue Détails de l'interaction qui s'est révélée après la création de la connexion, définissez l' Animation sur Smart animate . L'animation intelligente anime des calques qui n'existaient pas dans le "plan de travail de déclenchement". Intelligent, hein ?

Si vous prototypez avec des wireframes de moyenne fidélité, vous n'aurez pas vraiment besoin de bricoler avec les autres options, mais c'est cool que vous sachiez maintenant comment créer des connexions animées.

Étape 8 : Tester, tester, tester

Ensuite, nous voudrons le tester, d'abord pour nous assurer que toutes les connexions fonctionnent, puis pour acquérir ce que je considérerais comme des "rétroactions de bas niveau" des parties prenantes. Évidemment, la vraie valeur vient des tests avec les utilisateurs, mais cela ne signifie pas que nos parties prenantes n'ont rien à apporter. Peut-être avons-nous raté quelque chose ?

Pour partager avec les parties prenantes, appuyez sur le bouton Partager dans le coin supérieur droit. Les intervenants pourront laisser quelques commentaires.

Tests utilisateurs avec Figma

Pour vos propres tests (ce que je vous recommande de faire avant d'envoyer le partage avec quelqu'un d'autre), vous voudrez télécharger Figma Mirror pour iOS ou Android . Lors de la conception pour le bureau, appuyez simplement sur l' icône de lecture en haut à droite pour passer en mode "Présent".

Étape bonus 9 : Effectuez des tests d'utilisabilité

Si vous souhaitez obtenir des commentaires plus qualitatifs sur votre conception (taux d'achèvement des tâches, délai d'exécution, etc.), des applications comme Maze et Useberry (qui fonctionnent toutes deux avec Figma) vous aideront à accomplir exactement cela. Après tout, c'est pourquoi nous faisons du wireframing, n'est-ce pas ? Pour rendre notre conception plus utilisable.

Conclusion : Figma a tout pour plaire

Figma a tout pour plaire, y compris une communauté florissante et dévouée composée à la fois de concepteurs macOS et Windows, et même de ceux qui veulent simplement concevoir dans leur navigateur Web (donc, Linux aussi !).

Alors, et maintenant ? Eh bien, vous pouvez explorer la communauté Figma , voir ce qu'ils font et peut-être même télécharger des plugins Figma pour étendre et automatiser votre flux de travail de conception d'interface utilisateur. 

Source : https://www.sitepoint.com/wireframing-figma/

#figma 

What is GEEK

Buddha Community

Une introduction Au Wireframing Avec Figma
Autumn  Blick

Autumn Blick

1594770710

How To Succeed In Mobile App Wireframe Design?

In the world of overrated terms “web development”, a mobile app wireframe design is one of the most underrated terms. The design of wireframes is considered when people look for the bigger picture.

While designing the UI-UX, people forget the simple norm of general to specific shifting. As the complexity increases and so does the approach become more difficult, this is where the designing of the wireframes comes in handy.

Before diving into the “How to”, let’s first see why we need them in the first place.

What are mobile app wireframes?

Wireframes are the skeletal layouts of an application or a website that is being designed. The specificity comes into play, the elements and the features have to be placed at specific locations. Take a building, in the process of making it, first the foundation is laid and then pieces are fitted together from the skeleton structure on a piece of paper, wireframes do the same for the website or application structure such as a smart home application.

The designing of wireframes is commonly known as wireframing. For the construction of a building, the framework or the skeletal structure is important while designing a web application or mobile application, wireframing is important to make it user-friendly. This entirely and solely works to make the journey smooth and destination easy to reach.

As for the building, the layers of cementing and painting is done later to increase the visual appeal, the visual contents and appealing stuff are added after wireframing. The simpler it sounds after the definition, the complex it gets when it is being done.

It is a very goal-oriented procedure, one has to keep in mind is the goal of the product or the destination of the service. The main focus should be on UX. The arrangement of the elements and their interaction with each other and with the user is the utmost important task in mobile app wireframing.

What not to do while designing the mobile app wireframe?

  • Do not even think of skipping the process.
  • Do not beautify (visually appealing designs added first) and then get into the wireframing business).
  • Do not do it just for the sake of doing it.

One has to keep in mind that skipping this entirely can lead to the failure of the entire process of web and mobile app development at the end.

Again taking the example of the construction of a building, the foundation must be laid first based on the skeletal framework that has been prepared, then only you can jump to beautify your building, as a designer one has to understand and follow the steps where designing the mobile app wireframe comes first and then the visually appealing content is added next not the other way round.

For the most part, people do not understand the importance and come up with some trashy design of wireframes and the main foundation becomes faulty, hence the entire designing at later stages becomes faulty. If one wants to skip the reworking part, mobile app wireframing must never be ignored.

#android app #ios app #minimum viable product (mvp) #mobile app development #app designing #mobile app wireframe designing #mobile app wireframing #mobile application wireframing #mobile wireframing #web app wireframing #wireframe designing

Une introduction Au Wireframing Avec Figma

Dans cet article, nous allons explorer ce qu'est le wireframing et pourquoi cela vaut la peine de le faire avec Figma , l'outil de conception d'interface utilisateur le plus utilisé sur le marché aujourd'hui.

Nous plongerons profondément dans Figma et apprendrons à concevoir des interfaces utilisateur avec lui - en creusant dans le wireframing au fur et à mesure.

BTW : si vous jetez un coup d'œil à l' enquête sur les outils de conception 2020 , Figma a gagné dans la plupart des catégories : flux d'utilisateurs, conception d'interface utilisateur, prototypage, transfert, systèmes de conception, gestion des versions, et même "le plus excité d'essayer en 2021".

Filaire

Les wireframes sont des diagrammes qui décrivent la structure d'une conception, et ils peuvent être de basse fidélité (pour la recherche d'utilisateurs) ou de moyenne fidélité (pour la recherche UX). Nous nous concentrerons sur ce dernier (recherche UX), et les visuels ne nous concerneront pas ici, car tout ce que nous voulons faire à ce stade est de comprendre le contenu et la mise en page (autrement connu sous le nom d '"architecture de l'information") .

Qu'est-ce qu'on filaire ?

Tout d'abord, un peu d'information sur l'interface utilisateur que nous allons créer. Il s'agira d'une structure semblable à un tableau montrant divers outils de conception UX et à quelle étape du flux de travail de conception UX chaque outil est utilisé. Les données seront soumises par l'utilisateur, l'objectif est donc de voir quel flux de travail de conception UX est le meilleur, plutôt le exagéré "quel outil de conception d' interface utilisateur est le meilleur ?"

Le wireframing m'aidera à comprendre comment structurer au mieux cette interface sans perdre de temps à comprendre les petits détails visuels. Cela n'aura pas l'air incroyable, mais c'est bien; il doit juste être suffisamment beau pour que les utilisateurs puissent me faire part de leurs commentaires.

Oui, c'est une vraie interface utilisateur. Pour le moment, je l'appelle "Toolflows".

Commençons!

Étape 1 : Configurer le plan de travail

La majorité des utilisateurs de mon site Web sont des utilisateurs de bureau, il est donc logique de filaire ma conception sur un plan de travail de bureau. Appuyez sur A sur votre clavier, puis cliquez sur Conception > Bureau > MacBook dans la barre latérale droite de Figma.

Créer des plans de travail dans Figma

Étape 2 : Recueillir les exigences fonctionnelles

En supposant que vous ou quelqu'un d'autre ayez fait des recherches sur les utilisateurs à un moment donné, nous devrons nous y référer pour créer notre wireframe. Lors de la recherche d'utilisateurs ( en particulier, des entretiens avec des utilisateurs, des groupes de discussion et des tests d'utilisateurs avec des structures filaires basse fidélité ), nous aurions été informés de toutes les exigences fonctionnelles.

Les nôtres sont :

  • filtrer par outil
  • nombre d'utilisateurs du workflow

Commençons le wireframing !

Étape 3 : créer du texte et des formes

Tout d'abord, il existe des kits filaires Figma , mais je n'en suis pas vraiment fan. Ils me font me sentir contraint de ne travailler qu'avec ce qui est disponible dans le kit, ce qui entrave la créativité.

Au lieu de cela, nous allons filaire en utilisant du texte et des formes.

Comme nous l'avons déjà appris avec le plan de travail, le moyen le plus simple de créer quoi que ce soit dans Figma est d'abuser des raccourcis clavier :

  • T : Texte
  • O : Ellipse
  • R : rectangle
  • ⇧⌘K : Image
  • ⇧L : Flèche
  • L : Ligne

Après cela, il suffit simplement de cliquer sur le plan de travail à peu près à l'endroit où vous souhaitez que l'objet apparaisse, puis vous pouvez utiliser votre souris et les touches fléchées pour ajuster la taille et l'alignement.

Raccourcis utiles :

  • ⌘-/+ pour zoomer.
  • ⌘D pour dupliquer les objets sélectionnés.
  • ⌘G pour grouper les objets sélectionnés (⌘rc pour sélectionner à l'intérieur).
  • Maintenez ⌘ lors du redimensionnement de la souris pour faire pivoter les objets.
  • Maintenez ⇧ lors du redimensionnement de la souris pour conserver les proportions.
  • Utilisez les touches fléchées pour déplacer les objets de 1px (Maintenez ⇧ pour 10px).
  • Touches fléchées + ⌘ pour redimensionner de 1px (Maintenez ⌘⇧ pour 10px).

Wireframing rapide avec Figma

Ensuite, nous passerons au style.

Étape 4 : stylisez, mais ne stylisez pas

En utilisant la barre latérale Design (espérons-le toujours visible) , nous pouvons modifier les styles des objets sur notre plan de travail, à la fois esthétiquement et pour spécifier plus précisément leur dimensionnement et leur alignement.

Que vous utilisiez la barre latérale Conception ou les touches fléchées pour dimensionner/aligner, maintenez ⌥ (option) pour mesurer la distance entre les objets.

Rappelez-vous, ne concevez pas grand-chose au-delà du dimensionnement et de l'alignement. Donnez des coins arrondis aux boutons (pour que nous puissions très clairement voir qu'il s'agit de boutons), des titres en gras, etc. Clarté, pas esthétique.

Redimensionner et aligner avec Figma

Et c'est tout; maintenant nous avons un wireframe. Cela étant dit, pour les conceptions qui nécessitent une interaction, nous voudrons démontrer comment exactement notre conception fonctionnerait, alors sans plus tarder, passons au prototypage . Le prototypage est l'étape où nous rendons la conception interactive (c'est-à-dire, donner l'impression que c'était la vraie chose).

Étape 6 : Créer des transitions

Le concept derrière cette étape est de dupliquer notre plan de travail, de montrer à quoi nous voulons que notre conception ressemble à la fin de l'interaction, puis de définir le déclencheur (animation facultative) qui initiera la transition entre les deux "états".

Commencez par dupliquer le plan de travail (⌘D), puis modifiez ce qui doit être modifié dans ce nouveau plan de travail. Dans mon cas, je souhaite afficher le menu déroulant, qui filtre les workflows par outil.

Créer une transition avec Figma

Ensuite, passez à la barre latérale Prototype avant de sélectionner l'objet qui sera le déclencheur de votre interaction. Pour moi, c'est le menu déroulant fermé du plan de travail original.

Une fois sélectionné, il devrait y avoir une icône circulaire + déplaçable . Faites glisser ce cercle sur le deuxième plan de travail pour créer une "connexion".

Créer des liens avec Figma

Étape 7 : Définir l'animation (facultatif)

Ensuite, nous devons définir une animation pour l'interaction afin que les utilisateurs puissent voir plus facilement ce qui a changé entre les deux états.

Les animations n'ont pas besoin d'être fantaisistes, puisque nous ne concevons qu'avec une fidélité moyenne pour le moment, donc à partir de la boîte de dialogue Détails de l'interaction qui s'est révélée après la création de la connexion, définissez l' Animation sur Smart animate . L'animation intelligente anime des calques qui n'existaient pas dans le "plan de travail de déclenchement". Intelligent, hein ?

Si vous prototypez avec des wireframes de moyenne fidélité, vous n'aurez pas vraiment besoin de bricoler avec les autres options, mais c'est cool que vous sachiez maintenant comment créer des connexions animées.

Étape 8 : Tester, tester, tester

Ensuite, nous voudrons le tester, d'abord pour nous assurer que toutes les connexions fonctionnent, puis pour acquérir ce que je considérerais comme des "rétroactions de bas niveau" des parties prenantes. Évidemment, la vraie valeur vient des tests avec les utilisateurs, mais cela ne signifie pas que nos parties prenantes n'ont rien à apporter. Peut-être avons-nous raté quelque chose ?

Pour partager avec les parties prenantes, appuyez sur le bouton Partager dans le coin supérieur droit. Les intervenants pourront laisser quelques commentaires.

Tests utilisateurs avec Figma

Pour vos propres tests (ce que je vous recommande de faire avant d'envoyer le partage avec quelqu'un d'autre), vous voudrez télécharger Figma Mirror pour iOS ou Android . Lors de la conception pour le bureau, appuyez simplement sur l' icône de lecture en haut à droite pour passer en mode "Présent".

Étape bonus 9 : Effectuez des tests d'utilisabilité

Si vous souhaitez obtenir des commentaires plus qualitatifs sur votre conception (taux d'achèvement des tâches, délai d'exécution, etc.), des applications comme Maze et Useberry (qui fonctionnent toutes deux avec Figma) vous aideront à accomplir exactement cela. Après tout, c'est pourquoi nous faisons du wireframing, n'est-ce pas ? Pour rendre notre conception plus utilisable.

Conclusion : Figma a tout pour plaire

Figma a tout pour plaire, y compris une communauté florissante et dévouée composée à la fois de concepteurs macOS et Windows, et même de ceux qui veulent simplement concevoir dans leur navigateur Web (donc, Linux aussi !).

Alors, et maintenant ? Eh bien, vous pouvez explorer la communauté Figma , voir ce qu'ils font et peut-être même télécharger des plugins Figma pour étendre et automatiser votre flux de travail de conception d'interface utilisateur. 

Source : https://www.sitepoint.com/wireframing-figma/

#figma 

Madyson  Reilly

Madyson Reilly

1613545648

An Introduction to Wireframing with Figma

Wireframes are important for ensuring good UX. Learn how to use Figma to figure out the best UX design workflow for your layout.

In this article, we’ll explore what wireframing is, and why it’s worth doing it with Figma — the most-used UI design tool on the market today.

We’ll take a deep dive into Figma, and learn how to design user interfaces with it — digging into wireframing as we go.

BTW: if you take a look at the 2020 Design Tools Survey, Figma won in most categories: User Flows, UI Design, Prototyping, Handoff, Design Systems, Versioning, and even “most excited to try in 2021”.

Wireframing

Wireframes are diagrams that depict the structure of a design, and they can be either low-fidelity (for user research) or mid-fidelity (for UX research). We’ll be focusing on the latter (UX research), and visuals will be of no concern to us here, because all we want to do at this stage is figure out the content and layout (otherwise known as the “information architecture”).

What are we wireframing?

First, a little background on the UI we’ll be building. It will be a table-like structure showing various UX design tools and which step of the UX design workflow each tool is used in. The data will be user-submitted, so the aim is to see which UX design workflow is best, rather the overdone “which UI design tool is best?”

Wireframing will help me to figure out how best to structure this interface without wasting time on figuring out the little visual details. It won’t look amazing, but that’s fine; it just needs to look nice enough that users can offer me some feedback.

Yes, it’s a real UI. At the moment I’m calling it “Toolflows”.

Let’s begin!

#figma #wireframing #web-development

Figma design kit built to integrate with Tailwind CSS

Hey everyone ✌🏻

Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.

You can find more information about the Tailwind CSS Figma design kit on Flowbite.

It’s open source 💙

#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit

An Introduction to Wireframing with Figma

In this article, we’ll explore what wireframing is, and why it’s worth doing it with Figma — the most-used UI design tool on the market today.

We’ll take a deep dive into Figma, and learn how to design user interfaces with it — digging into wireframing as we go.

BTW: if you take a look at the 2020 Design Tools Survey, Figma won in most categories: User Flows, UI Design, Prototyping, Handoff, Design Systems, Versioning, and even “most excited to try in 2021”.

Wireframing

Wireframes are diagrams that depict the structure of a design, and they can be either low-fidelity (for user research) or mid-fidelity (for UX research). We’ll be focusing on the latter (UX research), and visuals will be of no concern to us here, because all we want to do at this stage is figure out the content and layout (otherwise known as the “information architecture”).

See more at: https://www.sitepoint.com/wireframing-figma/

#figma