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

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

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.

Voir le site

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

Les cartes de voeux c’est une parenthèse dans mon workflow quotidien de production de sites internet et autres interfaces métiers. Un moment propice à sortir de nouvelles créations éphémères et en même temps un sujet tel un « serpent de mer ».
Il faut vraiment sortir de sa zone de confort avec un tel exercice maintes fois répétés, expérimentés jusqu’à tarir le puit de l’inspiration, car il ne s’agit que de souhaiter les voeux.
Plus les années passent et les technologies évoluant, les voeux on pris d’autres formes (mails, SMS…) je ne sait plus si l’exercice est encore dans les usages, en tous cas l’époque ou l’on pouvait remplir des cartons à chaussures avec les cartes de voeux papier que l’on recevait en début d’année semble derrière nous. Mais quelques clients veulent tordre le cou à cet technologie oblitérant la tradition et souhaitent communiquer à rebours de celle-ci en imprimant de nouveau pour marquer leurs différences. D’autres communiquants titillent la nostalgie de leur clientèle sénior, encore sensiblent au papier. La carte de voeux papier est aujourd’hui déclinée dans une variante e-mailing qui permet un acheminement plus simple et économique, alors que le papier en faisant l’effort d’y inscrire un message personnalisé, témoignera d’un geste plus emprunt d’affectif, qu’un simple envoi dématérialisé.

Carte de voeux pour un opticien

Quelques recherchent pour la Caisse d’Épargne BFC

Présenter son travail et faire comprendre ses intentions n’est pas toujours chose aisée dans la dimension si labile du web. Heureusement la réflexion sur ce sujet a permis de voir émerger quelques outils pratiques dans ce domaine, comme InVision, un service payant en ligne qui donne la possibilité de publier son travail de manière confidentiel mais avant tout collaboratif. InVision s’inscrit même dans une démarche très en amont des maquettes graphiques, car est à l’initiative de la réflexion du projet en proposant un mode Moodboard sous forme de structure Masonry bien connu des férus du réseau social Pinterest.
(Lire la suite…)

Un travail qui conjugue ce que le papier et l’internet peuvent apporter de mieux dans leur compétences respectives. La brochure offre une synthèse des événements et renvoi au site internet pour offrir davantage d’information au travers des vidéos et des photos.
Je trouve que c’est le meilleur mariage pour offrir une communication moderne, chose à laquelle les agences traditionnelles ne pensent pas assez.

Parmi les bonnes résolutions de ce début d’année, il me semblait intéressant d’approfondir mes lectures sur le module Flexbox, car Flexbox est un module, pas une propriété, cela entraîne pas mal de conséquences, entre autres que Flexbox a des propriétés bien à lui.
Je ne vais pas faire ici une démonstration des derniers aboutissements et des opportunités de FLEXBOX, d’autres sites sont des références en la matière. Juste faire le constat que l’utilisation de Flexbox que je gardais pour traiter des problématiques d’affichages mobiles, peut désormais être déployé de manière plus large pour les résolutions Desktop. (Lire la suite…)