1995-2022 – De l’informatique au web responsive et “user-centric”
Les débuts de l’Internet : un webdesign inexistant et un terrain d’expérimentation technique
Au milieu des années 90, Internet est dans sa période d’émergence. A cette époque, le fait de charger une image via un modem 56K (vous vous souvenez du bruit ?) demande parfois plusieurs minutes et les coûts de connexion nécessitent de faire un casse à la Banque de France !
La marge de manoeuvre créative est réduite à sa plus simple expression et l’on concentre les efforts sur le développement technologique. Les sites restent de fait relativement sommaires en terme de webdesign et il n’est pas question à l’époque de CMS comme WordPress mais de développement spécifique.
“Souvenez-vous, l’âge de pierre du digital, c’était il y a seulement… 30 ans !”
Les années 2000 et suivantes : un webdesign débridé sous contrainte technique
La technologie évoluant, les sites Internet s’enrichissent au fur et à mesure d’animations plus complexes (le feu Flash de Macromedia) et se voient affublés d’un décor graphique digne des plus grands péplum.
Tout bouton d’action (call to action en anglais) subit les affres du « kitchounet Skeuomorphisme », dans une vaine tentative de le rendre réaliste.
Effets de contraste, ombre portée, dégradé en surface, tout est bon pour surcharger la belle page web.
À cela s’ajoute la volonté de tout afficher sur un écran “standard” équivalent à 19 pouces… (Mais pourquoi ? Nous ne l’avons jamais compris !) Ce qui génère des pattes de mouche typographiques et une gestion pour le moins engoncée de l’espace, digne d’un coffre de Smart surchargé par quatre ou cinq cantines de voyage !
La dernière décennie : le webdesign sous l’influence du mobile et l’avènement du user centric (OUF !)
De tous les changements survenus sur les sites internet, l’arrivée du mobile constitue l’un des plus importants pour le webdesign.
Allègement nécessaire du poids informatique, simplification des écrans, organisation dynamique de l’information dans des tailles et des positions différentes, standardisation de la structure (responsive mobile) sont autant de contraintes générées par l’usage mobile. C’est la période caractérisée par :
- Le webdesign est mis sous perfusion, alimentée à grosses gouttes par les concepts de mobile first et d’UX first.
- Le Flat design et le Material design, arme absolue de Google pour faire « rentrer » le webdesign dans une codification qui lui est propre ;
- Le responsive design ;
- La disparition du concept de la ligne de flottaison absolue au profit du long scroll ;
- L’omniprésence du full screen à effet immersif ;
- Le grand retour de l’animation dans des proportions maîtrisées et utiles à l’usager ;
- Des call to actions qui servent l’interactivité et l’affordance de façon simple et intuitive ;
- Les typos de remplacement qui ringardisent le recours à l’Arial, le Verdana ou l’Helvetica ;
- Les capacités technologiques se libèrent et l’expérience utilisateur générée devient essentielle. Sans elle, pas d’interpellation, ni de mémorisation, ni de prise de décision ;
- Une exigence technique accrue sur les temps de chargement et la compatibilité mobile.
Tout bouton d’action (call to action en anglais) subit les affres du « kitchounet Skeuomorphisme », dans une vaine tentative de le rendre réaliste.
Effets de contraste, ombre portée, dégradé en surface, tout est bon pour surcharger la belle page web.
À cela s’ajoute la volonté de tout afficher sur un écran “standard” équivalent à 19 pouces… (Mais pourquoi ? Nous ne l’avons jamais compris !)
Ce qui génère des pattes de mouche typographiques et une gestion pour le moins engoncée de l’espace, digne d’un coffre de Smart surchargé par quatre ou cinq cantines de voyage !
Comme la forme se libère avec l’avancée technologique, on travaille la fonction, deuxième concept essentiel du design.
Face aux développements d’autres canaux de communication numériques (réseaux sociaux, vidéos…), on se demande à quoi sert réellement le site web et on en vient à vénérer le principe du user-centric (enfin !).
La conception orientée utilisateur a pour objectif de répondre parfaitement aux attentes et aux usages de l’audience ciblée. Elle passe par :
- la définition de personas, ces individus à la fois fictifs et réalistes permettant de décrire la vie, les motivations et les freins des cibles visées ;
- vient ensuite la modélisation des pages du site avec des wireframes et des zonings (maquettes fonctionnelles en représentation filaire) ;
- auxquels on ajoutera par la suite une surcouche d’animation utile à la navigation et à l’expérience.
Durant ces trois dernières décennies, notre agence web créée à Nantes en 1995 par ses deux associés Thomas Georgelin et Olivier Robé a été témoin et acteur de ces évolutions de l’internet, des usages web, des méthodes et des outils de développement.
Vous souhaitez réaliser un site web Responsive et User Centric ? Contactez notre agence au 02 40 50 77 66 ou rencontrons nous ! L’agence ImagesCreations est basée au coeur de Nantes Quartier Zola.
À lire aussi ?
FAQ — Du web des années 90 au responsive « user-centric »
Comment le webdesign a-t-il évolué de 1995 à 2022 ?
Des débuts très techniques (modem 56K, HTML minimal) au foisonnement visuel des années 2000 (Flash, effets), puis à l’ère mobile-first. Le design s’est simplifié, standardisé et centré sur l’usage : responsive, accessibilité, performance et UX mesurable.
Pourquoi les sites des années 90 paraissaient-ils « bruts » ?
Contraintes fortes : débits lents, navigateurs peu capables, peu d’images et pas de CMS grand public. On réservait l’effort au fonctionnel ; la couche visuelle restait sommaire et pensée pour quelques rares résolutions « standards ».
Quel rôle Flash a-t-il joué… et pourquoi a-t-il disparu ?
Flash a popularisé animations et interactivité riches dans les années 2000. Il a reculé avec l’essor du mobile, les enjeux de sécurité, de performance et l’arrivée de standards ouverts (HTML5/CSS3/JS) plus accessibles et SEO-friendly.
Skeuomorphisme vs Flat/Material : quelles différences clés ?
Le skeuomorphisme imite le réel (ombres, textures) pour « rassurer ». Le flat/material simplifie la forme, hiérarchise par la couleur, l’espace et le mouvement. Objectif : clarté, cohérence, performances et accessibilité accrues.
Le responsive design, c’est quoi et pourquoi c’est devenu la norme ?
Un même contenu qui s’adapte fluidement aux écrans (mobile, tablette, desktop) via grilles flexibles et media queries. Il répond à la diversité des devices, améliore l’UX et soutient le SEO, notamment sur mobile.
Mobile-first ou desktop-first : comment choisir l’approche ?
Mobile-first force la priorisation des contenus et la performance ; idéal quand l’audience est majoritairement mobile. Desktop-first peut se justifier pour des usages pro complexes. Dans tous les cas, testez vos parcours clés sur tous formats.
Que signifie « user-centric » ou UX-first dans la pratique ?
Concevoir à partir des besoins réels : comprendre les utilisateurs, leurs contextes, contraintes et objectifs. On priorise utilité, utilisabilité et désirabilité, puis on mesure l’impact (tâches, conversion, satisfaction) pour itérer.
Faut-il encore se préoccuper de la « ligne de flottaison » ?
Le mythe s’est estompé avec le scroll naturel sur mobile. L’essentiel : un en-tête clair (proposition de valeur, CTA) et une hiérarchie qui incite à explorer. Le long scroll fonctionne si le rythme, la lisibilité et les signaux d’interaction sont soignés.
Comment concevoir des CTA efficaces aujourd’hui ?
Lisibles, contrastés, assez grands pour le tactile, libellés orientés action (« Essayer », « Obtenir un devis »), et placés aux moments clés du parcours. Le mouvement doit guider, pas distraire. On valide via tests et A/B testing.
Typographies : pourquoi sortir d’Arial/Verdana/Helvetica ?
Les webfonts et variables offrent identité, lisibilité et performance (un seul fichier pour plusieurs graisses). On optimise : tailles relatives, interlignage, contraste, fallback propres et rendu net sur écrans haute densité.
À quoi servent wireframes et zonings en amont ?
Ils modèlent la structure et l’information sans le « bruit » du style. On aligne parties prenantes, on valide la hiérarchie, les flux et les états. On gagne du temps en évitant des allers-retours coûteux au stade graphique ou code.
Personas : comment les créer et les utiliser utilement ?
Basés sur données (analytics, interviews, support), ils synthétisent objectifs, freins et contextes. Ils guident priorisation, contenus, ton et fonctionnalités. On les met à jour et on évite les clichés non étayés.
Animations : quand sont-elles vraiment utiles ?
Quand elles servent la compréhension : feedback, micro-interactions, transitions qui préservent le contexte. Légères, accessibles (préférences « réduire les animations »), performantes et toujours mesurées côté impact.
Pourquoi la performance mobile est-elle devenue critique ?
Temps de chargement et réactivité influencent directement conversion, rétention et SEO. On optimise images, polices, JS, cache et on surveille Core Web Vitals (LCP, CLS, INP) pour maintenir une expérience fluide.
Comment intégrer l’accessibilité dès le design ?
Contrastes adéquats, taille/espacement tactiles suffisants, focus visible, textes alternatifs, ordre logique, formulaires étiquetés. Le design system porte ces critères pour que l’accessibilité reste un réflexe, pas un patch.
Design system : pourquoi structurer composants et grilles ?
Pour la cohérence, la vitesse d’exécution et la qualité. Des composants éprouvés (accessibles, performants) réduisent les risques en prod, facilitent la maintenance et accélèrent les variantes responsive.
Images et médias : quelles bonnes pratiques modernes ?
Formats efficaces (WebP/AVIF), dimensionnement côté serveur, srcset/sizes pour responsive, lazy-loading raisonné, sous-titres/transcriptions pour l’audio-vidéo. On veille à la qualité perçue et au budget performance.
UX et SEO : comment travaillent-ils ensemble ?
Une architecture claire, des contenus utiles, des pages rapides et stables profitent aux utilisateurs et aux moteurs. Les Core Web Vitals et la structure sémantique aident l’indexation et soutiennent la conversion.
Comment tester et itérer efficacement ?
Combiner tests utilisateurs (qualitatif), analytics (quantitatif) et A/B tests sur hypothèses ciblées. Mesurer avant/après, prioriser par impact/effort, documenter les apprentissages dans le design system et la roadmap.
Réussir une refonte sans « tout casser » : les clés ?
Cartographier contenus et SEO, définir objectifs UX/tech, prototyper, migrer avec redirections 301, surveiller les métriques post-lancement et corriger rapidement. Garder l’ADN de marque tout en modernisant l’expérience.