Le guide pratique du workflow de conception Web
En tant que concepteur Web qui fait partie d'une équipe de développement Web plus importante, il est fréquent que vous ayez à gérer de nombreuses tâches simultanément.
Après avoir créé les premières ébauches de conception pour votre client et attendu maintenant les premiers retours, vous êtes probablement très enthousiasmé par la manière dont votre travail sera perçu par le client. Avec tant de choses à surveiller dans un délai strict, il est facile d'être dépassé par la complexité du projet. La conception d'un site Web ou d'une application comporte de nombreuses étapes. Ces étapes varient légèrement d'une personne à l'autre, mais le flux de travail de base reste le même.
Avec un bon flux de travail mis en place et avec quelques outils et logiciels, vous pouvez facilement garder le rythme et éviter de longs cycles de rétroaction.
Voici un guide pratique pour un workflow de conception que vous pouvez utiliser pour augmenter la productivité de votre équipe.
Phase de préparation: gestion des attentes
Que vous mainteniez simplement un site Web existant ou que vous conceviez un nouveau site Web à partir de zéro, vous et votre client êtes tenus de gérer les attentes de chacun.
Bien que votre principale responsabilité soit de comprendre en détail les exigences du projet, la responsabilité du client est de comprendre comment chaque choix effectué influe sur la portée et le budget du projet, avec votre aide.
Informez votre client de la technologie requise, du budget requis et du délai requis pour terminer le projet. En approchant votre projet de manière organisée, vous économiserez du temps, des efforts et un budget.
Phase 1: Définition des objectifs du site
C'est probablement la phase la plus importante de tout projet de conception lorsque vous définissez les objectifs, définissez la structure globale, décidez du contenu et attribuez les rôles et les différents produits livrables tout au long du projet. En mettant en place une planification appropriée dès le début, vous vous épargnerez beaucoup de peine plus tard.
Ici, vous travaillez avec le client pour établir le calendrier, le budget, le calendrier, les besoins techniques, le style visuel et la structure du contenu pour le public cible.
Lors de la gestion des attentes et du démarrage de votre projet de conception, je vous recommande de faire appel à une gestion de projet simple et conviviale pour suivre les objectifs, les budgets, les tâches et les calendriers définis.
Trello
Trello est un outil de gestion de projet bien connu et facile à utiliser. Il vous permet de créer différents tableaux pour différents projets. Avec Trello, vous pouvez obtenir un aperçu rapide des tâches en cours et de votre carnet de commandes.
Asana
Asana est génial à faire et à suivre les tâches. Vous pouvez même collaborer avec des collègues et des clients au sein d'Asana, ce qui vous permet de maintenir la transparence de votre projet et la mise à jour de tous.
Camp de base
Un autre outil de gestion de projet bien connu est le Camp de base . À l'instar des outils mentionnés ci-dessus, il vous permet, à vous et à votre équipe, de suivre tous les livrables de projets et de rester sur la bonne voie.
Phase 2: Développer la structure du site et se salir les mains
La structure du site constitue l'épine dorsale du site. Il agit comme un guide de référence pour l'équipe pendant toute la durée du projet. Utilisez des organigrammes pour montrer le flux de la structure.
Sitemap: la création d'un sitemap est essentielle pour comprendre l'organisation du contenu. Il est important de continuer à mettre à jour le plan du site après chaque modification. Si vous ne le faites pas, les choses vont se compliquer.
Wireframe: le contenu du site doit être corrigé avant la mise en place du design et des graphiques.
Les wireframes sont des croquis de basse fidélité du site Web ou de l'application mobile. Les wireframes permettent de créer des espaces réservés au contenu, d'établir des priorités pour les éléments de la page et de documenter les exigences. Cela devient très important dans la prochaine phase.
Balsamiq
Balsamiq est un outil de fil de fer graphique qui aide votre concepteur à créer de nombreux designs, puis à organiser les widgets préconfigurés dans un éditeur de glisser-déposer pour permettre à l'équipe de visualiser et de suggérer des modifications simultanément.
Moqups
Moqups est facile à utiliser, possède de nombreuses fonctionnalités de glisser-déposer et ne nécessite pas de plug-in de navigateur pour fonctionner. Vous pouvez facilement organiser une présentation de conception pour votre client à l'aide de cet outil.
Invision
Invision vous permet de télécharger des conceptions de travail et de créer des interactions en utilisant des zones sensibles, comme toute application réelle. L'une de ses fonctionnalités hors du commun est la possibilité d'envoyer des conceptions cliquables sur votre téléphone via SMS, soulignant l'importance de pouvoir tester vos conceptions vous-même dans le bon contexte.
Notism
Notism est l'un des meilleurs outils utilisés par les équipes créatives pour accélérer leur processus de travail. Ceci est une plate-forme de collaboration de conception et de vidéo. Il aide les professionnels de la création à partager leur projet et à recevoir des commentaires via des croquis et des notes. Notism permet également de créer différentes versions d'un écran. En basculant facilement entre différents écrans, vous pouvez avoir une meilleure vision du développement de votre projet.
Phase 3: Conception et production
Dans cette phase, assurez-vous que le concepteur travaille avec le programmeur pour assurer la mise en œuvre d'éléments de conception cohérents.
Une fois que le client a approuvé les ébauches de conception, le concepteur et l'équipe graphique travaillent sur l'aspect et la convivialité du site. La compression, la transparence, l'utilisation efficace de la couleur et du design se combinent pour créer des graphiques Web efficaces.
La phase de production est un point où le site Web réel est créé. Une fois la conception et la mise en page du site achevées, le site entre dans la partie ingénierie du travail. Ici, vous allez prendre tous les éléments graphiques individuels du prototype et les utiliser pour créer le site fonctionnel réel.
Github
Votre code changera une fois, deux fois et probablement beaucoup plus que cela. Github vous permet de travailler efficacement avec différentes versions de votre site Web. L'outil brille vraiment lorsque vous travaillez avec une équipe de développeurs. C'est la collaboration de code à son meilleur.
CodePen
Celui-ci est charmant. C'est un éditeur en ligne pour tous vos besoins HTML, CSS et JS. Il se combine facilement avec Github et est bien sûr collaboratif. L'idée est de pouvoir tester des morceaux de code et de trouver une solution appropriée sans altérer le reste du code.
Phase 4: Test, collecte des commentaires et correction des bogues
Aucun projet n'est vraiment sans défauts. Et bien que les tests soient également réalisés tout au long du processus de développement, il y aura toujours des bogues. Et nous ne parlons pas seulement des bogues logiciels. Même un design peut être buggé.
Donc, en ce moment, il est important de commencer à tester comme un fou. Le dépannage précoce permet d'économiser beaucoup de temps et d'efforts. Il est essentiel que toutes les personnes participant à la création du site participent aux tests. Cependant, le test devrait être un processus agile. Une fois que vous avez lancé le site ou que vous êtes en train de le lancer, de nombreuses personnes vont commencer à l'utiliser et fournir des commentaires sur le site.
Et même si vous déployez tous les efforts possibles pour tester le site, vous aurez raté quelques bugs ou de nouveaux bugs apparaîtront avec le temps. Il est essentiel que vous obteniez des informations sur les bogues et les problèmes dès que possible. Si vous pouvez demander à vos utilisateurs de vous les signaler, vous êtes en or.
Jeu d'utilisateurs
(Divulgation complète: je travaille pour Usersnap.) Nous avons construit Jeu d'utilisateurs comme outil visuel de suivi et de retour d'informations sur les bogues facilitant le travail de test logiciel. Il permet aux clients, aux visiteurs du site et à leurs collègues de signaler des bogues, des demandes de modification ou simplement des commentaires sur votre site Web. Pour les tests de site Web manuels, Usersnap est également une valeur sûre, car elle accélère votre processus de test grâce à des outils faciles à utiliser.
Donc, pour récapituler ...
Les projets de conception nécessitent de nombreuses personnes pour travailler ensemble. La rétroaction constante est l'une des parties les plus importantes de la livraison d'un projet à la demande du client et dans les délais spécifiés. Avec tout ce fouillis et le fait que les sites Web deviennent de plus en plus complexes chaque jour, les outils en ligne facilitent la tâche des personnes impliquées et obtiennent des commentaires instantanés de leur part.
L'intégration de ces outils dans un flux de travail solide vous aide vraiment à atteindre vos objectifs dans un domaine déjà concurrentiel.
L'image sélectionnée, image de travail d'équipe via Shutterstock.