Quel workflow utilisez vous pour la création de vos sites ?
On vous fait rentrer dans notre intimité ! Celle de notre workflow, de nos habitudes de travail et par conséquent des outils que nous utilisons, au quotidien, sur nos projets clients.
Adobe XD
Adobe XD est une solution d’UX/UI design complète pour la conception de sites web ou applications mobiles.
C’est le premier soft que nous utilisons.
Il nous permet de créer, mais aussi de partager facilement nos prototypes interactifs entre designers et développeurs, avec, pour la partie développement des informations capitales telles que les couleurs de la charte que nous avons choisit, les fonts, leur taille, leur espacement etc.
Local by fleewheel
Une fois le design validé, nous passons au développement en local !
Pour être honnête, j’ai longtemps travaillé sur des sites de productions en ligne, sur des serveurs de destination, avec un simple coming soon actif.
Mais bien évidemment que c’est une erreur à éviter !
Pour des raisons de référencement, mais aussi de cohérence de lancement de site. En effet si pour vous, c’est une v1 ou une version beta, pour les nouveaux visiteurs, votre site est en ligne et ils n’auront pas d’indulgence particulière.
Il faut donc s’assurer en amont que les différentes coquilles ou bugs divers soient réglés avant la mise en ligne.
Mais je dois avouer que mes expériences passées dans le développement en local, furent (très) décevantes, que ce soit avec XAMP ou sous MAMP.
Puis vint : Local by Flywheel ! Tadaaaa ! Le Saint Graal du développement en local.
Soft disponible sur Windows et Mac et qui plus est, gratuit ! Les sites sont simulés grâce à des machines virtuelles et sont regroupés sur une seule fenêtre, extrêmement claire.
Très simple d’utilisation, on installe son CMS WordPress en un clic, avec la possibilité de modifier sa version de PHP ou encore la gestion du SSL.
Une fois votre version de site en locale bien avancée, vous pouvez même générer un lien online pour vos clients, comme si ce dernier était déjà en ligne.
Et l’intérêt est double lorsque vous souscrivez à leurs offres d’hébergement ! En effet une fois votre site finalisé, la migration vers leur host se fait en un click ! Compliqué de faire plus simple !
Elementor
Sur la partie développement, nous avons fait un choix fort. Celui d’abandonner complètement les templates premium wordpress et l’accumulation de plugins.
Nous avons opté pour LE seul page builder capable de nous donner la liberté que l’on recherchait depuis pas mal de temps, pour laisser s’exprimer nos designs.
Pour les avoir tous essayé (Visual composer, Divi, Beaver, themify) aucun ne va aussi loin en étant aussi intuitif qu’Elementor. (Dans notre réflexion une autre solution était en balance: Webflow mais nous reviendrons dessus lors d’une prochaine publication. 🙂
Elementor est donc ce que j’aurais tendance à appeler un Game changer ! Que ce soit dans le monde des pages builder, mais également dans l’approche globale, que nous autres développeurs, avons, de la création de site.
De plus, c’est un seul écosystème, un seul plugin, pour construire l’ensemble de vos pages, passant du header, au footer, des slides, ou des formulaires de contact etc – vous évitant donc l’utilisation de nombreux plugins, qui génèrent souvent des problèmes de compatibilité et donc des solutions à l’arrivée, pour vos clients, assez instables.
Photoshop, Illustrator, Premiere Pro, After Effect
Bien évidemment la suite adobe est au coeur de notre activité, devenue incontournable dans toutes nos étapes de création.
Imagify & TinyPng
Parmi les réflexes à avoir quand on construit un site internet, il est impératif de se soucier du poids de ses pages.
En effet, le poids de vos pages aura une incidence directe sur la vitesse de votre site et par conséquent sur votre référencement. (voir notre article sur comment accélérer votre site WordPress)
Il est donc capital de redimensionner et de compresser vos images avant de les uploader sur votre site.
Pour notre part, nous utilisons 2 sites en ligne, qui remplissent parfaitement ces deux tâches.
Sizzy
Aussi important que la vitesse de vote site, il est crucial de nos jours, d’avoir un site complètement responsive !
Pour valider notre travail sur cet aspect, nous utilisons ce service en ligne : Sizzy.
“Sizzy est un outil très simple d’utilisation qui vous permet de tester l’affichage de votre site, sur des écrans de taille différente. De l’iPhone 4 à l’iPhone 7+, ou encore sur iPad et Nexus.”
Et la grande différence avec les sites qui proposent des services équivalent, c’est que vous aurez la possibilité de naviguer dans votre site sur chacune des vues proposées.
Font face Ninja
Le choix des fonts est une étape compliquée car subjective. Trouver l’inspiration ailleurs n’est donc pas un crime et peut vous aider à définir LA font de votre futur site.
FontFace Ninja est une extension qui s’installe sur Chrome et qui permet d’identifier les fonts utilisées sur les sites web ainsi que leur taille, simplement en les survolant avec votre curseur.
Typekit
Toujours côté font, nous utilisons énormément Typekit qui est un service d’abonnement à des polices de caractères que vous pouvez synchroniser sur ordinateur ou utiliser sur votre site Web, proposé par Adobe.
Si, comme nous, vous êtes abonnés à la Creative Cloud, vous avez déjà accès à Typekit. Il vous suffit de vous connecter à typekit.com à l’aide de votre identifiant Adobe ID et à chercher des polices.
Vous pourrez ensuite les synchroniser avec vos Apps Adobe ou créer un kit qui vous permettra de les utiliser sur votre site internet.
Unsplash
L’importance du choix des images n’est plus à prouver. Que ce soit sur l’aspect graphique ou simplement en matière de Seo, il est devenu donc primordial d’avoir des images de qualité.
Notre compagnon de route dans ce domaine se nomme Unsplash.
“Unsplash est une banque d’image libre de droit, composée de photographes pros ou amateurs, qui proposent des photos de grande qualité.”
Bien que libre de droit, je vous encourage à créditer ces derniers lorsque vous utilisez leurs photos.
Nous utilisons également la banque d’image d’Envato Elements qui nécessite toutefois un abonnement payant.
Il existe bien évidemment plusieurs banques d’images gratuites en ligne, mais ces 2 là nous suffisent amplement.
Mailchimp, Active Campaign
Lorsque nous créons la partie graphique, nous pensons, en amont, l’aspect purement marketing. En effet, il est impératif pour un site de pouvoir transformer ses visites. La transformation passe par une prise de contact via votre formulaire ou par la collecte d’e-mail (opt-in).
Nous intégrons donc systématiquement Mailchimp à nos projets de site, sous forme de formulaire de souscription à votre mailing liste ou encore dans un process de mail contre du contenu à valeur ajoutée.
Ce que vous pouvez voir en action en bas de notre article sur “Comment accélérer votre site WordPress” :
Plus ponctuellement nous utilisons également :
Page ruler – permet de mesurer les dimensions ainsi que les positions de n’importe quel élément d’une page web.
ShiftClick – Permet de récupérer des images qui ne seraient l’être avec un simple click droit.
Color Hunt – est un site qui vous aide à trouver l’inspiration en vous proposant des palettes de couleurs qui vous aideront dans le choix de votre set couleurs.
Banque gratuite d’Icons
https://thenounproject.com/
https://pngtree.com/
https://fr.freepik.com/
Timeyourweb tracker – Vous passez trop de temps sur les projets de vos clients ? ne savez pas dire stop aux demandes ? Cet addon vous permettra de calculer le temps effectif passé sur un site.
Screenflow – Nous créons parfois des tutos vidéos pour nos clients et Screenflow est ce qui fait de mieux dans le domaine.