Concepts de développement Web que tous les concepteurs Web doivent comprendre

Il y a beaucoup à dire sur le fossé trouvé entre les concepteurs et les développeurs. Certes, de nombreux hybrides de concepteurs / développeurs peuvent comprendre les deux côtés de la médaille, mais ils sont rares.

Les projets créatifs prospèrent bonne communication. Cependant, cela peut être difficile lorsque les concepteurs et les développeurs ne savent pas comment parler les uns aux autres. Je ne pense pas que les concepteurs aient besoin de savoir écrire le bon JavaScript, et que les développeurs ne doivent pas maîtriser la sélection de la typographie. Mais il y en a sujets fondamentaux que je pense aller dans les deux sens.

Les sujets suivants sont ma propre vision personnelle de idées de développement web essentielles que tous les concepteurs doivent comprendre. En tant que concepteur / développeur, je sais à quel point il peut être déroutant d’étudier ces deux domaines. Mais cela vaut toujours la peine d'apprendre, car une compréhension claire améliore la communication et rend le concepteur beaucoup plus précieux pour une équipe créative..

Comportement du code frontal

On pense souvent que les concepteurs de sites Web possèdent des compétences frontales en plus de leurs talents en matière de conception. Ceci est un sujet chaudement débattu, principalement parce qu'il y a pas de réponse correcte.

Les concepteurs doivent faire ce qu'ils sont à l'aise avec. Si cela ne signifie que du travail de conception visuelle, alors qu’il en soit ainsi. Cependant, une brève compréhension des technologies frontales peut rendre le même concepteur plus intuitif lors de la création d'actifs pour les développeurs.

Je crois que chaque designer devrait au moins comprendre la trois langages fondamentaux du développement frontal (HTML, CSS et JS) ainsi que leur utilisation. Par exemple, la plupart des menus déroulants reposent sur JavaScript, mais il existe également des alternatives CSS uniquement..

Lorsqu'un concepteur crée un menu déroulant, il peut penser à la complexité de son implémentation via code. Un concepteur qui comprend quels éléments requièrent JavaScript peut être mieux préparé pour comprendre ce qu'il demande aux développeurs de créer..

C'est possible sans apprendre à écrire une seule ligne de code.

CSS est fait pour style du site. C'est principalement statique en dehors de l'animation CSS, et CSS crée la majorité des visuels sur une page. La plupart des fonctionnalités dynamiques sont créés avec JavaScript.

Si vous pouvez comprendre cette division, cela créera un effort conscient dans le travail de conception. Cela obligera également les concepteurs de mouvement UX à prendre en compte le travail nécessaire à l’animation d’une interface..

Techniques réactives

Tout concepteur de sites Web devrait au moins connaître le terme conception sensible. Cela permet aux sites Web de s'adapter à différentes tailles d'écran, à chacun desquels une mise en page différente appartient. Les dimensions du périphérique lorsqu’une nouvelle présentation est appliquée sont défini par des points d'arrêt, ajouté dans (un des) fichier (s) CSS.

Les points d'arrêt sont spécifiés par un certaine largeur de pixel (et / ou parfois hauteur), minimum ou maximum, auquel la disposition s’adapte à la taille de l’écran. Ainsi, une mise en page réactive aura une apparence différente sur un moniteur 1080px que sur un smartphone 320px.

Pour voir comment fonctionnent les points d'arrêt sur des sites réels, consultez le site Web Media Queries..

En tant que concepteur, votre travail consiste à examiner comment chaque point d'arrêt peut influencer la maquette. Vous pouvez être chargé de concevoir plusieurs compositions, chacune ajustement dans différentes dimensions d'écran.

Une fois que vous avez compris qu'un point d'arrêt CSS définit les conditions de modification de la présentation, vous aurez beaucoup plus de facilité à transmettre ces actifs à l'équipe de développement..

Pensez modulaire avec des designs

Les développeurs veulent toujours code de réutilisation autant que possible, car cette approche rend le développement moins verbeux et réduit la taille des fichiers - en fait c'est une technique importante d'optimisation du code.

Conception modulaire décrit une méthode de création de sites Web sur “modules” ça peut être réutilisé au fil du temps. Pensez à des boutons, des entrées de formulaire, des styles de titre ou des guillemets avec des styles fantaisistes.

Si vous éléments de conception de manière modulaire, il devient plus facile pour les développeurs de coder la mise en page avec classes CSS réutilisables. C'est toujours une bonne idée de penser à l'endroit où vous pouvez réutilisation raisonnable les mêmes couleurs, textures et éléments de page, mais il faut être intelligent ne pas nuire à l'esthétique générale.

C'est encore mieux si tu annoter les éléments que vous avez copiés sur différentes maquettes, afin que les développeurs puissent marquer ces parties du site avec du code de répétition - rendre le développement plus rapide et plus simple.

La conception modulaire concerne conception atomique, les deux approches sont plutôt orientées vers les développeurs. toutefois visualisation peut vous aider à comprendre comment fonctionne le code, donc si vous avez du mal à visualiser la conception modulaire consultez ce post pour voir quelques exemples.

Comprendre Retina Images & SVG

Il incombe généralement au concepteur de préparer les images, de capturer les photos nécessaires et de concevoir des icônes à partir de rien. Cela signifie que les concepteurs sont seuls responsables de livrer les actifs visuels que les développeurs finissent par coder dans la mise en page. C'est pourquoi il est important de comprendre tailles de rétine et à transmettre des actifs pris en charge par la rétine aux développeurs avec la ou les maquette (s) finale (s).

Je recommanderais vivement cet article de Smashing Magazine si vous souhaitez en savoir plus sur les processus de conception de la rétine. Retinize It est une collection gratuite d’actions Photoshop pouvant créer automatiquement des versions de rétine de vos avoirs.

La plupart des designers savent déjà soutenir @ 2x images, mais les nouveaux appareils iPhone 6+ ont @ Résolutions 3x. Cependant, certains projets ne s'embarrassent pas avec la taille des images @ 3x. Parlez-en à votre chef de projet avant de finaliser les ressources..

Une dernière chose à considérer est le avancement de SVG sur le Web. Tous les navigateurs modernes supportent SVG qui est un format d'image vectoriel. Cela signifie que les icônes SVG seront redimensionne automatiquement sans perte de qualité, vous n'avez donc pas besoin d'actifs Retina pour les graphiques SVG.

Cependant, toutes les équipes créatives ne souhaitent pas utiliser de SVG pour la conception Web. Bien sûr, ils sont supportés par les navigateurs, mais dans certains cas, ils peuvent également être difficiles à mettre en œuvre. C’est pourquoi la communication est essentielle au succès des relations entre concepteurs et développeurs..

Discutez des avantages et des inconvénients de l’utilisation de graphiques vectoriels et décidez ce qui convient le mieux à chaque projet. En comprenant simplement ces fonctionnalités, vous serez en mesure de communiquer clairement avec les développeurs, et même de les aider à coder la mise en page pour le support de la rétine..

Comprendre l'accessibilité

Amélioration progressive et dégradation progressive Il existe deux manières différentes de traiter le même problème: l’accessibilité. Tous les utilisateurs ne fonctionneront pas sur des appareils ou n'exécuteront pas de navigateurs prenant en charge 100% des fonctionnalités dynamiques d'un site Web..

Ces utilisateurs devraient toujours obtenir un expérience qui fonctionne, et cela doit être géré avec un codage approprié. Certains lecteurs d’écran peuvent ignorer tout le code JavaScript et CSS, mais le site Web doit encore fonctionner.

J'ai récemment fait un post couvrant amélioration progressive en détail, car c'est ma méthode de développement préférée. Amélioration progressive commence avec des fonctionnalités très basiques, travaille ensuite à plus “Avancée” fonctionnalités.

Dégradation progressive est le approche opposée où toutes les fonctionnalités principales sont conçues en premier, alors le développeur décide comment gérer ces fonctionnalités si l'utilisateur ne prend pas en charge JavaScript ou CSS.

Il est peu probable qu'un concepteur soit invité à réaliser des maquettes pour l'une ou l'autre de ces situations. Mais il est important que les concepteurs comprennent ces termes et leur signification, car ils affecte le processus de développement. Cela est particulièrement vrai pour les projets où l'accessibilité est une préoccupation majeure.

En clôture

J'ai omis certains sujets parce que je les considère facultatifs. Contrôle de version, gestion des erreurs et animations JavaScript sont quelques sujets plus complexes que les concepteurs peuvent vouloir approfondir dans.

Mais honnêtement, les points abordés dans ce message aideront davantage les concepteurs à comprendre les exigences d’une équipe de développement. En parcourant simplement la surface du développement Web, vous mieux comprendre ça vous aidera à communiquer des idées et à comprendre les problèmes qui surviennent pendant la production.

Si vous recherchez plus de contenu connexe, jetez un coup d'œil à ces articles:

Comment communiquer efficacement avec les développeurs (smashingmagazine.com)
Aidez les concepteurs et les développeurs à apprendre à se comprendre (uie.com)
Apprendre à coder vous donne des avantages en tant que concepteur UX (jessicaivins.net)