Il y a quelque temps, j'ai eu l'occasion d'animer un atelier simple sur le sujet »Développement Web contre conception Web« à mes collègues. Voici mes réflexions sur ce sujet et sur mon expérience à la tête de la session.
Pendant plus d'une demi-décennie, j'ai suivi de nombreux processus, allant de la conception des idées et des rêves du client à la mise en œuvre de ses sites, de ses applications Web modernes ou d'applications natives. Je suis donc certain d'avoir quelque chose à partager ici.
Aïe, c'est le genre de sujet qui peut faire battre des chiens contre des chats en un clin d'œil.
Ou pas.
Après tout, nous sommes tous des humains dont les goûts, les idées, les objectifs et les parcours peuvent être similaires à bien des égards, au point que les différences qui pourraient exister s'estompent. Les pixels nous unissent et différents idiomes nous permettent de dire la même chose : le noir c'est #000000 - au lieu de créer un fossé entre nous.
C'est ce qui fait la beauté de la chose. Des personnes, des personnalités et des compétences différentes, à différentes étapes du flux de travail d'un produit, mais en jouant toujours pour la même équipe. Même bureau, mêmes ordinateurs, mêmes chaises, unis par le respect et de belles interactions que des pairs similaires.
Au final, ce n'est pas Developers vs. Designers mais Développeurs et concepteurs - une équipe talentueuse.
Au cours de l'atelier, l'équipe de conception a eu le temps d'expliquer comment un design prend vie. Comment les idées des clients sont mûries de telle sorte que même eux commencent à penser « ça y est ! » - oui, parfois, les clients ne savent pas exactement ce qu'ils veulent ou ce dont ils ont réellement besoin; en fin de compte, le les designers éclairent les rêves des clients.
Ce ne sont donc pas seulement les couleurs, les grilles et les mises en page qui les rendent fiers d'être designers. Il s'agit d'un processus complet qui commence par quelques mots et phrases, passe par des idées et des maquettes, pour aboutir au chef-d'œuvre d'un design plein d'amour et de paillettes.
Quels sont les outils utilisés ? Tu te souviens du Bloc-notes ? Oui, une sorte d'éditeur de texte doit être utilisée pour capturer les mots qui définissent les rêves du client. Ensuite, il existe d'autres outils techniques. Concentrons-nous sur le principal outil utilisé par les concepteurs de notre entreprise - Esquisse.
Il est utilisé pour créer des dessins vectoriels avec la même simplicité que pour dessiner quelque chose sur une feuille de papier blanc. Votre canevas évolue vers un modèle de site Web basé sur une grille avec facilité et haute fidélité. Il est également orienté vers le Web et les applications, avec l'exportation d'images la plus rapide avec toutes les fonctionnalités nécessaires pour prendre en charge tous les types d'écrans et de résolutions.
Et il est si simple à utiliser que n'importe quel développeur peut l'ouvrir et commencer à collecter ses premières couleurs, distances et spécifications de grille en quelques minutes.
« Qu'en est-il d'Adobe Illustrator ou de Photoshop ? » vous pourriez demander. Eh bien, ils sont toujours utilisés dans des situations spécifiques. Par exemple, Photoshop reste le meilleur outil pour embellir et travailler avec des images. Mais, en termes de créativité totale, Sketch est le numéro un.
Et maintenant, le plaisir commence (les designers jurent en arrière-plan).
Mise en œuvre, 3, 2, 1... c'est parti !
Waouh, cow-boy... Avant de commencer à taper vos premières lignes de code, vous devez être bien préparé. J'ai l'habitude de dire aux nouveaux arrivants : « Ne commencez pas si vous n'en savez pas assez sur le design pour pouvoir l'expliquer à votre collègue de votre côté. »
Avant toute chose, regardez et absorbez le design. Vous devez connaître la grille, la typographie utilisée, les éléments communs tels que les titres, le positionnement des icônes et les marges entre les éléments.
Des questions importantes peuvent se poser : que doit déclencher ce bouton ? Quelle page doit être affichée une fois que l'utilisateur a fait ceci ou cela ? Quels sont les éléments qui se répètent au fil des pages ? Quelles sont les différences ? Il est facile de comprendre pourquoi ils sont différents ?
N'oubliez pas : Si vous avez des questions, adressez-vous à vos sympathiques experts en design. Ils vous épargneront des souffrances et vous feront gagner un temps précieux. Alors tu peux commencer ta magie !
Il est important que vous connaissiez l'évangile du développement Web, en particulier lorsque vous créez des pages Web exceptionnelles, ce que vous voulez toujours atteindre, n'est-ce pas ?
Tout commence par un document bien structuré réalisé en HTML - votre couche de structure. Au lieu de vous lancer dans le style ou le comportement souhaité, créez des sections de page telles que l'en-tête, le pied de page, le contenu principal, les paragraphes, les listes, etc.
Voulez-vous savoir si votre document est correctement structuré ? Supprimez tous les styles en désactivant le CSS et les règles de style sur votre navigateur, en vérifiant si vous pouvez toujours voir un beau document que vous pouvez lire et comprendre.
Vient ensuite votre couche de présentation en utilisant le CSS pour obtenir le magnifique design que vous implémentez. Essayez d'utiliser le CSS à votre avantage en vous rappelant qu'il signifie Feuilles de style en cascade, ce qui signifie que chaque règle se répercutera harmonieusement dans votre document.
C'est pourquoi il est si important de bien connaître votre design.
Vous vous souvenez de ces éléments courants tels que la typographie et les marges ? Il est maintenant temps de les mettre en pratique en créant des règles de style, par exemple pour vos titres, qui diffèrent en termes de taille mais qui utilisent la même police de caractères, l'espacement des lettres et une certaine marge de manœuvre.
Essayez de ne pas dépasser 3 niveaux de contrôle. Par exemple, au lieu de faire quelque chose comme #sidebar div p.sidebar span.left essayez de jouer avec votre balisage et faites quelque chose de simple comme #sidebar p span : premier enfant. Voulez-vous savoir comment séparer votre code en dossiers et en fichiers ? Apprenez avec de grands chefs-d'œuvre tels que Bootstrap. Vérifiez le code source et vous apprendrez beaucoup de choses. À la fin, aimez votre balisage et faites-lui sourire en utilisant du bon CSS à l'ancienne.
Enfin, vous avez la couche comportementale, et en ce qui concerne cette phase spécifique et plus particulièrement le comportement des éléments de votre page, JavaScript (JS) est certainement votre meilleur ami qui résiste au fil du temps. Il vous permet d'apporter l'interactivité dont votre page a besoin, de calculer des informations précises lorsque les utilisateurs font un choix, de déclencher des événements lors de la soumission de données, etc. Si vous avez besoin de structures de données complexes et de calculs lourds, il est peut-être temps de vous tourner vers ces merveilleux frameworks JS.
Sinon, tenez-vous-en à vos fichiers JS, avec des fonctions nommées correctement, comme de simples boîtes noires dans lesquelles il vous suffit de définir votre saisie et vous savez avec certitude ce qui sortira de l'autre côté.
Une autre astuce simple est que vous pouvez désormais créer de nombreuses animations et transitions avec CSS3. Parfois, la réponse peut être simplement CSS et non JS. Enfin, essayez d'organiser vos fonctions sur des fichiers correctement nommés au lieu de tout conserver dans un seul gros fichier. Et surtout, soyez fier de votre code.
Oh, la question était : par où dois-je commencer ?
Commencez par le développement piloté par les tests ! Oui, commencez par votre test, codez, allumez le feu vert et refactorisez quand vous le pouvez. Essayez d'apprendre en regardant les captures d'écran de certains cerveaux que vous pouvez retrouver dans École de code, par exemple. Vous allez beaucoup apprendre d'eux.
Cela nous ramène au premier sujet, celui que nous avons fini par appeler « développeurs et designers : des personnes différentes, une même équipe », vous vous souvenez ?
Parfois, nous pouvons être « perdus dans la traduction » (excellent film, vous devriez le regarder dès que possible, si ce n'est pas encore fait) avec différentes personnes parlant des langues différentes. Un développeur pourrait dire :
Je connais ma langue. C'est <div><a>, margin-left, var nav = $ (« .navbar »). Donne-moi ce design et je le ferai briller.
D'un autre côté, un designer peut dire des choses comme :
Ces titres doivent être tous de la même couleur et de la même taille. Ne voyez-vous pas que la grille comporte 12 colonnes ? Il ne flotte pas, il fait 3 colonnes de large.
Ce fut un atelier vraiment positif, ce fut un grand plaisir de le faire et de pouvoir le partager non seulement avec mes chers collègues, mais aussi avec vous. J'espère que vous pourrez tirer des leçons ou au moins tirer de bonnes vibrations de ces lignes.
D'après un article initialement écrit par Timóteo Bica pour Imaginary Cloud
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
Une personne de groupe qui aime communiquer et apprendre. Calme et joyeux. Recherche les meilleures solutions et suit les dernières technologies. Ouvert aux conseils.
People who read this post, also found these interesting:
