Journal Comment s’appelle ce design web ?

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes : aucune
9
10
juin
2022

Je suis retombé sur Qwant un peu par hasard et j’ai vu qu’ils avaient adopté ce design qu’on voit fleurir un peu partout, plat, avec beaucoup de contours marqué comme au crayon gras, des couleurs tranchées et un style presqu'enfantin que je trouve assez déroutant. Apparemment le material design est devenu ringard.

J’ai pris ici une capture des sites Qwant et Gumroad a titre de comparaison. Si tout le monde recommence à se copier comme ça, je me demande si ce design ne risque pas aussi de se ringardiser rapidement.

Mais il s’appelle comment ce design (c’est l'objet de mon journal, d’où le titre) ?

  • # Tristitude ? 

    Posté par  . Évalué à 8.

    tout est dans le titre

    • [^] # Re: Tristitude ? 

      Posté par  (site web personnel) . Évalué à 10.

      Il y a 15 ans :
      une page == beaucoup d'animations, parfois jusqu'au pointeur de souris, souvent de la couleur, une présentation globale calquée sur un journal papier, souvent, plus "vivant" et interactif. de 10 à 30ko

      Aujourd'hui :
      une page == 4 couleurs, 400 caractères, de 3 à 10 liens, 5 images statiques en mode bd. de 2 à 5Mo

      mais d'où vient et où va le reste ? ;p

      • [^] # Re: Tristitude ? 

        Posté par  (site web personnel, Mastodon) . Évalué à 7. Dernière modification le 13 juin 2022 à 10:00.

        Dans le cas particulier de Qwant : deux images en PNG transparent mais qui sont des photos, donc qui prennent un max de place. Plus le classique des sites modernes :

        • Le framework JS à charger au premier appel
        • Les polices
        • Énormément de CSS (205 ko, 33 ko compressés)
        • Un document chargé très lourd par rapport à ce que ça affiche (je peux difficilement appeler ça « une page HTML » vu que le gros du contenu est du JS embarqué).

        … et un mauvais souvenir de ce qu’était le web il y a 15 ans, aussi. En 2003, pendant mes études, j’avais suivi un cours de dev web avec un projet, dont l’une des contraintes était « le site doit être utilisable via un modem 56 k » (on en trouvait encore). Ben c’était difficile, parce que la moindre animation explose les « 10 à 30 ko » dont tu parles – le gif est un format inefficace en réalité. Mais on avait plus l’habitude d’attendre plusieurs secondes le temps que toute la page se charge.

        La connaissance libre : https://zestedesavoir.com

        • [^] # Re: Tristitude ? 

          Posté par  . Évalué à 6.

          Il faut nuancer ton histoire de contraintes.
          Au boulot, j'ai fait pas mal de sites dans les années 90, quand c'était encore plus lent. Les modems étaient les mêmes, mais les tuyaux, les serveurs et les clients étaient beaucoup moins «gros». On avait pas mal de trucs, d'astuces et d'outils pour ne pas exploser les «10 à 30 ko» et pour optimiser le chargement des pages, des photos et des Gifs animés. Mais c'est le métier, un étudiant ne peux pas connaître. On attendait un peu, c'est vrai, mais guère plus de 2 ou 3 secondes pour avoir l'affichage, le bas de page se chargeant plus tard.

          Par exemple

          • On peut facilement réduire le nombre de couleurs du Gif tout en gardant le lissage des courbes : on indique par des sélections judicieuses les zones de l'image à privilégier pour l'indexation, c'est à dire les courbes.
          • Quant aux animations il y a des logiciels pour n'enregistrer que les parties modifiées du Gif.
          • On peut sur-compresser certaines parties d'un JPEG, utiliser des tables de luminances, compresser différemment la luminance et la chrominance, … C'était un peu rustique à faire, mais aujourd'hui TurboJpeg et MozJpeg l'automatisent.
          • On peut précharger les images de la page suivante en leur donnant une taille d'un pixel.
          • les grosses images étaient parfois découpées en morceaux, que le serveur poussait successivement.
          • On découpait les pages en tranches indépendantes, pour que le navigateur les charge et affiche successivement, notamment ce qui ne tenait pas dans la partie visible de la page, les écrans étant petits (800 x 600 puis 1024 x 768).
          • Évidemment les grosses images n'étaient pas dans la première partie visible.
          • On comptait les octets! si, si : chaque signe, espace et retour chariot «pas utile» pouvait être éliminé par une moulinette.
          • Je me rappelle vaguement avoir fait des essais sur les encodages de caractères pour gratter un peu…
          • [^] # Re: Tristitude ? 

            Posté par  (site web personnel, Mastodon) . Évalué à 3. Dernière modification le 13 juin 2022 à 12:17.

            Certes, mais les années 90, c’est plus « il y a 25 ans » que « il y a 15 ans », et le web a énormément changé entre ces deux dates. L’optimisation à mort du web dans les années 90, clairement oui. Au milieu des années 2000, c’était déjà beaucoup moins le cas.

            La connaissance libre : https://zestedesavoir.com

      • [^] # Re: Tristitude ? 

        Posté par  . Évalué à 3.

        Il y a 25 ans, on faisait plus avec moins :
        https://web.archive.org/web/19970213054442/http://dsiegel.com/home.html

        :-)

  • # design plat ?

    Posté par  (site web personnel, Mastodon) . Évalué à 4.

    Emploi de formes simples et aplats de couleurs vives → Flat design ?

    “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # Comme Blast ?

    Posté par  . Évalué à 5.

    Le premier site du genre que j'ai vu c'est celui de Blast.
    On dirait que c'est un sous-ensemble de flat design.

  • # Neubrutalism

    Posté par  . Évalué à 8.

    Neubrutalism ou neobrutalism.

    Perso, je déteste.

    • [^] # Re: Neubrutalism

      Posté par  (site web personnel) . Évalué à 6. Dernière modification le 10 juin 2022 à 09:46.

      Ce n'est pas un style architectural, le neo-brutalisme ? Que je déteste aussi, d'ailleurs. Essayer d'exploiter le style du béton brut de décoffrage, c'est à mon avis du délire d'artiste convaincu de faire un truc génial alors qu'en fait c'est juste moche.

      • [^] # Re: Neubrutalism

        Posté par  . Évalué à 5. Dernière modification le 10 juin 2022 à 11:30.

        C'est un peu comme dans tout mouvement artistique : tu as du bon, du génial et du mauvais (beaucoup ?). Perso, je ne suis en général pas fan de ce que fait Le Corbusier, mais j'aime baucoup les photos que j'ai vues de l'intérieur du siège de l'UNESCO à Paris. Perso, j'ai vu des trucs hyper réussis en béton brut, même si je ne saurais pas te donner de références comme ça.

        Un ami à moi qui était étudiant en histoire de l'art m'a dit une fois qu'il n'y avait pas de style artistiques inintéressant, uniquement des styles dans lesquels tu n'as pas encore rencontré l'œuvre qui te parle…

        • [^] # Re: Neubrutalism

          Posté par  (site web personnel) . Évalué à 5.

          Il faut aussi voir que ce qu'on trouve bien de nos jours est parfois vu comme horrible à l'époque.

          Par exemple, si on prends l'impressionnisme et son histoire, les débuts ont été assez houleux.

          Un siècle plus tard, on peut difficilement nié l'influence que le mouvement a eu (exemple, Van Gogh a été inspiré par l'impressionnisme, et lui même a inspiré par exemple des styles graphiques de jeux vidéos comme Super Mario World II: Yoshi Island, avec le niveau 6-7 qui est pour moi un hommage direct au fauvisme du peintre).

          Et pourtant, c'était contre les canons du beau de l'époque.

          Ensuite, bien sur, ça veut pas dire que tout ce qu'on trouve moche de nos jours ne va pas l'être plus tard, ni que tout le monde utilise le style de façon correcte (ni même que la vision artistique est respecté dans le produit final, même si les sites web sont sans doute moins affectés que les bâtiments dans ce domaine)

    • [^] # Re: Neubrutalism

      Posté par  . Évalué à 7.

      Merci! Je ne connaissais pas.

      Après un tour sur web, je suis tombé sur le billet suivant, qui explique bien, me semble-t-il, ce style : https://hype4.academy/articles/design/neubrutalism-is-taking-over-web

      0. Assume good faith 1. Be kind to other people 2. Express yourself 4. Apply rule 0

    • [^] # Re: Neubrutalism

      Posté par  (site web personnel, Mastodon) . Évalué à 7.

      Je ne connaissais pas le préfixe "néo-" accolé au "brutalisme", mais on en parlait justement ici-même l'hiver dernier : https://linuxfr.org/users/devnewton/liens/le-brutalisme-prend-le-controle-du-web

    • [^] # Re: Neubrutalism

      Posté par  (site web personnel) . Évalué à 3.

      Merci pour la réponse :)

  • # Truc à la mode ?

    Posté par  (site web personnel, Mastodon) . Évalué à 7. Dernière modification le 10 juin 2022 à 09:14.

    C'est assez rageant d'ailleurs de voir que sur internet ces effets de mode qui font qu'à un moment donné les sites finissent par tous se ressembler.

    « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

    • [^] # Re: Truc à la mode ?

      Posté par  . Évalué à 2.

      je suis assez d'accord sur le fait que les effets de mode qui contaminent tous les sites et les services peut être assez exaspérant, cela dit n'utilisant ni qwant, ni gumroad, c'est la première fois que je vois ce type de visuel.

      Sans forcément en raffoler, je trouve ça plutôt rafraichissant avec un petit côté BD / illustration, par rapport à tous les effets lourdingue de dégradés, d'ombre et de flou qu'on retrouve sur de nombreux sites, je pense donc qu'on est encore loin d'avoir ça sur tous les sites web.

      « Le pouvoir des Tripodes dépendait de la résignation des hommes à l'esclavage. » -- John Christopher

  • # Mockup !?

    Posté par  . Évalué à 6.

    Non rien d'officiel dans le nom…

    Juste que personnellement j'ai l'impression d'être sur une maquette de site ! Le genre de truc fait rapidement avec des éléments génériques/neutres pré-existants uniquement dans le but de définir la mise en page sans s'attacher au look.

    Bref, pas fan non plus. Mais je suis plutôt représentatif de ceux qui n'aime pas suivre les modes.

    Cela ne m'avait pas empêché d’apprécier la tendance épurée, n'hésitant pas à grossir textes et marges : même si ça avait pu me heurter un peu au début, j'ai compris les apports de ces styles qui donnent une apparente simplicité tout en gardant des touches subtiles pour le look. Par exemple l'usage de fonds dégradés et d'ombrages presque imperceptibles (on calme le jeu après en avoir abusé), mais qui habillent discrètement (on s'en rend compte surtout en les retirant).

    Là, moins convaincu par ces assemblages de couleurs… on verra avec le temps. Ça reste bien d'essayer d'être différent, mais du coup j'espère aussi que cela ne va pas trop se répandre '

  • # Une forme de Brutalisme numérique

    Posté par  (Mastodon) . Évalué à 7. Dernière modification le 10 juin 2022 à 09:57.

    Je dirais que ça se rapproche du brutalisme. Celui-ci n'a plus trop la côte en terme d'architecture mais revient à la mode dans d'autres pans du design. On peut par exemple mettre ça en parallèle avec les produits de chez Teenage Engineering qui se vendent comme des petits pains malgrés leur prix très élevés:
    https://teenage.engineering/products

    TE OP1-field + TX-6

    TE Computer-1

    Ce sont eux aussi qui ont conçus les enceintes bluetooth ikea et la console de jeu playdate:

    playdate

    Titre de l'image

    EDIT: j'ai été doublé

  • # Le platisme,

    Posté par  . Évalué à 10.

    c'est donc un truc de complotistes qui croivent que tout est plat, et doit être plat. Ils croivent plas si bien dire.

  • # Perso

    Posté par  (site web personnel) . Évalué à 4.

    Je serai tenté de l'appeler CGA-HD, en référence au CGA qui autorisait que 16 couleurs.

    Ça fait bizarre de retrouver les limitations de mon enfance en nombre de couleurs affichables en même temps par le biais de "palettes de couleurs", je croyais que la mode "retour à la période de nos grand-parents" c'était que pour les vêtements, la nos enfants goûtent aux joies de notre enfance question couleurs.

    Espérons que cet effet de mode passe assez vite.

    • [^] # Re: Perso

      Posté par  (site web personnel) . Évalué à 8.

      On peut faire de belles choses avec 16 couleurs:

      https://lospec.com/palette-list/dawnbringer-16
      https://androidarts.com/palette/16pal.htm

      Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

    • [^] # Re: Perso

      Posté par  . Évalué à 6.

      De mon expérience, en pratique, en CGA on avait des graphismes en 4 couleurs en 320x200. Pour avoir plus de couleurs, il fallait avoir de l'EGA (16 couleurs je crois). Puis vint le vga avec 256 couleurs (youhou !).

      • [^] # Re: Perso

        Posté par  (site web personnel) . Évalué à 3.

        Il fait lire le lien… ;-)
        16 en 160x100 (les jeunes on ne rigole pas au fond)
        4 en 320x200.
        Fallait choisir entre résolution et couleurs.
        Ceci dit, le design critiqué doit être aussi possible en 4 couleurs.

        • [^] # Re: Perso

          Posté par  (site web personnel, Mastodon) . Évalué à 5.

          16 en 160x100 (les jeunes on ne rigole pas au fond)

          Le vieux du fond ne rigole pas non plus. De mes souvenirs mes plus lointains (et qui remontent au vrai CGA, celui avec la neige) on ne peut pas passer le hardware en 160x100, par contre, avec un subtil tramage des quatres couleurs disponibles dans un bloc 2x2 certains ont fabriquées de fort belles images.

          Ensuite, j'ai eu une des premiers clone de l'EGA. Là, j'ai bien galéré, mais j'étais arrivé à un mode 160x100 (ne tentez pas chez vous, ça peut griller votre écran) toujours avec les 16 couleurs mais avec un "pan" dans une image 640x480.

          Bref, une grande époque pour moi. Donc je suis preneur d'histoires sur les hacks CGA.

          • [^] # Re: Perso

            Posté par  . Évalué à 2.

            Un peu plus tard, je me souviens avoir trafiqué les modes XWindow pour passer l'écran VGA 800 x 600 en 900 x qqchose avec beaucoup de couleurs. L'écran a tenu un an avant de griller, la carte graphique S3Trio a bien résisté.

        • [^] # Re: Perso

          Posté par  . Évalué à 5.

          Je l'ai lu, c'est pour cela que j'ai dit "en pratique". Je n'ai jamais vu une seule application en 160x100 en 16 couleurs à cette époque. Le CGA c'était les 4 couleurs, et parfois en N&B dans une définition plus élevée (j'ai joué à SimCity dans ce mode).

          Que celui qui associe 16 couleurs en parlant du CGA lève le doigt ! ;-)

          • [^] # Re: Perso

            Posté par  . Évalué à 4.

            Je ne lève pas le doigt ; ma carte CGA ne pouvait pas supporter plus de 4 couleurs. Et impossible d'aller piocher autre chose que le cyan et le magenda ; du coup sur mon jeu de golf, l'herbe était plutôt bleue. Avatar avant l'heure…

            Par contre il y avait en effet le 640 x 200 en noir&blanc.

            Et avec le VGA, il y avait tout un tas de modes cachés qui permettaient de sortir un peu des sentiers battus. Si le standard était 320 x 200 en 256 couleurs, on pouvait pousser jusqu'au 360 x 240. Il fallait connaître les incantations magiques IBM pour y accéder ; et la scène démo s'en servait bien.

          • [^] # Re: Perso

            Posté par  (Mastodon) . Évalué à 4. Dernière modification le 14 juin 2022 à 07:48.

            Je l'ai lu, c'est pour cela que j'ai dit "en pratique". Je n'ai jamais vu une seule application en 160x100 en 16 couleurs à cette époque.

            Que celui qui associe 16 couleurs en parlant du CGA lève le doigt ! ;-)

            J'ai eu au moins un jeu qui offrait plus de 4 couleurs: Round 42.
            https://www.dosgames.com/game/round-42/

            La preuve en video:
            https://www.youtube.com/watch?v=sFAx9ukaZe0

            Et un autre exemple, que je n'ai pas joué par contre, Paku Paku:
            paku paku

          • [^] # Re: Perso

            Posté par  (site web personnel) . Évalué à 1. Dernière modification le 14 juin 2022 à 08:19.

            Que celui qui associe 16 couleurs en parlant du CGA lève le doigt ! ;-)

            En pratique je voulais éviter les réponses "si, si, CGA fait plus que 4 couleurs" mais je me suis pris l'inverse du coup, mauvais calcul, difficile de faire plaisir à tout le monde :).
            (de souvenir lointain j'ai commencé avec EGA donc 320x200 en 16 couleurs, je ne peux donc pas vraiment argumenter : je ne sais pas, je me réfère donc à PsychoFox pour l'argumentation)

            • [^] # Re: Perso

              Posté par  (Mastodon) . Évalué à 4.

              Bon je crois que le trick du 16 couleurs en CGA, ça imposait le fait de fonctionner en mode texte et l'utilisation de caractères ASCII, raison pour laquelle les graphismes des jeux mentionnés plus haut sont très primitifs.

              • [^] # Re: Perso

                Posté par  (site web personnel, Mastodon) . Évalué à 2.

                fonctionner en mode texte et l'utilisation de caractères ASCII

                …étendu (à l'époque déjà pour faire du graphisme et non des langues étrangères)
                https://en.wikipedia.org/wiki/Box-drawing_character#Historical
                Une grande partie est reprise dans Unicode et complété par d'autres
                https://en.wikipedia.org/wiki/Box_Drawing
                https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block)

                “It is seldom that liberty of any kind is lost all at once.” ― David Hume

              • [^] # Re: Perso

                Posté par  (site web personnel, Mastodon) . Évalué à 2. Dernière modification le 14 juin 2022 à 21:45.

                Bon je crois que le trick du 16 couleurs en CGA, ça imposait le fait de fonctionner en mode texte et l'utilisation de caractères ASCII, raison pour laquelle les graphismes des jeux mentionnés plus haut sont très primitifs.

                Il n'y avait que l'ascii, il y avait aussi les caractères semi-graphiques :

                codepage 437

                Mais le problème c'est qu'ils étaient figés dans la ROM de la carte CGA, donc impossible de les redéfinir. C'est pourquoi je doute fort que la capture d'écran de Puka&Puka vienne de cette famille de carte, surtout au vu des petites icônes multicolores au milieu en bas…

                • [^] # Re: Perso

                  Posté par  (site web personnel, Mastodon) . Évalué à 4.

                  Je suis allé voir la page et on y indique « It uses a tweaked CGA mode. This allowed the game to show more than the usual 4 colors on a CGA adapter, but it also made the game run unpredictably on later video cards. (And also in DOSBox, which does not seem to render the game properly unless you set the "machine" setting to "cga"; look for the "[dosbox]" section in your dosbox.conf file and change the "machine=…" line to "machine=cga".) »

                  “It is seldom that liberty of any kind is lost all at once.” ― David Hume

        • [^] # Re: Perso

          Posté par  (site web personnel) . Évalué à 10.

          D'où la célèbre citation 4c ought to be enough for anybody de Fill Pates, qui donnera le Théorème des quatre couleurs. Infox.

      • [^] # Re: Perso

        Posté par  . Évalué à 4.

        Vivement le design en niveau de vert

        :D

  • # ergonomie ?

    Posté par  . Évalué à 1.

    En dehors du style avec lequel j'ai beaucoup de difficultés, il vous a fallu combien de temps pour voir la barre de recherche ?

  • # Le blanc sur blanc, ça ne me manquera pas.

    Posté par  . Évalué à 3.

    Moi, si on passe à des trucs avec un peu de couleur, ça ne me posera pas de soucis.
    La mode flat design en blanc sur blanc, c'est fatigant.
    Les formulaires où tu ne vois pas où sont les champs,
    Les sites de vente en ligne ou tu achètes de objets blancs présentés sur fond blanc…
    Ça ne pourra pas être pire.
    C'est pas très joli mais au moins on voit les différents éléments.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.