Comment améliorer le flux de travail des concepteurs et des développeurs?
Je travaille dans une petite startup avec deux développeurs frontaux et un designer. Actuellement, le processus commence par le concepteur envoyant un fichier PNG avec la conception et les actifs de la page entière si nécessaire. Ma tâche en tant que développeur Front End est de le convertir en une page HTML/CSS. Mon flux de travail ressemble actuellement à ceci:
- Disposez les pièces distinctes en utilisant des éléments HTML.
- Style chaque élément très grossièrement (flotteurs, polices minimes et rembourrage) afin que je puisse la modifier à l'aide de l'inspection.
- Utilisation Chrome Outils de développeur (Inspect) Ajout/Modifier les attributs CSS lors de la mise à jour du fichier CSS.
- Actualiser la page après x quantité de changements
- Utilisez Pixel parfait pour affiner plus le design.
- Asseyez-vous avec le concepteur pour faire les derniers ajustements.
Définir les pavadons, les marges, les tailles de police à l'aide d'essais et d'erreurs prend beaucoup de temps et je pense que le processus pourrait devenir plus efficace mais que vous ne savez pas comment l'améliorer.
L'utilisation de fichiers PSD n'est pas une option puisque l'achat de Photoshop pour chaque développeur n'est actuellement pas pris en compte. Le guide de conception n'est pas non plus disponible car la conception est toujours en évolution et de nouvelles fonctionnalités sont introduites.
Idées pour améliorer le processus ci-dessus et partager la manière dont on dirait le processus dans votre entreprise sera génial.
- Assurez-vous que le concepteur utilise des polices de sécurité Web. De nombreux designers proviennent d'un fond de design imprimé et/ou rendu et sont utilisés pour pouvoir choisir de toutes les polices qu'elles peuvent trouver. Web est différent.
- La conception doit clairement indiquer le type de police, la taille, le poids et la décoration de chaque élément de texte.
- Asseyez-vous avec votre concepteur et montrez-vous et expliquez ce qui se passe lorsque le texte déborde les limites de son conteneur et de la manière dont il est important d'identifier quels conteneurs de texte doivent pouvoir se développer dans la conception.
- Réutilisez des éléments de conception. Liens, boutons, panneaux, menu - qu'avez-vous? C'est le travail des concepteurs de veiller à ce que toutes les nouvelles pages ou composants soient conformes à la conception existante et utilise les mêmes composants de l'apparence.
- Marquez les distances et les pavés entre composant en pixels. Un design ressemble beaucoup à un dessin d'architectes d'une maison. Si vous voulez pixel - parfait, la conception doit indiquer la distance pixelle et les dimensions.
La solution est un guide de conception ou de style et si votre équipe n'est pas prête, alors vous allez l'avoir à l'impression jusqu'à ce que vous soyez.
Je suggérerais de rédiger un document de normes de conception et de la revoir de manière itérale chaque période définie.
Si vous savez que chaque bouton aura un rembourrage de 10, vous n'avez pas à vérifier avec le concepteur chaque fois que vous implémentez un bouton.
Même si le premier brouillon est faux au moins, c'est un début et il est plus facile de coordonner les équipes transversales avec un seul fichier. C'est pourquoi les programmeurs utilisent des interfaces et le concepteur peut et la modifiera au fil du temps. C'est à vous de maintenir votre CSS aussi proprement que possible, ce qui rend ces modifications au fil du temps, ne sont pas une corvée terrible.
De plus, si/lorsque le concepteur quitte l'équipe, un guide de style solide peut être utilisé et maintenu par des concepteurs futurs.
Peu de choses que vous pouvez faire pour minimiser votre flux de travail
utilisez Livereload.com: Auto Actualisez votre page Web sur Enregistrer, mettre à jour votre changement CSS sans rafraîchissement et script compilez pour SASS, moins, du café ....
commencez par un cadre, vous n'avez donc pas besoin de vous inquiéter de flotteurs, de positionnement, de tailles ... Je viens d'écrire mon 3ème framework http://devric.co.cc/lab/jelly/_presentation/ À
- ou vous pouvez utiliser quelque chose comme http://foundation.zurb.com , leur seul est professionnel.
mais la raison de mon cadre est que je l'ai enfreint en très petits morceaux, plus petits que les fondations. qu'il peut être facilement géré et remplacé entre chaque projet. Vous venez de gérer votre configuration et de faire un minificateur à la fin pour le comprimer jusqu'à un fichier CSS (j'utilise JUICER MERGE APP.CSS, qui prend 3 secondes pour compresser quelque chose comme 23 fichiers.)
par exemple, vous devez vous asseoir avec le concepteur et unifier les tailles de la grille avec eux, si le pixel est nécessaire, de cette façon de concevoir la taille de votre réseau à la vapeur de votre flux de travail.
Pour Pixel parfait, prenez simplement une capture d'écran de votre site dans une superposition de transparence de 80% sur le PSD, vous pouvez utiliser GIMP pour comparer le fichier PSD ou simplement enregistrer sous JPG et comparer la capture d'écran avec le
Pourquoi votre équipe de conception ne peut-elle pas livrer des choses dans le bon support? Vous construisez un site web non une pièce à conviction de la galerie de photos. Nous faisons notre utilisation HTML et CSS et les amener directement au projet avec les développeurs.
Dans les cas où cela n'est pas impraticable, nous avons besoin d'un guide de style des concepteurs montrant des choses comme des polices, des tailles de police, des marges, un rembourrage etc. Si le blancheur est important pour eux, ils peuvent au moins vous dire à quel point c'est grand.