Du modèle à la conception personnalisée de commerce électronique

Avez-vous déjà porté un costume ou une robe sur mesure ? La plupart des gens ne le feront pas, sauf pour quelques moments particuliers de leur vie. Pour la plupart des occasions, ils choisiront une sélection dans le rack, et ce choix sera adapté à quelques endroits. Un ourlet par-ci, une pliure par-là, et vous aurez un magnifique vêtement fonctionnel. Mais à quelques reprises dans votre vie, vous pourriez avoir la chance d'avoir un tailleur talentueux qui commence à partir du rouleau de tissu. Ils prendront vos mesures, vous parleront de la pièce que vous voulez, et chaque point qu'ils feront aura un but, un objectif en tête. C'est essentiellement la différence entre un modèle de site Web et un site Web personnalisé. Un modèle peut être retiré du rack, quelques ajustements effectués et être un site parfaitement fonctionnel. Mais une conception personnalisée de commerce électronique prend plus de réflexion, plus de temps et peut être parfaitement adaptée à la marque que vous souhaitez montrer au monde.

Je vais vous expliquer ce que je veux dire en utilisant 1Digital Agence par exemple. Après tout, nous ne sommes pas parfaits. Nous aussi, nous pouvons être aspirés par la solution rapide d'un modèle prêt à l'emploi. Nous avons un site sœur appelé Genius eCommerce . C'était un blog de l'industrie sur WordPress depuis un certain temps, mais il y a plusieurs mois, nous l'avons changé en un site d'agence parlant spécifiquement de nos services de marketing numérique de commerce électronique. Lorsque nous avons fait ce pivot, nous voulions obtenir quelque chose le plus rapidement possible, et nous avons donc utilisé un modèle WordPress. Au fur et à mesure que nous travaillions avec le site, nous avons constaté que toutes les choses dont nous avertissons nos clients lorsqu'ils envisagent un site modèle, comme l'optimisation de la conversion, la vitesse et la cohérence de la marque, devenaient des problèmes pour Genius eCommerce. aussi bien. Nous avons donc décidé de prendre une dose de notre propre médicament et de donner à Genius eCommerce une conception personnalisée de commerce électronique ascendant. La différence est incroyable.

Le gabarit

Le modèle est une conception WordPress/Woo-commerce. Comme vous pouvez le voir, ça a l'air bien. Nous avons utilisé certaines de nos polices et couleurs de marque pour le rendre visuellement cohérent avec le 1Digital placer.

Nous avons également utilisé les mêmes packs d'icônes pour le connecter davantage au 1Digital l'image de marque.

Nous avons étoffé le modèle avec des sections de développement personnalisées pour mettre en évidence certains de nos clients et études de cas.

Et voila! Un site modèle parfaitement fonctionnel, opérationnel très rapidement.

Notre responsable de compte SEO, Colin, a été le premier à remarquer certains problèmes. "La vitesse du site a été le premier problème que j'ai remarqué", m'a dit Colin en décrivant son audit SEO du site. "Les images n'étaient pas correctement optimisées et les scripts tiers n'étaient pas chargés sur le site de la manière la plus efficace." Au-delà de cela, le site commençait à voir des classements Google. Nous voulions nous assurer que les pages sur lesquelles nous travaillions si dur pour rediriger les visiteurs allaient être engageantes. « Le site n'avait aucune personnalité, il n'avait aucun mordant », m'a dit Colin.

Feuille de route pour un nouveau design

La première étape de toute conception personnalisée de commerce électronique que nous réalisons avec nos clients consiste à établir une feuille de route. Nous examinons les sites que le client aime et essayons de comprendre pourquoi ils travaillent pour cette industrie et quel est le message essentiel que le site doit transmettre. Pour 1Digital Agence dont nous avons l'essentiel et l'étendue de toute notre activité, mais Genius eCommerce se concentrait uniquement sur la branche marketing de ce que nous faisons. "L'idée était de se concentrer sur une chose vraiment spécifique, et donc le design devait être vraiment simple", Art, 1Digital 's lead designer, m'a dit. Pour nous inspirer, nous avons examiné l'interface utilisateur plate utilisée par Google.

Art voulait également jouer sur l'identité de la marque en utilisant le terme « génie ». « Je voulais lui donner un côté académique, cérébral. Pour faire le lien avec l'idée de génie », m'a dit Art. "Comme si vous lisiez un article universitaire."

Création d'un nouveau logo

"Un nouveau site devrait avoir son propre logo", a déclaré Art. Les logos sont une base incroyablement importante dans le monde du design. Lors du démarrage d'un nouveau design personnalisé pour un client, nous nous inspirons de son logo concernant sa palette de couleurs, son style graphique et le ton de sa marque en général. "L'idée du logo est ce qui a solidifié pour moi la façon dont je voulais m'interfacer avec le reste du design", m'a dit Art.

Un bon logo doit avoir un élément visuel intéressant, quelque chose qui capte l'œil. Un bon logo pourra également exprimer visuellement quelque chose sur le message de la marque. Vous pouvez voir ci-dessous une partie de l'évolution qui a conduit à la création du nouveau logo que nous avons décidé pour Genius eCommerce .

Vous pouvez voir comment certains des graphismes envisagés par Art se sont réunis dans la version finale. Le diagramme atomique, représentant le génie, et le chariot, représentant le commerce électronique, ont été fusionnés pour l'élément graphique du logo. C'est la partie du design qui communique visuellement le message de la marque. Votre cerveau comprend déjà ces deux symboles bien connus à un niveau inconscient. Il lit le logo une combinaison des deux concepts de base. Aussi, notez le fait que l'électron en rotation dans l'atome se double du "i" pointillé dans le mot génie. C'est cet élément visuel intéressant qui capture votre œil, même si vous ne le reconnaissez pas au début.

Palette de couleurs

Les couleurs utilisées dans le logo définissent la palette des couleurs utilisées sur tout le site. Ils sont employés dans différents domaines pour des effets différents.

Vous pouvez voir ci-dessus comment le bleu sarcelle et le rouge du logo sont utilisés pour mettre en évidence les différents éléments d'action sur la page. Les deux couleurs sont utilisées pour créer une hiérarchie des informations. Le rouge/orange est plus vif et plus agressif, il est donc utilisé avec plus de parcimonie sur tout le site. Lorsqu'il est utilisé, c'est pour attirer l'attention sur les actions les plus prioritaires comme « commencer » et « demander un devis ». La sarcelle est légèrement plus douce et est donc utilisée pour les éléments sur lesquels nous voulons toujours attirer l'attention, mais pas autant que l'appel direct à l'action. Des éléments comme « notre entreprise » et « notre réputation ».

La sarcelle est également employée dans les en-têtes de page. Remarquez comment, en utilisant la couleur, les en-têtes de page sont divisés en un titre principal et un sous-titre tout en réussissant à rester sur une seule ligne.

Le nouveau site a plus que deux couleurs, bien sûr. Pour les autres endroits où nous avions besoin d'une touche de peinture, nous nous sommes référés au 1Digital palette de marques. C'est quelque chose que chaque marque devrait avoir. Une palette de marque est un ensemble de lignes directrices sur la façon dont la couleur et d'autres éléments de conception graphique doivent être utilisés. De cette façon, ils sont faciles à maintenir cohérents sur tous vos différents supports, du Web à l'impression, en passant par les t-shirts de l'entreprise.

Ces couleurs supplémentaires dans la palette de la marque ont été utilisées sur le site pour différencier les sections. "J'utilise la couleur pour indiquer à l'utilisateur qu'il se trouve dans une section différente du site Web", a déclaré Art. Comme vous pouvez le voir dans les pages ci-dessous, le violet dans l'en-tête correspond aux pages de la plateforme, tandis que l'orange correspond aux canaux de marketing numérique.

Vous verrez que le principal 1Digital La couleur de la marque de l'agence, le bleu clair de notre logo, n'est enregistrée que pour un seul emplacement. Il est utilisé dans les sections qui renvoient à notre site Web principal.

La raison de la conception personnalisée du commerce électronique

Beaucoup de clients potentiels m'ont demandé : « pourquoi attendre une conception personnalisée alors qu'un modèle peut être déployé beaucoup plus rapidement et à moindre coût ? À mon avis, la raison n'a jamais été aussi claire que ce que nous avons vécu nous-mêmes avec Genius eCommerce . Un modèle peut être stylé. Vous pouvez ajouter des polices et des couleurs, apporter quelques modifications ici et là, mais au final, vous apportez de petites personnalisations à un site qui a été créé pour quelqu'un d'autre. Lorsque vous passez par un processus de conception personnalisé de commerce électronique, chaque décision en cours de route, aussi petite soit-elle, amène quelqu'un à réfléchir à votre marque et à votre message. De quelque chose d'aussi gros qu'un logo à aussi petit que la couleur à utiliser dans les boutons du pied de page. La somme totale de chacune de ces petites décisions prises en cours de route est inquantifiable. Je parle tout le temps de la façon dont les sites personnalisés peuvent être mieux optimisés ou convertis plus facilement, mais en fin de compte, c'est le principal avantage qui est difficile à expliquer tant que vous n'avez pas suivi le processus au moins une fois. Avec un projet de design personnalisé, vous ne portez pas un costume mal ajusté. Vous portez une tenue de soirée qui a été adaptée à votre forme à chaque étape du processus. Ce look personnalisé est la façon dont vous allez faire votre première impression sur chaque personne qui trouve votre site Web.

Si vous languissez sur un modèle depuis trop longtemps, il est peut-être temps d'envisager de passer à quelque chose de personnalisé. Nos concepteurs experts en commerce électronique écoutent votre histoire et vous aident à la raconter avec un site Web. Contactez-nous sur 1Digital Agency et découvrez comment un processus de conception de commerce électronique personnalisé peut libérer un nouveau potentiel pour votre site Web.

Télécharger le PDF