Je crée des maquettes HTML. Comment les partager pour la collaboration?
Lorsque je travaille avec un client, je crée plusieurs ensembles de maquettes HTML. Ils varient en fidélité, sont réactifs, ont parfois un peu de contenu, ont quelques animations, etc. Ils viennent généralement par lots - un ensemble d'écrans liés qui affiche un flux utilisateur ou un ensemble de composants. Cette partie de mon flux de travail est géniale.
Mais je dois également collaborer avec le client, alors je télécharge les maquettes sur un serveur et partage un lien vers celles-ci vers mon client. Après cela, le client me donne des commentaires lors des réunions, des appels, des e-mails, etc. Cette approche présente plusieurs lacunes que j'aimerais aborder:
- Le contrôle de version est géré manuellement à l'aide des noms de dossier, c'est-à-dire qu'il n'est pas fiable et une corvée
- Il n'y a aucun bon moyen pour le client de parcourir et de comparer les versions
- Le client n'a ni navigation ni aperçu de ses maquettes
- Je dois ajouter des annotations, des notes, etc. dans le cadre de ma maquette HTML (au lieu d'être lié à la version de la maquette)
- Les commentaires du client se trouvent dans un e-mail ou dans mon cahier plutôt qu'en corrélation directe avec la version correcte de la maquette réelle, visible pour moi et le client
Je sais qu'en utilisant par exemple InVision résoudrait mon problème, mais je ne suis pas intéressé à utiliser un outil de filaire (ou un outil JPEG à filaire). J'utilise souvent les maquettes entrant dans la phase de mise en œuvre. Ils m'obtiennent également un contrôle total sur la fidélité, d'un ensemble sommaire de boîtes au code frontal final si je le souhaite. Cela facilite le dialogue avec le client - "Redimensionnez la fenêtre de votre navigateur pour voir la vue de la tablette". Une autre chose intéressante à leur sujet est que je peux extraire la disposition de base du site Web actuel du client, ou un widget qui est en corrélation avec le changement. Je ne suis tout simplement pas intéressé à utiliser un outil de wireframing. Si InVision supportait les maquettes HTML, mon problème serait résolu!
Ce n'est pas un outil mais deux - Dropbox et Github. Voici des instructions sur la façon dont quelqu'un d'autre l'a configuré:
http://alexcican.com/post/guide-hosting-website-dropbox-github/
Éditer:
Notable de Zurb se sent comme le meilleur outil pour collaborer sur des maquettes HTML: http://www.zurb.com/notable
Vous pouvez essayer n'importe lequel d'entre eux, ce ne sont pas des outils UX mais ils afficheront assez bien votre code HTML et auront tous une version et un partage.
bl.ocks.org
Il s'agit d'une simple visionneuse d'exemples de code hébergés sur GitHub Gist .
Il est créé par Mike Bostock et principalement utilisé pour afficher les pages d3.js . Mais essentiellement, chaque page n'est qu'une page HTML avec javascript - vous pouvez donc l'utiliser pour afficher vos maquettes. Ensuite, vous pouvez collaborer sur les commentaires dans le Gist ainsi que les versions.
CodePen
Montrez votre dernière création et obtenez des commentaires. Créez un cas de test pour ce bug embêtant. Trouvez des exemples de modèles de conception et d'inspiration pour vos projets.
Enfin, il y a toujours jsfiddle .
Mise à jour:
Selon les commentaires - WordPress pourrait fonctionner pour un client moins technique. WordPress modèles de page sont juste une page HTML avec un = PHP commentaire en haut donnant un nom à la page. Ensuite, sur la page, vous pouvez avoir des commentaires du client en incluant ce qui suit PHP en bas de la page) :
<?php comments_template(); ?>
http://notableapp.com fournit quelques fonctionnalités intéressantes pour ce que vous proposez. Il vous permet d'héberger des projets de code entiers, de faire commenter et valider les modifications par les utilisateurs et même de les étendre aux tests d'utilisabilité.
Voici un meilleur lien - http://zurb.com/notable/features/code