Meilleures ressources pour l'esquisse d'une structure filaire basée sur une grille

Le processus de concevoir une interface commence toujours par la génération d'idées. Cela inclut la visualisation, la recherche d’autres sites et le prototypage rapide. Cette première phase d’idée est cruciale pour comprendre la mise en page et l'expérience utilisateur vous avez l'intention de construire. Alors, comment devriez-vous réellement effectuer le travail de wireframing sur un nouveau projet?

Je suis un fan de papier et de crayon traditionnels avec des outils supplémentaires au besoin. Mais wireframing numérique est également grande, et c’est une option viable pour les concepteurs modernes. Dans cet article, j'aimerais partager les meilleures ressources pour les deux techniques afin de vous aider à créer votre propre images filaires d'interface utilisateur basées sur une grille.

Première conceptualisation UI / UX

Commençons par clarifier les différences entre un fil de fer et un prototype. Ces deux mots sont souvent utilisés de manière interchangeable car ils concernent le même processus.

UNE fil de fer est un croquis statique unique de l'interface utilisateur d'une page Web ou d'une application. Il peut avoir des légendes pour expliquer le texte des boutons, les marges, la taille des éléments ou même des animations. Mais les structures filaires ne sont que brouillons pour des pages individuelles.

De même, un prototype Est comme un Organigramme montrant comment différentes pages sont liées. Donc, un prototype connecte des structures filaires pour montrer comment différents boutons ou liens doivent mener à d’autres pages..

Ces définitions ne sont pas gravées dans la pierre, certains concepteurs peuvent avoir leur propre terminologie et être en désaccord avec ma formulation exacte. Mais c’est comme cela que j’ai souvent vu les décrire, et c’est le nombre de concepteurs qui comprennent le mieux ces termes..

Alors qu'est-ce que vous êtes censé faire exactement avec ces premiers morceaux conceptuels? Sont-ils vraiment nécessaires? Je dirais que le prototypage n'est pas toujours nécessaire, mais c'est une très bonne idée, en particulier pour la conception d'applications avec des interactions complexes.

Mais filaire c'est toujours une bonne idée pour chaque nouveau projet. Ça vous aide se concentrer sur la grande image sans se soucier des détails. Vous avez une idée de la disposition de la page dans son ensemble, ce qui est inestimable lorsque vous concevez une mise en page concrète..

Objectifs de la filature

Chaque fois que vous démarrez un nouveau projet, vous devriez envisager ce que vous essayez de résoudre. Chaque site est construit avec un objectif spécifique. De nombreux sites ont même plusieurs objectifs, certains objectifs étant plus importants que d'autres..

Utilisez les encadrements comme guide pour vous aider à trouver la meilleure stratégie pour capturer le (s) but (s) d'un site web. Cela ne se produira probablement pas sur le premier fil de fer, alors soyez prêt à esquisser beaucoup d'idées différentes.

Recherchez d'autres sites Web similaires et notez leurs meilleures caractéristiques. Analysez la manière dont le contenu est organisé et comment vous vous déplacez dans chaque page.

Pensez aux wireframes d'un point de vue interactif. Ce ne sont pas que de belles images. Ce sont des représentations d’interfaces numériques, et vous voulez dessiner vos idées dans cet esprit.

Disposer de ressources basées sur une grille, qu'elles soient en papier ou en format numérique, peut être très utile pour les esquisses rapides. Voyons maintenant les meilleures ressources pour créer des structures filaires..

Carnets de croquis

Vous pouvez toujours commencer par les esquisses miniatures de base sur le papier de l’imprimante pour tracer des idées brutes. Personnellement, je commence généralement à travailler sur du papier pour imprimantes, car de cette manière, je suis moins préoccupé par les grilles et davantage par les générer des idées.

Bloc à croquis à points sont la meilleure façon d'aller si vous voulez nettoyer une idée, et lui donner plus de structure. La grille vous aide estimer les distances entre les éléments sur la page et créer une sorte de symétrie dans le fil de fer.

Il y a beaucoup d'excellents produits sur le marché si vous voulez commencer filaire sur papier, Par exemple, le Rhodia Dot Pad est disponible en différentes tailles pour un usage quotidien. Il ne contient que 80 pages, ce qui est assez typique de la plupart des carnets de croquis en grille..

Un autre produit très cool et personnalisable est Dotgrid. Tous les articles de Dotgrid sont plus chers que les livres de Rhodia, mais ils sont accompagnés de plus de matériaux et de motifs de couverture personnalisés..

Dotgrid accepte même des commandes sur mesure qui vous permettent concevez votre propre carnet de croquis. Chaque livre contient un peu moins de 100 feuilles. Vous avez donc environ 200 pages, y compris le recto et le verso, pour l’esquisse de la grille..

Deux autres carnets de croquis de la grille de points que je veux mentionner incluent la grille de points de Behance, qui est reliée à la spirale, mais ne contient que 50 feuilles de papier..

Le carnet de croquis Responsive Design est l’une des meilleures ressources pour les concepteurs Web. Aucun autre concepteur de produit n’aurait besoin d’un cahier de dessin réactif, mais les concepteurs Web bénéficient grandement de la liberté de générer des idées à différentes largeurs de périphériques au sommet d'une grille.

Ces tablettes réactives ont également 50 feuilles totalisant 100 pages, mais chaque page a quatre grilles sensibles différentes représentant différents points d'arrêt dans le design réactif: ordinateurs de bureau, ordinateurs portables, tablettes et smartphones.

Bien que la conception soit fade comparée aux livres Dotgrid, personne d’autre n’a envisagé de créer des carnets de croquis adaptés aux concepteurs Web. Si vous aimez ce genre de chose, vous pouvez en commander un pour un essai routier..

Si vous êtes vraiment amateur de choses faites à la main et que vous ne voulez pas dépenser d'argent, vous pouvez aussi imprimer vos propres pages de grille avec Interface Sketch. Ce site gratuit propose différents modèles de grille que vous pouvez imprimer et utiliser pour les structures filaires dessinées à la main.

Les grilles existent en formats de lettre A4 et US pour différents styles de papier pour imprimante. Vous pouvez choisir parmi de nombreuses options, telles que des modèles pour un navigateur Web complet ou différents écrans pour iPhone..

Toutes ces options sont excellentes et valent la peine d’être explorées si vous aimez dessin au crayon. Le papier est l’un des moyens les plus faciles de créer rapidement de nouvelles idées; il est donc souvent le choix préféré des concepteurs d’interface utilisateur..

Outils numériques et applications Web

Il existe une si grande quantité de programmes filaires de grande qualité qu'il est difficile de les couvrir sans risquer de paralyser l'analyse. Pour le moment, concentrons-nous sur les meilleures options pour wireframing basé sur la grille.

Tout d’abord, je voudrais mentionner que vous pouvez utiliser des outils Adobe tels que Illustrator pour: créez vos propres wireframes. Cela ne fait pas partie du flux de travail de tout le monde et Illustrator n’est certainement pas gratuit. Mais si vous travaillez déjà avec Adobe Creative Cloud, c’est un bon point de départ..

1. Moqups

Moqups est l’un des meilleurs outils en ligne pour fil de fer. Vous travaillez avec un éditeur visuel et une bibliothèque d'éléments que vous pouvez glisser et déposer sur toute la page..

Chaque nouveau projet Moqups a un grille prédéfinie, et utilise des lignes violettes pour vous aider à aligner les éléments. C'est un excellent outil Web qui facilite beaucoup la conception avec une grille..

Le site fonctionne par défaut sur un forfait gratuit qui limite l'utilisateur à 300 objets de page. Le site propose des options premium, mais payer un abonnement mensuel peut s'avérer plus gênant que de simplement utiliser des outils Adobe ou un achat unique de Sketch..

2. Grille Papr

L'application Web Grid Papr est entièrement gratuite et propose des comptes publics et privés pour vos wireframes. Vous créez un nom pour votre projet et obtenez votre propre URL unique pour la structure filaire que vous pouvez modifier depuis n'importe quel ordinateur..

Chaque nouvelle image filaire vient avec une grille qui vous permet d’aligner sur la grille de tous les éléments. Les fonctionnalités sont simples, mais suffisent pour créer une structure filaire lo-fi en quelques minutes. Faites simplement glisser ce que vous voulez sur la page et suivez la grille pour créer une image filaire stellaire.

3. Wireframe.cc

Wireframe.cc est l’un des outils les plus simples et les plus simples que vous pouvez utiliser pour la création d'images en fils. Il comporte un interface sans encombrement avec un grille pré-construite et barres d'outils organisées. Il vous suffit de cliquer et de faire glisser pour créer de nouveaux éléments sur la toile. Vous pouvez également enregistrer et partager votre travail.

C'est encore un autre outil offert gratuitement avec les plans premium optionnels. Chaque plan est facturé mensuellement, sa structure de prix est donc très similaire à celle de Moqups. L'outil gratuit est utilisable depuis n'importe quel ordinateur sans compte.

4. Mockingbird

Mockingbird est une autre excellente option, qui offre beaucoup plus de fonctionnalités que la plupart des outils de wireframing. Vous pouvez commencer gratuitement, mais l’essai est limité à 7 jours. Cela peut être une gêne pour certains utilisateurs, mais l'outil est vraiment incroyable et fonctionne dans tous les navigateurs..

Mockingbird a une bibliothèque sans fin d'éléments d'interface utilisateur tels que onglets, accordéons, menus déroulants, lecteurs vidéo et liens de texte simples. La grille par défaut utilise le système de grille 960gs, mais vous pouvez choisir entre 12, 16 et 24 colonnes.

Mots finaux

Que vous choisissiez une configuration filaire traditionnelle ou numérique, il s’agit toujours de qualité de sortie. Il y a beaucoup à apprendre en faisant ce genre de travail, alors trouvez l'outil qui vous convient le mieux..

Pour aller de l'avant, la meilleure chose à faire est il suffit de commencer le wireframing. Ayez une idée de ce que vous préférez (papier ou numérique) et personnalisez-le. Les ressources de cet article devraient vous en donner plus qu’assez pour vous familiariser avec vos propres interfaces numériques..

(Photo de couverture par Oykun Yilmaz)