comment mettre en œuvre un guide de style pour une équipe de 2-4
Je lis Lean UX en ce moment, et il y a une idée à l'intérieur que je n'ai jamais lue auparavant.
Il s'agit d'un guide de style.
Je voudrais implémenter cela mais avec une empreinte aussi petite que possible pour le début.
Je suis développeur de logiciels. Je travaille généralement avec un graphiste qui n'a aucune expérience en HTML/CSS. Il produit généralement un design en psd ou en ai.
Comment créer un guide de style facile à utiliser par un graphiste non technicien et moi-même pour la collaboration?
Je veux le guide de style comme une documentation vivante. De préférence, il devrait également inclure du code HTML/CSS des éléments que je peux facilement copier-coller.
Est ce que je
- aller chercher un serveur et installer un wiki?
- utiliser Google docs?
- utiliser autre chose?
J'ai lu ceci Techniques de guide de style UX mais je veux quelque chose pour une petite équipe de 2-4.
J'ai l'expérience de trois outils différents pour créer des guides de style:
Confluence Le premier guide de style que j'ai implémenté a été construit à l'aide de Confluence. Il s'agissait plutôt d'une bibliothèque de modèles de conception, contenant des modèles et des meilleures pratiques pour les problèmes de conception d'interface utilisateur les plus courants. Chaque modèle contenait un exemple d'image, une description de son fonctionnement et pourquoi il devait être utilisé, ainsi que des fichiers de conception associés. Il était principalement utilisé par les concepteurs, les développeurs ne l'ont pas trouvé utile car il n'y avait pas d'exemples de code sur la façon de les implémenter.
Blog WordPress avec le thème Pea.rs À un moment donné, nous avons évalué pea.rs , une source ouverte WordPress thème qui fait de WordPress blog un outil de bibliothèque de modèles. Les développeurs l'ont un peu aimé car il utilise CSS et HTML pour les exemples de modèles que les développeurs peuvent utiliser dans le code. Cependant, il n'a pas t supporte l'utilisation de Twitter Bootstrap dans les exemples non jQuery, et le concepteur n'a pas aimé parce qu'il manquait certaines fonctionnalités clés dont elle aurait besoin comme le téléchargement de fichiers pour la conception
Patternry Maintenant, nous utilisons Patternry , un outil de guide de style hébergé. Ce que nous aimons en particulier, c'est la possibilité d'utiliser Twitter Bootstrap dans les exemples de modèles, la possibilité de personnaliser les modèles de modèles et l'éditeur en direct pour le balisage et les styles, ce qui facilite la maquette des conceptions dans le Ce que nous n'aimons pas, c'est que le produit est encore un peu immature, certaines fonctionnalités ne fonctionnent pas comme prévu, il n'a pas de contrôle de version et il ne s'intègre à aucun contrôle de version externe système.
Sur la base de mon expérience de production de quelques guides de style dans différents formats (html, wiki, pdf, doc), j'ai trouvé que les pages HTML statiques simples offraient le plus de flexibilité. Ce sont généralement les développeurs qui dirigent la création de guides de style Web, car ils en sont le principal bénéficiaire. Par conséquent, le fardeau de la création et de la maintenance de celui-ci vous incombera probablement au début, vous devez donc commencer par la méthode la plus simple, qui est les pages HTML statiques.
Au fur et à mesure que vous obtenez l'adhésion d'autres parties prenantes, il n'est pas difficile de transférer tout le contenu sur Wiki ou Confluence pour les contributeurs non développeurs.
Le guide de style de Starbucks prouve que vous n'avez pas vraiment besoin d'un logiciel wiki/collaboration sophistiqué. http://www.starbucks.com/static/reference/styleguide/
Si travailler avec une marque que vous souhaitez sera et restera fort, ce qui peut impliquer des personnes travaillant avec elle dans des endroits éloignés, s'il n'y a pas d'éditeurs travaillant sur votre contenu pour garantir que les normes sont conservées afin de garantir une expérience de marque cohérente pour tous les visiteurs, soyez assurez-vous également de créer et de maintenir toujours:
normes éditoriales, et choisissez un guide général de style commercial pour votre contenu écrit à suivre (comme Associated Press (AP) ou Chicago Manual of Style
normes de photographie (quel style de photographie votre marque utilisera-t-elle? IE reportage, objets/personnes qui sont toujours décrits de sorte que l'arrière-plan soit blanc, ou ...?
Bibliothèque de conception UX montrant le style de votre marque de diverses interactions
polices préférées (pour les titres de page et les sous-titres, pour le texte général, utilisées dans les légendes des photos, utilisées dans les tableaux et les graphiques)
- palettes de couleurs: couleurs primaires, couleurs secondaires et potentiellement tertiaires à utiliser dans diverses instances et circonstances (en survolant/en cliquant sur/en utilisant les palettes de couleurs du graphique à barres utilisées, les styles de titre et les couleurs)
Assurez-vous d'inclure également les normes non Web, imprimées et autres, ainsi que les normes de courrier électronique et la présentation, la décoration d'événements, le papier, l'emballage, les styles Swag et les normes d'exécution, etc.
Concernant les normes techniques, vous souhaiterez peut-être également devoir inclure des normes de médias sociaux, des normes d'accessibilité et des conventions de dénomination, en particulier si plusieurs personnes/équipes utilisent un ou plusieurs systèmes de gestion de contenu centralisés.
Assurez-vous de mettre à jour lorsque des éléments de vos normes sont mis à jour!
Personnellement, j'aime utiliser wiki (nous utilisons Confluence) pour cela. Je préfère utiliser le nom "Design Guide" plutôt que "Style Guide", car il est plus large et notre guide contient à peu près tout ce dont vous avez besoin pour utiliser notre bibliothèque de widgets.
- Nous avons une page wiki avec tous les composants de l'interface utilisateur répertoriés, chacun décrit en détail dans leur propre page que tout le monde peut modifier ou commenter
- Dans la page, nous avons un aperçu, une maquette de conception avec des mesures, des interactions définies, des recommandations sur l'utilisation du composant, des composants associés, des instructions de développement pour l'utilisation du composant (l'API de la bibliothèque de widgets) et l'implémentation plus détaillée décrite pour référence.
- De plus, puisque nous utilisons des tickets JIRA for Dev, nous listons tous les tickets qui pointent vers cette page. Les tickets Dev ne décrivent pas la conception, ils se réfèrent au Guide de conception ou aux pages décrivant des conceptions individuelles (qui sont plus jetables, alors que le Guide de conception est toujours mis à jour)
- Nous avons commencé à construire le Guide de conception progressivement, chaque fois que nous avons besoin de nouveaux composants dans l'interface utilisateur
J'espère que cela vous aide à démarrer. Nous utilisons cela dans notre équipe où nous avons un desinger/PM UX (moi), deux développeurs frontaux et un concepteur gfx. Le guide de conception aide également l'image de marque et d'autres parties de l'entreprise à suivre ce qui se passe dans le développement frontal et nos nouvelles interfaces utilisateur.