#webdesign

Y a pas mal de ressources partagées ici, si on les recensait ? :)

►https://orioniconlibrary.com
►https://www.flaticon.com
►https://flaticons.net par
►https://icons.pixsellz.io
►https://icongr.am
►https://remixicon.com
►https://www.svgrepo.com
►https://danklammer.com/bytesize-icons

(par @monolecte, @b_b, @cy_altern, @rastapopoulos)

#Icons #ressource_graphique #webdesign #pictos #graphisme #ergonomie #web #intégration #interface

►https://thenounproject.com

►https://icomoon.io

►https://unsplash.com

►https://undraw.co

unDraw - Open source illustrations for any idea
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

Dans mon idée, on partait plus sur les icônes ici pour s’y retrouver et les outils dans d’autres fils :) et avec un #Ressources_graphisme ou #Ressources_integration pour tout lier.
Mais à voir.

des nouveaux
– ▻https://feathericons.com
– ▻https://github.com/primer/octicons
– ▻https://fonts.google.com/icons?selected=Material+Icons
– ▻https://icons.coreui.io/icons
– ▻https://github.com/danklammer/bytesize-icons
– ▻https://useiconic.com/open
– ▻https://forkaweso.me/Fork-Awesome/icons

Source + avis : ▻https://core.spip.net/issues/4727

How to Design Better Icons
▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf

▻https://icones.js.org

Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
►https://seenthis.net/messages/734575

À suivre de prêt, cette initiative…

« Supported by Shuttleworth fundation »

#impression #print #intégration #html

Adam Hyde de booksprint, super !

Le site est deprecated et maintenant il faut aller sur :
▻https://www.pagedjs.org

C’est intéressant même si je ne suis pas d’accord avec le démarrage de sa réflexion sur le faire qu’un wireframe c’est forcément un dessin statique (et donc dans son argumentation pas responsive etc).

Du coup c’est déjà un peu ce qu’on fait, puisqu’on commence par mettre des blocs de contenu (faux ou plus précis suivant ce qu’on connait comme détails à ce moment) dans du HTML. Puis on style ce HTML en bloc que l’on place petit à petit. On pourrait aller plus loin et vraiment commencer par TOUT mettre en détail et faire valider cette liste de choses à placer dans un ordre de priorité, puis le styler une fois que c’est validé seulement.

Mais du coup ses documents de priorités il continue de les faire en pixels, alors qu’on peut parfaitement les faire en HTML directement (et donc au départ c’est mobile first tant qu’on n’a rien stylé oui mais on PEUT les styler ensuite, ce qui n’est pas possible avec un truc statique).

Bref, ça va dans le bon sens, mais je pense qu’il faut continuer à améliorer dans la voix de partir directement sur le HTML, jamais depuis un outil statique : aussi puissant qu’ils peuvent être (sketch etc), je trouve que c’est obsolète, des outils du passé, pour la majorité des cas.

#conception #web #prototype #design #maquette #méthodologie #bonnes_pratiques

Alors je suis tout à fait d’accord, je viens encore d’en faire les frais ^^ Les outils comme sketch ou autre enferme dans une reflexion « pixel perfect » qui effectivement viens du print ou tout du moins tendrait a y ressembler.

Le problème c’est aussi les gens qui utilisent le logiciel. Je retrouve les mêmes erreurs de conception de document, identiques a quand je faisais de la production et que j’executais les doc des directeurs artistique (ex 30 couleurs aucune dans le même format).

On récolte donc des protos, conçues par des gens qui n’on jamais intégré ou conscience du markup, ni des implications de leurs choix graphiques.

En exemple le plus courrant, des titres qui change de place suivant le mode mobile, mais change de bloc container : on se retrouve a dupliquer le code, a masquer en aria-hidden pour pas que les lecteurs vocaux double… bref moi j’aime pas et généralement on peut faire sans …

Ce sont des méthodes ou type de réflexion, qui vont a l’encontre du progressive enhancement, et du mobile first.

La en tout cas ce concept est intéressant car on pense la page en fonction du contenu réel : ce qui est totalement l’inverse des méthodes les plus couramment employées, encore largement tirés du print, sauf que l’ont à enlevé des étapes comme le calibrage ^^, et que maintenant on nous envoie le contenu quand le travail est fini, on marche à l’envers.

Il y’a quelques années, j’avais été intéressé, par un projet Project Hub lancé par Brad Frost (Atomic Design methodology) : ▻https://github.com/bradfrost/project-hub. En fait l’idée est de constatent garder le fil avec le client en le poussant a participer (genre Agile) . Je pense que l’implication, le suivi, le déroulement devrait faire partie d’un seul outil ou chaque intervenant à accès aux infos, a la timeline, des notifications rappels, guideline, …

Dans un outil qui gérerait l’ensemble de la progression, l’exemple cité dans l’article peut effectivement permettre au SEO, marketeux de faire leur sauce en parallèle de l’intégrateur, sans interférer avec la partie purement dev.
Je pense que réfléchir parallèlement ainsi pourrait éviter pas mal de problème pour ceux qui sont en fin de chaine, et surtout amener à se poser les bonnes questions sans penser QUE cosmétique mais contenu. Certainement un gain de temps aussi quand on travaille a plusieurs intervenants, …

#conception #web #ergonomie #interface #formulaires

Mouais pas aussi cool que ce que je pensais à la base.

Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).

En fait c’est une version/vision du problème…

ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…

Dans les autres tendances et stratégies sur le meme sujet :

Elements queries :

►https://elementqueries.com

Le draft de la spec proposée :

▻https://tomhodgins.github.io/element-queries-spec/element-queries.html

Un petit tour d’horizon du sujet et de la problématique :

▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries

Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css

▻https://github.com/marcj/css-element-queries

Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…

Dans le même genre, j’avais fait celui la l’année dernière quand j’ai refait mon cv ^^

▻https://github.com/mistergraphx/vertical-timeline

#timeline#integration#webdesign

et le plug spip est ici ▻https://github.com/mistergraphx/spip_vtimeline

@mist_ merci pour l’info, je me ferai un plaisir de le citer dans la gazette dès qu’une doc sera dispo :)

Un truc non documenté n’existe pas

(ou uniquement pour son auteur ^^).

+1 => les styles le sont

À la fin il donne le lien vers une super chaine pédago de Jen Simmons
▻https://seenthis.net/messages/670758

j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.

Il me semble qu’on avait un tag pour ça genre #art_directed_articles mais ya qu’un seen donc ça devait être autre chose

#screen_design en référence au #graphic_design de l’imprimerie.

#webdesign #pixel #onepage

C’est parce que y a pas de « s » au tag @rastapopoulos (c’est juste @baroug qui a voulu faire son intéressant)

La rigueur ne nuit pas

#Long_Form #Nouvelles_narrations

#web #intégration #CSS #presse #magazine #graphisme

#webdesign

Toujours en recherche ?

Toujours :-) J’aimerais vraiment changer le design de mon site... :-)

@davduf comme chaque année ? ^^

/me va se cacher avant que @davduf arrive sur IRC

comme tous les 2 ans, cher ami :-))) @b_b :-)

Bon les amis... vous savez où je pourrais trouver un peu d’aide ? Ce serait chouette :-) @b_b @suske

Je connais un chan IRC plutôt sympa...

Hi hi :-) Mais j’ai tellement l’impression d’y être un boulet :-)

moi je veux bien t’aider, mais j’ai une pratique tellement old school (tout est en HTML dans le Terrier) que je ne suis pas certain d’être très utile. Je peux faire des maquettes si on en cause (que tu me dis ce que tu veux) et confier la mise en forme css à un gars qui sait faire ce genre de trucs.

C’est adorable mais ce que je cherche c’est intégrer du SPIP dans un template HTML/CSS... :-)
Merci encore !

Tu veux un nouveau squelette plus « responsive », en gros ?

Oui, plus responsive, TRES typographique, plus fou que l’actuel que j’utilise...

Des choses comme
▻https://codepen.io/julesforrest/full/xLBbVb
▻https://codepen.io/julesforrest/full/yowMPw
ou mieux encore ▻http://www.mrmarcelschool.com

Avec de beaux titres puisés ici
▻http://tobiasahlin.com/moving-letters

Mais j’avoue que je suis resté bloqué en 2004 avec mes boucles... je suis totalement dépassé par les SPIP 2, 3, etc :-)

Bah, t’es déjà sous SPIP 3.2. Donc, c’est du squelette, surtout du squelette et beaucoup de CSS (on veut des grilles, hein !).
Tu es pressé ? C’est toi qui a tout fait sur ton site ?

La dernière version on y avait un peu tous touché :p

Mais c’est pas « plus responsive », la version actuelle est déjà responsive (à part les commentaires, qui sont pas glop en petit). C’est changer l’ambiance graphique quoi (comme régulièrement) :)

@rastapopoulos , il a tout vrai :-) Beaucoup de gens m’ont aidé ---- comme toujours :-)

Là, j’aimerais bien refaire un squelette qu’on partagerait ensuite, comme feu ▻https://contrib.spip.net/TypoManiac :-)

En fait, je suis largué entre les Z, les Thèmes, les squelettes, les plugins Framework (boostrap et Foundation)...

Non, pas pressé mais un peu de temps d’ici le 20 décembre, alors j’aimerais en profiter un peu... :-)

Cool comment on critique la responsivité des forums alors que j’y ai passé des heures (sans grand résultat) :-p
J’en fait encore moins à présent @davduf, du coup je crains que cette fois je reste hors du chantier. #gogogo

Et #bises_à_tou-te-s !

Tes forums sont comme toi : tout parfait ! :-)
Merci l’ami !

Si vous avez deux minutes les amis :-)
▻https://forum.spip.net/fr_268641.html?debut_forums=%40268645#forum268645

On ne peut pas avoir l’inverse : avoir une image en N&B qui passe en couleur quand on la survole ?

Bah si mais en CSS, si tu produis par les filtres de SPIP une image de telle ou telle sorte, elle est comme elle est, tu peux plus la changer. C’est en CSS qu’il faut la passer en noir et blanc, et la remettre normal en hover.

Hum... trop complexe pour moi :-)

Chers amis... J’avance bien (sommaire et article) mais je m’arrache les cheveux sur les css responsive...

▻http://lab.davduf.net

Le titre des mes articles dépassent largement en version mobile...

Au secours :-)

Apparemment tu réutilises le javascript qui change la taille d’un texte pour qu’il rentre dans une largeur, comme dans ton précédent thème d’avant. Mais il semblerait qu’il merde une fois sur deux à trouver la bonne taille en petit écran. Quand je charge ça marche pas et quand je joue ensuite avec la taille de la fenêtre ça finit par retaille le texte comme il faut au bout d’un moment. Mais bon ça fait un truc super en hauteur. Ça serait sûrement mieux de ne pas l’activer en petit écran et d’écrire plus petit.

Tu as raison, j’ai repris ▻https://github.com/freqDec/slabText que j’adore...

Mais j’ai l’impression qu’avant le titre, le probleme est d’abord le « bloc » (cadre) dans lequel ce titre s’inscrit.... J’ai du mettre trop de padding, machin :-)

Pour reprendre ton idée, comment « interdire » cette utilisation du JQuery sur les téléphones ?

Ma feuille de style est ici
www.davduf.net/lab/squelettes/css/perso.css

Mille mercis :-)

Pour ne pas encombrer SeenThis, j’ai ouvert ceci :-)
▻https://forum.spip.net/fr_268680.html

Au secours :-)

mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )

Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).

Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.

Tu peux être plus explicite ?

Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).

▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress

Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.

►http://typecast.com est bien et a l’air plus complet et plus simple je crois (et pas que en pixels, on peut vraiment tout mettre en « em » et télécharger les CSS produites à la fin etc)

C’est sûr que c’est top TypeCast mais ►http://www.archetypeapp.com est très bien comme outil de base (et on peut tout à fait travailler en em ou en %, exporter les CSS ou même les intégrer dans Sketch). Il ne nécessite pas de s’enregistrer, permet avec le ratio des tailles de typos de faire un prototypage rapide, propose une aide pour choisir une police.

#conception #web #graphisme #typographie

Chère @tetue , je profite que le sujet est ouvert : je voudrais pouvoir transmettre à mon éditeur, pour mon prochain roman, des recommandations pour qu’il soit plus facilement lisible pour les dyslexiques, c’est une sorte de promesse que j’ai faite à ma fille Adèle qui veut pouvoir lire le prochain. Existe-t-il une charte ? Et dans cette charte quelles sont les recommandations les plus importantes parce que je ne pourrais sans doute pas exiger toute la refonte de la maquette déjà existante.

Cet été, la discussion est venue avec Adèle en cherchant dans mes livres d’adolescent dans la maison cévenole ceux des livres qu’Adèle trouvait les plus lisibles. La maquette des Folio des années septante par exemple n’était pas sans donner des problèmes tandis qu’un tout petit éditeur qui n’avait pas du beaucoup se donner de mal avait produit quelque chose d’assez parfait du point de vue d’Adèle.

Par la suite, ayant lu de mon côté Rose-Ronce d’Eric Chevillard, l’ayant bien apprécié et me demandant si d’aventure ce ne serait pas du goût d’Adèle cette espèce d’actualisation d’ Alice au Pays des merveilles , j’ai eu à découvrir de la bouche d’Adèle que la maquette tellement sobre et belle des éditions de Minuit , c’était juste parfait, loué soit Garamond !

Bref, si tu as quelques ressources sur ce sujet spécifique, je suis ton public captif.

Amicalement

Phil

@philippe_de_jonckheere : pour en avoir discuté avec des enseignant·e·s, il y a autant de dyslexies, et donc de solutions, que de dyslexiques… Spour ça que l’approche est plutôt de laisser à chacun·e la possibilité d’adapter à ses besoins .

Il n’y a pas de police recommandée pour les dyslexiques :
►http://romy.tetue.net/quelle-police-pour-les-dyslexiques

Les seules recommandations visent à améliorer la lisibilité (marges, alignements, etc.) :
►http://romy.tetue.net/ameliorer-lisibilite-typographique

Et laisser chacun·e adapter à ses besoins, via des plugins navigateurs, etc. ou cette webapp du CNED :
▻https://accessidys.org

#dyslexie

@tetue Mille mercis, je regarde. Dans le cas présent, il s’agirait d’un livre en papier et donc sans plugin. J’avais déjà noté les considérations typographiques (encore que je ne me résouds pas encore à Comic Sans, mais je remarque que le Garamond est généralement bien apprécié d’Adèle) et celles de la mise en page (notamment la justification qui ne serait pas top, j’aurais pourtant cru). Merci d’avoir pris le temps de répondre en tout cas.

#styleguide #UX #Webdesign