Quoi de mieux pour le wireframing: Photoshop ou Illustrator? Pourquoi?
Je suis tombé sur de nombreux sites Web et forums parlant de la création de wireframes PSD qui sont ensuite utilisés par les ingénieurs de l'interface utilisateur pour construire le front-end. J'ai toujours pensé qu'Illustrator était plus adapté au wireframing.
Bien que l'illustrateur ait des lignes plus épurées et puisse créer des filaires de belle apparence, vous ne pourrez pas passer rapidement à la conception de l'interface utilisateur. Mais plus important encore, vous devez utiliser ce que vous pouvez idéer et prototyper plus rapidement et plus facilement. C'est le plus important.
Vous devriez essayer FireWorks, son meilleur des deux mondes Photoshop et Illustrator avec peu de compromis, il est conçu pour le développement Web.
Voici mon flux
Paper Sketch >> FireWorks >> HTML
Ne compliquez pas votre processus de construction, gardez-le léger autant que possible jusqu'à ce que vous atteigniez le code HTML. Fireworks vous permet d'avoir différents états, une page maître, de meilleurs outils de découpage. L'ensemble du projet peut être réalisé sur un seul fichier.
...Ça dépend. Si je devais choisir entre les deux, je recommanderais probablement l'outil que vous connaissez le mieux, juste pour que vous puissiez prototyper rapidement et sans tracas.
Mais dans certains contextes, un filaire "réaliste" construit par l'éditeur d'images est de toute façon inadapté. Si vous souhaitez simplement discuter des flux de travail ou des concepts généraux, le texte et les boutons supplémentaires de la véritable interface utilisateur peuvent être une distraction. Cela est particulièrement vrai si vous parlez à des clients, qui ont (d'après ce que j'ai vu) une mauvaise habitude de confondre le prototype avec une chose réelle presque publiée, et sont facilement détournés en parlant du jeu-questionnaire ("Ooh, mais n'écrivez pas l'étiquette comme ça ... ").
Maintenant, vous pourriez simplement utiliser PS pour créer une maquette "abstraite", mais alors, pourquoi ne pas utiliser un outil comme Balsamiq ou Mockingbird?
Comme je l'ai dit, cela dépend. J'aurais vraiment besoin d'en savoir plus sur votre situation.
Je suis UXD chez Adobe.
Johnathan Shariat a raison, choisissez ce qui est le plus rapide et restez agnostique lorsque cela est possible. J'encouragerais particulièrement les esquisses ou les maquettes balsamiques afin de produire des wireframes d'aspect moins poli.
Plus il est sommaire, plus l'accent reste mis sur les concepts et le contenu de base plutôt que de se laisser emmêler dans les détails ou l'apparence.
Quant à notre équipe;
La plupart du temps, nous utilisons illustrator et omnigraffle pour les wireframes (avec Fireworks et InDesign étant utilisés mais légèrement moins courants) Nous utilisons également principalement illustrator pour la conception visuelle et les conceptions d'écran/composants d'interface utilisateur finaux. Puisqu'il est extrêmement facile de passer du filaire au pixel parfait et de réutiliser les composants.
Ce n'est pas idéal, mais dans la plupart des cas, il bat la merde du flux de travail Photoshop.
Celui qui a dit que Photoshop n'était pas bon pour le filaire -> la conception d'écran poli devrait vraiment omettre ce détail de la réponse, c'est entièrement trompeur.
C'est assez simple de répondre à cette question très précisément. Il y a un continuum sur lequel chaque étape se trouve, et elle a un "meilleur" logiciel approprié à utiliser.
Conceptuel> structurel> prototype> interface utilisateur réelle
selon où vous en êtes dans ce processus dicte ce que vous utilisez. Quelques-uns des commentateurs parlent de la facilité de sauter dans l'interface utilisateur finale, mais vous ne pouvez considérer cela comme un avantage que si vous êtes très proche de la fin du processus.
Voici les progiciels correspondants (qui suivent un nombre similaire d'étapes mais sont plus fluides.
Illustrator> Balsamiq/Mockingbird/Visio etc> Photoshop [Conceptuel> structurel> prototype> interface utilisateur réelle]
J'ai ordonné au logiciel de s'aligner sur la fonction qu'il peut exécuter le plus rapidement et le plus efficacement. Bien sûr, vous pouvez utiliser Photoshop pour concevoir la structure, mais pourquoi avez-vous besoin de tout ce visuel, de la puissance et de peu de pouvoir d'organisation à ce stade?
Je suis passé de Photoshop et Illustrator à Balsamiq il y a plus de 3 ans et je n'ai jamais regardé en arrière.
Il m'est impossible d'imaginer un moyen plus efficace de créer des wireframes.
J'ai également essayé Fireworks et Omnigraffle, mais Balsamiq est le meilleur.
En général, nous utilisons,
Photoshop pour, amélioration des photos, correction des couleurs des photos, conception d'interfaces utilisateur Web/Mobile/Web. la plupart de nos concepteurs connaissent Photoshop.
J'ai utilisé Illustrator, Photoshop et Omnigraffle pour le wireframing. Cependant, récemment, je suis tombé sur l'utilisation de keynote pour le wireframing. Dans Keynote, vous pouvez avoir des états de clic et des animations qui ressemblent à ce que ressentira l'utilisateur.
Voici quelques sites qui contiennent des informations et des modèles si vous êtes intéressé.
Vous devriez également consulter Axure pour le wireframing interactif
Je suppose que cela dépend des exigences et des compétences de votre organisation. Mon expérience personnelle ne serait ni l'un ni l'autre. J'utiliserais un outil spécialement conçu pour le wireframing/prototypage.
Omingraffle/Axure sont des solutions de bureau populaires. Concentrer davantage sur le prototypage que sur le wireframing, mais sont assez puissants. Personnellement, je trouve la courbe d'apprentissage un peu élevée pour Axure lorsqu'il est utilisé pour autre chose que des clics filaires de base.
Visio est un bon point de départ si vous n'avez besoin que de filaires statiques. Il a un moteur de modèles assez décent intégré.
Personnellement, je trouve la possibilité d'itérer rapidement des wireframes/prototypes utile et opterais pour un outil Web tel que: Hotgloo/Balsamiq/Gliffy/mockingbird.
S'éloigner des wireframes et se tourner vers le prototypage: si vous avez besoin de fonctionnalités plus riches et que vous avez les compétences, j'envisagerais d'utiliser un framework tel que Bootstrap pour développer un prototype HTML/CSS/Javascript.