Affiner et standardiser votre processus de conception et de développement Divi

Publié: 2017-06-02

Bienvenue dans la partie 4 sur 5 de notre série Organiser et prendre le contrôle de votre entreprise de conception Web Divi. Dans cette série, nous explorons plusieurs tactiques, outils et stratégies qui vous aideront à surmonter les difficultés quotidiennes auxquelles nous sommes tous confrontés en tant que concepteurs Web Divi. De l'optimisation de vos routines quotidiennes à la création de systèmes et de processus, en passant par la meilleure expérience de conception Web pour vos clients ; nous fournissons des éléments et des étapes exploitables que vous pouvez mettre en œuvre immédiatement dans le but de vous aider à prendre le contrôle de votre entreprise de conception Web Divi, que vous soyez un indépendant en solo, une petite agence ou une équipe à distance.

Créer un processus standardisé pour concevoir et développer un site Web Divi est crucial pour votre productivité et votre bien-être en tant que concepteur de sites Web. Bien qu'un projet de conception de site Web se déroule rarement exactement comme prévu, si vous avez un processus et un chemin à suivre, cela vous fera gagner du temps et vous gardera sur la bonne voie pour respecter vos délais lorsque les projets prennent de l'ampleur.

Affiner et standardiser votre processus de conception et de développement Divi

Hier, nous avons fait référence à un article précédent sur la création d'une page de démarrage pour aider à préparer vos clients. Dans cet article, nous avons expliqué comment présenter votre processus à vos nouveaux clients. Voici comment je présente mon processus à mes clients :

MISE EN PAGE ET CONCEPTION – Une partie importante et chronophage de la conception d'un site Web réside dans la phase de planification et de mise en page du processus. Je créerai d'abord le plan du site (hiérarchie des pages/menus) du site Web pour approbation, puis je concevrai la page d'accueil et une sous-page (ou plus sur demande) pour approbation.
DÉVELOPPEMENT – Une fois la mise en page et la conception du site approuvées, je poursuis la conception de l'ensemble du site, des pages et j'ajoute toutes les fonctionnalités et plug-ins. Nous nous assurerons que votre site a fière allure et qu'il fonctionne correctement sur tous les appareils et navigateurs Web avant de passer à l'étape finale.
MODIFICATIONS ET RÉVISIONS - Une fois que le site est prêt pour la révision finale, vous pourrez réviser chaque page et nous pouvons apporter des modifications détaillées jusqu'à ce que le site soit complètement révisé. Nous vous demandons de revoir TOUTES les pages pour vous assurer que l'orthographe, la grammaire, les adresses et les informations sont correctes avant de mettre en ligne.

Maintenant, en tant que collègues concepteurs de sites Web, vous savez que la conception et le développement d'un site Web ne se résume pas à un simple processus en 3 étapes. Le mien est en fait plus un processus en 20 étapes, mais j'ai constaté que si je surcharge mes clients avec tout ce qui est impliqué, ils réfléchiront souvent trop aux choses lorsqu'il s'agit de fournir du contenu. Voici à quoi ressemble mon processus de conception/développement Web Divi un peu plus en détail :

Créer une mise en page et une mise en page de navigation pour approbation
En-tête et pied de page conçus
Page d'accueil conçue
Sous-page(s) conçue(s)
Envoyer au client pour approbation
Révisions sur l'en-tête, le pied de page, la page d'accueil et la sous-page
Une fois approuvé, créez les pages restantes
Créez des modèles pour des sections standardisées de sites Web et des pages récurrentes telles que des galeries, des projets, des produits, etc.
Implémentez toutes les intégrations pour les inscriptions à la liste de diffusion, les médias sociaux, les widgets, etc.
Créer et tester tous les formulaires de contact
Ajustez et optimisez la conception pour une utilisation mobile et réactive
Saisissez les paramètres de référencement nécessaires
Vérifiez la grammaire et le contenu du site
Vérification croisée des navigateurs et corrections de bugs
Envoyer pour examen final
Effectuer toutes les révisions finales du client
Créer un tableau de bord client personnalisé et une vidéo de formation (si nécessaire)
Supprimer les plugins, images et outils inutiles
Site de sauvegarde et enregistrer localement
Site de lancement

Ce processus est souvent décomposé de manière encore plus détaillée, mais il s'agit d'une structure de base de tout ce qui est impliqué dans chacune de mes constructions, qu'il s'agisse d'un site de style brochure de 5 pages ou d'un site de 50 pages avec des événements, du commerce électronique, etc. tout cela sous forme de liste de contrôle et c'est une bonne pratique pour moi de m'assurer que je n'ai rien oublié avant de lancer un site. Créer une liste de contrôle comme celle-ci et y ajouter un calendrier peut être un moyen très efficace de vous assurer que votre processus de conception/développement est conforme aux délais de votre projet.

Ok, maintenant que vous avez une idée de la façon dont j'ai organisé mon processus de conception/développement interne, entrons plus en détail sur la façon dont vous pouvez optimiser VOS processus de conception Web Divi.

1) Création d'un processus de conception standard

L'une des meilleures questions et discussions récurrentes que je vois dans les groupes Facebook Divi est quelque chose du genre « Comment concevez-vous votre site Divi ? Est-ce que vous le simulez dans Photoshop ou Illustrator? Créez-vous un wireframe de base pour que le client l'approuve ? Plongez-vous simplement dans Divi et le faites-vous en direct ?

Il n'y a bien sûr pas de bonne ou de mauvaise façon de procéder. J'ai découvert que, quelle que soit la manière dont vous choisissez votre processus de conception, il doit faire 3 choses :

Cela doit fonctionner pour vous ou votre équipe
Il doit fonctionner pour votre client
Il doit vous faire gagner du temps

Lorsque je démarre un nouveau projet, j'ai tendance à créer un croquis très approximatif sur papier et à plonger directement dans Divi pour concevoir l'en-tête, le pied de page, la page d'accueil et toutes les sous-pages nécessaires à l'approbation initiale.

Voici pourquoi:

Cela fonctionne pour moi - Traditionnellement, la conception Web commence par un processus filaire étendu via papier ou un programme tel qu'Adobe Illustrator pour concevoir et montrer au client pour approbation avant même d'aller en ligne. Cette méthode fonctionne pour certains et peut être une voie très efficace, en particulier si vous êtes en équipe et que vous confiez votre conception à un développeur pour qu'il code. Mais une fois que Divi est arrivé, cela a complètement changé mon processus. Je plonge maintenant directement dans Divi après avoir en tête et sur papier une structure de base et un concept visuel.
Cela fonctionne pour mes clients - j'ai constaté que les clients aiment voir un aperçu en direct réel qu'ils peuvent voir sur un navigateur bien plus qu'une maquette plate. Parfois, le flux et la convivialité d'un site peuvent se perdre dans une maquette d'une page, alors que lorsqu'un client voit le site en direct dans un navigateur, cela conduit souvent à un "facteur wow" beaucoup plus important. Ils peuvent voir les survols, les effets de défilement et le flux de la conception du site, ce qui donne une bonne première impression et souvent moins de modifications et de révisions.
Cela me fait gagner du temps – je peux changer les choses si rapidement avec CSS et mes mises en page et paramètres enregistrés dans Divi qu'il serait insensé pour moi d'avoir à faire ces révisions dans photoshop ou illustrateur puis dupliquer les mêmes dans ma feuille de style et les paramètres Divi. Je gagne énormément de temps avec les révisions et la conception initiale en faisant les choses en direct en utilisant inspect element directement sur mon site de développement Divi. Je peux également apporter des modifications et des révisions sur les sites souvent pendant que je suis au téléphone avec les clients. Vous pouvez ressembler à une véritable rock star du web designer lorsqu'un client vous demande de changer quelques choses et que vous le faites au téléphone avec eux ou en quelques minutes.

Encore une fois, ce processus de conception est ce qui fonctionne pour ME en tant que magasin individuel. Avec une équipe, le processus doit fonctionner pour toutes les personnes impliquées. Mais la plupart des concepteurs de sites Web indépendants sont un mélange de concepteurs/développeurs, alors effectuez le processus qui vous convient, fonctionne pour vos clients et vous fait gagner du temps !

2) Utiliser la bibliothèque Divi et votre travail précédent

L'une de mes fonctionnalités préférées de Divi est la possibilité d'enregistrer vos mises en page et conceptions de pages. Cette fonctionnalité change la donne et peut vous faire gagner un temps considérable lors de la conception et du développement avec Divi. Dans un récent épisode de DiviChat, le panel parle de l'enregistrement de plusieurs modèles de conceptions de pages, puis de la suppression de ceux qu'ils n'utilisent pas sur un nouveau site. Parlez d'un moyen de gagner du temps! Si vous pouvez proposer une série de mises en page et de modèles de page et que tout ce que vous avez à faire est d'importer et de modifier le contenu, les couleurs et les images, vous économisez des heures de conception et de développement potentiels.

Voici 3 conseils rapides que je vais offrir pour sauvegarder les éléments de la bibliothèque Divi et le travail précédent :

Enregistrez votre CSS - J'ai une "feuille de style principale" avec la majorité du code CSS que j'ai écrit pour certains modules, sections de page et classes que je souhaite imiter sur d'autres sites. De cette façon, je peux l'ouvrir et extraire le code que je souhaite utiliser sur le projet en cours. Cela fait des merveilles pour gagner du temps au lieu d'avoir à réécrire des lignes de CSS encore et encore.
Créer des éléments de bibliothèque Divi – L' enregistrement de mises en page en tant qu'éléments de bibliothèque peut être un excellent moyen d'enregistrer votre travail dans des pages ou en tant que site complet pouvant être dupliqué et facilement modifié avec des images et des couleurs. Si vous ne savez pas comment procéder, suivez ce tutoriel.
Exporter des fichiers json - J'aurai souvent des clients qui référenceront une page d'un site précédent, donc au lieu d'avoir à recréer cela à partir de zéro, j'exporterai souvent cette page de l'ancien site, je l'importerai sur mon nouveau site et ajustez les styles et les images en conséquence ! Encore une fois, un autre excellent moyen pour Divi de nous faire gagner du temps dans le processus de conception et de développement. Plus de détails à ce sujet ici si vous n'êtes pas familier.

3) Révéler votre site Web au client

C'est l'un de mes aspects les plus importants, mais négligés et sous-estimés de la conception de sites Web à mon avis. Tout repose sur une première impression et sur ce que le client pense initialement lorsqu'il voit votre nouveau design. Si vous faites une maquette ou une structure filaire, la première impression sera naturellement légèrement décevante jusqu'à ce que le client voit une version en direct en ligne qui est totalement compréhensible et, encore une fois, peut fonctionner en fonction de la complexité de votre processus, de la conception au développement. Comme vous l'avez vu dans mon processus ci-dessus, je prépare l'en-tête et le pied de page et conçois la page d'accueil dans son intégralité avec généralement une sous-page ou plus en fonction des besoins du projet, puis je l'envoie pour examen. Cependant, la façon dont j'envoie au client ma conception initiale a récemment changé, avec un grand effet.

J'avais l'habitude d'envoyer simplement le lien de développement en direct afin que le client puisse voir le site lui-même, à sa guise. Cela a plutôt bien fonctionné, mais j'ai trouvé que la rare chance d'avoir un aperçu en personne ou sur Skype, ces premières impressions étaient encore meilleures et pourquoi ? Je crois que c'est parce que le client a entendu ma vision lorsqu'il a vu le site et cela m'a permis de lui expliquer mes idées de design, de couleur et d'esthétique sans qu'il se fasse son propre jugement au préalable.

Maintenant, je crée une vidéo d'aperçu rapide (généralement moins de 5 minutes) de moi les promenant sur le site ! Cela a été reçu avec des commentaires extrêmement positifs jusqu'à présent. Est-ce que cela prend un peu de temps, mais je trouve que cela en vaut la peine pour avoir une première impression incroyable de mes clients.

Voici une capture d'écran de la façon dont je présente un nouveau site à un client sur Basecamp :

J'enregistre mes vidéos de présentation avec Screenflow pour Mac. Je télécharge ensuite la vidéo sur ma chaîne Vimeo et en fais une vidéo privée. À partir de là, comme vous pouvez le voir dans l'instantané ci-dessus, j'envoie ce lien vidéo au client avec une courte description, une liste à puces de ce à quoi s'attendre ensuite et l'URL réelle du site de développement que le client peut voir sur son navigateur après avoir regardé la vidéo.

Voici quelques-unes de mes récentes vidéos d'aperçu si vous souhaitez voir comment je présente les nouveaux sites aux clients :

Vidéo d'aperçu du site Web 1

Vidéo d'aperçu du site Web 2

4) Gestion des révisions et des modifications

Enfin, une partie importante de votre processus de conception et de développement sera la façon dont vous gérerez les révisions et les modifications des clients. Si vous concevez des sites Web depuis un certain temps, vous savez que ce processus peut prendre du temps. Les réunions en personne, les appels prolongés et les e-mails aléatoires avec peu de changements ici ou là peuvent faire perdre énormément de temps au processus d'édition et de révision.

Il existe plusieurs façons de lutter contre cela. J'essaie de faire en sorte que tous mes clients publient toutes leurs révisions (par page si nécessaire) dans Basecamp où je crée une discussion pour les révisions. J'accepterai un appel téléphonique ou une rencontre en personne si nécessaire, mais seulement après l'envoi des modifications initiales de la manière dont je souhaite les recevoir en premier. Je précise également TRÈS clairement que je ne veux pas recevoir de révisions une par une, sur plusieurs jours par e-mail. Je dis à mes clients si possible de les récupérer sur quelques jours et de les poster tous d'un coup ou comme beaucoup de mes clients semblent aimer le faire, de les organiser tous dans un .doc ou .pdf.

Pour en revenir au post précédent de cette série et à mon entretien avec les gars d'Artillery Media, ils ont un processus très simplifié pour les révisions dans lequel ils demandent à leurs clients d'envoyer leurs modifications dans un document sur Google Drive afin qu'ils puissent ensuite apporter les modifications tout à la fois. C'est aussi un gros gain de temps. L'astuce ici est de faire en sorte que le processus d'édition et de révision fonctionne pour vous de la manière la plus rapide possible. Et juste un conseil, chaque client a sa propre façon de faire les choses, c'est donc votre travail de les guider sur la façon dont vous voulez des révisions et des modifications

En clôture

Eh bien, j'espère que ces idées et mon processus de conception/développement vous ont encouragé à créer les vôtres si vous n'avez pas déjà mis en place un processus standardisé ! Si vous avez des processus qui fonctionnent bien pour vous, n'hésitez pas à nous le faire savoir dans les commentaires ci-dessous !

Next Up: Comment gérer efficacement plusieurs projets de conception Web Divi

Lorsque vous avez plusieurs projets en cours, il est difficile de tous les gérer tout en restant créatif, en jonglant avec les délais et en répondant aux attentes des clients. Dans notre dernier article de cette série, nous parlerons de certaines façons dont vous pouvez gérer efficacement tous vos projets de conception Web Divi afin que vous puissiez équilibrer l'intégration de nouveaux clients, la conception, le développement et le respect des délais que vous avez fixés. dehors pour frapper. Tout en restant créatif et frais. Jusque là!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !