Ressources du dimanche (18) : du web en divers

Bonjour à tous, en ce temps de grenouille, voici pour cette semaine du web en divers… Beaucoup de pluie sur nos têtes ces derniers temps, comme une pluie de bonnes ressources trouvées ces derniers jours sans thématique définie. Parmi tous, plusieurs éléments de l’activité frénétique du web ont retenu mon attention. De la créativité, de la performance, du responsive, des CSS…. Différents sujets qui nous permettent de faire un petit tour sur les évolutions en cours. Donc, du web en divers. Bon travail à tous.

Revue web : du web en divers

Je vous propose quelques ressources web pour faire du web plus accessible, plus performant, et qui nous poussent vers l’avant. Quelques articles notamment ont éveillé ma curiosité et je vous les partage ci-dessous, en espérant qu’ils vous seront aussi utiles et vous permettront d’améliorer vos réalisations.

1 – Processus web & créativité avec Bjarne Christensen

Bjarne Christensen est Directeur créatif à l’agence Stupid Studio.com.

Front-end développeur autodidacte, Bjarne Christensen nus raconte ce qu’il a appris pendant les 3 dernières années de travail. Très intéressant !

Voir la vidéo de @awwwards Conference

Conférence Awwwards de Bjarne Christensen-ressources web en divers blog Catepeli

2 – L’effet de distortion avec WebGL

Un effet assez bluffant qui pourra ajouter de l’animation sur nos images. A partir de Web GL, avec les ombres, et notamment le « heat haze distortion ». Il s’agit d’obtenir la couleur d’un pixel dans une texture dans la même position que le pixel en cours de traitement.

Voir le tutoriel de l’effet de distortion.

L'effet de distortion en tuto via Codrops--ressources web en divers blog Catepeli

3 – Les effets d’image, les CSS et leur performance

Quid des effets d’image si à la mode ces derniers temps ? Qu’en est-il donc des mise en oeuvre des solutions à partir du code HTML, le SVG, les filtres CSS et les modes CSS, et surtout de la performance de toutes ces solutions ? Petite revue de ces propositions dans cet article, et se faire une idée.

Lire l’article de Una Kravets

Les performances des solutions CSS pour les images-ressources web en divers-blog Catepeli

4 – Rendre les iframes responsive

Combien de fois ai-je pu me retrouver à galérer pour intégrer une iframe dans mes sites responsive…. Voici un article intéressant qui propose de bonnes solutions pour ce faire.

Lire l’article de Ire Aderinokun

Rendre une iframe responsive-ressources web en divers-blog Catepeli

5 – Les Media Queries verticales

Un article qui répond au tweet de Sara Soueidan concernant les Media Queries verticales. Ce qui nous ramène, notamment, à la problématique des grilles en vertical. Je vous invite à porter une grande attention à ce type de travail.

Lire l’article de Ahmad Shadeed

Les CSS Media Queries en vertical-ressources web en divers-blog catepeli

6 – Les PostCSS pour améliorer les sélecteurs & les Media Queries

Connaissez-vous les Post-CSS ? Il s’agit des post-processeurs CSS. Une ressource qui détient une quantité incroyable de plug-ins. Pas toujours facile de s’y retrouver… Cet article nous guide sur le choix de plug-ins pour optimiser nos CSS, en prenant même en compte les nouveaux sélecteurs du niveau 4 (CSS 4!) ainsi que pour les media queries.

Lire l’article sur les PostCSS

Un petit guide des post-css pour les principaux plug-ins-ressources web en divers-blog Catepeli

7 – Le design pour la vie réelle

Un article inmanquable doit être cité ici, pour le livre de la collection A Book Apart : Design for Real Life. Ecrit par Eric Mezer & Saea Watcher-Boettcher, ce livre est pour moi, un peu la suite du design émotionnel, en abordant la question du contexte, et tout ce qui peut aller au-delà de la simple question de l’utilisateur.
Lire l’article de A List Apart écrit par Kevin Cornell.

Design for Real Life de Sara Wattcher-Boettcher et Eric Meyer-ressources web en divers-blog Catepeli

8 – Le nouveau Google Play

Voici la présentation de la refonte de tout le service en ligne de Google Play. Réalisé par l’agence Flatstudio.
Bien centré utilisateur, cette refonte a permis d’homogénéiser tous les services de la musique aux livres, de perfectionner, structurer et simplifier visuellement toutes les interfaces de ce portail. (la navigation sur la page des catégories). On peut comprendre l’ambition de rendre plus accessible, donc plus vendeur des contenus comme le gaming, le catalogue livres & magazine par exemple.
Je choisis d’en parler ici, car c’est un bon « case study » en UX, UI d’envergure, sur la catégorisation structurelle, la déclinaison d’une couleur identitaire et sa prise de sens dans un ensemble.

Voir la présentation pour la refonte de Google Play & sur Behance

La refonte du Google Play

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Categories:
Tags:
Date:
  • 22/05/2016
Share:
%d blogueurs aiment cette page :