Maquettes: codage vs dessin?

Il ne s'agit pas de conception Web, mais de conception d'interface en général. Est-il préférable de coder des maquettes d'interface ou de les "dessiner" dans un programme graphique, comme GIMP, Photoshop, etc.?

Posez-vous ces questions:

• Combien de dispositions / options d'interface utilisateur pouvez-vous explorer en 30 minutes en codant? Combien pouvez-vous explorer en esquissant?

• À quelle fréquence obtenez-vous une conception d'interface utilisateur exactement dès le premier essai? Si ce n'est pas très souvent, est-il rapide / facile de changer un croquis par rapport à une maquette codée?

• Pouvez-vous identifier instantanément une couleur simplement en regardant son code hexadécimal / RVB (pas seulement une estimation approximative, mais la nuance / couleur exacte)? Lorsque vous imaginez une couleur dans votre esprit, pouvez-vous immédiatement la traduire en hexadécimal? À quelle vitesse pouvez-vous choisir un schéma de couleurs en tapant des codes hexadécimaux par rapport à un véritable sélecteur de couleurs?

Le fait que vous posiez cette question me dit que vous êtes très probablement un programmeur, pas un concepteur, de formation. Si vous étiez un concepteur, ce serait aussi absurde que de développer une application sans planifier la structure de la classe, la conception de la base de données, l'architecture de l'application, etc. et simplement passer directement au codage - et si vous êtes un développeur expérimenté, alors vous savez quel genre de problèmes ce type de développement ascendant provoque.

De même, si vous passez directement au code sans réellement concevoir d'abord votre interface utilisateur, les résultats ne seront pas jolis, ne serait-ce que parce qu'il est impossible de perfectionner un bon design en codant à l'aveugle.

Je voterais pour le "dessin" en premier. Dans l'interface graphique, une mise en page / présentation appropriée est la clé et elle nécessite la conception de moyens visuels. La conception graphique de l'interface graphique vous permet de modifier rapidement votre conception sans avoir à «imaginer» chaque modification, à la «traduire en code» et enfin à la tester. L'autre façon est également possible, mais elle est rarement meilleure (par exemple, le projet est extrêmement petit, comme seulement quelques boutons et vous êtes familier et habitué à travailler au niveau du "code"; lors de la conception, certains modèles peuvent émerger, cela peut être juste réutilisé avec une légère modification).

Si vous concevez pour une boîte à outils de widget spécifique, vous pouvez également utiliser une application "GUI designer" si disponible. Cela accélérera encore plus le processus de conception de l'interface graphique, car il montre à la fois à quoi ressemblera l'interface graphique conçue dans le programme en cours d'exécution et peut exporter une description GUI prête à l'emploi au niveau de la présentation.

Pour la conception de l'interface utilisateur, j'ai trois étapes avec des objectifs différents:

1. Esquisse. Tout d'abord, vous voulez avoir une idée de base de quels éléments il y aura et comment ils s'emboîteront. Tout détail fin ou perfectionnisme esthétique à ce stade est une distraction. J'utilise un tableau blanc et un gros stylo effaçable, il est donc impossible de se laisser distraire par trop de détails et de griffonner des tonnes d'idées différentes et de recommencer à tout moment. J'ai entendu parler de gens qui ne font que des croquis sur de petits post-it ou qui n'utilisent que leur main (par exemple la main gauche si vous êtes droitier) pour se forcer à ne pas prêter attention à l'esthétique et à se concentrer à 100% sur l'idée et la fonction. (image pas la mienne, de Frank Prendegast )

2. (2!) Simuler.Deuxièmement, vous voulez obtenir un aperçu et obtenir des commentaires, en savoir autant que possible sur les intuitions et les réponses spontanées des gens avant de commencer le travail d'implémentation qui prend du temps. Cela devrait être dans tout ce que vous travaillez le plus efficacement, car si vous le faites correctement, vous devriez souvent revenir `` à la planche à dessin '', chercher des critiques et chercher à identifier le plus tôt possible des problèmes inattendus. Si vous êtes une machine à coder folle et que vous travaillez le plus confortablement, le codage est bien, mais la plupart des gens travailleront plus rapidement dans quelque chose comme Fireworks, Photoshop, un logiciel de wireframing dédié ou peut-être un constructeur d'interface basé sur l'interface utilisateur comme Flash Catalyst (très bien si le produit final n'est pas Flash, l'objectif est d'obtenir de bons commentaires avant de commencer la mise en œuvre).

3. (3!) Mise en œuvre. Enfin, vous implémentez la chose et visez à le faire d'une manière qui vous permette d'obtenir plus de commentaires tôt et souvent.

Ces trois parties du cycle de projet ont des objectifs différents, donc s'il s'agit d'un grand projet, il est logique d'utiliser l'outil le plus approprié pour le travail à chaque étape.

Cette question est un peu vague et, à ce titre, tout comme les réponses.

De plus, les projets varient énormément, tout comme les équipes.

Cela dit, il n'y a pas de «meilleur». Il s'agit d'utiliser tous les outils dans un flux de travail qui a le plus de sens pour vous et votre équipe.

De manière générale, je dirais que c'est le type de workflow que vous devriez viser:

1. Esquisser. Crayon + papier. Tableaux blancs. Répéter. Travaillez avec autant de membres de l'équipe que possible.
2. maquettes low-fi. Pourrait être PSD, pourrait être visio. Cela pourrait être du papier. L'utilisateur les teste.
3. Accédez à la construction de prototypes. C'est là que vous voulez commencer à en faire autant que possible dans le code de travail. Sautez dans Photoshop selon vos besoins et extrayez-les dans le code aussi rapidement que possible. Poursuivez les tests / itérations des utilisateurs.

Ce qui fonctionne pour moi, c'est de créer des maquettes en utilisant un programme qui met l'accent sur la non- création de mises en page parfaites en pixels. Pour moi, c'est Balsamiq Mockups, que vous pouvez consulter sur http://www.balsamiq.com/products/mockups