{"id":1528,"date":"2013-05-17T08:47:41","date_gmt":"2013-05-17T06:47:41","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1528"},"modified":"2013-05-17T09:57:37","modified_gmt":"2013-05-17T07:57:37","slug":"des-pixels-et-du-code-62","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-62\/","title":{"rendered":"Des pixels et du code #62"},"content":{"rendered":"
Cette semaine on parle principalement de mobilit\u00e9 avec quelques retours chiffr\u00e9s sur les ventes d’un site e-commerce responsive, une sp\u00e9culation de ce \u00e0 quoi pourrait ressembler iOS7, mais \u00e9galement d’exp\u00e9rience utilisateur des barres \u00a0de navigation \u00ab\u00a0fixes\u00a0\u00bb, tendances du design (oui encore) et de typographie. \u00a0Quelques jolis sites pour votre inspiration \u00e9galement cette semaine, typography, letterpress, illustrations, vous devriez trouver votre bonheur. La semaine a \u00e9galement \u00e9t\u00e9 tr\u00e8s remplie en liens utiles ressources et plugins que ce soit des modles CSS, plugin Photoshop ou des freebies (ic\u00f4nes et branding), vous allez pouvoir tester quelques nouveaut\u00e9s ce weekend. Et on finira les liens de la semaine avec un peu d’humour d’illustrateur.<\/p>\n
#Typographie<\/p>\n
Lettering Gear: A Quick Guide to Get Started<\/a> Ryan Hamrick fait la liste des outils qu\u2019il utilise au quotidien pour tracer de jolies lettres<\/p>\n 4 reasons I use large type <\/a>lisibilit\u00e9, nombre de caract\u00e8res par ligne, etc. 4 raisons d\u2019utiliser des polices d\u2019\u00e9critures plus grandes sur un site web<\/p>\n \u00a0<\/b><\/b>#iOS7<\/p>\n The future of iOS design?<\/a> une projection dans le future dez ce \u00e0 quoi pourrait ressembler iOS7 par un designer en s\u2019inspirant d\u2019une analyse assez pouss\u00e9e des tendances de design actuelles dans diff\u00e9rentes applications<\/p>\n \u00a0<\/b><\/b>#UX<\/p>\n Don\u2019t use fixed overlays on mobile<\/a> m\u00eame si les overlay (bloquer la barre de navigation en haut du design par exemple) fonctionnent sur navigateur de bureau, ils rognent une partie non n\u00e9gligeable sur mobile et bloquent une partie de l\u2019\u00e9cran disponible.<\/p>\n #Interactions<\/p>\n Sixux.com<\/a>\u00a0des petits vid\u00e9os de 6secondes d\u2019exemples de transition, interactions et animations sur diff\u00e9rents sites\u00a0<\/b><\/b><\/p>\n #Tendances #UI<\/p>\n Design: Skeuomorphic vs. Flat vs. Skeuominimalism (Almost-flat)<\/a> flat, pas flat, r\u00e9aliste, ou pas, au final, pour au final cr\u00e9er une interface dans un style qui a du sens pour l\u2019utilisateur et non pas \u201cjuste\u201d parce que tel ou tel style est \u201ctendance\u201d<\/p>\n \u00a0<\/b><\/b>#Site #App<\/p>\n Sites vs. Apps defined: the Documents\u2010to\u2010Applications Continuum. <\/a>la diff\u00e9rence entre un site web et une application web n\u2019est pas toujours facile \u00e0 faire, une tentative d\u2019explication ici<\/p>\n #Mobile<\/p>\n Is the iPad mobile?<\/a> \u00a0vu les sp\u00e9cifications techniques, le touch, l\u2019iPad rentre techniquement dans la cat\u00e9gorie \u201cmobile\u201d, mais les usagers de ces appareils sont plus rarement en situation de mobilit\u00e9. En se basant sur l\u2019exemple de l\u2019application r\u00e9alis\u00e9e pour Cars.com, l\u2019auteur essaie de r\u00e9pondre \u00e0 la question \u201cfaut-il traiter les usager de tablette comme des usagers mobiles ou desktop?\u201d<\/p>\n Skinny Ties : 211% de vente en plus avec son nouveau site responsive \u2013 chiffres et analyse<\/a>\u00a0une traduction de certains passages de l’article original\u00a0Skinny Ties gets a 211% bump in mobile sales with its responsive design site<\/a>\u00a0pour les non anglophones<\/p>\n #Responsive Webdesign<\/p>\n Conf\u00e9rence : \u201cun site responsive en une heure\u201d<\/a>\u00a0 – r\u00e9ponse : on ne peut pas, la conf\u00e9rence de Rapha\u00ebl Goetter \u00e0 Agora CMS sur le responsive webdesign avec un cas pratique, celui du site de la conf\u00e9rence<\/p>\n #Typographie<\/p>\n Ampergram <\/a>une exp\u00e9rience en ligne qui permet de cr\u00e9er des phrases et mots, en utilisant des lettres photographi\u00e9es sur Instagram<\/p>\n \u00a0<\/b><\/b>#Letterpress<\/p>\n The Beautiful And Stylish Letterpress Prints \u2013 34 Designs<\/a> de jolies cartes de visites cartes et autres posters imprim\u00e9s en \u201cletterpress\u201d pour vous en inspirer<\/p>\n \u00a0<\/b><\/b>#GIF<\/p>\n Guifff.com<\/a>\u00a0une jolie collection de gif anim\u00e9s r\u00e9cup\u00e9r\u00e9s sur dribbble, comme quoi on peut aussi faire de tr\u00e8s belles choses en gif anim\u00e9<\/p>\n \u00a0<\/b><\/b>#Illustration<\/p>\n Pez Sketchbook <\/a>la petite claque visuelle de la semaine dans les dessins crayonn\u00e9s des sketchbooks de \u00a0Pierre-Yves Riveau aka PEZ<\/p>\n \u00a0<\/b><\/b>#Webdesign<\/p>\n Playgroundinc.com<\/a> un site d\u2019agence avec des animations bas\u00e9es sur du CSS et du SVG qui me donnent vraiment envie de creuser cette technique<\/p>\n #jQuery<\/p>\n Mini AJAX File Upload Form <\/a>\u00a0un tutoriel jQuery pour cr\u00e9er un formulaire d\u2019upload de fichier en drag & drop opur votre site<\/p>\n #Photohop<\/p>\n Layer Guides Photoshop Extension<\/a> une extension Photoshop qui permet de placer automatiquement des rep\u00e8res autour d\u2019un \u00e9l\u00e9ment cr\u00e9\u00e9<\/p>\n \u00a0<\/b><\/b>#Windows8<\/p>\n Windows8designhandbook.com<\/a> un petit site pour mieux comprendre l\u2019interface Windows8 et vous aider \u00e0 cr\u00e9er des applications dans le style \u201cmetro\u201d de l\u2019interface<\/p>\n \u00a0<\/b><\/b>#Icones<\/p>\n Social Icons: Free PSD file<\/a> un petit pack d’ic\u00f4nes sociales arrondies pour vos projets<\/p>\n City Icons<\/a> 14 icones qui repr\u00e9sentent des id\u00e9ogrammes ou monuments de 14 grands villes du monde.<\/p>\n #CSS<\/p>\n CSS modal <\/a>une modale en \u201cfull CSS\u201d (utilisation de :target) dont l\u2019optimisation pour petits \u00e9crans est plut\u00f4t int\u00e9ressant au niveau du design et choix du placement des boutons.<\/p>\n #Branding<\/p>\n 40+ free PSDs and actions for mock-ups<\/a> 40 freebies pour pr\u00e9senter vos design dans des mockups de t\u00e9l\u00e9phone, pc et macbook, sur des cartes de visites, T-shirts, casquettes et autres supports visuels<\/p>\n Branding<\/a>\u00a0un mockup de produits pour cr\u00e9er des planches d\u2019identit\u00e9 corporate et de branding<\/p>\n #Feedback<\/p>\n Redpen.io<\/a>\u00a0un site pour obtenir des feedbacks sur un design avec une simplicit\u00e9 d\u2019utilisation impressionnante, il suffit d\u2019uploader l\u2019image (drag & drop), copier le lien et remplir le champs \u201cmail\u201d auquel on veut que les retours soient envoy\u00e9s. Par de souscription ni de formulaire \u00e0 remplir<\/p>\n #jQuery #Responsive<\/p>\n Magnific Popup <\/a>un plugin jQuery pour cr\u00e9er une lightbox conditionnelle responsive qui s\u2019adapte en terme de design et de performance en fonction de l\u2019appareil<\/p>\n #Pixelart CSS<\/p>\n Picssel-art<\/a>\u00a0vous permet de cr\u00e9er du pixel art et le convertir en full CSS, pas tr\u00e8s utile en prod mais l\u2019id\u00e9e est fun<\/p>\n #Responsive<\/p>\n Fucking-windows.com<\/a>\u00a0redimensionnez la fen\u00eatre et appr\u00e9ciez le travail :D<\/p>\n #Clients <\/p>\n Et l\u2019article geeky \u00e0 ne pas louper, 66 photos des premiers films Star Wars prises pendant le tournage<\/a> \u00a0et le wtf de la semaine attribu\u00e9 \u00e0 cette police d\u2019\u00e9criture qui utilise des chatons comme lettre nekofont.upat.jp<\/a><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.Cette semaine on parle principalement de mobilit\u00e9 avec quelques retours chiffr\u00e9s sur les ventes d’un site e-commerce responsive, une sp\u00e9culation de ce \u00e0 quoi pourrait ressembler iOS7, mais \u00e9galement d’exp\u00e9rience utilisateur des barres \u00a0de navigation \u00ab\u00a0fixes\u00a0\u00bb, tendances du design (oui encore) et de typographie. \u00a0Quelques jolis sites pour votre inspiration \u00e9galement cette semaine, typography, letterpress, illustrations, vous devriez trouver votre bonheur. La …<\/p>\n","protected":false},"author":3,"featured_media":1529,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1528","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nInspiration<\/h2>\n
Les tutoriels de la semaine<\/h2>\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
\n<\/b><\/b>Monmacon.tumblr.com<\/a>\u00a0\u00ab\u00a0Mon ma\u00e7on \u00e9tait illustrateur – Et il a gard\u00e9 de bonnes habitudes\u00a0\u00bb , un tumblr tr\u00e8s dr\u00f4le qui rassemble des phrases de clients d’illustrateur en les transposant au domaine de la ma\u00e7onnerie.\u00a0\u00c7a\u00a0fonctionne h\u00e9las avec pleins d’autres m\u00e9tiers du web et de la cr\u00e9ation.<\/p>\n