Comment un seul ingénieur front-end peut remplacer une équipe de deux

Penser avec deux esprits

La demande au sein de la scène de la conception Web a changé au cours des dernières années : les concepteurs ayant des compétences en front-end et les développeurs front-end ayant des compétences en conception sont de plus en plus demandés. Oui, vous pourriez dire que les emplois sont complètement différents - et peut-être que vous n'aimez pas l'un d'entre eux - mais à vrai dire, au cours de mes six années en tant que développeur Web indépendant et douze ans en tant que designer, j'ai appris qu'il est beaucoup plus difficile de se débrouiller en tant que simple concepteur Web ou développeur front-end qu'en tant qu'ingénieur front-end qui connaît les deux rôles.

Porter les deux casquettes présente de nombreux avantages : d'un point de vue professionnel uniquement, vous pouvez trouver du travail plus facilement et facturer un tarif plus élevé car vous apportez plus à la table.

Mais travailler en tant qu'ingénieur frontal hybride présente également quelques inconvénients que vous devez connaître et comment les contourner. En tant que designer créatif, vous utiliserez votre « cerveau droit », la moitié responsable des informations visuelles, spatiales et perceptuelles, en d'autres termes, toutes les choses jolies dans la conception Web. En tant que développeur front-end technique, vous utiliserez votre « cerveau gauche », le partenaire logique et analytique de votre artiste fou à droite.

Et, puisque vous n'êtes qu'une seule personne, cela signifie que vous occupez deux emplois totalement différents en même temps, avec le même cerveau, et cela peut devenir carrément déroutant pour votre cerveau. Si vous ne pouvez pas le gérer, vous ne produirez pas un travail de qualité et n'atteindrez pas votre plein potentiel. Et, si vous êtes un pigiste essayant d'être à la hauteur d'une description de poste hybride d'ingénierie frontale, vous êtes probablement en concurrence avec une équipe de deux (développeur et concepteur), vous devrez donc travailler dans le même délai tout en conservant la qualité. (Bien sûr, vous pouvez aussi être payé comme si vous étiez une équipe de deux !)

Savoir quelle partie de votre cerveau utiliser et quand l'utiliser est la clé pour rationaliser vos processus et produire les meilleurs résultats sans frustration et avec suffisamment de temps à consacrer à votre échéance. Peu importe où vous manquez, à gauche ou à droite, cet article vous aidera à comprendre les compétences dont vous avez besoin et les moyens de les acquérir.

One Night Stand avec votre projet

OK prêt? Génial! Disons qu'on vous a demandé de concevoir le site de miniCloud, une startup en herbe proposant des solutions VPS personnalisées. Par où commencer ?

Avant de commencer un «vrai» travail sur un projet, j'aime me coucher avec. Cela signifie faire des recherches approfondies sur les produits, les services, la concurrence, etc. de votre client. En bref, Google s'en fout. Après cela, pensez au projet toute la journée : à quoi ressemblera-t-il lorsque vous en aurez terminé ? Apportez-le au dîner et endormez-vous avec votre nouveau design sexy à l'esprit. Au cours de cette étape, ayez toujours un crayon (ou un téléphone portable) à portée de main pour noter les idées au fur et à mesure qu'elles vous viennent. Ce type de travail mental aide généralement à définir les aspects clés de votre processus.

Laissez libre cours à votre créativité : le processus de conception

Maintenant que vous avez quelques idées à développer, il est temps de commencer le véritable processus de conception. Cela se compose de trois étapes : 1) croquis, 2) filaire et 3) graphiques. C'est la partie où vous laissez la moitié artistique du cerveau faire son travail et devenez fou avec un crayon, du papier et Photoshop.

Au cours de cette étape de conception, il est crucial que vous laissiez votre côté "développeur" vous garder sous contrôle afin de ne pas devenir fou avec certains aspects du site Web qu'il sera presque impossible de recréer rapidement en utilisant HTML, CSS et jQuery. Si vous essayez de réinventer le navigateur, votre développeur frontal vous détestera pour cela. Et vous, votre développeur front-end, vous vous souvenez ?

Alors, laissez-vous guider par les meilleures pratiques de conception de sites Web (et un peu de bon sens), car il est très peu probable que vous innoviez en repensant le site Web de la robe de mariée de votre ami. Cela ne veut pas dire que vous ne devriez pas viser à créer un design fantastique et impressionnant. Mais plutôt, proposez quelque chose que vous savez faisable. Les projets qui réinventent le Web sont généralement réalisés pendant votre temps libre, sans aucune échéance qui vous dépasse.

1. Croquis : Je commence avec un cahier de papier quadrillé et quelques crayons. Le papier quadrillé est particulièrement intéressant car vous pouvez l'utiliser pour des conceptions basées sur une grille. Vous n'aurez aucun problème plus tard lorsque vous traduirez votre croquis en wireframes et, à la toute fin, sur un site Web basé sur une grille. Pour miniCloud, notre croquis pourrait ressembler à ceci :

Veuillez noter que des détails supplémentaires sur le croquis, comme la neige, les oiseaux et les nuages, sont le produit de ma procrastination et ne sont obligatoires dans aucune partie de votre processus de conception, mais ils ont l'air bien.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Maintenant que nous avons une idée de base de l'apparence de notre site, il est temps de créer des wireframes que nous pouvons montrer au client. Il existe de nombreuses façons d'y parvenir. Dans certains cas, vous pouvez ignorer complètement l'étape si vous pensez que ce n'est pas nécessaire. Personnellement, j'utilise Photoshop pour matérialiser mon idée car c'est l'outil que je connais le mieux. Il existe de nombreux kits filaires gratuits en .EPS ou .PSD qui vous permettent de démarrer en quelques secondes, vous n'avez donc pas besoin de créer et de dessiner tous vos éléments à partir de zéro. Il existe également quelques solutions en ligne si vous voulez éviter Photoshop, mais je suis plutôt un type hors ligne. Quoi qu'il en soit, en partant de notre croquis, nous pourrions encadrer notre site Web comme ceci :

1. Graphismes : C'est ma partie préférée : transformer notre wireframe en un beau site web. Mais tout le monde n'est pas moi. Si vous êtes principalement un développeur et que vous n'avez aucun talent pour le design, les couleurs, la typographie, etc., je vous suggère de commencer par d'autres sites Web pour vous inspirer du design. Il y en a beaucoup, et ils sont pleins d'idées géniales. Qui sait, peut-être y a-t-il en vous un designer qui n'attend que de sortir ? Je trouve utile de conserver un dossier de signets des sites Web que je trouve particulièrement beaux ou bien conçus. Picasso (?) a dit : « Les bons artistes copient mais les grands artistes volent » – cela ne veut pas dire que vous prenez le dessin de quelqu'un d'autre et que vous mettez votre autocollant dessus. Au lieu de cela, inspirez-vous du travail de quelqu'un d'autre et ajoutez-y votre propre tournure et votre approche.

Je fais tout mon design dans Photoshop. Idéalement, votre client vous fournira des matières premières avec lesquelles travailler, comme des photographies et du texte de copie que vous pourrez utiliser à la place des espaces réservés. Il semble beaucoup mieux lorsque vous l'envoyez aux révisions.

 So, for step three, we take our wireframe and bring it to life: 

Au fait : si vous finissez par utiliser Photoshop, il existe de nombreuses ressources intéressantes qui accéléreront votre processus, comme les plug-ins et les styles. Je pourrais écrire un article entier à leur sujet seul, alors je me contenterai d'en souligner quelques-uns que j'utilise souvent.

1. CSS3Ps : plug-in Photoshop gratuit basé sur le cloud qui convertit vos calques en CSS3.
2. Divine Elemente : Crée des thèmes WordPress directement à partir de vos PSD. C'est idéal pour démarrer rapidement votre projet WordPress. Bien qu'ils disent "Aucune compétence HTML requise", vous en aurez en fait besoin si vous voulez obtenir des résultats impressionnants.
3. Motifs subtils : Collection de motifs gratuits à utiliser dans vos conceptions, généralement comme arrière-plans. Des détails comme ceux-ci font toute la différence lorsque vous essayez de faire passer vos conceptions de bonnes à géniales.

"Slice It Up": Le processus frontal

Une fois que j'ai terminé l'étape de conception et que j'ai reçu l'accord du client satisfait, je suis prêt à transformer mes images statiques en sites Web en direct. N'oubliez pas qu'à ce stade, notre conception n'est encore que cela : une conception. Nous avons encore du chemin à parcourir avant qu'il ne soit prêt pour le Web.

À ce stade, il est temps d'utiliser la moitié gauche, plus analytique, de votre cerveau.

Dans le monde de la conception Web, nous appelons ce processus le « découpage ». Bien que le terme soit plus précis il y a quelque temps, avant que CSS ne devienne le principal élément de construction visuel du Web et que vous deviez découper chaque petit morceau de votre PSD ou PNG et le mettre dans de terribles petits tableaux, il restait.

Si vous êtes un concepteur de sites Web et que vous ne savez pas encore comment utiliser le "front-end", vous avez de la chance, car le codage peut être appris (contrairement à un talent naturel pour le design). Je vous recommande d'investir dans des didacticiels vidéo en ligne comme Lynda.com et de passer en revue les bases du développement frontal. (Une liste plus définitive des ressources peut être trouvée ici.) En quelques heures, vous passerez de zéro à la lecture du code. Et dans quelques jours, vous l'écrirez vous-même. Et dans quelques mois, vous serez un maître du HTML et du CSS, alors rien ne vous arrêtera en ce qui concerne les travaux d'ingénierie frontale.

Maintenant, si vous avez créé de superbes wireframes (à l'étape précédente) selon une grille avec laquelle vous êtes à l'aise, vous saurez exactement comment vous voulez que votre site soit codé. Le moyen le plus rapide serait d'utiliser une sorte de framework frontal, comme Bootstrap.

Une fois que vous maîtriserez la conception basée sur une grille, vous commencerez à voir chaque partie de votre site Web comme un ensemble de lignes et de colonnes. La première chose que je fais lorsque je configure ma structure HTML, avant d'ajouter du contenu réel ou du CSS, est d'écrire dans les lignes, puis les colonnes, puis des éléments de base comme la navigation, suivis d'espaces réservés pour le texte et l'image. Cela vous permet de définir d'abord la structure de base et de construire à partir de là. En regardant ce wireframe, nous pouvons voir six lignes :

1. Logo / Navigation
2. Curseur d'images
3. Texte d'introduction
4. Image de catégorie
5. Dernières nouvelles / offres
6. Bas de page

Après les avoir intégrés dans la structure HTML de Bootstrap, nous aurions quelque chose comme ceci :

De nombreux sites Web de base utilisent le même code (ou un code similaire), et au fur et à mesure que vous travaillez sur de plus en plus de projets, vous verrez que le développement de sites Web est en grande partie un processus itératif, et qu'il est inutile d'écrire le même code à chaque itération. . C'est pourquoi les frameworks sont utiles ! Que vous ayez créé le vôtre ou décidé d'utiliser Bootstrap ou Foundation, cela n'a pas d'importance. Ce qui compte, c'est que vous puissiez le maintenir plus tard et l'étendre si nécessaire.

Presque tout ce dont vous avez besoin pour un projet a déjà été créé, puis recréé plusieurs fois. Donc, pour toute tâche majeure, cherchez autour de vous et demandez aux autres s'ils ont des suggestions avant de vous lancer tête baissée dans un mur. La plupart des grands frameworks ont des communautés très actives qui créent du code et des plug-ins supplémentaires pour vous faciliter la tâche. Alors travaillez intelligemment, pas dur et apprenez chaque jour. Et, si vous avez besoin de quelque chose que personne n'a construit auparavant, eh bien, vous innovez ! Écrivez à ce sujet et partagez-le avec la communauté - cela vous aidera à grandir en tant que concepteur et développeur.

Choisir un CMS

Pour certains projets d'ingénierie front-end, vous aurez terminé dès que votre conception existera sur une page Web en direct. Ce sont généralement des sites plus petits (par exemple, pour les petites entreprises, les avocats, les dentistes, etc.). Mais souvent, vous ou votre client souhaiterez avoir un contrôle sur le contenu du site Web. Dans ce cas, vous avez besoin d'un système de gestion de contenu (CMS). L'objectif d'un CMS est de vous permettre de modifier et de publier du contenu sur une page Web sans avoir à coder chaque nouveau détail à la main, voire à coder du tout.

De tous les grands CMS, je me qualifierais d'évangéliste WordPress : j'en parle avec enthousiasme aux autres développeurs, en particulier aux débutants, en raison de sa polyvalence, de sa facilité d'utilisation, de sa documentation complète pour le développement, de sa grande communauté, de son grand nombre de plug-ins gratuits, et ainsi de suite…

Si quelqu'un vous dit que Joomla! est mieux, surtout pour les petits projets, ils ne savent pas de quoi ils parlent. Quoi qu'il en soit, ne me croyez pas sur parole : téléchargez WordPress et Joomla ! thèmes de démarrage, jetez un œil à chaque dossier, puis demandez-vous : lequel souhaitez-vous explorer dans votre nouveau rôle de front-end ?

J'aurais besoin d'un article entier pour écrire sur ce sujet, mais faites-moi confiance sur celui-ci, tout comme vous feriez confiance à Baz Luhrmann sur la crème solaire.

Si votre projet est particulièrement petit et que vous avez juste besoin d'un CMS simple qui peut être mis en œuvre sans aucune compétence en codage, je vous recommande d'utiliser CouchCMS. Avec seulement quelques balises XHTML, vous pouvez le faire fonctionner en quelques minutes, et même votre grand-mère saura comment l'utiliser.

Maintenance de votre site Web

Une fois que vous avez livré votre site Web et que vous avez un autre client satisfait, il ne vous reste plus qu'à entretenir le site. Si vous avez construit un site HTML simple qui n'aura pas de nouveau contenu, vous avez probablement terminé.

Si vous avez utilisé un CMS, vous devrez vous assurer que la technologie est toujours à jour afin d'éviter toute faille de sécurité. Cela inclut le CMS lui-même et tous les plug-ins que vous avez utilisés. Si vous avez suivi mes conseils et utilisé WordPress, vous serez averti par e-mail de chaque mise à jour disponible.

C'est le stade approximatif de mon processus. Certes, cela ne fonctionnera pas pour tout le monde, et cela ne s'appliquera certainement pas à tous les projets. Mais j'espère que cela vous aidera à acquérir les compétences dont vous avez besoin pour devenir de grands ingénieurs front-end, et vice versa, afin que nous puissions continuer à développer nos talents en tant que développeurs front-end.

Je ne peux que vous montrer la porte. C'est vous qui devez le traverser. - Morphée, la Matrice

PS : Vous pouvez trouver un PSD du modèle ci-dessus et d'autres designs sympas sur mon portfolio dribbble.