Your Web, documented · WebPlatform.org
►https://www.webplatform.org
Tags : #webdesign
Your Web, documented · WebPlatform.org
►https://www.webplatform.org
Tags : #webdesign
www.scifiinterfaces.com
▻http://www.scifiinterfaces.com
Tags : #UI #webdesign #scifi #parisweb2014 #parisweb
FLUPA UX-Day 2014
▻http://romy.tetue.net/flupa-ux-day-2014
Design émotionnel, gamification, companion app, parcours IRL, mais aussi livrables allégés et collaboration agile.
Rendez-vous incontournable des professionnels de l’expérience utilisateur, cette 3e édition du FLUPA UX-Day était plus orientée métier et méthodo, moins ergo, plus design UX.
#FlupaUxDay #ergonomie #UX #webdesign #WDFR #gamification #DesignEmotionel
fontfamily.io
▻http://fontfamily.io
«Compatibility tables for default local fonts.» Tags: #webdesign #css
Article très intéressant sur l’utilisation des em et pourquoi il ne faut plus en avoir peur :) ►http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html #webdesign
CSS Shapes Editor for Chrome
▻http://razvancaliman.com/writing/css-shapes-editor-chrome
CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial.
None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn’t help too much even if they did. CSS Shapes are meant to be used in the browser context where it’s easy to see how they interact with other elements on the page in various configurations. The shape authoring process should capitalize on this affordance, something external editing tools are not well equipped to do.
To solve this problem, I released the CSS Shapes Editor for Chrome. It is a Developer Tools extension which provides an interactive editor for shape property values.
Pour mémoire, on a un truc sous SPIP qui fonctionne de manière totalement automatique (ça détecte les limites de l’image) et sur n’importe quel navigateur depuis… 2006 :-))
▻http://paris-beyrouth.org/tutoriaux-spip/article/un-habillage-irregulier-float
(Après, c’est le genre de chose dont l’utilité pratique est assez problématique sur le Web. C’est très séduisant parce que ça reproduit un comportement typique du papier, et comme avec les tablettes on a l’impression de s’approcher du format magazine… ; mais en pratique, je n’ai jamais vu grand chose de très satisfaisant sur le Web. Et avec le responsive, je crains qu’on ne complique encore un peu la question.)
Ce qui est intéressant, dans ce cas précis, ce n’est pas tant l’usage au jour le jour pour un site web courant, que ce que cela suggère au nivaux des possibilités “techniques” dans l’utilisation des ccs et du html.
Au “Monde”, par exemple, nous sommes en train de configurer un CMS print propriétaire qui utilise largement XML et CSS pour la gestion de la mise en page (ce qui est en partie le cas avec InDesign).
Le Shape Editor de Chrome suggère juste l’idée qu’il pourrait être possible un jour de faire de la mise en page avancée et à façon dans une interface Web... tu me vois venir ;-)
Oh, genre XPress dans une interface Web ? Tu as Pages sur iCloud qui est assez spectaculaire (pas de détourage automatique des images, en revanche, même s’il y a des possibilité d’habillage). Évidemment, c’est très grand public comparé à Indesign.
▻http://maxsteenbergen.com/fibonacci
Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using #Flexbox, without having to learn #HTML or #CSS.
Fibonacci starts with a blank <section>, which you can then split to your heart’s content. It generates both the HTML and CSS needed to recreate the layout in your own pages.
After you’ve made your horizontal or vertical split, you can then add a new sibling, shrink or expand, give it a fixed width/height, remove or split it again.Remember to add a unit when you enter a fixed width or height!
Once you’re happy with the layout, hit the export icons to copy the generated code and paste it wherever you need it in your own code.
Tiny sidenote: Fibonacci is mostly a little sideproject and by no means perfect or bug free. Contributions are highly welcome :)
Beyond the #border 1/4 : « Into the wilderness »
►http://www.theguardian.com/world/ng-interactive/2014/aug/06/-sp-texas-border-deadliest-state-undocumented-migrants
L’histoire d’Exelina, une Salvadorienne sans-papier, disparue depuis décembre 2013 en passant la frontière au #Texas pour tenter de rejoindre son mari et ses enfants, nés aux Etats-Unis. Elle était retournée dans son pays natal pour régulariser sa situation. De février 2011 à mars 2014, on a retrouvé les corps de 294 migrants morts dans cette zone aride à plusieurs de kilomètres de la frontière.
The Guardian livre le récit émouvant de sa disparition en l’accompagnant de vidéos mais aussi de statistiques et de graphiques interactifs sur Brooks County, ce "tombeau des migrants sud américains", les routes des migrants ou encore l’implantation des gangs de passeurs. Le premier article "augmenté" (pour le coup c’est pas survendu) d’une série de 4.
Texas has become the deadliest state in the US for undocumented immigrants. In 2012, 271 migrants died while crossing through Texas, surpassing Arizona as the nation’s most dangerous entry point. The majority of those deaths didn’t occur at the Texas-Mexico border but in rural Brooks County, 70 miles north of the Rio Grande, where the US Border Patrol has a checkpoint. To circumvent the checkpoint, migrants must leave the highway and hike through the rugged ranchlands. Hundreds die each year on the trek, most from heat stroke. This four-part series looks at the lives impacted by the humanitarian crisis.
(déjà repéré, évidemment, par @cdb_77 :) )
Note sur le côté #webdesign et "#editing" que je trouve remarquable de cet article et dont voici une image pour en visualiser l’organisation :
(si je dis pas de bêtise, le tout en #html5 ?).
Il manque peut-être une seule chose : la carte de ce Brooks County, un comté de 7 000 habitants sur 2400 km2 (une surface un peu plus petite que celle de Paris et la petite couronne) d’après Wikipedia.
The Startup’s Guide to Budget Design
▻http://blog.folyo.me/the-startups-guide-to-budget-design
Tags : #webdesign
La gestion des #couleurs dans les navigateurs Internet
▻http://www.alpha-numerique.fr/index.php/flux-de-production/gestion-des-couleurs/849-la-gestion-des-couleurs-dans-les-navigateurs-internet
« les créateurs des navigateurs ont consciencieusement évité de se casser la tête avec la gestion des couleurs et ont considéré toutes les images comme étant du sRGB, même si elles incorporaient un profil de couleur différent. » Tags : #webdesign couleurs
Quelle gestion des #couleurs sur Internet dans le guide de la gestion des couleurs | Arnaud Frich
▻http://www.guide-gestion-des-couleurs.com/quelle-gestion-couleurs-sur-internet.html
Tags: #webdesign couleurs
Drop Downs Should be the #UI of Last Resort (avec images, tweets) · lukew · Storify
▻https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
Un des articles qui détaille la chose en longueur, avec exemple de solution pour eux :
▻https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d6
Intéressant, mais à voir si ça peut s’imaginer accessible (y compris sans JS…).
Réveille le punk en toi !
►http://romy.tetue.net/punkme
Y-a-t-il un punk qui sommeille en toi ? Le site Punk Me est une itinérance dans le mouvement punk, balisée de dix questions existentielles pour découvrir ton profil punk.
Chouette site, joli, documenté, riche, immersif, mais UX désagréable : discriminant, lourd, monopolisant… C’est moins un site web qu’un documentaire TV.
Autre point de vue, de l’autre côté de l’interface, qui permet de mieux apprécier le travail préparatoire :
►http://www.davduf.net/fuck-me-la-nostalgie-punk-me-pour-la-vie
Je ne sais pas encore comment le dire, mais ce truc m’agace tout compte fait.
Pfff, t’es qu’un vieux punk réac ;)
Mais oui, je n’arrive pas à dire non plus. Le travail documentaire est chouette, le parti-pris contemporaniste encore plus, mais y’a un truc qui coince au final, sans doute un manque d’adéquation fond/forme, avec une interface trop à la mode et pas assez punke.
Web Fundamentals — Google Developers
▻https://developers.google.com/web/fundamentals
Web Fundamentals is a comprehensive resource for multi-device web development. Tags: #webdev #webdesign
Quotes on Design
▻http://quotesondesign.com
Tags : #quote #webdesign #inspiration
Good looking #emails are killing your customer conversations — Medium
▻https://medium.com/@giuliano/good-looking-emails-are-killing-your-customer-conversations-ac3b8da9a7d9
People get blasted by emails all day long, newsletter or Mailchimp-like templates are everywhere and, as a consequence, users started developing some patterns of recognition when in front of their emails: if pattern matches they quickly skim the content and trash the email. Maybe a catchy headline can help gaining a couple of seconds of attention but a good designed newsletter (9 out of 10 times a commercial proposal or a deal-like thing).
Merci @baroug, enfin des réponses à des questions que je me pose depuis plusieurs années. Tu es mon héro.
Je ne me souviens pas d’avoir lu cet article autrement que par ce seen ^^
Guidelines pour produire des #psd adaptés au web
▻http://www.stpo.fr/blog/guidelines-pour-produire-des-psd-adaptes-au-web
Tags : #photoshop #webdesign #Design #bonne_pratique psd
lorempixel - placeholder images for every case
▻http://lorempixel.com
Placeholder Images for every case. #webdesign or Print. Just put a custom url in your html and you receive a proper placeholder picture Tags: #tool webdesign
The Myth of 800x600
▻http://www.drdobbs.com/the-myth-of-800x600/184412392
«Designing Web sites for all sizes seems like an impossible task.» Tags: #résolution #fixe #webdesign #RWD #fluide
Perfect web #typography with slab-serifs | Webdesigner Depot
▻http://www.webdesignerdepot.com/2013/09/perfect-web-typography-with-slab-serifs
Conventional wisdom states that body text benefits most from being set in a serif font because the serifs create a path for the eye to follow along a line and Tags: #webdesign #fonts typography
Pour ce qui est des textes de très petite taille, peut être. Mais l’ériger en valeur absolue serait une erreur : ça voudrait dire que le Garamond (petite hauteur d’x) est illisible ce qui est absurde. À espace égal une plus grande hauteur d’œil est probablement préférable, mais lorsqu’on peut composer finement, cette considération devient secondaire.
C’est ce que je voulais dire par « À espace égal une plus grande hauteur d’œil est probablement préférable, mais lorsqu’on peut composer finement, cette considération devient secondaire. » Mais ça ne corrobore pas « D’autre part, il semble qu’une sorte de fatalité soit à l’œuvre, qui obligerait à choisir entre “belle” police et police lisible ».
À mon avis, se focaliser sur « la plus lisible » dans une combinaison donnée est forcément frustrant de ce point de vue : y’en a forcément qu’une qui est « la plus lisible », par définition. « Bien lisible » me semble un critère plus opératoire, et à ce titre, le Jenson doit souvent fonctionner : )
Contact, Connect, Communicate : Designing Your Contact Page
▻http://www.sitepoint.com/contact-connect-communicate-designing-your-contact-page
Tags : #webdesign
The Scroll Up Bar - The Usability Post
▻http://usabilitypost.com/2014/05/24/the-scroll-up-bar
An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example, Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up.
J’ai mis hyper longtemps à comprendre cette logique moi. Du coup, et en prenant en compte le fait que je suis particulièrement idiot, je sais pas si c’est si génial.
Même si je pense avoir compris la logique, je ne pense pas m’y être vraiment habitué. J’ai l’impression qu’il y a quelque chose de pas intuitif dans le fait de devoir déplacer une zone pour en faire apparaitre une autre. Dans les dernières versions d’Android par exemple, pour faire réapparaitre la barre de notifications quand on est en mode immersif, il faut la « tirer » en glissant son doigt depuis le haut de l’écran : je trouve ça beaucoup plus naturel.
Donc oui, le gain de place peut être appréciable, notamment sur mobile, mais je ne suis pas certain non plus que ça soit génial.
Sinon on peux juste laisser cette pauvre barre en haut de la page, et appuyer sur cette magnifique invention qu’on appelle la touche « Home » du clavier, au lieu de ralentir le brouteur de l’utilisateur avec du javascript de merde et des délires de designer qui savent pas faire du web. </énervé>
Macaw : The Code-Savvy Web Design Tool
▻http://macaw.co
Ça a l’air impressionnant. Avec bon commentaire de Zeldman lui-même.
Oui au niveau business ça a l’air pourri, mais l’outil lui-même à l’air assez fou. Enfin pour un graphiste tout du moins (quand on sait déjà écrire soi-même du bon HTML, CSS, etc, ça a forcément moins d’intérêt).
En effet une fois le travail de conception exporté et modifié on ne peut pas modifier à nouveau via l’outil : c’est donc bien pour remplacer Photoshop et pas Dreamweaver / Notepad++. Il ne fait pas appel à LESS / SASS ce qui pose problème pour la maintenabilité et l’évolutivité.
Le prix et le modèle économique ne me dérangent pas plus que ça : pour un bon outil pas de problème pour payer et c’est un coût one shot et pas du sass.
Pour avoir testé l’outil il me semble excellent et rapide à prendre en main mais le contexte d’utilisation est particulier.
Il ne s’adresse pas à un graphiste ne connaissant pas le code : il faut comprendre la logique du HTML pour ordonner et hiérarchiser les blocs correctement ou profiter de la gestion du responsive et les options avancées nécessitent de connaître le css, sans parler du javascript.
Il va gêner ceux qui ont l’habitude de partir d’un framework comme Boostrap voire intégré avec un CMS comme Spipr. Le temps de créer un thème Spipr basé sur une mquette Photoshop reste a priori moindre que de réintégrer balises et boucles Spip dans un html/css issus de Macaw.
Le système ne semble pas prévoir de notion de template ni de réutilisation de composants produits antérieurement. À vérifier.
Enfin Photoshop / Illustrator ne sont pas abandonnés complètement : il faut bien préparer les images / textures / pictos qui sont importés et permettent de traiter tout ce que css ne sait pas faire.
Je vois tout de même deux avantages / cas d’usages :
1) la production rapide de pages ou de sites statiques/semi-statiques.
2) le prototypage incluant de la création graphique mais en admettant qu’il y a encore beaucoup de travail derrière. Le point fort à cet égard est que le design visuel en utilisant cet outil va mieux prendre en compte les possibilités du css qu’un mockup Photoshop et par conséquent peut faciliter la réalisation ensuite. Pour le prototypage seul il y a beaucoup moins de fonctionnalités qu’un Axure. Pas intéressant si on n’entend pas réutiliser le code produit.
À tester dans la même veine, mais peut-être mieux que Macaw (et moins cher) : ►http://pinegrow.com
Pour une nouvelle rubrique #photoreportage sur un site d’info alternatif, je cherche de l’inspiration.
Seenthis, aurais-tu des idées ?
Pour l’instant, j’ai noté, via la Society of News Design, le travail du Washington Post ▻http://www.snd.org/2014/03/snd35-judges-award-silver-medal-to-washington-post-long-form-overall-portfolio
Effectivement, le portfolio et les articles sont superbes :
►http://www.washingtonpost.com/sf/syrian-refugees/story/refuge
J’ai également repéré le boulot fait par Slate, qui propose un long scroll et une navigation au clavier assez géniale :
▻http://www.slate.fr/grand-format/camp-miliataire-cosaque-crimee-83861
Enfin, le Boston Globe propose deux alternatives : le #diaporama plein écran ou l’article « scrollable », visibles sur cet article sur Aaron Swartz :
▻http://www.bostonglobe.com/metro/2014/03/29/the-inside-story-mit-and-aaron-swartz/YvJZ5P6VHaPJusReuaN7SI/picture.html
Est-ce que vous auriez repéré d’autres pratiques de mise en ligne de photoreportages ?
« Les Quatre Heures » pourrait être un exemple :
►http://lequatreheures.com
cc @albertocampiphoto
Je consulte chaque jour le blog du New York Times, Lens :
▻http://lens.blogs.nytimes.com/?scp=1-spot&sq=lens&st=cse
Et celui de Time Magazine, Lightbox :
▻http://lightbox.time.com
qui héberge le blog de Mikko Takkunen, photojournalism links
(le meilleur du photojournalisme, deux fois par mois, je crois)
▻http://lightbox.time.com/category/photojournalismlinks/?iid=lb-pjl
J’aime beaucoup Burn aussi, créé par David Alan Harvey - le genre sobre...
▻http://www.burnmagazine.org