Hey les concepteurs, conduisez-vous vos pairs de développeur fou?
Il y a des chances que vous ayez des habitudes qui ne se traduisent pas particulièrement bien avec le code, et que cela rend la vie difficile au développeur qui travaille avec vous sur des projets. Voulez-vous être un meilleur collègue (et ami)?
Apprenez à mieux communiquer et concevoir pour que les développeurs vous aiment. Cela accélérera les projets et facilitera la vie au travail. Et il ne s'agit pas non plus d'apporter des friandises aux réunions. Vous pouvez faire en sorte que les développeurs vous aiment en modifiant légèrement votre façon de travailler.
Le plus gros problème entre les concepteurs et les développeurs est qu'ils travaillent souvent dans des bulles. Les individus ou les équipes ne commencent pas à parler d'un projet tant que le premier brouillon de la conception n'est pas terminé. Ensuite, il y a un transfert du concepteur au développeur.
Soupir.
Ce n'est pas la façon de travailler. Les concepteurs et les développeurs doivent être impliqués ensemble dès le début pour parler de la manière dont un projet se rencontrera. Bien que le concepteur puisse se concentrer sur la couleur, les polices et les images, le développeur peut donner un aperçu de la facilité d'utilisation, de la fonction et des performances.
Les concepteurs et les développeurs devraient avoir une bonne idée de ce à quoi l'autre côté ressemble. Les concepteurs doivent comprendre suffisamment de code et de facilité d'utilisation pour parler avec les développeurs et comprendre les défis. Les développeurs doivent avoir une petite connaissance de la théorie de la conception afin de pouvoir faire des suggestions lorsque les idées de conception ne conviennent pas au Web.
Une des choses les plus importantes qu'un concepteur peut faire est de préparer et de conditionner les fichiers de la même manière à chaque fois.
Combien de fois avez-vous ouvert un document Photoshop avec des centaines de calques sans nom? Ne donnez pas ce type de fichier à un développeur. Chaque couche et style, quel que soit le logiciel que vous utilisez, doit être nommé de manière appropriée.
Combien de fois avez-vous ouvert un document Photoshop avec des centaines de calques sans nom?
Les styles, les nuanciers et la typographie doivent être cohérents tout au long de la conception. (Un bouton ne doit pas être différent d'une page à l'autre.)
Nommez les fichiers et les styles de la même manière pour chaque projet. Regroupez les éléments de la même manière et utilisez un système de dossiers cohérent. De cette façon, le développeur n’a pas à réapprendre à trouver des pièces et des éléments avec chaque nouveau projet.
La gestion de la typographie est l’un des plus grands défis pour les projets de conception comprenant des documents imprimés et numériques. N'utilisez pas de polices de bureau pour des projets d'impression pour des conceptions Web ou d'applications et supposez qu'elles fonctionnent. (Souvent ils ne le font pas.)
Pour les projets numériques, optez pour Google Fonts pour la typographie. Cela signifie que vous devrez peut-être trouver une police de caractères similaire pour le Web afin de correspondre à ce que vous utilisez pour imprimer. (C'est bon.)
Ne faites pas le développeur le faire pour vous. Choisissez les polices Google similaires et utilisez-les dès le début. Vous pouvez même noter des caractères d'impression par rapport à des caractères numériques dans votre guide de style.
La raison en est simple: l'intégration de polices peut s'avérer un peu délicate. De plus, les polices Google sont gratuites et garantissent que vous n’entraînez pas de coûts de projet supplémentaires. (Pendant que vous y êtes, envisagez de faire la même chose avec les icônes et utilisez un package tel que Font Awesome, qui permet au développeur de styliser les icônes à l'aide de CSS, et non d'importer un tas de fichiers image!)
Bien que nous soyons sur le sujet des actifs d’image, il est extrêmement important d’exporter et de conditionner les fichiers correctement. Alors qu'un développeur peut ouvrir et exporter tous les fichiers image pour répondre à leurs besoins, vous pouvez demander ce dont ils ont besoin et le faire en cours de route.
Cela garantit que vous obtenez les récoltes souhaitées sur les images, tout en compressant les fichiers pour aider votre site Web à charger rapidement.
N'essayez pas de le faire vous-même. Demandez au développeur comment les fichiers doivent être enregistrés, nommés et compressés pour une utilisation optimale.
Il y a tellement de tailles d'appareils et de proportions à prendre en compte lors de la conception de sites Web et d'applications mobiles. En tant que concepteur, vous devez connaître la taille du canevas, les marges, le remplissage, etc. pour créer une maquette réellement utilisable.
Parlez au développeur avant de commencer à dessiner pour vous assurer que vous savez à quoi ressemble l'environnement de conception avant de commencer. Il n'y a rien de pire qu'une conception étonnante dans Photoshop ou Sketch et tombant à plat dans la production.
Vous devez connaître ces choses à l'avance:
Il a déjà été mentionné à quelques reprises, mais la communication entre le concepteur et le développeur est la clé de tout ce travail. La communication peut faire ou défaire des projets, avoir un impact sur les délais et influencer la conception et la fonctionnalité du projet final.
La communication peut faire ou défaire des projets
Emmenez votre développeur pour déjeuner. Apprenez à les connaître. Posez beaucoup de questions en cours de route. Si vous ne savez pas si quelque chose fonctionnera ou non, demandez simplement. Les développeurs ne sont pas des personnes effrayantes et il est beaucoup plus facile de répondre à une question au début du processus que de devoir repenser tout le concept.
Pendant que vous parlez avec le développeur et posez des questions, plongez plus profondément. Apprenez quelques bases du développement si vous ne possédez pas déjà ces compétences dans votre arsenal de conception.
Les concepteurs travaillant sur des projets numériques devraient se confronter à:
Vous ne pourrez peut-être jamais écrire de code, mais apprendre les principes de développement fera de vous un meilleur concepteur, car vous comprendrez la valeur des outils et des flux de travail.
Le processus de conception s'étend également au développement. Les concepteurs doivent reconnaître que le développeur est tout aussi essentiel au processus de conception que vous.
Dans cette optique, créez un guide de style «vivant» qui inclut non seulement la couleur et les polices, mais également des composants. Tout le monde devrait pouvoir accéder au document et le mettre à jour à mesure que le projet prend vie.
Un bon guide de style aidera tout le monde à travailler sur un projet à rester cohérent avec les éléments visuels, à fournir un contexte pour les choix de conception, à servir de point de collaboration pour le projet et à normaliser le code. Le guide de style de vie permet à chacun de partager des idées et de guider tout au long du projet. Ce n'est pas juste un document que quelqu'un crée juste avant la mise en ligne d'un dessin.
Mettez les informations suivantes dans le guide de style pour en tirer le meilleur parti:
Respectez la grille. Dans la conception de sites Web réactifs, la grille est plus qu'un simple guide pour le placement d'éléments sur l'écran. Elle peut également déterminer où les éléments vont à différentes tailles d'écran et comment les colonnes s'empilent et se mélangent.
La grille peut vous aider à concevoir et à maintenir le flux. (Le défi est que vous ne pouvez pas rompre arbitrairement les règles de conception.)
Pensez-y comme ceci: Votre conception a quatre blocs de contenu alignés sur l'écran dans une rangée (avec des largeurs égales de gouttière) sur un moniteur de bureau plein écran. Ensuite, sur une tablette, ces blocs se déplacent pour former deux colonnes, avec deux lignes. Sur un appareil mobile, ils changent pour former une seule colonne avec quatre lignes.
Il est important de comprendre l'impact de la grille sur la taille des objets et sur la manière dont les objets se déplacent sur différents périphériques, car cela peut déterminer la manière dont vous concevez le contenu. Réfléchissez à ce même scénario. Et si vous aviez cinq blocs de contenu? Cela nécessiterait une refonte pour vous assurer de créer un contour visuel cohérent.
La vraie clé de la facilité de réalisation des projets est d’être flexible. Les techniques de conception et les normes pour le Web changent tout le temps. Alors que certains projets vous permettent de rester fidèle aux détails et que le design réactif et immobile ne fonctionne pas vraiment comme ça.
La règle d'or en matière de travail avec les développeurs est ... ne soyez pas un idiot.
Les concepteurs faciles à utiliser gagneront plus de respect et auront de meilleures relations avec les développeurs. Cela mènera à des projets meilleurs et plus réussis. Cela devrait aller de soi, mais trop souvent, il y a beaucoup de comportements jerk-ish. Ne tombez pas dans ce piège.
Soyez flexible, ouvrez et discutez avec votre développeur. Ils vous aimeront pour cela.