Les mauvaises habitudes à l’époque, lorsque nous acquérions de nouvelles idées de projets et de nouveaux documents sur les exigences des utilisateurs de nos clients, esquissaient peut-être quelques idées et nous lançaient dans la conception intrigante de Photoshop.

Notre raisonnement pour cette méthodologie était de frapper la porte de conception immédiatement pour laisser le temps à la révision.

Après un certain temps, nous nous sommes rendu compte que nous passions beaucoup de temps à concevoir, pourquoi? Les révisions prenaient tout le temps. Les révisions étaient compliquées; nous avons dû ajuster les mises en page, les graphismes et la typographie. Tout était frustrant, désastreux pour les délais du projet, inquiétant pour les clients et lassant pour nous. Il a fallu un certain temps avant que nous réalisions que nous avions besoin d’une approche différente. Nous avons décidé de revenir au processus initial "Square One" que nous avons ignoré plus tôt "Wire-framing". Nous avons commencé avec des wireframes en boîtes grises en l’incluant dans notre processus de conception, puis nous sommes passés à un autre processus et l’avons ajouté au processus de conception. À la fin, le modèle tombait en place, grâce au "Wire-framing", cela nous a fait gagner du temps et nous a aidés à résoudre les problèmes plus tôt. Pour cette raison, je vote le wireframing comme la « première porte » dans le processus de conception.

Conceptions d’expérience utilisateur en fil de fer

Qui sait, dès les premières étapes, vous pouvez reconnaître le défi potentiel d’utilisabilité dans vos conceptions. Parfois, un excellent concept de projet avec des exigences utilisateur strictes (URS), au cours du processus initial, ils semblent se mettre en place. Encore pire lorsque nous commençons à faire des plans pour des articles, «Que s’est-il passé? nous avons ignoré le fil de fer qui ne prend que quelques minutes pour esquisser un plan que Photoshop coloré. Mieux vaut commencer à s’adapter plus tôt que plus tard.

Le wireframing comme outil de gestion du temps

La gestion du temps est une technique importante pour chaque projet réussi si un projet est dans un délai serré; vous pourriez penser "pourquoi perdre mon temps Wire-framing, alors je ferais mieux de passer à Photoshop coloré." Nous avons fait cette erreur au départ, mais au lieu de cela, nous avons fini par revoir tout le concept, ce qui prenait du temps et était un gaspillage de ressources. La révision des boîtes grises et des croquis est beaucoup plus facile que la révision de conceptions en couleur incorporées avec plusieurs éléments complexes.

Le wireframe est utilisé pour créer une dimension réelle et correcte d’une page. Une fois approuvé par le client, nous n’avons besoin que d’un remède graphique pour booster son apparence. L’astuce est que si les wireframes, les croquis et les boîtes grises sont en ordre, nous n’aurons pas le temps de les réviser. Au lieu de cela, nous allons passer à la prochaine partie "visuelle" du processus.

Wire-framing pour le lien client

La mise en page avec des couleurs est parfois une distraction pour nos clients ; peut-être qu’un client déteste la couleur «Violet» les émotions du client ont du mal à se concentrer sur le plan. Leurs commentaires peuvent être négatifs en raison de leurs sentiments. Ils pourraient finir par demander "Recommencer", les conceptions pourraient être correctes, mais la seule chose qui irrite le client est la couleur "violette". Par conséquent, l’utilisation de boîtes grises et de croquis est un moyen efficace, car cela éliminera les distractions des éléments.

Un wireframe aidera à obtenir des commentaires concernant le dimensionnement, la mise en page sans que le client se concentre uniquement sur l’apparence. L’utilisation de l’approche filaire nous aide également à en savoir plus sur un client, ce qu’il aime ? Les styles, la typographie, etc., la présentation en fil de fer, sont comme un moment de liaison, leurs commentaires et leurs interactions vous permettent de les connaître, de leurs conceptions et à quoi vous attendre dans les phases futures du projet ? Lorsque vous esquissez un brouillon sur papier, le client continuera à commenter les icônes, les boutons, les polices, etc. Ils finiront par dire qu’ils préfèrent les boutons plus grands que les plus petits, etc. Finalement, un concepteur apprend des clients et commence à surveiller modèles de rétroaction et apprendre, avoir des connaissances pourrait économiser votre temps, votre énergie et vos ressources.

7 choses fascinantes sur les wireframes

1 Améliore l’expérience de travail en équipe

Le processus de wireframing rassemble différents groupes de personnes aux compétences variées ; tout le monde fait partie du processus du projet. Les chefs de projet, les concepteurs, les développeurs se réunissent tous pour atteindre un objectif. Ceci est précieux car cela améliore le travail d’équipe et permet aux coéquipiers de mieux se comprendre. Avec le modèle «cascade», les projets peuvent être réellement interrompus.

2 Communication transparente

Flux de communication fluide, nous avions l’habitude de souffrir lorsque certains membres de l’équipe comme les développeurs ne sont pas inclus dans la discussion du projet. En incluant chaque personne dans le processus de wireframing, le problème est résolu. Un développeur peut repérer un problème plus tôt qui peut être manqué sur les e-mails et les chats. D’un autre côté, les spécifications sont élégantes et belles mais plus difficiles à visualiser.

3 Engager les clients

Un wireframe aidera à obtenir des commentaires concernant le dimensionnement, la mise en page sans que le client se concentre uniquement sur l’apparence. L’utilisation de l’approche filaire nous aide également à en savoir plus sur un client, ce qu’il aime ? Les styles, la typographie, etc., la présentation en fil de fer, sont comme un moment de liaison, leurs commentaires et leurs interactions vous permettent de les connaître, de leurs conceptions et à quoi vous attendre dans les phases futures du projet ? Lorsque vous esquissez un brouillon sur papier, le client continuera à commenter les icônes, les boutons, les polices, etc. Ils finiront par dire qu’ils préfèrent les boutons plus grands que les plus petits, etc. Finalement, un concepteur apprend des clients et commence à regarder pour les modèles de rétroaction et apprendre, avoir des connaissances pourrait vous faire économiser du temps, de l’énergie et des ressources.

4 approches différentes

Le brainstorming permet d’imaginer les différentes manières d’aborder les projets. Ils sont faciles à produire et à esquisser, en particulier dans les papiers, tout ce dont vous avez besoin est un crayon et un morceau de papier, et nous abordons les problèmes sous différents angles et les dessinons sur un morceau de papier. Vous pouvez combiner et supprimer des affectations jusqu’à ce que vous en ayez deux ou quatre qui aient du sens.

Diverses approches incluent Approche technique – Fonctionnalités technologiques nouvelles et tendances, expérience des utilisateurs et test d’utilisabilité comment les utilisateurs vont accomplir un objectif et une tâche rapidement avant de s’ennuyer, ce qui conduit à l’avortement des tâches, encore une fois Approche environnementale – qui sont les parties prenantes ? Quels domaines ciblons-nous? Quels types de fonctionnalités sont importantes et peuvent facilement s’adapter à une partie prenante particulière et à un domaine ciblé ?

5 Une base pour les tests

Avec 3 ou 5 prototypes, vous pouvez tester une esquisse de projet avec de vrais utilisateurs. Il y a une perception que nous ne pouvons tester qu’en utilisant un prototype HTML terminé, mais ce n’est pas vrai. En outre, les wireframes dessinés à la main peuvent être utilisés pour les tests. Vous pouvez demander à l’utilisateur de suggérer des boutons sur lesquels il aimerait cliquer ; ils peuvent également obtenir des commentaires sur les balises de nommage et enfin, ils peuvent aider à vérifier s’ils ont la bonne hiérarchie visuelle. Les tests via wireframe permettent d’identifier les problèmes plus tôt.

6 Projet plus rapide produit

Il faut un peu de temps et d’argent pour prototyper un projet basé sur le wireframe, car différents groupes de personnes ont été impliqués dans le processus de wireframing. Par conséquent, les erreurs imprévues pouvant entraîner des révisions sont traitées avant le projet réel. Encore une fois, la mise en page du projet a été vue par les clients et la conception finale est donc terminée. Cela réduit le temps pour plusieurs concepts.

Wireframing avec Photoshop

Boîtes grises et croquis avec photoshop.

Étape 1 : Rassemblez les exigences supplémentaires des clients, puis lancez-vous pour colorer complètement Photoshop et commencez à encadrer.

Étape 2 : Créez le document basé sur le système de grilles 960 (1100 pixels de large et 760 de haut), vous pouvez l’apprendre dans « Configuration de la grille dans Photoshop ».

Étape 3: L’outil Pot de peinture (G) est utilisé pour remplir l’arrière-plan avec une couleur gris clair pour expliquer qu’il y aura une couleur ou une image d’arrière-plan.

Étape 4 : Sélectionnez l’outil Rectangle dans la barre d’outils et dessinez un cadre pour symboliser la zone de contenu. Nous utilisons le système de grille 960 ; ma boîte dessinée aura une largeur de 940 pixels. Faites en sorte que la couleur de premier plan soit blanche à l’aide de "Paint Bucket Tool" afin qu’elle apparaisse sur notre fond gris.

Étape 5 : Pour rendre le processus beaucoup plus rapide, il suffit de (taper la lettre D) pour définir le premier plan sur noir ou toute couleur qui vous convient et l’arrière-plan sur blanc ou n’importe quelle couleur. Ensuite, dessinez des boîtes noires pour représenter les zones de contenu. Encore une fois, vous pouvez choisir de modifier l’opacité des arrière-plans pour les faire apparaître gris ou de n’importe quelle couleur.

Étape 6 : À l’intérieur de la grille, ajoutez un rectangle pour représenter n’importe quoi. Dans ce cas, "bouton de connexion", tapez la valeur d’opacité ("30") pour réduire l’opacité du rectangle ("30") une fois le rectangle dessiné. Vous pouvez ajouter du texte à l’aide de l’outil de texte (T) dans la barre d’outils de texte pour ajouter le texte "LOGIN" sur la boîte. Ajoutez un autre rectangle pour créer la zone de navigation, encore une fois, diminuez la valeur d’opacité pour la rendre grise.

Étape 7 : Ajoutez des rectangles pour créer les zones de colonne de contenu. Utilisez une mise en page à deux colonnes avec une colonne de contenu principal légèrement plus grande et une colonne plus petite pour l’image de la page d’accueil. Définissez l’opacité sur 10 % pour les colonnes et ajoutez également un autre rectangle pour représenter le pied de page en bas de la page.

Page 8 : Dans la zone de contenu, ajoutez des textes factices à l’aide de la commande Type > Coller Lorem Ipsum de Photoshop.

Autres applications

Une autre application pour le wire framing qui peut être utilisée par les concepteurs non graphiques pour créer des wireframes interactifs et magnifiques.

OmniGraffle

C’est comme Micro-Visio, il a de très beaux pochoirs qui peuvent être utilisés pour la conception de haute technologie, et les fonctionnalités sont incroyables. C’est le meilleur.

Simulation de ninja

Mon préféré, GRATUIT à utiliser, il a de très belles fonctionnalités et des pochoirs qui peuvent être utilisés pour construire un concept de projet interactif. Il permet aux utilisateurs de travailler hors ligne et en ligne.

Beaux graphiques

C’est bon pour les débutants, c’est GRATUIT et les interfaces sont faciles à comprendre.

Balsamiq

Un moyen rapide de transmettre des concepts de conception à un client, il dispose d’une démo gratuite qui permet aux utilisateurs de sauvegarder le produit final. Possède tous les éléments nécessaires pour dessiner ainsi qu’un look de dessin à la main unique.

Dessin de Google Drive

Peut être utilisé pour la maquette d’écran, il n’est pas entièrement de type filaire, mais il possède des fonctionnalités telles qu’un bon outil de collaboration, rapide, gratuit et facile à utiliser.

Gliffy

Gliffy Il est plus facile à utiliser, il est plus lisse et offre des fonctionnalités de diagrammes comme des organigrammes et des plans, il a des diagrammes de Venn avec des processus réseau et UML qui a des exportations vers SVG, PNG et JPEG.

Lumzy

C’est une application flash, elle fournit une plate-forme de collaboration, elle est gratuite, rapide et enfin, elle dispose de différents types de commandes faciles à utiliser.

Moqups

Gratuit, rapide et facile à utiliser, je n’ai pas besoin d’un plug-in de navigateur, la liaison de l’écran et du bouton est parfaitement effectuée afin qu’une personne puisse publier une démonstration que les clients pourront voir et utiliser. L’exportation d’images selon les spécifications est autorisée. En dehors de cela, HTML5 et JavaScript standard ont été intégrés dans Moqups.

Source d’enregistrement: instantshift.com