Quelle est la bonne façon de travailler avec un graphiste? [fermé]

Récemment, nous avons travaillé avec un graphiste (arrangé par le client) pour fournir l'enveloppe d'une application Django + Bootstrap que nous avions construite. Le concepteur a fourni une série d'images statiques de la nouvelle mise en page, ainsi qu'un document décrivant certains attributs techniques (tailles de police, couleurs, quelques dimensions, etc.).

Il s'est avéré que cela prend énormément de temps. Bien que l'ensemble du site soit essentiellement une page d'accueil, une page d'index et une demi-douzaine de pages de détails, j'ai passé au moins cinq jours à mettre en œuvre les modifications CSS et HTML. Donc, je vais sur une branche et appeler cela la mauvaise façon .

Mon approche de base était:

1. Comparez l'image statique et le rendu actuel et notez une différence.
2. Devinez quel changement serait nécessaire dans le CSS / HTML
3. Faire ce changement
4. Passez à l'étape 1.

Certains des problèmes particuliers étaient que je ne comprenais pas que la conception incluait un changement de 8 colonnes en 12 colonnes, certaines images fournies dans un format incorrect lutte CSS habituelle pour obtenir un rendu parfait des pixels, etc. Et parfois, je devais réorganiser les modèles HTML pour obtenir un comportement donné.

Quelle est la bonne façon?

Dans mon entreprise, il y a quelques personnes spécialisées dans ce travail.

Ce sont des designers. Et ils connaissent le HTML. Ils peuvent être un pont entre les concepteurs et les ingénieurs front-end; ce qu'ils sont d'habitude. De cette façon, il suffit d’intégrer leur code HTML.

C'est un travail difficile. Il y a une raison pour laquelle des sites comme "PSD en HTML en 24h" fonctionnent bien. La solution dans notre entreprise est de faire appel à des personnes spécialisées. Pour nous, travailler avec le HTML est un jeu d'enfant.

Il n'y a pas de solution miracle.

Je ne suis pas sûr qu'il existe une "bonne façon", mais un moyen raisonnablement efficace de coopérer avec un concepteur consiste tout d'abord à créer un système sans style utilisant des modèles et permettant l'échange facile de tous les modèles. Ensuite, une fois que vous avez une interface fonctionnelle (mais minimaliste) (ou stylée de manière minimale), vous transmettez les résultats au concepteur.

JQueryUI ( http://jqueryui.com/ ) est un bon exemple de ce type de modèle de conception .

Tout d'abord, je dois admettre que je n'ai jamais travaillé avec des interfaces Web jusqu'à présent.

Mais je pense que ce serait une bonne pratique pour vous et le concepteur d’écrire la prose de la conception finale. De cette façon, vous pouvez être plus sûr que le résultat est cohérent, car vous sentiriez si vous décriviez des tableaux différents pour chaque page. La prose peut faciliter votre implémentation, car vous écrivez du code, ce qui est plus proche de votre implémentation que des images.

Essayez également de faire en sorte que le concepteur se concentre sur les composants et non sur des pages entières. Si les composants d'une page sont corrects, leur composition en une page entière est une étape beaucoup plus simple.

J'ai développé du HTML / CSS avec plusieurs concepteurs et, comme je l'ai déjà dit, il n'y a pas de solution miracle. Les concepteurs avec lesquels j'ai travaillé ne connaissaient pas grand-chose (rien) du langage HTML / CSS. Certains d’entre eux avaient une certaine expérience de la conception Web et je dois dire que quand ils ont cette connaissance, il est toujours plus facile de développer et de "créer un meilleur site Web", en particulier lorsque la réactivité d’un UX est impliquée.

Je suppose que ce que certaines entreprises recherchant un site Web ne savent pas / ignorent, c’est que tout le monde peut dire qu’il est un concepteur graphique / webdevelopper / webdesigner / concepteur d’interface utilisateur avec des connaissances de base (voire aucune, oui, j’ai vu cela). Alors que les "vrais" peuvent faire un effort supplémentaire et produire des sites Web maintenables et efficaces. J'essaie d '"éduquer" le client et d'expliquer que la conception Web implique des compétences que les graphistes "n'impriment que" n'ont pas. Lorsque cela fonctionne, j’envoie habituellement le client aux concepteurs avec lesquels j’ai déjà travaillé et avec lequel j’ai un flux de travail commun.

Cela dit, il arrive souvent, pour de nombreuses raisons, que vous construisiez des sites Web avec des personnes ayant des compétences graphiques et aucune compétence en conception Web. Dans cette situation, la meilleure façon que j'ai trouvé pour gagner du temps de codage et ne pas finir avec une mise en page undevellopable est d' être impliqué dans le processus de conception et de communiquer avec le concepteur et expliquer ce que vous pouvez / ne pouvez pas faire et ce serait plus simple / mieux de votre point de vue.

Bien que cela puisse être difficile à organiser dans certaines situations, il est capital d’expliquer au client et au concepteur que "si vous pensez que la conception Web forme le développement d’un projet Web, vous finissez par économiser du temps, de l’argent et des têtes" et que heureux de participer au processus de conception afin d’économiser du temps, de l’argent et de la tête.

Voici le flux de travail que j'essaie de suivre dans la plupart des projets:

1. Le concepteur crée des normes graphiques si elles n'existent pas (en général, je n'interviens pas ici. J'essaie simplement d'indiquer au concepteur des polices compatibles avec le Web, telles que les polices google).
2. Mokup fabriqué par le designer. Je m'implique ici et travaille avec le concepteur pour créer des mises en page compatibles Web (en particulier pour les versions réactives) avant que le client ne la voie .
3. client valide mokup
4. Je code le mokup

Le temps que j'ai passé à communiquer et à travailler avec le concepteur est enregistré pendant le processus de codage, ce qui aboutit à un code plus simple, plus facile à gérer et plus ordonné.

Cela ne vous évite pas un heureux designer qui vous appelle le vendredi soir avec un très joli mokup que le client a vu et veut maintenant avec cette phrase: "Hé pall, pourriez-vous le coder pour moi, la date limite est ... hier! " Ensuite, toute la théorie tombe en morceaux et si vous cherchez du travail à ce moment-là, vous êtes bon pour la tête toute la fin de semaine.

Conclusion :

Je ne pense pas que cela soit très différent de tout code lié à pas de projet, le meilleur moyen de travailler avec d'autres personnes est de communiquer avec elles.

En tant que graphiste devenu développeur web full stack, cela a été pour moi la partie la plus facile. Je constate souvent un fossé de communication entre une équipe de conception UX et les développeurs qui implémentent le produit. Bien sûr, les documents aident, mais le processus peut commencer à se sentir beaucoup plus naturel une fois que des discussions en face à face sur la stratégie ont lieu. De plus, je sais que tout le monde a peu de temps, mais essayez de vous impliquer pendant la phase de conception et de mise en page. Cela peut aider énormément lorsque la communication entre un concepteur et un développeur est nécessaire. Le projet prend plus d'un effort d'équipe unifié et moins d'un scénario "Eh bien, je suis ma part, sur le mur ça va". J'ai trouvé très bénéfique que le travail de conception et de développement se déroule en parallèle, Encouragez l'équipe de conception à vous fournir des structures filaires au début du processus. De cette façon, vous pouvez créer un seul style qui traite uniquement de la mise en page et du positionnement. Ensuite, à mesure que les sourds deviennent plus riches et complets. Prenez une autre passe CSS pour l'apparence et d'autres attributs de style. Au moins, cela vous évite d'avoir à vous concentrer sur tout en même temps.

Je suis confronté à un problème similaire. J'ai l'idée que des outils comme Greasemonkey ou Tampermonkey peuvent être utilisés à cette fin. La semaine dernière, j’ai demandé à commenter cette idée: comment sous-traiter l’interface utilisateur d’une application Web dynamique? , mais n’a pas obtenu de réponses satisfaisantes.

Avec ces outils, vous pouvez injecter CSS, HTML et Javascript dans une page. Dans mon idée, vous donnez l'URL du site de travail au concepteur et attendez les scripts Greasemonkey en retour. Théoriquement, vous devriez pouvoir les intégrer très rapidement au site existant. De cette façon, le concepteur sera chargé d’écrire le code HTML et CSS et de faire fonctionner le site. Cela nécessite cependant beaucoup plus de compétences en programmation du côté des concepteurs.

Je sais que cette idée nécessite beaucoup d’élaboration. Mais je n'ai pas encore essayé et je ne sais pas si quelqu'un d'autre le fait. Il peut y avoir des problèmes avec la mise en œuvre.