Des pixels et du code #62
Cette semaine on parle principalement de mobilité avec quelques retours chiffrés sur les ventes d’un site e-commerce responsive, une spéculation de ce à quoi pourrait ressembler iOS7, mais également d’expérience utilisateur des barres de navigation « fixes », tendances du design (oui encore) et de typographie. Quelques jolis sites pour votre inspiration également cette semaine, typography, letterpress, illustrations, vous devriez trouver votre bonheur. La semaine a également été très remplie en liens utiles ressources et plugins que ce soit des modles CSS, plugin Photoshop ou des freebies (icônes et branding), vous allez pouvoir tester quelques nouveautés ce weekend. Et on finira les liens de la semaine avec un peu d’humour d’illustrateur.
Les articles à lire
#Typographie
Lettering Gear: A Quick Guide to Get Started Ryan Hamrick fait la liste des outils qu’il utilise au quotidien pour tracer de jolies lettres
4 reasons I use large type lisibilité, nombre de caractères par ligne, etc. 4 raisons d’utiliser des polices d’écritures plus grandes sur un site web
#iOS7
The future of iOS design? une projection dans le future dez ce à quoi pourrait ressembler iOS7 par un designer en s’inspirant d’une analyse assez poussée des tendances de design actuelles dans différentes applications
#UX
Don’t use fixed overlays on mobile même 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égligeable sur mobile et bloquent une partie de l’écran disponible.
#Interactions
Sixux.com des petits vidéos de 6secondes d’exemples de transition, interactions et animations sur différents sites
#Tendances #UI
Design: Skeuomorphic vs. Flat vs. Skeuominimalism (Almost-flat) flat, pas flat, réaliste, ou pas, au final, pour au final créer une interface dans un style qui a du sens pour l’utilisateur et non pas “juste” parce que tel ou tel style est “tendance”
#Site #App
Sites vs. Apps defined: the Documents‐to‐Applications Continuum. la différence entre un site web et une application web n’est pas toujours facile à faire, une tentative d’explication ici
#Mobile
Is the iPad mobile? vu les spécifications techniques, le touch, l’iPad rentre techniquement dans la catégorie “mobile”, mais les usagers de ces appareils sont plus rarement en situation de mobilité. En se basant sur l’exemple de l’application réalisée pour Cars.com, l’auteur essaie de répondre à la question “faut-il traiter les usager de tablette comme des usagers mobiles ou desktop?”
Skinny Ties : 211% de vente en plus avec son nouveau site responsive – chiffres et analyse une traduction de certains passages de l’article original Skinny Ties gets a 211% bump in mobile sales with its responsive design site pour les non anglophones
#Responsive Webdesign
Conférence : “un site responsive en une heure” – réponse : on ne peut pas, la conférence de Raphaël Goetter à Agora CMS sur le responsive webdesign avec un cas pratique, celui du site de la conférence
Inspiration
#Typographie
Ampergram une expérience en ligne qui permet de créer des phrases et mots, en utilisant des lettres photographiées sur Instagram
#Letterpress
The Beautiful And Stylish Letterpress Prints – 34 Designs de jolies cartes de visites cartes et autres posters imprimés en “letterpress” pour vous en inspirer
#GIF
Guifff.com une jolie collection de gif animés récupérés sur dribbble, comme quoi on peut aussi faire de très belles choses en gif animé
#Illustration
Pez Sketchbook la petite claque visuelle de la semaine dans les dessins crayonnés des sketchbooks de Pierre-Yves Riveau aka PEZ
#Webdesign
Playgroundinc.com un site d’agence avec des animations basées sur du CSS et du SVG qui me donnent vraiment envie de creuser cette technique
Les tutoriels de la semaine
#jQuery
Mini AJAX File Upload Form un tutoriel jQuery pour créer un formulaire d’upload de fichier en drag & drop opur votre site
Des ressources utiles
#Photohop
Layer Guides Photoshop Extension une extension Photoshop qui permet de placer automatiquement des repères autour d’un élément créé
#Windows8
Windows8designhandbook.com un petit site pour mieux comprendre l’interface Windows8 et vous aider à créer des applications dans le style “metro” de l’interface
#Icones
Social Icons: Free PSD file un petit pack d’icônes sociales arrondies pour vos projets
City Icons 14 icones qui représentent des idéogrammes ou monuments de 14 grands villes du monde.
#CSS
CSS modal une modale en “full CSS” (utilisation de :target) dont l’optimisation pour petits écrans est plutôt intéressant au niveau du design et choix du placement des boutons.
#Branding
40+ free PSDs and actions for mock-ups 40 freebies pour présenter vos design dans des mockups de téléphone, pc et macbook, sur des cartes de visites, T-shirts, casquettes et autres supports visuels
Branding un mockup de produits pour créer des planches d’identité corporate et de branding
#Feedback
Redpen.io un site pour obtenir des feedbacks sur un design avec une simplicité d’utilisation impressionnante, il suffit d’uploader l’image (drag & drop), copier le lien et remplir le champs “mail” auquel on veut que les retours soient envoyés. Par de souscription ni de formulaire à remplir
Les outils et plugins pour vous faciliter la vie
#jQuery #Responsive
Magnific Popup un plugin jQuery pour créer une lightbox conditionnelle responsive qui s’adapte en terme de design et de performance en fonction de l’appareil
#Pixelart CSS
Picssel-art vous permet de créer du pixel art et le convertir en full CSS, pas très utile en prod mais l’idée est fun
Les démos sympas et impressionnantes
#Responsive
Fucking-windows.com redimensionnez la fenêtre et appréciez le travail :D
Et s’il devait n’en rester qu’un ?
#Clients
Monmacon.tumblr.com « Mon maçon était illustrateur – Et il a gardé de bonnes habitudes » , un tumblr très drôle qui rassemble des phrases de clients d’illustrateur en les transposant au domaine de la maçonnerie. Ça fonctionne hélas avec pleins d’autres métiers du web et de la création.
Et l’article geeky à ne pas louper, 66 photos des premiers films Star Wars prises pendant le tournage et le wtf de la semaine attribué à cette police d’écriture qui utilise des chatons comme lettre nekofont.upat.jp
