Iconduck - Free open source icons, illustrations and graphics
▻https://iconduck.com
#icone #svg
Iconduck - Free open source icons, illustrations and graphics
▻https://iconduck.com
#icone #svg
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
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
Lancement aujourd’hui de la nouvelle maquette d’Orient XXI (@orientxxi, #shameless_autopromo donc) :
►https://orientxxi.info
Évidemment c’est du pur #SPIP, et un aspect était d’assurer la continuité sans douleur avec les 2000 articles déjà publiés sur ce magazine. Boulot graphique affiné avec @diala. Travail sur la structure éditoriale avec Michel Raffoul.
Notre premier axe a été de travailler la lisibilité des pages d’articles. Les articles d’Orient XXI étant longs, c’est l’aspect primordial de la maquette. J’ai choisi la police Lora, que je trouve très lisible à l’écran, avec une certaine légèreté dans le gris typographique :
▻https://fonts.google.com/specimen/Lora
Avec un critère important : une italique joliment dessinée, clairement différenciée, et très lisible.
Pour faire le contraste, les éléments de navigation du site utilisent la police Raleway de The League of Movable Type :
▻https://www.theleagueofmoveabletype.com/raleway
utilisée en capitales, et en jouant sur une opposition marquée entre une version très grasse (black) et une version plutôt maigre (regular).
Pour la maquette du texte, le choix désormais classique d’une colonne unique, au maximum 700 pixels de large, et un corps de texte courant assez massif (environ 21px sur grand écran). L’idée étant, encore une fois, de privilégier le confort de lecture de textes longs. (Références : Medium.com, le mode « Lecteur » de Safari, et lecture Zen du Monde.)
Parmi les petites astuces dans les articles :
– les notes de bas de page s’affichent en colonne de droite quand on clique sur le numéro d’appel de note,
– un calcul un peu rigolo pour insérer à l’intérieur du corps du texte un bandeau d’inscription à la newsletter,
– les liens hypertexte vers l’extérieur ont un graphisme plus nettement différencié des liens internes,
– la maquette des intitulés des images, en dehors de la colonne de texte (parfois à côté de l’image, parfois sous l’image quand elle-même dépasse de la colonne de texte).
Autre aspect important sur les pages d’article : l’entrée de page est travaillée pour introduire rapidement la lecture : titre, chapeau, chemin de fer, boutons de partage, tout ça massif mais « above the fold ».
L’idée est de donner une impression de magazine, et non de quotidien. Ce qui donne des choix graphiques et tygraphiques forcément différents.
Pour le bandeau de navigation de haut de page :
– refonte du logo (l’emblème rond n’est pas de moi),
– petit jeu du menu qui se « décroche » en version plus compacte, et qui redevient visible quand on scroll vers le haut (désormais classique, mais efficace je trouve),
– menu de navigation dont deux éléments ont un sous-menu. Ce menu passe dans le hamburger sur petit écran et sur système qui ne gère pas le survol).
Au niveau de la structuration du site, très gros changement : la structure par rubriques est remplacée par une structure thématique et par pays. Cela repose certes sur les mots-clés de SPIP, mais les « thèmes » et les « continents » ne sont ni des mots-clés SPIP ni des groupes de mots-clés :
►https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
Ce qui permet à la fois des thémes qui se croisent, et une sorte de fil d’ariane sur les mots-clés un peu plus profond qu’avec l’outil classique de SPIP (par exemple : Pays > Pays du Golfe > Bahreïn) tout en réutilisant la thématisation manuelle des 2000 articles déjà publiés :
▻https://orientxxi.info/fr/bahrein
La page d’accueil essaie de mettre en avant plus de contenu, avec des calculs un peu sympas pour savoir quels grands thèmes mettre en avant en fonction de l’actualité des publications.
Systématisation de l’utilisation de mon plugin « Centre d’intérêt d’images » :
►https://www.paris-beyrouth.org/Plugin-centre_image
qui permet d’indiquer directement dans l’espace privé le point « central » d’une image et de faire plein de recadrages différents sans couper n’importe comment.
Toujours sur la page d’accueil, une sorte de « player vidéo » qui présente toutes les vidéos directement là, sans changer de page. Assez rigolo à faire.
Travail sur les pages d’auteurs, avec autant que possible utilisation de photos des auteurs :
▻https://orientxxi.info/fr/auteur/alain-gresh
La récupération du flux Seenthis d’@OrientXXI est toujours là :
►https://orientxxi.info/au-fil-du-web
qui permet de publier un suivi d’actualité de manière vraiment simple.
On conserve également mon outil qui permet d’animer simplement des illustrations :
►https://orientxxi.info/va-comprendre/pourquoi-les-etats-unis-cessent-ils-de-financer-l-agence-des-nations-uni
Converser également cette possibilité, largement utilisée sur les articles historiques du site, d’installer de grandes images en haut de page, avec un jeu de dégradé, ce qui donne un aspect très « magazine » :
▻https://orientxxi.info/lu-vu-entendu/le-canal-de-suez-un-enjeu-toujours-actuel,2557
Yeah super ! Ça mériterait aussi les « jolis soulignements » de Medium (et de nombreux autres médias désormais), dans les corps de textes principaux tout du moins. :)
Salut @arno,
merci pour ce décorticage, toujours intéressant, de projet et beau résultat !
Un petit retour : il semble y avoir les balises html dans le title de certaines page, par ex ▻https://orientxxi.info/magazine/colloque-du-deni-de-palestine-a-l-apartheid,2674
Erreur de copier/coller, c’est cette adresse qui a un title chelou : ►https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
C’est beau, bravo et merci. Il y a une chose que vous avez modifiée, et que je regrette, c’est que dans la séquence des identifiants de l’article, prenons aujourd’hui par exemple : « Israël/Palestine > Médias > Eyal Hareuveni > 29 octobre 2018 », il n’y a plus « Orient XXI ». C’est dommage, parce que quand on fait un copié-collé, ça permet de garder l’identification du journal dont vient l’article...
Le nouveau tag #spip_recette pour recenser les retours d’expérience.
Noto Sans SC Sliced (Chinese Simplified)
▻https://fonts.google.com/earlyaccess#Noto+Sans+SC+Sliced
Noto is a font project that aims to support all languages in the world. This family, Noto Sans Simplified Chinese Sliced, provides slicing optimization and includes Light, Regular and Medium styles. Note: The slicing optimization used by this family only works with browsers that support unicode-range.
Dites, je cherche les listes (par langue) des caractères/glyphes courants utilisés dans les langues mondiales majeures.
Pour les curieux : c’est pour faire du « subsetting » sur mesure de webfonts, pour plein de pays (>15). Une idée ?
Pour l’instant, j’ai trouvé des choses chez font squirrel. C’est très bien, mais j’ai des doutes sur la fiabilité.
Je n’irais pas faire du subsetting précis pour chaque langue, sinon tu vas retomber dans les problèmes historiques des multiples variantes régionales d’ISO 8859 : multilinguisme problématique (tu veux écrire « as the French say : “qui vole un œurf vole un bœuf” » dans un article du site anglais, et hop, le « œ » est tout pété – private joke), noms étrangers qui utilisent des caractères qui ne sont pas dans ton subset (tu parles de « Håkan Juholt » dans un article en français, et le « å » apparaît tout moche parce que tu ne l’as pas conservé dans le subset de la fonte du site français), et à l’heure d’Unicode l’habitude des gens de détourner les caractères d’une autre langue pour faire des effets de signature graphique…
Sur Orient Palms, il se trouve justement que j’ai 15 langues différentes, et que j’utilise un certain nombre de fontes différentes, justement pour éviter d’avoir une énorme police Unicode « complète » à charger… Mais j’ai vraiment limité les variantes :
– il y a la police avec les caractères latins (tous ceux dessinés par le typographe, ça me couvre de l’espagnol à l’allemand en passant par le français et le suédois… Comprendre que j’ai ici une seule version de la police de caractère pour 9 langues différentes :
▻http://www.orientpalms.com
▻http://fr.orientpalms.com
▻http://tr.orientpalms.com
▻http://pt.orientpalms.com
▻http://es.orientpalms.com
▻http://de.orientpalms.com
▻http://it.orientpalms.com
▻http://sv.orientpalms.com
▻http://nl.orientpalms.com
– il y a le fichier du même dessin de caractère avec les caractères cyrilliques et latins (grosso modo deux fois plus lourde),
▻http://ru.orientpalms.com
– il y a encore un fichier du même dessin de caractère, mais avec les dessins grecs et latins (donc égalemment plus lourde que le latin seul),
▻http://el.orientpalms.com
(uniquement sur les sous-titres, les gros titres restent en caractères latins ici)
– il y a un fichier pour les caractères arabes (la fonte contient les caractères latins les plus courants),
▻http://ar.orientpalms.com
– et pour le fun, dans la version coréenne j’ai une (énorme - 1Mo) fonte dédiée, tellement grosse que soit c’est une idiotie soit je compte sur le fait que les coréens ont la meilleure connexion du monde…
▻http://ko.orientpalms.com
– je n’utilise pas de webfonts pour le chinois, ni pour le japonais, parce que là aussi, ça ferait des polices énormes (et on a un traffic pas négligeable sur la Chine, alors je soigne un peu plus l’expérience utilisateur sur cette version).
Par ailleurs, comme je l’ai déjà documenté ici, je n’utilise plus que WOFF et WOFF2, qui sont bien compactés.
Un des aspects à prendre en compte :
– pas question pour moi de gérer 15 fichiers de police différents, c’est le meilleur moyen de se planter dans son organisation et ses mises à jour (surtout si tu t’amuses à modifier des dessins de caractères, je te dis pas s’il faut le reproduire ensuite dans 15 fontes différentes…) ; et comme généralement on a besoin de plusieurs fontes pour faire quelque chose de joli, on multiplie encore le nombre de fichiers (sur Orient Palms, j’ai 2 webfontes dans ma maquette) ;
– je préfère éviter le recours aux options CSS de range Unicode pour gérer par exemple Grec et Latin avec deux fichiers de polices différents qui se complèteraient : d’abord parce qu’il faudrait encore tester la compatibilité du truc (avec les Webfonts et Unicode, je me méfie très lourdement des implémentations dans les brouteurs, qui ont toujours été historiquement merdiques) ; surtout parce que je préfère charger un fichier plutôt que deux.
Après, perso, je préfère généralement n’utiliser que des polices de titraille, j’évite les webfonts sur le texte courant (problèmes de rendus et de lisibilité, temps de chargement des polices sur du texte qu’on devrait pouvoir lire immédiatement, et besoin de 3 voire 4 fichiers juste pour assurer l’affichage gras/italique…). Ça limite énormément les problèmes de subsetting par langue, parce que les caractères hors-subset et le multilinguisme, c’est beaucoup plus rare (genre mettre une citation originale en cyrillique dans un article en anglais, ça se fait, mais dans le titre c’est beaucoup plus rare).
Sinon, si tu tiens à tester pour chaque langue, il y a une astuce que j’avais faite pour ajouter des langues à mon #plugin #SPIP de détection de langues : j’avais besoin de connaître la fréquence des séries de 3 lettres dans quelques langues manquantes dans le script d’origine.
Du coup je suis allé sur le projet Gutenberg, j’ai récupéré quelques gros romans dans la langue qui me manquait, j’ai collé tous les textes (bruts) dans un fichier, et hop j’ai fait une moulinette qui a compté les séries de 3 lettres et m’a retourné un tableau de leurs fréquences respectives. Tu peux facilement faire la même chose pour connaître la fréquence des caractères utilisés dans une langue… (mais voir mon message précédent, je ne pense pas que ce soit une bonne idée).
Roh, merci pour tout ces détails, ça donne à réfléchir. Je savais bien que sur seenthis j’allais avoir de la matière :)
Le contexte chez mon client est légèrement différent : sites e-commerce assez ciblés (contenus peu ou pas littéraire), et grosse préoccupation webperf. Il est très improbable que l’on ait à utiliser des caractères sortant du subset.
Comme tu le soulignes, l’enjeu lors du subsetting, est de décider ce qu’on inclue ou non...
Pour l’instant, j’ai un générateur « toutautomatisé » (utilisant ▻https://github.com/ecomfe/fontmin), qui prend en entrée un ensemble de fichiers ttf (la Roboto et toutes ses variantes, dans mon cas) et une liste de fichiers texte UTF8 (1 par pays), contenant les caractères à utiliser (en faisant gaffe aux caractères invisibles).
Il produit en sortie les formats attendus (woff2, woff, etc...) rangés dans des répertoires qui vont bien. Bien sûr, l’approche ne vaut que pour les sites « européens » (pour simplifier), je ne me suis pas attaqué encore au site chinois.
L’avantage d’avoir tout automatisé, est qu’on pourra changer rapidement le subsetting sans que ce soit la plaie.
Je croise les doigts, et j’espère bien que ma solution tiendra la route.
Au départ, j’ai cherché à comprendre comment faisait ▻https://fonts.google.com pour proposer des webfonts aussi légères. Grosso modo, en plus des optimisations classiques ils génèrent plus de 30 variantes par fonte, optimisées sur mesure et servies dynamiquement selon l’OS et le User-agent. Cet aspect n’est bien sûr pas documenté, et je n’ai pas le temps, les compétences ni le courage de faire la rétro-ingénierie.