Réalisation de la refonte graphique et ergonomique du site marchand Créer mon livre. Créer mon livre est un site de personnalisation de roman en ligne. L’objectif était ici de conserver l’esprit chaleureux que souhaitait voir véhiculer la direction de l’entreprise tout en proposant une approche plus conquérante en terme de e-commerce.

Notre mission s’est également portée sur la refonte du logo ainsi que la réalisation des éléments de marchandising : marque-page, coffret cadeau.

Réalisation du catalogue de la gamme JTR Design 2012 de Samick Guitars. Samick est le 5ème fabricant mondial de guitare électriques et acoustique.

La Gamme JTR designer par JT Ribiloff, figure illustre de custom shop de Gibson, signe ici une gamme complète de guitare au design unique et aux caractéristiques exceptionnelles.

Le Design du catalogue à été accompagné de la refonte de la page d’accueil du site internet de la division guitare de Samick, ainsi que la réalisation du vidéo promotionnelle diffusée lors du salon Frankfurt  Musik Mess 2012 en mars dernier.

La société Promosac Médiprotec est spécialisée dans la fabrication et la commercialisation de produits d’emballages et d’équipements de protection individuelle pour les professionnels de la distribution.

Nous avons réalisé en collaboration avec ID Industry, la nouvelle identité de la marque – logo et charte graphique – ainsi que les supports commerciaux : catalogue papier et site internet de vente à distance.

Réalisation de l’affiche invitation du rendez-vous annuel organisé par Karim Zéribi à Marseille le 25 septembre 2011.

Extraits

Réalisé pour la Compagnie de Phalsbourg, le site internet www.vendome-businesscentre.fr, présente les services premium qu’offre le Business Center installé à la prestigieuse adresse du 22 Place Vendôme.

Place Vendôme Business Center se situe sur la plus prestigieuse place de Paris, au cœur du quartier du luxe et des affaires.

Derrière une façade historique du XVIIIe siècle, Place Vendôme Business Center propose un espace avant-gardiste où la lumière joue sur les matériaux contemporains que sont le verre et l’acier.
Les espaces de travail du Place Vendôme Business Center s’articulent autour d’un espace central éclairé par une verrière zénithale et planté d’un arbre unique et emblématique.

Le mobilier et la décoration résolument contemporains contrastent avec un parquet « Versailles », évocation du prestige classique de la place.

A découvrir sur le site 100 % HTML 5 et sur sa version mobile : www.vendome-businesscentre.fr

Futur village de marques situé près de Grenoble, The Village sera à son ouverture en 2012 le Brand Outlet à l’architecture la plus novatrice en France. Le site internet de présentation du projet utilise largement l’iconographie pour mettre en valeur cette architecture. Réalisé pour la Compagnie de Phalsbourg et Freeport, le site utilise la technologie HTML 5 pour un portage complet vers les smartphone. Le site est complété par une page Facebook.

Certaines boutiques de ventes en ligne, utilisent une interface parfois bohême, parfois trop techno, avec des animations flash ralentissant la navigation, tandis que d’autres utilisent des codes couleurs émettant de mauvais signaux aux consommateurs.

Il y a de nombreux cas, où l’expérience du webdesigner est importante. Le design de l’interface peut-être très belle, attrayante, il risque d’être par contre du point de vue de l’acheteur un vrai cauchemar. Voici donc une liste des choses à faire et à ne pas faire lors de la conception d’un site de vente en ligne. Quelques techniques très simple à mettre en place. L’objectif de ce dernier étant de vendre, il donc important que le taux de conversion soit élevé.

Assurez-vous que votre panier est bien visible

Si le client ajoute un élément à son panier, il veux avoir la certitude que leur article à bien été ajouté.
Donc quelque part dans la page, et durant tout le long du processus d’achat, votre boutique doit avoir un espace listant le nombre d’articles dans le panier permettant de vérifier facilement ce type d’information.

Disposer des données de commande visible et facilement accessible, afin de contribuer à faciliter la commande. Tout au long du processus de navigation le client doit pouvoir valider sa commande via un lien vers la page de validation de sa commande.

Il ne suffit pas d’avoir de simples renseignements sur son panier, il faut qu’il soit visible. L’utilisation de couleurs à fort contraste pour ce type d’information est un bon moyen d’aider le panier à se démarquer.

Optimisez le bouton « Ajouter au panier »

Les visiteurs d’un site et les clients acheteurs réagissent différemment aux boutons d’action et à leur formulation. Par exemple, si votre bouton « ajouter au panier » dit « plus de détail » ou « en savoir plus », l’expérience montre que les clients réagissent pas aussi bien aux appels indirect à l’action.
En revanche, un bouton « ajouter au panier »  ou « acheter maintenant » est un appel spécifique et direct à l’action qui suscite une réaction positive du consommateur.

La couleur est un élément important de la conception du bouton d’achat. Selon le type d’activité, certaines couleurs peuvent déclencher des comportements différents de la part des visiteurs.

Par exemple, le bleu et le vert sont des couleurs douces, qui indiquent des actions de suivi, tandis que le orange et le rouge font baisser les performances du bouton « ajouter au panier ». Utiliser des couleurs en rapport avec le design général de votre site permet de clarifier d’avantage l’appel à l’action.

Simplifier les recherches avec une fonction de remplissage automatique

Pour les sites de commerce électronique, une fonction de recherche est un élément essentiel, permettant au visiteur d’accéder aux produits qui correspond à ses besoins. Plus de 20% des visiteurs de site de vente en ligne préfèrent l’utilisation directe d’une fonction de recherche plutôt que de naviguer dans les catégories du site.

En certaines occasions, les recherches peuvent retourner des résultats corrects ou des résultats erronés si le visiteur n’a pas utiliser les bons mots clés. l’utilisation d’une fonction de saisie semi-automatique dans le champs de recherche fournira un plus grand nombre de recherche gagnante.

Les suggestions de recherche permettant aux visiteur de corriger leur recherche et également un bon moyen de relier le consommateur aux produits sans avoir à repasser par la case résulat recherche.

Clarifiez vos chemins de navigation

Si vous avez trop de catégories, cela peut nuire à la navigation. Toutefois les fly-out menus (les menus affichent leurs contenus au survol de la souris) sont un moyen efficace de garder votre page simple et lisible tout en donnant à l’acheteur la possibilité d’accéder à toutes les catégories, à tout moment.

Ne pas se perdre dans une conceptualisation des catégories et sa présentation. Restez simple dans les éléments de navigation, les acheteurs vous remercierons par un taux de conversion élevé en faisant simple et pratique. Une priorité.

En utilisant un fil d’ariane, les acheteurs peuvent tracer leur chemin de retour et se rassurer sur le processus de shopping pendant la durée de leur visite. Faites un lien entre les catégories et les sous-catégories, ajouter un bouton permettant de continuer le shopping de manière aussi intuitive que possible.

Permettre aux visiteurs de contrôler leur expérience shopping

Tout les visiteurs sont uniques, ils ont également leurs préférences d’achat. fournir des outils qui permettent aux visiteurs de personnaliser la façon dont ils vont parcourir les catégories et les produits dans la boutique, va améliorer leur expérience d’achat et augmenter les chances de vente.

Assurez-vous d’inclure la possibilité de trier les produits par prix, par critiques, les meilleurs ventes, les nouveautés, de fournir une option pour ajuster le nombre d’éléments à afficher par page en sélectionnant des caractéristiques spécifiques.

Fournir un aperçu rapide des produits

Les visiteurs visualisent très rapidement les articles sur un site d’achat en ligne, afin de trouver tout aussi rapidement le produit recherché. Que ce soit par manque de temps, de la vitesse de chargement des pages ou par préférences personnelles. Pour cette raison, l’accès à la fiche détaillée est évitée par certains visiteurs.
En ajoutant un aperçu rapide  à votre catégorie, et aux pages de recherche, allant de la simple image ou à une version plus complexe affichant une fiche signalétique sommaire via un module AJAX, vous pouvez obtenir une attention plus importante du visiteur vers vos produits et leurs caractéristiques.

Nettoyez vos pages produits

L’organisation des pages produits de votre site est une partie cruciale, afin de veiller à ce que vos clients soient attirés par l’information qui est la plus importante pour eux.
Avez-vous déjà pensé où les commentaires des internautes seraient placés sur la page de vos produits? Les commentaires des internautes est une partie importante dans le processus d’achat du visiteur. Ils permettent de donner de la confiance mais cela ne doit pas être la première chose que doit voir l’acheteur.

Plusieurs éléments avec un mauvais processus organisationnel peuvent perturber l’oeil de l’acheteur.

Le premier élément doit toujours être l’image du produit. L’acheteur veut voir avec précision ce qu’il va acheter. A côté de la fiche produit, doit figurer le nom du produit, la description et le prix afin de maintenir l’attention du client. Gardez les éléments comme les commentaires et les liens vers les produits similaires dans une zone plus base de la page.

Indiquez clairement les disponibilités des produits

Pour les magasins en ligne, les niveaux de stocks sont des données en perpétuelles évolution. Une fois que les visiteurs ce sont déterminés sur l’achat d’un produit, ils ont comparés diverses options et parcouru de nombreux sites pour obtenir le meilleur prix. Ils peuvent être frustrés si après avoir ajouté le produit à leur panier, ils découvrent après la validation de la commande, que ce produit n’est pas disponible. Cela peut aboutir à perdre définitivement ce client.

Eviter le mécontentement en donnant une vision en temps réel des stocks, afficher clairement la disponibilité dans la page descriptive du produit.

Affichez les variantes du produit de manière intuitive

Dans de nombreux secteurs, le processus de commande implique la sélection de variables, comme la taille, le coloris. Pour tout éléments qui pourrait nécessiter ce type de choix, soyez aussi explicite que possible. Inclure également des images correspondant aux différentes combinaisons.

Eliminez tout éléments perturbateurs à partir de la page de paiement

Lorsque votre client procède  au paiement de sa commande, vous voulez qu’il parvienne au terme de ce processus. Lors de la conception graphique de l’interface, supprimez les éléments latéraux de navigation pour définir un chemin clair à votre acheteur.

Supprimer tout élément suggestif permettant de continuer à augmenter le volume d’achat. Cette période est crucial et doit être consacrer à la réalisation de la vente.

Une seule page de validation de commande de commande à tendance à avoir un fort taux de conversion. Simplifiez donc le processus de paiement en le rendant simple pour votre client. Sur une seule page, le client doit pouvoir rentrer toues les informations nécessaire à l’achat, à la livraison du produit : l’adresse de livraison, celle de facturation et les éléments relatif à la carte de crédit dans la mesure du possible.

Commander en un clic est un excellente façon de fidéliser un client. Rappelez-vous, une bonne expérience d’achat restera dans l’esprit de l’acheteur, c’est qui le fera revenir.

Le travail quotidien d’un concepteur peut être parfois laborieux, heureusement, notre champ d’action c’est élargi, de sorte que le processus de fabrication d’un site internet est devenu plus simple. De plus de nombreux outils et ressources gratuites sont disponibles sur la toile.
Les wireframes apportent de l’élégance à la conception des maquettes. Elles sont la structure de base d’un site web. Elles sont utilisées pour afficher des concepts de design avec le strict nécessaire, et elles peuvent fournir une perspective utile sur les projets web.
La plupart sont créées avec photoshop ou fireworks, mais certains sites vous permettent de créer des images en fil de fer directement dans votre navigateur.
Dans cet article, nous allons passe ce codage d’une image filaire vers un format HTML et CSS et voir comment elle peut se bonifier tout au long du processus de création.

Pourquoi ?

Pourquoi perdre du temps à dessiner la structure d’un site web? Dans certains cas, il parait inutile de le faire, mais cette méthode vous permettra de vous aider si vous êtes coincé dans la conception de votre site.
Auprès de votre client, que vous affichiez la structure de leur prochain site web peut donner du relief à votre intervention, donner le sentiment de vous contrôlez l’ensemble du processus.
Mais si le design est très basique ou à une structure simple, créer un wireframes n’est peut-être pas indispensable.
Souvent sous-estimés par les webdesigner un wireframes s’avère pourtant bien utile à déterminer les étapes de conception.

Prototypage Wireframes dans le code

Pendant des années, les logiciels Adobes ont été utiles de manière systématique pour la création des Wireframes, mais le web à considérablement changé et est toujours en évolution.
Avec les nombreux standards de codage, l’augmentation de la documentation et l’arrivée du HTML5, nous arrivons à grand pas vers un web commun.
Avec les wireframes, vous pouvez attaquer un projet sous différents angles. Vous pouvez tester la compatibilité avec les techniques de CSS2 dans les navigateurs. Les choses n’ont plus besoin d’être complexes, le wireframes sert simplement de base solide pour commencer à coder.
Partager un contenu devient plus facile avec les wireframes. Vous pouvez héberger tous les fichiers dont vous avez besoin sur n’importe quel serveur web, et vous pouvez configurer un répertoire de démonstration et transmettre directement les mises à jour à vos clients. Apporter des modifications, appliquer des retouches rapidement, via le document CSS. Tout est devenu très simple.

Normaliser voter code pour use vision à long terme

Commencez pour un document HTML correct, dans sa structure et dans ses répertoires. Cette étape pouvait être relativement mise  de côté auparavant mais avec HTML5 cela permettra à votre site web de se développer.
Vous devez tester la compatibilité des systèmes d’exploitation et les navigateurs autant que possibles, et l’armature du prototype vous permettra de le faire de manière idéale, parce que vous avez mis l’accent sur l’organisation de la mise en page du site.
C’est aussi le bon moment pour travailler sur un modèle mobile-friendly

A partir de la structure Wireframes

La meilleure façon de commencer c’est avec une page blanche, car elle vous offre le plus de créativité. Les éléments évidents à inclure dans le code sont en html.

Vous connaissez tous l’importance que peut avoir l’établissement des objectifs avant de commencer tout projet internet.

Nous ne pouvons pas vraiment commencer le projet sans réellement avoir cerné les attentes de notre client, ses objectifs et la cible du site web. En clair nous ne pouvons pas concevoir une proposition efficace sans avoir en main ces éléments.

Alors établir un questionnaire avec un maximum de questions? Le problème d’un questionnaire c’est vos clients sont susceptibles de se précipiter dessus en laissant des réponses inexactes ou incomplètes.
Un questionnaire plus court avec des questions plus approfondies peut relever beaucoup plus sur ce que votre client attend et évitera de glisser sur un terrain éloigné de ses besoins. En une dizaine de questions vous devriez pouvoir demander à vos clients potentiels sur son futur projet. Ces questions sont destinées à la découverte de l’origine de ce que le projet entraînera sans vous obliger à passer une journée avec votre client pour définir les réponses à ses questions.

1/ Pourquoi voulez-vous un site web (ou pourquoi refondre votre site existant)?

Il est important d’obtenir une compréhension des raisons pour lesquelles votre client éventuel veut un nouveau site internet. Certaines entreprises ont des objectifs irréalistes, s’attendent à un nouveau site web pour résoudre comme par magie leurs difficultés ou pour doubler leur volume de leurs ventes. D’autres clients pensent qu’il est indispensable d’avoir un site car toutes les autres entreprises de leur secteur d’activité en possèdent un.
En déterminant la motivation de votre client à créer un site web, vous pouvez mieux le guider dans ce qu’ils devraient également inclure dans leur site et la meilleure façon de le positionner. C’est une question que beaucoup de concepteurs ne parviennent pas à demander. A cause de cela, ils ne peuvent offrir les meilleures solutions à leurs clients parce qu’ils n’ont aucune idée de ce que leur client veut vraiment.
Les clients sont parfois hésitants à communiquer sur leurs attentes. Ils pourraient passer un peu de temps à référencer les sites de leurs concurrents afin de décider ensuite de quoi ils ont besoin. Ils sont parfois négligents en pensant trop fonctionnalités et pas assez avantages. C’est notre travail de designer de les amener à penser sur les avantages qu’auront les visiteurs sur leur futur site.

2/ Quel est l’activité de votre entreprise et qui est-elle?

Il est important de savoir ce qu’est une entreprise avant de commencer à concevoir un site web pour celle-ci. Mais il est aussi important d’en savoir un peu plus sur sa philosophie. Il est important de savoir comment fonctionne cette dernière avant de commencer à « designer ».
Cette question pourra d’ailleurs avoir besoin d’un suivi plus approfondi pour aller au cœur de leur activité. Demander ce qu’ils souhaiteraient que leurs clients pensent d’eux, et qu’elles sont leurs objectifs à long terme.

3/ Qu’est-ce qui distingue votre entreprise de vos concurrents?

Découvrir comment une entreprise se distingue des autres dans son secteur activité donne un aperçu de ce qu’ils jugent important. Vous ne devez pas seulement savoir ce qui les distingue, mais savoir comment votre client décrit cette différence. Cela vous indique ce que sont les valeurs de l’entreprise, et ce qu’il pense de leurs valeurs vis-à-vis de leurs clients.
C’est une formidable source de contenu pour le futur site web mais également dans la conception graphique du site. Si une entreprise a toujours opté pour un positionnement avant-gardiste, son site web devra refléter cette particularité.

4/ Quels problèmes doit résoudre votre entreprise?

Cette question porte sur l’obtention de votre client à penser en termes de bénéfices plutôt que de penser simplement en termes de caractéristiques.
Vous voulez qu’ils se concentrent sur ce que l’entreprise ne fait pas, plutôt que sur les services qu’ils fournissent (bien ou mal). Les clients et les visiteurs se soucient de ce qu’un site ou une entreprise peut faire pour eux, pas nécessairement comment ils le font.
Par exemple, lorsque quelqu’un visite le site d’un comptable, il n’est pas à la recherche d’un comptable, il cherche quelqu’un qui peut les aider à mieux gérer leur argent. Il cherche quelqu’un qui pourra l’aider à économiser de l’argent lors de sa déclaration fiscale ou sur d’autres dépenses.
Le résultat final est-ce qui est important pour eux, non pas comment ils y arrivent. C’est la même chose pour les applications en ligne. Les gens ne se soucient pas des fonctionnalités mais comment l’application va les aider à réaliser leurs besoins. Vous devez vous renseigner auprès de votre client sur leurs caractéristiques, leurs singularités qu’il offre à leurs visiteurs et clients.

5/ Qui sont vos clients ou visiteurs potentiels?

Un site conçu pour faire appel à des professionnels en CRM sera totalement différent d’un site de wedding planner. Il est important que vous ayez une bonne connaissance des clients de votre partenaire. Elle affecte non seulement l’aspect et la convivialité du site, mais peut également affecter l’accessibilité.

6/ Que voulez-vous que vos visiteurs fassent sur votre site?

Les sites web ont tous un objectif différent. Certains sites sont là pour encourager les visiteurs à acheter. D’autres sont là pour fournir de l’information. D’autres encore sont là pour trouver un partenaire, que sais-je encore.

Avant de pouvoir créer un site web efficace, vous devez savoir ce que votre client veut que le visiteur accomplisse sur son site. L’architecture d’un site d’informations est très différente d’un site marchand.

Même su vous avez une idée précise de ce que votre client veut pour ses clients, c’est toujours une bonne idée de clarifier les choses avec lui avant de vous lancer sur le projet.

7/ Quel est votre budget?

La raison  derrière cette question est double. Tout d’abord, vous voulez savoir combien d’argent dispose votre client. Certaines entreprises n’ont aucune idée de combien coûte un site. Vous aurez peut-être besoin de les guider en leur donnant quelques exemples. Il est important de pouvoir parler franchement et sainement d’argent avec de concevoir une proposition.
C’est l’autre raison de poser cette question. Si un client n’est pas disposé à parler honnêtement d’argent, cela indique également de futur souci de communication sur les autres phases de conception du site web. Votre client doit pouvoir communiquer efficacement avec vous.

8/ Pour quand avez-vous besoin de votre site ?

Beaucoup de clients ne sont pas très réalistes sur la durée de conception d’un site internet. Habituellement c’est parce qu’ils ne connaissent pas tout simplement les différentes phases de conception d’un site.

Bons nombres pensent qu’un site est conçu avec un logiciel qui fait tout le travail un peu comme une plaquette sous indesign. Déterminer avec lui un calendrier précis en pointant les différentes phases de conception.

9/ Quels sont vos plans à long terme pour votre site web ?

Un grand nombre de clients pourraient venir à vous et vous dirent qu’ils veulent un site simple, avec quelques pages, un formulaire de contact. Ils n’ont pas un gros budget et ils veulent quelques choses fait rapidement. Ils veulent également que vous vous occupiez de la maintenance et de la mise à jour du site.
Ce qu’ils ne vous disent pas c’est qu’ils veulent mettre en place un site d’e-commerce l’année prochaine pour l’arrivée de leur nouvelle gamme de produits. Ils ne vous disent pas qu’ils veulent un réseau social pour leurs clients ou un blog de sensibilisation à des fins marketing. Et malheureusement, leur site devra être reconstruit l’année suite de A à Z.
Si vous savez ce qu’ils veulent faire dans un avenir proche ou lointain avec leur site, vous pouvez faire des aménagements préventifs lors de la conception du site. Si vous savez que dans deux ans un CMS sera la solution pour leur évolution, vous leur ferez économiser de l’argent ce qui je vous l’assure, est un gage de sérieux et de confiance auprès de votre client.

10/ Qui sera responsable de la mise à jour du site?

C’est une autre question importante à poser pour déterminer l’orientation technologique à prendre. Vous devez connaître également le profil de la personne en charge du site en interne et éventuellement la rencontrer avant de commencer à concevoir le site web.
Le client souhaitera peut-être vous charger de la mise à jour de son site, et si c’est le cas, vous souhaiteriez inclure un contrat de maintenance. Assurez-vous que votre client connaît vos tarifs d’intervention, la limite du contrat de maintenance (heures, périmètre d’intervention).

11/ Qu’est-ce que vous ne voulez pas sur votre site?

Les gens peuvent souvent souligner ce qu’ils n’aiment pas et plus facilement que ce qu’ils aiment. Demandez à quelqu’un ce qu’il préfère manger, cela prendra plus de temps que de savoir ce qu’il n’aime pas !
Pour obtenir une image claire de ce que votre client veut  pour son site, aller à la racine de ce qu’il ne veut pas? Ceci est particulièrement utile lorsque vous avez un client qui utilise le fameux  » je sais ce que je veux quand je le vois ». Commencez par écarter ce qu’il n’aime pas. Parfois cette question finit par révéler ce qu’ils veulent vraiment.