Ressources du dimanche (06) : revue de web

Les vacances approchent à grand pas ! Parfois cette période est creuse, parfois pas du tout, et la production est sous le feu pour finir les projets ou pour anticiper les grands congés…. Le web lui, poursuit sa course folle, toujours aussi dynamique et en forme. Plus de ressources, d’innovation et de partage de connaissances, je vous en propose quelques pépites. Bonne lecture pour cette revue de web !

Revue de web

1 – DareBoost

Travaillant actuellement pas mal sur l’optimisation des pages web, je voudrais partager avec vous mon expérience avec DareBoost, une application web très bien faite pour améliorer nos performances web.

Pour éviter d’avoir dans les résultats de recherche Google ce petit tag « slow » très négatif pour nous autres designers front-end, DareBoost peut s’avérer être un allié stratégique et très utile. En effet, il vous assigne un score de performance en vous donnant des clés pour améliorer celui-ci. Via une liste de priorités à traiter, vous pouvez alors agir de manière très spécifique sur plusieurs leviers allant du traitement de vos images aux boucles avec JQuery, ou encore la sécurité et le référencement. De ce fait, j’ai pu apprendre à améliorer mon code  et même à solutionner un problème lié à une attaque de type clickjacking.

Lien vers le site DareBoost.

Outil DareBoost testé par Catepeli

2 – Comprendre les CSS3 Flexbox

Préparons nous au mieux pour travailler avec la propriété CSS flexbox. Très attendue, presque salvatrice pour nos projets en responsive, la mise en page en mode flexbox nous permet de travailler différemment nos positionnements. On va flotter de manière nouvelle ! Jake Rocheleau nous explique clairement comment faire, son article est complet et bien descriptif.

Lien vers l’article de Jake Rocheleau

 Article sur les flexbox de Jake Rocheleau

3 – Sass et la typographie responsive

Un autre article intéressant pour la gestion de la typographie  sur nos sites en responsive avec Sass.  Comment optimiser vos maps (tableaux de données) et spécifier par chacune de vos largeurs les propriétés de vos polices. A remarquer, James Steinbach traite la grille verticale (avec le line-height) ce qui est, en soit, user friendly et très (très) recommandé pour régler le rythme de la typographie sur nos pages web.

Lien vers l’article de James Steinbach.

Article de James Steinbach sur la typographie responsive avec Sass- blog de Catepeli

4 – Packs d’icônes

Quelques icônes d’esprit vacances de Smashing, symas, gaies en couleur, en filaires et en black, alors à vos UI !

Lien vers l’article pour les Smashicons du site Smashing Magazine.

Icones-Smashicons- ressources du blog de Catepeli

5 – Les outils design de Google

Construire des prototypes natifs sur nos appareils ? C’est ce que nous propose Google via son nouvel  outil Pixate. Je vous propose ici de lire l’article relatif, je ne l’ai pas encore testé, mais encore en recherche d’un outil fluide, efficace et non « grosse machine » pour prototyper mes interfaces, je pense qu’il peut être intéressant de tester les outils qui sont mis à disposition (surtout quand ils sont gratuits). Considérant Google comme un exemple en terme de design UI et d’interaction (avec le material design), cela peut s’avérer intéressant : j’attends de voir surtout pour les UI mobile en terme d’interactivité. Fera-t-il mieux que Invision ?

Lien vers l’article de Google Design. Lire aussi l’article « table ronde » de Amber Bravo.

designing_with_google_via _catepeli

6 – Le sens caché des logo

Et comme les vacances avancent à grand pas, voici une ressource de culture design : tout savoir sur les logos connus et moins connus.  C’est ce que nous livre ce site, pour plus de 75 logos qui rythment notre quotidien. Plutôt une bonne idée que de retrouver l’origine du logo, l’histoire de la société, le designer, ou encore la police (font) utilisée.

Lien vers l’article sur le site designhill.com.

Capture du site designhill.com pour les logo fact

 

 

Categories:
Tags:
Date:
  • 26/07/2015
Share:
%d blogueurs aiment cette page :