{"id":1701,"date":"2013-07-12T08:50:34","date_gmt":"2013-07-12T06:50:34","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1701"},"modified":"2013-07-13T14:02:00","modified_gmt":"2013-07-13T12:02:00","slug":"des-pixels-et-du-code-70","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-70\/","title":{"rendered":"Des pixels et du code #70"},"content":{"rendered":"
Encore une semaine avec beaucoup de liens pour les designers, graphistes mais aussi int\u00e9grateurs et chefs de projets \u00e0 vous partager. Du c\u00f4t\u00e9 des articles \u00e0 lire on retrouve du wireframe, les sp\u00e9cifications techniques pour faire une site pour les Google Glass, une id\u00e9e de wordkflow Photoshop\/Illustrator que je testerai \u00e0 m’occasion sur du design d’application, ainsi qu’un quizz CSS pour l’\u00e9t\u00e9. Beaucoup de liens pour trouver de l’inspiration, de la jolie typographie avec en bonus un petit tumblr un poil NSFW et de superbes anamorphoses qui vont vous gardez le nez devant l’\u00e9cran un petit moment. Du c\u00f4t\u00e9 des ressources utiles je vous propose entre autre un petit script de validation de formulaires et une s\u00e9lection de grilles responsive. Et pour finir, ne loupez surtout pas le dernier site pour convaincre votre client de l’inefficacit\u00e9 du carrousel (slider) sur sa page d’accueil.<\/p>\n
#UX<\/p>\n
Eye Tracking Study Comparing Mobile and Desktop<\/a> une \u00e9tude comparative d\u2019eye tracking entre la landing page des SERPs Google sur desktop et sur mobile<\/p>\n #Wireframe<\/p>\n How to convince clients to think about content before they think about graphics<\/a> ou pourquoi et surtout comment convaincre son client qu\u2019il vaut mieux travailler avec du \u201cvrai\u201d contenu d\u00e8s que possible<\/p>\n #Google Glass<\/p>\n Google Glass Browser: HTML5 and Responsive Web Design in your head<\/a> quelques informations sur les Google Glass au niveau du support HTML5, des media queries et sp\u00e9cifications techniques<\/p>\n #Gif #Performance<\/p>\n CSS filters, GIFs, and performance<\/a> ou comment m\u00e9langer des GIFs et des filtres CSS (exp\u00e9rimental) sans trop perdre en performance<\/p>\n #Wordkflow #Illustrator #Photoshop<\/p>\n The Modular Canvas: A Pragmatic Workflow for Designing Applications<\/a> le titre est barbare mais l\u2019article parle de workflow de design, et de l\u2019id\u00e9e de cr\u00e9er des \u201cobjets\u201d et patterns de design r\u00e9utilisables sous forme d\u2019 objets enregistr\u00e9s dans des fichiers Photoshop \u00e0 part, et les assembler dans une interface en utilisant la puissance des liens dans Illustrator et les artboards de diff\u00e9rentes tailles. L\u2019id\u00e9e me plait bien, \u00e0 tester sur un projet \u201cdesign\u201d d\u2019interface \u00e0 l\u2019occasion<\/p>\n #Recrutement<\/p>\n 9 Signs You Shouldn\u2019t Hire THAT Web Guy \u2013 2013 Edition<\/a> 9 \u201cpi\u00e8ges\u201d auxquels vous devriez faire attention si vous cherchez \u00e0 embaucher un d\u00e9veloppeur web d\u2019apr\u00e8s David Walsh. L\u2019argument \u201cKnowing \u00ab\u00a0HTML5\u00a0\u00bb is the equivalent of yesteryear’s \u00ab\u00a0Web 2.0\u00a0\u00bb est particuli\u00e8rement vrai je trouve, m\u00eame dans les tutoriels on voit de plus de \u201cbuzzword\u201d HTML5 l\u00e0 o\u00f9 il devrait simplement \u00eatre \u00e9crit HTML.<\/p>\n #CSS<\/p>\n css-quiz<\/a> un quiz CSS pour tester vos capacit\u00e9s et pour le fun<\/p>\n #Freelance vs #Corpo<\/p>\n Histoire d\u2019une rupture colorim\u00e9trique annonc\u00e9e\u2026 <\/a>le retour d\u2019exp\u00e9rience d\u2019Aur\u00e9lien sur 100 jours en tant que prestataire freelance en r\u00e9gie dans une grand entreprise<\/p>\n #UX<\/p>\n What is A\/B testing <\/a>une chouette petite animation pour expliquer ce qu\u2019est l\u2019A\/B testing d\u2019un site web<\/p>\n #Typographie<\/p>\n Holiday-Inn-mural<\/a>\u00a0une peinture murale toute en superbes lettres pour le hall du Holiday Inn<\/p>\n #Typographie #NSFW<\/p>\n fonts-n-boobs.tumblr.com<\/a>\u00a0un tumblr avec des jolies typos, la demoiselle d\u00e9nud\u00e9e, c\u2019est bonus ;)<\/p>\n #V\u00e9los<\/p>\n Cyclemon.com<\/a>\u00a0un joli site plein de couleurs pastelles et de v\u00e9los :)<\/p>\n #Usecase<\/p>\n Defining a new standard for online radio <\/a>un retour sur le nouveau design \u00a0du site Radio 538, g\u00e9nial autant sur la forme que le fond, le usecase est lui m\u00eame design\u00e9 avec des animations, etc.<\/p>\n #Anaphorism<\/p>\n Anamorphosis in Lyon – Guinness Book World Record <\/a>record du monde battu pour cette magnifique fresque sur le sol qui fait plus de \u00a06000m\u00b2<\/p>\n Et un autre article sur Onextrapixel<\/a> qui vous en pr\u00e9sente pleins d\u2019autres, impressionnant. Et pour finir, la petite claque visuelle du bureau en anamorphisme<\/a>, il m\u2019a fallut la vid\u00e9o pour deviner ce qui est faux et ce qui est vrai.<\/p>\n #Clients<\/p>\n 72 Hilarious Posters of Real Design Feedback from Clients<\/a> une s\u00e9lection de retours de clients illustr\u00e9s en poster, tr\u00e8s funs pour certains<\/p>\n #CSS #Tables<\/p>\n Easier user interface development and responsive layouts using CSS tables<\/a> une excellente entr\u00e9e en mati\u00e8re sur l\u2019utilisation du mod\u00e8le tabulaire en CSS<\/p>\n Digging into my slides about Sass <\/a>un retour de Hugo Giraudel sur ses slides \u00e0 la kiwiparty et sa pr\u00e9sentation de Sass<\/p>\n #Typographie<\/p>\n animography.net<\/a>\u00a0des polices d\u2019\u00e9criture anim\u00e9es pour des effets de textes anim\u00e9s \u00e0 utiliser dans After Effect<\/p>\n #Diagrames<\/p>\n simplediagrams.com<\/a>\u00a0une application cr\u00e9\u00e9e sous Adobe Air pour faire facilement des diagrammes explicatifs dans un effet \u201csketchy\u201d<\/p>\n #Responsive #Grilles<\/p>\n 13 Best Responsive CSS Grid Systems for Your Web Designs <\/a>une s\u00e9lection de grilles responsive pour commencer facilement un projet web<\/p>\n #LongShadow #Pas tr\u00e8s utile<\/p>\n Et dans la s\u00e9rie \u201cles tendances \u00e7a nous fait faire des trucs ridicules\u201d, la tendance du long shadow, qui donne naissance \u00e0 des\u00a0kits pour les graphistes qui ne sauraient pas se servir de Photoshop<\/a>\u00a0et pour ceux qui voudraient le reproduire en code,\u00a0un petit plugin jQuery<\/a>\u00a0(rien que \u00e7a) avec plusieurs scripts \u00e0 charger et des box-shadow multiples pour reproduire l\u2019effet. Je pense qu\u2019on arrive au paroxysme du croisement d\u2019une tendance \u201cdesign\u201d et de cette mode de vouloir tout reproduire en CSS (et JS) au d\u00e9triment ici des performances.<\/p>\n #Validation<\/p>\n Parsleyjs.org<\/a>\u00a0un JavaScript pour valider les formulaires<\/p>\n #Gestion de projet<\/p>\n Duetapp.com<\/a> une application de gestion de projet \u00e0 installer sur son serveur avec un design tr\u00e8s \u00e9pur\u00e9 qui m\u2019a l\u2019air simple d\u2019utilisation<\/p>\n #CSS<\/p>\n Direction aware hover effect<\/a> \u00a0un effet au survol qui change en fonction de endroit d\u2019o\u00f9 provient la souris<\/p>\n #UX #Carousel<\/p>\nInspiration<\/h2>\n
Les tutoriels de la semaine<\/h2>\n
#Sass<\/h3>\n
Des ressources utiles<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les d\u00e9mos sympas et impressionnantes<\/h2>\n
Et s’il devait n’en rester qu’un ?<\/h2>\n