{"id":1432,"date":"2013-04-12T07:52:39","date_gmt":"2013-04-12T06:52:39","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1432"},"modified":"2013-04-12T07:52:39","modified_gmt":"2013-04-12T06:52:39","slug":"des-pixels-et-du-code-57","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-57\/","title":{"rendered":"Des pixels et du code #57"},"content":{"rendered":"
Cette semaine, quelques tutoriels pour les graphistes amoureux de typographie et illustrateurs, des ressources oldschool et retro \u00e0 t\u00e9l\u00e9charger gratuitement mais \u00e9galement des outils en ligne pour g\u00e9rer la couleur, du plugin jQuery pour cr\u00e9er un datepicker ainsi qu’une galerie de paterns pour Windows Phone. Du c\u00f4t\u00e9 des articles \u00e0 lire, beaucoup d’ergonomie et exp\u00e9rience utilisateur que ce soit pour les formulaires, les animations ou la simplification des interfaces en g\u00e9n\u00e9ral. Du c\u00f4t\u00e9 des articles plus orient\u00e9s int\u00e9gration vous retrouverez une r\u00e9flexion sur les media queries ainsi qu’un excellent article qui explique en quoi cr\u00e9er une alternative en CSS au comportement natif des listes d\u00e9roulantes <select> est une mauvaise id\u00e9e et impossible. Enfin de l’inspiration avec des cartes de visite et de la typographie. Bonne lecture :)<\/p>\n
#Illustrator<\/p>\n
How to Create a Stylish Deer with Brushes and Graphic Styles in Adobe Illustrator<\/a> un tutoriel qui permet de cr\u00e9er un daim styl\u00e9 mais surtout de jouer avec diff\u00e9rents types de \u201cbrush\u201d et d\u2019apprendre \u00e0 en cr\u00e9er soi m\u00eame dans<\/p>\n #Typographie<\/p>\n Learn<\/a> un tr\u00e8s bel article qui explique le processus pour cr\u00e9er de la typographie \u00e9crite \u00e0 la main<\/p>\n #HTML5<\/p>\n datalist <\/a>un petit aper\u00e7u de ce qu\u2019il est possible de faire avec l\u2019\u00e9l\u00e9ment datalist en HTML5<\/p>\n #Font<\/p>\n Cr\u00e9er une police d\u2019ic\u00f4nes facilement \u00e0 partir d\u2019illustrations vectorielles<\/a> mon tutoriel qui explique comment cr\u00e9er une police d’\u00eecone personnalis\u00e9e \u00e0 partir d’exports .SVG de vos r\u00e9alisations sous Illustration en utilisant le service en ligne IcoMoon<\/p>\n #Colors<\/p>\n hex.colorrrs.com<\/a> un petit outil en ligne pour convertir les couleurs hexa en rgb()<\/p>\n #Bookmarklet<\/p>\n min.artequalswork.com<\/a> un bookmarklet qui nettoie tout du site (images de fond, couleurs) pour garder la typographie. Utile pour les tests et pouvoir lire un blog un peu trop charg\u00e9.<\/p>\n #Freebies #Vectors<\/p>\n retrovectors.com<\/a> une collection de ressources vectorielles et polices r\u00e9tro \u00e0 t\u00e9l\u00e9charger gratuitement<\/p>\n #Responsive navigation<\/p>\n responsive-nav.com <\/a>un petit plugin de navigation responsive sans d\u00e9pendances (jQuery ou autre)<\/p>\n #Windows<\/p>\n windowsphonepatterns.net<\/a> un site qui rassemble des pattern de design et d\u2019interraction pour Windows Phone (existe aussi en version Android androidpatterns.com<\/a>)<\/p>\n #DatePicker<\/p>\n Best jQuery Date Picker Plugins for Input Fields<\/a> \u00a0m\u00eame si l\u2019 <input type=\u201ddate\u201d> HTML5 est de mieux en mieux support\u00e9, une solution de replis en JS peut \u00eatre n\u00e9cessaire, l\u2019article liste quelques plugins jQuery qui vous permettront de cr\u00e9er un date-picker facilement.<\/p>\n #UX<\/p>\n UX: Handling forms<\/a> une petite vid\u00e9o o\u00f9 l\u2019auteur explique comment un utilisateur non habitu\u00e9 \u00e0 l\u2019informatique a interagi avec son formulaire de login et propose diff\u00e9rentes solutions<\/p>\n A shorthand for designing UI flows <\/a>la complexit\u00e9 de faire communiquer \u00e0 l\u2019\u00e9quipe les \u201cflows\u201d ou ce qu\u2019il se passe entre les diff\u00e9rents \u00e9crans d\u2019une application et comment \u00e0 l\u2019aide de simples sch\u00e9mas fl\u00e9ch\u00e9s ils ont tent\u00e9 de r\u00e9soudre ce probl\u00e8me lors du design de 37signals<\/p>\n #Media Queries<\/p>\n Media Queries are a Hack<\/a> les media queries relatives au viewport est un d\u00e9but de solution mais rarement suffisent, l\u2019auteur introduit le concept de \u201celement queries\u201d qui seraient relatives \u00e0 un autre \u00e9l\u00e9ment de la page<\/p>\n #Webdesign<\/p>\n Everything I know about design I learned playing Starcraft<\/a> un tr\u00e8s jolie analogie entre apprendre le design et jouer \u00e0 Starcraft<\/p>\n Simplifying For The Wrong Reasons<\/a> un retour sur la tendance \u00e0 la simplification des interfaces (flat design, etc.) et sur le fait de cacher les menus sous des ic\u00f4nes m\u00eame pour du desktop<\/p>\n #Freelance<\/p>\n Freelance Logo Design…What I\u2019ve Learned in 12 Months<\/a> un retour d\u2019exp\u00e9rience d\u2019un designer de logo sur une ann\u00e9e de freelance et quelques bons conseils sur comment tarifer et \u00eatre s\u00fbre d\u2019\u00eatres pay\u00e9s (spoiler : ayez un contrat et demandez un accompte)<\/p>\n #UX #Animation<\/p>\n Transitional Interfaces<\/a> pointe le fait que les animations dans une interface ne sont pas uniquement d\u00e9coratives et peuvent servir \u00e0 donner des indications fonctionnelles \u00e0 l’utilisateur et am\u00e9liorer l’exp\u00e9rience.<\/p>\n #Logos<\/p>\n Ces logos refus\u00e9s que vous n’avez jamais vus<\/a>, une petite selection de logos qui n\u2019ont pas \u00e9t\u00e9 s\u00e9lectionn\u00e9s pour certaines grandes marques<\/p>\n #UI<\/p>\n A Good User Interface<\/a> quelques id\u00e9es pour am\u00e9liorer l\u2019UI et une petite newsletter mensuelle pour partager comment am\u00e9liorer l\u2019exp\u00e9rience utilisateur<\/p>\n #Podcast<\/p>\n The Walking Web, le podcast francophone qui parle de webdesign<\/a>, un petit retour sur ce podcast fran\u00e7ais auquel j’ai \u00e9t\u00e9 invit\u00e9e<\/p>\n #Typographie<\/p>\n \u00ab\u00a0Inspired to Inspire\u00a0\u00bb<\/a> une tr\u00e8s jolie vid\u00e9o sur l\u2019inspiration, le message et ce qu\u2019il r\u00e9alise durant la vid\u00e9o sont tous les deux superbes<\/p>\n #Inspiration<\/p>\n linkstoinspire.co.uk<\/a> une collection de liens pour l\u2019inspiration class\u00e9s par ordre alphab\u00e9tique<\/p>\n #Video<\/p>\n 30 things at 30<\/a> un graphiste fait une liste pour ses 30 ans de 30 choses qu\u2019il sait \u00e0 propos de lui, cr\u00e9e un gif anim\u00e9 pour chacune d\u2019entre elle et un joli petit film d\u2019animation avec les 30 gifs.<\/p>\n #Carte de visite<\/p>\n cardfaves.com<\/a> un petit site qui s\u00e9lectionne de tr\u00e8s jolies cartes de visite<\/p>\n #Painting<\/p>\nDes ressources utiles<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les articles \u00e0 lire<\/h2>\n
Inspiration<\/h2>\n