Quel logiciel d'esquisse UI / UX est recommandé?
Quel logiciel d'esquisse UI/UX utilisez-vous et recommanderiez-vous? Pourquoi?
Options logicielles
Pour les logiciels, Balsamiq est idéal pour la simplicité, Omnigraffle Pro est idéal pour la complexité (avec des modèles de Konigi et d'autres hors de Graffletopia.com .
Il est préférable de commencer par dessiner
Rien de mieux que d'esquisser pour diffuser rapidement vos idées, les répéter facilement et ne pas vous sentir trop "amoureux" des créations qui doivent mourir.
Outils d'esquisse
Ce sont les outils que j'utilise, des Sharpies ultra fins en noir, rouge et bleu, un Sharpie à pointe fine en noir et un marqueur Prismacolor Warm Grey 40% avec des pointes larges et fines. Ce marqueur gris chaud amènera votre dessin à un autre niveau en termes de communication claire de ce que vous voulez dire.
Conseils pour l'esquisse
L'esquisse n'a pas besoin d'être fantaisiste. Des lignes droites, du texte, un peu d'ombrage… c'est tout ce dont vous avez besoin pour communiquer des volumes qui ne peuvent pas être écrits. Cela dit, je vais laisser mes croquis raconter le reste de l'histoire.
Sources
Leah Buley a des ressources formidables sur le dessin et a influencé ce que je sais. Elle travaille chez Adaptive Path en tant que UX Designer.
Voici Outils préférés pour le croquis du chemin adaptatif .
Et consultez les diapositives 16 et 25 de présentation Good Design Faster de Leah Buley .
-----MISE À JOUR------
Afin de pouvoir mieux collaborer avec des collègues et de donner à chacun une chance équitable de développer ses idées qui ne se sentiraient pas autrement inclinées sur le plan artistique, nous utilisons myBalsamiq et nous l'adorons.
Le crayon et le papier sont l'outil le meilleur et le plus rentable que vous trouverez jamais.
Rapide, simple et vous pouvez explorer de nombreuses idées (comme vous le devriez) avec un minimum d'effort.
Pour explorer des idées libres (seul ou en personne), j'utilise du papier ou un tableau blanc. Lorsque je prépare des wireframes basse fidélité pour la présentation, j'utilise Balsamiq Mockups .
Ce que j'aime chez Balsamiq:
- Beaucoup de composants d'interface utilisateur existants (y compris la communauté créée)
- Je peux facilement enregistrer des symboles personnalisés pour les réutiliser
- Les raccourcis clavier accélèrent l'ajout de composants (pour moi)
- Prise en charge cliquable (limitée) pour la connexion de wireframes sous forme de pseudo-prototype
- Enregistre les esquisses dans une syntaxe XML personnalisée (BMML) que je peux analyser avec mes propres outils
Ils ont déployé une version en ligne axée sur la collaboration appelée myBalsamiq , mais je ne l'ai pas encore essayée, je ne peux donc pas donner d'avis.
Les principaux logiciels de prototypage ou d'esquisse ui/ux de l'industrie sont nombreux sur le marché. Les deux en ligne/bureau. Cela dépend principalement du niveau de fidélité/interactions que vous souhaitez capturer sur l'interface.
Juste pour la fidélité de base - moyenne, je suggère que vous pouvez utiliser Axure avec toutes les différentes bibliothèques/widgets chargés, sinon votre vie de prototypage est misérable.
Widgets Axure
http://www.axure.com/widgetlibraries
http://www.acleandesign.com/2010/04/axure-better-defaults-library-v2/
http://axureland.com/axure_widget_libraries
Pour Moyen - Avancé, vous pouvez utiliser iRise qui possède toutes les fonctionnalités, y compris même des données dynamiques affichées à partir de la base de données sur l'interface. BTW, la licence est très coûteuse là où seules les entreprises peuvent se le permettre
Autre que ci-dessus, voici la liste des outils popluar
- ConceptDraw Pro Type: Application Windows
- Pidoco Type: En ligne
- Balsamiq
- Maquettes Type: Application AIR
- Mockingbird Type: En ligne
- Crayon Type: Addon Firefox
- iPlotz Type: En ligne/Flash-Flex
- ProtoShare Type: En ligne
- HotGloo Type: En ligne
- Lumzy.com Type: en ligne
- MockFlow Type: En ligne
- Gliffy Type: En ligne
- Cacoo Type: En ligne
- Créativement Type: Online/Flash-Flex
- Lovely Charts Type: En ligne
- Mockup Builder Type: En ligne/Silverlight
- Lucid Chart Type: En ligne
Comme alternative à l'esquisse au crayon et au papier, je recommande d'utiliser une tablette Wacom + MyPaint . MyPaint est un logiciel open source de dessin avec les fonctionnalités suivantes qui en font un bon choix pour l'esquisse:
- Toile infinie. Vous pouvez toujours dessiner de n'importe quel côté de votre croquis actuel car il n'y a pas de marges.
- Beaucoup de pinceaux Vous pouvez utiliser beaucoup de pinceaux différents et créer votre collection personnalisée.
- Prise en charge des couches . Vous pouvez utiliser différents calques pour le dessin, l'ombrage ou les annotations et modifier le calque actif avec un simple raccourci clavier.
- Nettoyer l'interface utilisateur. Fournit le mode plein écran avec des raccourcis clavier pour afficher/masquer les éléments de l'interface utilisateur.
- Enregistrez les brouillons. Enregistrez facilement les états intermédiaires et naviguez d'avant en arrière pour expérimenter les variations de vos esquisses.
MyPaint fournit les fonctionnalités ci-dessus (qui ne sont pas disponibles sur papier) sans introduire une grande partie de la complexité de la plupart des packages de dessin (par exemple, Fireworks) ou des outils de prototypage (par exemple, Axure) qui sont mieux adaptés à d'autres livrables (tels que les wireframes ou les prototypes) .
J'ai créé une réplique du croquis dessiné à la main par @tajmo pour illustrer l'utilisation:
La partie la plus importante est de comprendre quand vous devez dessiner dans différents médiums et styles. Apprendre quand créer les croquis sales laids qui sont de simples explorations par rapport à la création de véritables wireframes interactifs.
Il y a beaucoup de gens qui dessinent avec Illustrator et une tablette, et ils sont super rapides. La bonne chose à propos de ce support, par exemple, est qu'il peut être facilement modifié et envoyé à d'autres pour manipulation.
Donc, vous voyez, le support et logiciel dépend de où vous en êtes dans votre processus mais aussi des habitudes de celui qui crée ces croquis.
J'utilise
J'utilise par ordre de process et de fidélité, en commençant par des explorations grossières:
- Papier + stylo noir
- Papier + Sharpie plus épais, stylo noir, marqueur gris pour des reflets plus agréables
- Illustrator pour l'un des fils qui pourraient avoir besoin d'être modifiés
- Axure (mais ce n'est pas de l'esquisse dans mon esprit, c'est du wireframing et est utilisé parce que nous avons besoin d'une certaine interactivité)
Le stylo et le papier ne peuvent pas être mentionnés assez souvent. La flexibilité dans les premiers stades est un incontournable.
Après cela: Axure est ce que j'utilise, mais j'ai aussi entendu de bonnes choses sur Balsamic.
Ouaip. Le papier, le crayon et le stylo gagnent haut la main. Toute votre expérience de dessin à la main informera tout "dessin" d'écran que vous faites et l'améliorera. J'appuie également la simplicité pratique de l'envoi de numérisations et de photos de vos croquis. Le design c'est penser et créer des formes. Les outils d'écran qui facilitent trop la création d'images ne contribuent pas à une conception réfléchie. Si vous voulez juste des images par heure d'efficacité, alors n'importe lequel des outils de dessin mentionnés fera l'affaire.
Pour les wireframes, j'ai regardé attentivement Balsamiq, Mockflow, Mockingbird, Hotgoo, Protoshare et autres. Je choisis Mockflow et j'en suis satisfait pour le prix, la puissance, l'interface utilisateur et les résultats.
Rien ne remplacera mieux le crayon et le papier . Et pour cela, je recommanderais les outils de la méthode d'action du réseau Behance . J'utilise leur grille de points cahier et cahier tous les jours et c'est vraiment professionnel et beau.
Ce qui est cool, c'est qu'ils ont adapté cette méthode Paper Action au Web, iPad et mobile . Tu devrais y jeter un coup d'oeil.
En ce qui concerne les outils de prototypage/wireframing (et non d'esquisse), j'utilise personnellement Balsamiq . Rapide, instinctif et efficace. Ils ont également un site Web myBalsamiq en version bêta pour gérer leur projet personnel. Mais ce n'est pas gratuit.
Dans mon entreprise, nous gérons la gestion des connaissances via un wiki Confluence . Nous avons ajouté le plugin balsamiq et c'est un moyen très puissant de gérer le filaire dans un contexte.
Enfin, de manière intermédiaire, vous pouvez acheter une tablette Wacom Bamboo et utiliser le bloc et le modèle d'interface utilisateur dans Photoshop pour le meilleur des mondes.
J'espère que tous ces conseils vous seront utiles.
Je recommanderai Adobe Fireworks. C'est super parce que:
- Il est conçu pour la conception Web, il est donc très rapide
- Vous pouvez utiliser des symboles pour des éléments réutilisables tels que des boutons, des fenêtres, etc.
- Il prend en charge la mise à l'échelle à 9 tranches
- Vous pouvez créer des prototypes entièrement interactifs sans codage
- Avec ce kit filaire vous pouvez rapidement créer des pages à tester sans distraire la conception
Et lorsque vous êtes prêt, vous pouvez rapidement commencer à concevoir en haut des croquis et exporter tout sous forme de CSS et d'images.
J'utilise Fireworks depuis 7 ans et cela m'a fait gagner beaucoup de temps.
mon avis ... Balsamiq est à limiter. En tant que seule personne UX dans une entreprise Fortune 100 chargée de nombreuses applications/portails Web ... je n'ai tout simplement pas le temps/le luxe de dessiner des wireframes à Balsamiq avec leur palette limitée. Ayant emprunté cette voie, j'ai constaté que les équipes de développement avaient besoin de plus de définition pour les wireframes, d'où la raison pour laquelle je suis passé à Illustrator qui permet un contrôle complet et fournit un hybride aux fichiers de conception Photoshop. Avant Illustrator, les crayons minces et pointus et le papier quadrillé sont essentiels pour définir les besoins de l'entreprise et combler l'écart entre les exigences et les équipes de développement agiles. Rechercher des outils de maquette interactifs, c'est-à-dire ... des feux d'artifice, iRIse et Axure, mais ne veulent pas être limités à leurs widgets prédéfinis et n'ont pas le temps de coder.