Comment créer des sites Web plus efficacement

Notre développeur principal partage ses conseils pour se préparer à créer un site Web efficacement et éviter le gonflement du projet.

Comme dans tout projet, la préparation est la clé du succès. Je partage ici certains de leurs processus clés que nous utilisons pour assurer la réussite de la livraison du projet.

Lancement du développement

Avant de vous lancer directement dans le codage d'un nouveau site Web, il est judicieux de vous asseoir de 30 à 60 minutes avec l'équipe de développement pour établir un plan. Idéalement, le Product Owner devrait être présent à la réunion pour répondre à toutes vos questions. Ils auront probablement assisté à toutes les réunions avec les clients et auront une connaissance plus approfondie que quiconque de ce que le site devrait accomplir en termes de parcours utilisateur et de fonctionnalité.

J'espère que vous aurez vu les dessins à l'avance. C'est une bonne idée d'utiliser cette session pour identifier les problèmes que vous voyez et discuter avec l'équipe de la façon dont vous les résoudriez. Par exemple, si le concepteur a opté pour un menu volant hors toile depuis la dernière itération , vous pouvez discuter de la manière dont vous le construiriez. Vous pourriez trouver quelqu'un dans l'équipe qui en a déjà construit un, afin qu'il puisse assumer le travail.

Imprimer les dessins

Cela va de pair avec le lancement du développement, mais cette étape ne devrait vraiment impliquer que l'équipe de développement front-end.

Je pense que c'est une bonne étape à franchir avant de se lancer dans la construction du site, car les impressions peuvent être mises en page pour obtenir une vue plus claire de la situation dans son ensemble. Vous ne pouvez pas le faire facilement en utilisant des applications comme Sketch, Photoshop ou Invision. Vous devrez soit effectuer un zoom arrière pour voir toutes les conceptions, soit vous ne pourrez peut-être voir qu'un seul modèle de page par fenêtre de navigateur.

L'affichage d'une page Web sous une forme tactile peut également vous donner une perspective différente et vous aider à vous concentrer sur des éléments que vous pourriez autrement manquer. Être capable de faire des annotations est également utile.

Chez Hallam, nous avons tendance à annoter nos impressions, puis à les utiliser pour répartir la charge de travail et les coller sur un tableau blanc. Nous nous référons ensuite à eux lors de réunions ultérieures tout au long du processus de construction. Une fois qu'un modèle a été créé et signé, il est supprimé du tableau blanc, ce qui nous donne une vue claire de ce qu'il nous reste à construire.

Évidemment, nous devrions tous minimiser la quantité d'impression que nous effectuons, alors assurez-vous d'utiliser un bac de recyclage une fois que vous avez terminé avec les dessins !

Identifier les éléments communs

L'un des principes que nous avons adoptés ici chez Hallam est que chaque design que nous créons ne doit pas être composé de modèles entièrement sur mesure. Au lieu de cela, ils doivent partager des éléments de conception communs qui peuvent être construits séparément, puis insérés dans les modèles là où ils sont nécessaires.

Je ne dis pas que les modèles de page ne devraient pas contenir d'éléments personnalisés, mais cela ne devrait être le cas que lorsque cela est nécessaire. Par exemple, un site Web avec une page de formation aux interviews radio et une page de formation aux interviews télévisées n'a pas besoin de deux modèles lorsqu'il s'agit essentiellement de pages de « modèles de formation ».

Les éléments communs créent également une meilleure expérience utilisateur, car les gens ne sont pas bombardés de nouvelles choses à découvrir à chaque instant.

Une fois que vous avez défini tous les éléments principaux du site, vous pouvez ensuite les écrire sur un tableau blanc, créer des tickets et les attribuer aux différents membres de l'équipe. Ensuite, lorsque vous assemblez les pages, vous pouvez simplement «insérer» les différentes parties dans les modèles et les créer beaucoup plus rapidement.

Construire d'abord, ou styliser et construire ensemble ?

C'est quelque chose que nous avons expérimenté dans le passé et pour le moment, nous créons et stylisons des modèles en même temps.

Dans le passé, nous avions l'habitude de créer toutes les structures et éléments de modèle de page sans utiliser de css du tout (à l'exception des styles de mise en page associés à Bootstrap ou Foundation). Ensuite, une fois que nous avions construit tout le site, nous passions en revue et stylions tous les modèles et éléments. Cette méthode a certainement du sens du point de vue de la ligne de production. Vous ne voudriez pas peindre la carrosserie d'une voiture avant de l'avoir montée sur le châssis, d'avoir inséré le moteur et d'avoir installé tous les accessoires. Avec cette méthode, vous séparez la fonction du style. Dans la phase de construction initiale, vous souhaitez vous assurer que le site fonctionne d'un point de vue fonctionnel avant de considérer à quoi il ressemble.

Au lieu de cela, nous sommes passés au camp « conception et construction » afin de pouvoir créer un produit livrable. En d'autres termes, nous pourrions être mis en ligne à n'importe quel moment car le site fonctionne et a l'air bien. En effet, avec la méthode "conception et construction", vous construisez toujours le modèle sans style, mais dès que vous avez fini de le mettre en page, vous le parcourez et le stylez. Vous ne le garez pas d'un côté et ne passez pas à la construction du modèle suivant.

L'évier de cuisine de base

Voici quelque chose qui cadrerait avec la méthode « conception et construction ». Cela implique de styliser certains éléments, tels que la typographie, d'ajouter les couleurs de la marque du site et peut-être d'ajouter les styles de bouton au fichier principal settings.scss. C'est incroyable ce que le style de ces éléments peut faire immédiatement sur un site. Vous avez immédiatement un site Web qui ne ressemble plus à un site standard de la Fondation et vous obtenez un réel sentiment de progrès en passant simplement peut-être 30 minutes à écrire quelques règles CSS.

Encadrer le site

Ma préférence personnelle est de styliser l'en-tête et le pied de page dès le début, car cela aide à encadrer le site et à créer un canevas pour continuer à styliser et à construire le site. Le site ressemble davantage au produit fini. Cependant, un site livrable peut toujours avoir une navigation et un pied de page sans style mais fonctionnels.

Conclusion

Nous avons tous nos propres idées sur la façon d'intégrer la conception d'un site Web à partir de Photoshop dans le processus de création et ce qui précède se trouve être la façon dont nous aimons faire les choses.

Une chose que je crois vraiment vitale est de faire un plan avant d'ouvrir votre environnement de développement. Que vous soyez un pigiste travaillant seul ou que vous fassiez partie d'une grande équipe de développement, l'élaboration d'un plan est un moyen sûr de travailler plus efficacement et plus rapidement.

Si vous avez besoin d'aide pour votre développement Web, n'hésitez pas à nous contacter.