Un petit article, pour ceux qui tardent à se mettre à Flexbox (Flexible Box) en production, et si il fallait commencer par un argument massif pour convaincre les retardataires, il suffit de regarder du côté de Bootstrap 4 qui embarque désormais cette spécification au sein de son framework. Même si on aime pas changer ses habitudes, c’est un petit effort pour bien des avantages, notamment, la prédictibilité de la mise en page face aux différents écrans, on est plus à la merci d’un float mal luné ou tout autre positionnement récalcitrant. Dans de nombreux cas, le modèle Flexbox offre une amélioration du modèle de boîte. Fini les problèmes de fusion de marge et les éléments auxquels il faut apporter le contexte BFC (Block formatting Context) pour gérer les flottants à qui on en demandait beaucoup face à se contexte des mobiles pour lesquelles ils n’avaient pas été pensé. (suite…)

En ce début 2018, l’arrivée d’InVision Studio nous invite a nous pencher sur ce phénomème que sont les outils de prototypage qui explosent depuis quelques temps, notamment depuis l’arrivée des contextes mobiles, on voit fleurir de nouveaux services connexes aux outils de webdesign historique tels que Photoshop ou Illustrator.

Pour qui ?

Même si les termes de concepteurs UI et UX peuvent faire penser aux webdesigner et graphistes web que ces outils ne sont pas pour eux, il n’en ai rien bien au contraire. Ces nouveaux logiciels sont partis du constat simple, que les outils de PAO n’était plus adaptés au flux de travail et à la création web. Notamment par le fait qu’ils sont limités à présenter des mockups statiques sans possibilité de mise en contexte ou d’intéragir avec elles ou même encore de laisser des commentaires en live. Côté intégrateur, il y a peu de passerelle entre les maquettes produites avec Photoshop et le code HTML, même si le logiciel de retouche d’image a fait des efforts pour exporter et extraire des informations pouvant servir aux codes CSS.
(suite…)

En cette fin d’année 2017, je peux faire un premier retour d’expérience sur l’année que je viens de passer à faire ma VAE (Validation des Acquis de l’Expérience) avec au bout l’obtention d’une licence pro webdesigner. Peut-être avez-vous déjà entendu ce terme de VAE ? sans savoir vraiment de quoi il retournait à travers cet acronyme très universitaire.

Qu’est-ce qu’une VAE ?

La VAE vous donne la chance et la possibilité d’obtenir un diplôme ou une certification correspondant à votre expérience professionnelle. Vous pouvez ainsi valoriser les compétences acquises et l’expérience accumulée au fil des années au même titre que si vous les aviez acquises par une formation équivalente. Cette notion est fondamentale, car il faut bien comprendre qu’il n’est jamais trop tard pour passer un diplôme. Le temps des études n’est pas un lieu du passé clos ou on ne peut se retourner qu’avec regret. De nombreuses formules existent pour se remettre en selle et continuer à progresser si on est motivé.
Tout comme le CPF (Compte personnel de Formation) la VAE est un droit individuel inscrit à la fois dans le Code du travail et dans le Code de l’éducation
(suite…)

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 pour 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.

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.

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…)

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… (suite…)

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…).

(suite…)

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.

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.

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