Bienvenue...
Graphiste, web designer, intégrateur web, illustrateur publicitaire, explorateur du web, curieux des nouvelles technologies... ce blog est pour moi l'occasion de montrer mes réalisations professionnelles, et des recherches plus personnelles. L'interêt d'un blog c'est aussi de partager ses découvertes sur le web.

Y’a pas le feu au lac

Un site peut avoir plusieurs vies, plusieurs évolutions à la fois fonctionnelles et graphiques pour de multiples raisons, et souvent objectives, car on récolte tout un tas de renseignements au fil du temps, par exemple qui sont vos utilisateurs et comment ils réagissent face au site. C’est pourquoi on peut avoir beaucoup d’envies au départ d’un projet et parfois il faut se laisser le temps et le budget de les implémenter au fil des saisons en regardant les tendances et en écoutant battre le coeur du site. Un bon moyen de mesurer le comportement du visiteur et d’augmenter le CTA, c’est évidemment l’A/B testing pour les sites e-commerces, un concept qu’Amazon n’a cesser d’explorer au fil du temps faisant de sa plateforme un objet de R&D constant et avec quel succès !. Toute chose étant égal, on peut aussi a son échelle vérifier les règles d’un bon uX. Notamment que les sliders maintes fois utilisés sur les sites e-commerce, ne sont pas toujours vos meilleurs amis. Si ils représentent de bons outils de communication, ils convertissent peu en réalité.
C’est pour cette raison qu’ont pourra leur préférer des mises en avant plus visibles et plus directes.
Notre client YPLFL en a profité pour faire évoluer quelque peu sa page d’accueil avec de nouvelles mises en avant et un nouveau coloris.
yplfl

Carrefour Pro

Des activités commerciales l’enseigne Carrefour n’en manque pas et parmi celles-ci figure une activité destinée aux comités d’entreprise et aux salariés afin de leur permettre d’acheter des cartes cadeaux. Cette activité est géré par le service Carrefour Pro qui nous a demandé de concevoir un nouveau modèle de site permettant l’achat de cartes cadeaux physiques et dématérialisées. Ces cartes sont également personnalisables par le truchement d’un module conçu à cet effet.
Pour ma part, ma mission a été de travailler sur l’interface graphique de cette plateforme et de réfléchir aux contingences UX. Afin d’inscrire le site dans la logique de l’identité de la marque, je me suis appuyé sur les guidelines existant pour concevoir ce nouveau service.
carrefour-pro

Gulp le couteau suisse de l’intégration web

gulp
Comment faire aujourd’hui pour ce passer de tels outils lorsqu’on prétend travailler de façon professionnel dans le domaine du web. Je parle des task runner et en particulier de « Gulp », mais je ne suis pas sectaire peut-être certains préféreront « Grunt », c’est la même philosophie.

Mais c’est quoi un task runner ?

Les sites web répondent aux mêmes exigences que n’importe quel produit, celui d’être fabriqué selon un process de qualité itératif et complexe (minifier les CSS et JS, optimiser les images…) bref une multitude d’opérations ennuyeuses et chronophages. Vous l’aurez compris Gulp représente un gain de temps vous évitant de vous balader sur plusieurs sites pour par exemple minifier vos CSS… C’est en cela que les Task Runner sont devenus très importants dans un projet web. Il faudra pour cela se familiariser avec la console ou le terminal pour lancer les lignes de commande, mais c’est un apprentissage qui sera payant in fine. (suite…)

Non un webdesigner n’est pas un graphiste (pas que !)

Le titre est explicite je crois, un petit billet d’humeur pour expliquer ce qu’est le métier de webdesigner si mal connu finalement pour qu’on vous sorte des clichés du graphiste qui fait du web, ou alors vous coller une étiquette de webdesigner par ce que faite vaguement des maquettes pour des sites, par ce que c’est la mode en ce moment. Mais d’où tu parles comme il dise dans les médias… Je parle d’une année riche consacrée à ma VAE (Valorisation des Acquis par l’Expérience) pour obtenir une licence de webdesigner, je parle comme membre de jury délivrant une certification de webdesigner au Greta, je parle après avoir pratiqué ce beau métier depuis plus de dix ans. Je me permet donc d’expliquer à mes jeunes collègues et moins jeunes ma vision du métier. Mais comme un schéma vaut mieux qu’un grand discours, voici ma vision du métier…webdesigner (suite…)

Territoires numériques

Le GIP e-bourgogne a entamé en 2017 un travail de refonte de ses outils de communication en décidant de communiquer sur sa nouvelle identité visuelle des Territoires numériques. Renouvelant sa collaboration avec l’agence i-com, j’ai pris en charge la direction artistique de ce nouveau projet. Nous avons décliné cette nouvelle charte graphique en axant sur la représentation des nombreux services qu’offre les Territoires numériques aux collectivités et aux élus. La communication s’est faite aux travers de nombreux supports, en commençant par un plaquette commerciale, puis des annonces presse, et enfin la préparation des supports pour les salons (Roll-up, comptoir, mur d’images, flambeau…).

territoire-numerique (suite…)

SmartTraffik

Vous avez surement déjà entendu l’expression « web-to-store » qui désigne le comportement d’achat par lequel le consommateur effectue une recherche d’informations sur Internet avant d’aller effectuer son achat en point de vente. C’est dans ce domaine que Smart Traffik apporte son expertise depuis 2012 à ses clients à travers des solutions omnicanal.
Un intelligence désormais nécessaire dans le marketing afin d’apporter des solutions personnalisées aux consommateurs et ne plus l’envisager comme un client lambda mais répondre et anticiper ses besoins. La solution passe évidemment par une connaissance plus ciblée des consommateurs à travers le retail et le digital.

Une nouvelle approche graphique s’appuyant sur les nouvelles guidelines de la charte client. Un travail particulièrement enrichissant car une fois n’est pas coutume, le métier de Smart Traffik est assez connexe à celui des agences web et nos objectifs sont assez proches.

smartTraffik

CSS transition and diagonal website design

Le sujet du billet présente ici un cas d’école intéressant, puisqu’il s’agit des effets de transitions que l’on peut retrouver dans beaucoup de webdesign actuel, malgré la tendance naturel a produire des affichages de type bloc ou tuile pour reprendre le concept de Microsoft.

Il existe aujourd’hui beaucoup de possibilités pour produire des graphismes allant au delà du scope de la simple ligne horizontale ou verticale notamment grâce à l’exploitation du format SVG qui permet tous les graphismes possibles. Ce format est désormais bien supporté par les navigateurs modernes et c’est à mon sens le seul capable d’offrir toutes les permissions en matière de graphisme tout en s’adaptant au différents écrans. La solution abordée ici est assurément la plus répandue en webdesign car elle permet de produire une mise en page dynamique en travaillant les perspectives des lignes au travers des diagonales de construction.

diagonale-design

Une mise en garde est à faire devant ces maquettes engageantes et des graphistes qui adorent se faire plaisir en produisant de beaux web design, mais sans prise en compte des contingences liées au web, celles-ci ne représentent souvent que des exercices de style sans autre finalité que de mettre en avant un book et un savoir-faire. En effet la pratique d’un bon web design interdit d’aller trop loin dans les maquettes sous peine de les rendre irréalisables. Si les sites ont tendances a adopter les mêmes codes graphiques, c’est aussi parce qu’ils représentent une simplicité de mise en oeuvre pour nos clients qui devront gérer in fine leur site, le graphisme web ne peut pas être pensé comme un one shot mais de façon pérenne.

Néanmoins il y a des possibilités de proposer des maquettes intéressantes pour peu que l’on ai anticipé la mise en oeuvre technique. Une des solutions loisibles passe par l’utilisation des sections ou chaque zone de contenu est une strate indépendante des autres mais qui de manière contigu constitue une page web cohérente.

Chaque section démarquée par une ligne horizontale, peut-être retravaillée pour offrir une alternative au travers de formes géométriques diverses. L’avantage d’agir sur les sections et en bordure des contenus c’est que ceux-ci ne seront pas directement impacté par le graphisme, a rebours d’une photo prise dans une forme triangulaire.

Du côté de la CSS

D’un point de vue pratique, il existe différentes méthodes pour contraindre la bordure de la section a s’afficher en diagonale. Pour faire simple j’ai identifié cinq grandes méthodes qui sont aussi concomitantes avec les derniers aboutissements du web.
Ce qui fera la différence entre ces solutions c’est leur adaptation au contexte : le responsive en premier lieu mais aussi les éléments graphiques adjacents (une image en bordure…) .

#1

Cette première méthode est finalement presque la plus simple à imaginer et techniquement facile à intégrer. Il s’agit d’une image placée en position absolute en bas du premier bloc. Mais assez vite on en voit les limites : l’image intégrée dans le dom, n’est évidement pas responsive et l’angle présenté augmente en réduisant la fenêtre du navigateur tout en détériorant la qualité de l’image et l’on voit le pixel apparaître

https://jsfiddle.net/icom/d2k28kyr/ 

#2

Une méthode a priori plus moderne avec l’utilisation d’une balise SVG et d’une bonne gestion du responsive pour peu que l’on travaille avec des hauteur en vw se heurte néanmoins au problème de l’image en background

https://jsfiddle.net/icom/w8xvb2n7/

#3

Cette solution valide tous les points : on a une bordure net et responsive et un affichage correct de l’image de fond. Mais la méthode CSS clip-path n’est pas prise en compte par IE et Edge

https://jsfiddle.net/icom/we3fj1hz/1/

#4

la méhode Skew() permet d’opérer une distorsion en étirant chaque point de l’élément d’un certain angle. Si la méthode répond bien au responsive, en revanche l’élément déformé ne change pas le périmètre physique de la boite

https://jsfiddle.net/icom/qa7rx2yu/3/

#5

Enfin une méthode pas vraiment nouvelle, mais qui fonctionne partout, il s’agit de l’utilisation d’un pseudo-élément :after ou :before. L’affichage de cette élément se superposant aux sections en place permet de masquer l’image

https://jsfiddle.net/icom/w9cjfmo1/10/

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

UX design et webdesign

Parmi les apprentissages du webdesign, il se trouve un domaine qui est peu exploré en réalité, il s’agit de l’UX design, même si on a l’impression de le voir partout, de n’entendre parler que d’expérience utilisateur comme un terme marketing devenu à la mode comme une logorrhée qui n’en finit plus à l’instar du Flatdesign qui le rejoint de près. Mais derrière l’écume des choses se trouve des concepts qui ne sont pas forcément récent comme on aimerait le croire mais qui valent la peine qu’on s’y intéresse pour peu qu’on ait la curiosité de son métier.
Comme beaucoup de web designer j’ai fait de l’UX design sans m’en rendre compte et l’ergonomie pouvait me paraître une histoire de bon sens, donc pas la peine d’y voir une martingale mystérieuse comme on veut parfois nous la vendre. (suite…)

La Jardinerie Sonofep

La jardinerie SONOFEP située à Saulon-la-Rue s’offre une taille de printemps pour permettre de renouveler ses rameaux et donner des fleurs en abondance…on l’espère
L’agence i-com a réalisée cet outil de communication permettant à la fois la mise à jour d’un catalogue produit très riche et la commercialisation de certains produits pour le public et les professionnels.
SONOFEP
Voir le site

Retour d’expérience comme membre du jury au titre de web designer

Il y a quelques mois, j’ai été contacté par le Greta de Dijon pour être membre du jury. Cette sollicitation soudaine et inattendue pour moi, arrivait à un moment propice ou j’avais envie d’essayer autre chose que la routine quotidienne. Pour la première fois cette année, le Greta a ouvert ses portes à un nouveau titre professionnel dans le domaine du webdesign, complétant ainsi la matière graphique avec du web. Il a donc fallu que le Greta trouve de nouveaux jury compétents dans cette discipline, c’est ainsi qu’on ma demandé de participer à l’aventure.
Un mini formation m’a été délivrée afin de me renseigner sur ce qu’on attendait de moi et également pour me faire découvrir les nouvelles dispositions relatives au travail de jury. Le ministère du travail dont dépend le Greta a en effet durci les conditions de l’examen afin d’enrailler le nombre de recours que les candidats avaient déposés ces dernières années. Étant donné la nouveauté de cette certification au titre de web designer, le Greta ne disposait pas de jury déjà aguerri à ce nouveau titre. J’ai donc été très sollicité pendant deux semaines à la fois sur le Greta de Dijon et Beaune. (suite…)