Share
La wireframing est une étape importante de tout processus de conception d'écran. Il vous permet principalement de définir la hiérarchie des informations de votre conception, ce qui facilite la planification de la mise en page en fonction de la manière dont vous souhaitez que votre utilisateur traite les informations. Si vous n’avez pas encore utilisé de wireframing, il est temps de vous mouiller les pieds.
Avant de commencer, une question rapide: avez-vous besoin d'une solution de site Web professionnel? Si tel est le cas, nous avons un certain nombre de modèles de sites Web magnifiquement conçus qui peuvent répondre à vos besoins. Vous pouvez télécharger un nombre illimité de modèles et d’autres éléments pour un seul abonnement mensuel..
Modèles de site Web sur Envato ElementsSinon, entrons dans ce tutoriel!
C'est comme un plan architectural. vous devez le voir dans des diagrammes noir et blanc à deux dimensions avant de comprendre comment construire la maison. De même pour un design d'écran, vous ne pouvez pas commencer à construire des couches de pixels dans Photoshop, ni à écrire des blocs de code, sans savoir où les informations vont aller.
À un niveau plus profond, une structure filaire est également très utile pour déterminer la manière dont l'utilisateur interagit avec l'interface. Par exemple, les structures filaires peuvent contenir divers états de comportements de bouton ou de menu..
Les structures filaires sont importantes car elles permettent au concepteur de planifier la mise en page et les interactions d'une interface sans être distrait par les couleurs, les choix de caractères ou même la copie. J'aime expliquer à mes clients que si un utilisateur ne peut pas savoir où aller sur une trame filaire en noir et blanc, les couleurs que vous utiliserez éventuellement importent peu. Un bouton doit être évident même s'il n'est ni brillant ni coloré.
Tout comme les fondations d'un bâtiment, il doit être fondamentalement solide avant de décider de lui appliquer une couche de peinture onéreuse..
Avant d’entrer dans les détails, puisqu’une image peut représenter mille mots, jetez un coup d’œil à I ♥ wirefames. Vous pourrez obtenir un aperçu rapide et une compréhension visuelle de la façon dont d'autres concepteurs gèrent leur processus de wireframing..
Peut-être aussi saisir ce bookmarklet de navigateur astucieux, Wirify, qui vous permet de voir une version "wireframe-d" de tout site actif.
Si vous observez continuellement ce que font d'autres concepteurs ou sites pour leurs structures filaires, vous aurez lentement une idée de la façon dont une structure filaire aide à organiser les informations pour l'écran..
Le design est un processus organique et, par conséquent, différents concepteurs abordent le wireframing et sa traduction en éléments visuels ou en code de différentes manières. Vous devez trouver le processus qui fait ressortir vos propres forces et avec lequel vous êtes le plus à l'aise. Vous trouverez ci-dessous un diagramme illustrant plusieurs processus typiques:
37signals est bien connu pour sa préconisation de l'utilisation des esquisses et son passage direct au code, même s'il semble que certains de leurs concepteurs incluent également des maquettes visuelles dans leur processus..
Pour moi, j'ai passé suffisamment de cycles de conception à code pour avoir un processus quelque peu rationalisé. C’est une étape à laquelle certaines personnes ne pensent peut-être pas, mais j’envisage également tout cadre html / css que j’utiliserais dans le projet..
Par exemple, je construisais une tonne de sites dans Blueprint. Je définissais donc mes structures filaires et Blueprint sur la même grille de 12 colonnes. Cela accélère considérablement le temps de prototypage et de développement, car au lieu de devoir écrire la largeur de chaque élément dans ma feuille de style css, elles sont maintenant prédéfinies de une à douze colonnes de large. J'utilise maintenant cssgrid à la place pour son support de conception réactif, mais il est toujours défini sur une grille de 12 colonnes que vous pouvez télécharger en tant que modèle Photoshop..
Comme je l'ai dit, c'est à vous de décider du processus avec lequel vous êtes à l'aise. Parfois, vous pouvez l'essayer à plusieurs reprises avant de réaliser quel est le processus le plus efficace. Certaines personnes peuvent être très douées pour dessiner et préférer ne pas utiliser d'outil filaire. D'autres concepteurs voudront peut-être prendre autant de mesures que possible pour minimiser les écarts ou leur permettre de réfléchir à chaque itération au fur et à mesure que la conception commence à prendre forme..
Vous développerez éventuellement votre propre processus préféré mais, dans l’intérêt du tutoriel, j’utiliserai mon processus typique à titre d’exemple:
La raison pour laquelle j'utilise généralement Illustrator comme outil de maillage est principalement pour trois raisons:
Cependant, j'utilise d'autres outils et cela dépend du scénario du projet. Je décrirai brièvement quelques outils populaires, leurs forces et leurs faiblesses dans la section suivante..
Voici quelques outils populaires sans ordre particulier:
Balsamiq est devenu populaire car les structures filaires produites à l'aide de Balsamiq ressemblent à des croquis, ce qui rend tout de suite évident que la structure filaire n'est pas un produit fini, mais un travail en cours. Balsamiq possède également une énorme bibliothèque de composants réutilisables que vous pouvez glisser et déposer très facilement pour concevoir vos structures filaires..
Vous pouvez également l'utiliser sur presque toutes les plates-formes, avec des versions de bureau disponibles pour Mac, Windows et Linux. De plus, il existe une version Web si vous préférez travailler dans le cloud. Les applications tierces telles que iMockups pour iOS prennent également en charge les formats d'exportation Balsamiq..
Un des favoris de Mac, Omnigraffle possède également une bibliothèque de composants réutilisables fournie par l’utilisateur, largement prise en charge; Graffletopia.
Depuis qu'il a été développé spécifiquement comme application de création de diagrammes, Omnigraffle possède également des fonctionnalités complexes telles que la mise en page automatique, la prise en charge des styles d'objet personnalisés, les guides intelligents et les outils de graphique. Certaines de ces fonctionnalités sont également disponibles dans la suite Adobe CS, mais si vous ne possédez pas la suite CS, Omnigraffle représente un bon rapport qualité-prix (environ 100 USD) pour la production de structures filaires détaillées..
Presque comme le grand-père des outils de wireframing, Axure était l’un des premiers outils de wireframing / prototyping de classe professionnelle. Jusqu'à récemment, il n'était disponible que sous Windows. Personnellement, je n'ai pas beaucoup d'expérience avec cela, mais il est connu pour être un outil largement utilisé par les professionnels de l'industrie.
Nouveau venu, Flairbuilder supporte fortement les interactions..
Il possède également une énorme bibliothèque de composants, prend en charge les pages maîtres et vous pouvez exporter le prototype pour le visualiser en ligne..
Si le logiciel de bureau n’est pas votre tasse de thé, il existe des outils tels que mockflow, hotgloo et mockingbird.
Keynotopia "transforme votre application de présentation préférée en le meilleur outil de prototypage rapide pour la création de maquettes d'applications mobiles, Web et de bureau". Pour les utilisateurs non-mac, ne vous inquiétez pas, Keynotopia propose également des modèles PowerPoint.
Personnellement, je le recommande vivement si vous avez besoin de créer rapidement des applications filaires ou prototypes. Keynote Kungfu est une autre bonne alternative..
Pour ceux qui sont déjà familiarisés avec la suite Adobe, Fireworks, Illustrator et Indesign sont des outils d'encadrement très performants dotés de leurs propres forces et faiblesses..
Dans Fireworks, vous pouvez travailler sur l'intégralité du processus de conception, des structures filaires de base au visuel complet. Les pages maîtres de support Fireworks (considérez-les comme des modèles réutilisables dans lesquels chaque modification du modèle maître peut être appliquée dans vos pages enfant), des bibliothèques d'éléments et vous pouvez créer des prototypes interactifs avec Fireworks relativement rapidement..
C’est l’un de mes outils préférés, car je connais déjà très bien Illustrator et je suis sûr que de nombreux concepteurs le connaîtront également. J'utilise Illustrator lorsque j'essaie de réaliser des structures filaires rapides mais complexes, sans besoin d'interactivité..
Qu'est-ce qui en fait un gagnant? Possibilité d'exporter en tant que PSD avec des calques modifiables, prise en charge puissante du copier-coller dans Photoshop et des contrôles de typographie puissants avec des styles de caractères que vous pouvez enregistrer, éditer et réutiliser, presque comme du CSS.
Des atouts similaires à Illustrator avec des contrôles de styles typographiques encore plus stricts, un support puissant des pages maîtres et la capacité récente de créer des prototypes interactifs.
Je choisis Indesign lorsque je dois réaliser des prototypes interactifs haute page de plusieurs pages. Le seul inconvénient pour moi est le faible support d'exportation vers Photoshop pour la conception de visuels..
"Prototypage puissant en toute simplicité." La version 9 récemment publiée avec une nouvelle palette wysiwyg. Vaut le détour.
Il y a beaucoup de théorie sur les systèmes de grille, mais sans trop entrer dans les détails, je vais l'expliquer comme "un moyen simple et structuré de mettre en forme des éléments".
J'utilise Illustrator pour ce didacticiel, mais les étapes peuvent être appliquées à n'importe lequel de vos outils..
Tout d'abord, définissez une taille de document. J'ai utilisé 1280 x 900 car j'utiliserai cssgrid, ce qui permettra à mon site Web de passer facilement d'une résolution de 1140 pixels à une résolution mobile..
Placez le modèle téléchargé de cssgrid dans votre document.
Il existe de nombreux modèles de grille disponibles au téléchargement, mais si vous souhaitez personnaliser vos propres modèles, jetez un œil à responsify.it..
Commencez par dessiner des cases sur la grille. Pensez à l'ordre des informations que vous souhaitez présenter à vos visiteurs, le plus facile est de haut en bas, suivi de gauche à droite. Vous trouverez ci-dessous un exemple de structure filaire dont la structure est couramment utilisée par les éditeurs de logiciels:
Parfois, en fonction de votre objectif et de l'entité pour laquelle vous concevez, vous pouvez être créatif avec la mise en page, tout en gardant toujours à l'esprit la hiérarchie des informations. Voici un exemple concret de l'un de mes clients où je sortais de la présentation de sites Web de sociétés de technologie conventionnelle:
Voici une mise en page pour un blog, avec des conteneurs publicitaires bien placés et des instructions spécifiques pour le client:
Une fois que vous êtes satisfait de la manière dont les boîtes sont disposées, commencez à déposer des fragments de votre contenu pour savoir si les informations sont bien structurées. La règle de base est la même: les informations que vous souhaitez transmettre à votre public doivent être claires, même dans une structure filaire en noir et blanc..
Utiliser simplement différentes tailles de police est un excellent moyen de différencier les différents niveaux d’information..
N'ayez pas peur d'expérimenter à ce stade. Parfois, lorsque vous renseignez plus en détail, vous réaliserez peut-être que la mise en page originale ne fonctionne pas bien. C'est tout le but du processus de wireframing; faire autant d'itérations que possible afin de déterminer le meilleur moyen de représenter les informations que vous essayez de communiquer.
Dans l'exemple ci-dessous, j'ai décidé de donner plus de poids aux captures d'écran et j'ai également commencé à utiliser des boîtes noires pour définir les zones qui revêtiraient une importance visuelle pour ce site Web:
L'utilisation du spectre complet de niveaux de gris peut vous aider à déterminer la force visuelle de vos éléments sans avoir à choisir une palette de couleurs. En fait, cela peut vous aider plus tard au cours du processus de conception visuelle.
C'est une étape facultative, mais si vous aimez prendre les choses par incréments, vous voudrez peut-être l'essayer. Faire une haute définition filaire signifie simplement ajouter plus de détails, autant que possible, sans entrer dans les détails visuels. Cela peut vouloir dire insérer la copie dans le fil de fer et essayer de déterminer les tailles de police idéales:
Il pourrait aussi s'agir de couleurs:
L’idée générale est qu’au stade visuel / code, vous voulez être en mode de polissage et non plus en mode de dessin ou d’expérimentation. Effectuer les cycles d’itération (feedback) <-> wireframing) aussi rapidement que possible dans une application de wireframing que vous maîtrisez, plutôt que de déplacer des calques et des pixels dans Photoshop.
Cela étant dit, dans certains scénarios, il peut être plus judicieux de ne pas définir les détails de manière excessive et d’entrer directement dans une phase de prototypage interactif (comme les signaux 37). L’argument avancé est que certains détails de l’interaction ne peuvent pas être entièrement communiqués sur une image plate..
Si vous travaillez avec une équipe de développeurs, vous voudrez peut-être transmettre les structures filaires approuvées aux développeurs pour qu'ils codent le cadre de base pendant que vous travaillez sur le visuel..
Comme je l'ai déjà mentionné, je préfère utiliser Illustrator pour la création d'images en fil de fer car je peux l'exporter au format .psd avec la plupart des calques de type modifiables. Au moment où je suis dans Photoshop, je n'aurai plus besoin de modifier le type (Photoshop possède des outils de contrôle de type inférieurs, bien que beaucoup améliorés dans CS6):
Voici un exemple d’image filaire traduite en visuel. L'épine dorsale de la structure filaire est à peu près intacte, bien que des ajustements aient été apportés visuellement. Vous pouvez aussi voir ce site en direct:
Nous terminons donc ici ce tutoriel. J'espère que cela vous a inspiré pour commencer à expérimenter! Comme pour tout processus de conception, n'ayez pas peur d'itérer, d'itérer et d'itérer.
Passez également du temps à expérimenter différents outils et processus. Vous constaterez que l'investissement en temps en vaut la peine une fois que vous avez trouvé une application intuitive pour vous.
S'il vous plaît n'hésitez pas à poser des questions dans les commentaires, merci de lire!
De plus, si vous avez besoin de composants de sites Web prêts à l'emploi, nous avons une tonne de modèles de sites Web magnifiquement conçus sur Envato Elements. Vous pouvez télécharger un nombre illimité de modèles et d’autres éléments pour un seul abonnement mensuel..
Si vous souhaitez en savoir plus sur le wireframing, consultez ces ressources..
Accentsconagua