Le Web Design : les tendances UX et UI à ne pas manquer

La psychologie humaine a un impact sur l'UX design, et nécessite à tout designer de connaître quelques principes de lois UX pour bien comprendre le comportement humain et ainsi créer les meilleures interfaces.

Hick et Fitt, vous les connaissez ? Ces principes de loi formulés par des spécialistes du comportement humain et de la psychologie, montrent l’impact que peut avoir la dimension « visuelle » auprès des internautes, tant sur leurs prises de décisions que sur leurs émotions (qu’elles soient positives ou négatives). Ces 5 lois de principes en psychologie vous aideront à comprendre les habitudes de vos utilisateurs, pour améliorer votre UX design en travaillant sur l’apparence et la navigation de votre site internet.

Les icônes et les illustrations sont des éléments essentiels dans le design web, ils ont le pouvoir d'améliorer l'expérience utilisateur et d'ajouter de la personnalité au design d'un site. Dans cet article nous allons expliquer comment ces éléments visuels peuvent améliorer votre site et comment ils y parviennent.

Si vous êtes un webdesigner à la recherche d'inspiration, de tendances et de conseils pour enrichir votre expertise, ne cherchez pas plus loin. Voici une sélection de 10 comptes Instagram à suivre pour nourrir votre créativité et découvrir les dernières tendances en matière de design web.

Avec l’invasion de la 3D dans le design, de nouvelles tendances UI prennent de l'ampleur sur les applications mobiles et web. Claymorphisme, Skeuomorphisme, Neumorphisme et Glassmorphisme ça vous parle? Explorez cet article pour comprendre ces 4 tendances 3D et apprendre comment les intégrer à vos créations.

Aujourd’hui, la communication sur les réseaux sociaux est essentielle pour les entreprises, mais aussi pour les professionnels du graphisme et du design. D’où l’importance de maîtriser parfaitement les dimensions d’images recommandées sur chaque plateforme.

Cependant, il n’est pas si simple de retenir des dizaines de formats différents, d’autant plus que les exigences et les recommandations des médias sociaux évoluent régulièrement. C’est pourquoi nous vous proposons cet aide-mémoire qui vous permettra de connaître en quelques secondes les tailles de visuels dont vous avez besoin pour Facebook, Twitter, Instagram et bien d’autres en 2023.

La deuxième édition du Config 2023, la keynote à la sauce Figma, vient de s’achever. La célèbre plateforme de conception d’interface web et mobile a annoncé une série d’évolutions qui sont censées révolutionner la manière dont les webdesigners, ergonomes et graphistes UI/UX conçoivent leurs prototypes au sein de leur équipe de développement. Présentation du mode Dev Mode, des variables, du prototypage avancé et de quelques petites autres mises à jour.

Pour apprendre ou vous perfectionner, vous pouvez bien entendu suivre une formation, lire un livre, ou encore suivre des tutoriels sur YouTube. Mais les jeux vidéo peuvent aussi constituer un excellent moyen de développer votre savoir tout en passant un bon moment.

Créer un site est un véritable défi. Ce qui anime un web designer, c’est la volonté de développer le produit parfait (ou presque) : à la fois rapide, esthétique, fonctionnel et accessible. Mais cette recherche permanente de la performance peut se faire au détriment d’autres aspects…

Alors que la question écologique prend de plus en plus d’importance, il peut être intéressant de se questionner sur l’impact environnemental du web. Comme vous le savez sûrement, les data centers, qui “stockent” les milliards de données qui circulent sur internet, sont de véritables gouffres énergétiques…

Dans ce contexte, est-il possible, pour un designer, de contribuer à réduire l’empreinte carbone du web à son niveau ? Voici quelques pistes pour avancer sur la voie du “green UX”, une manière plus écologique de concevoir des sites.

L’hiver approche à grands pas, et qui dit hiver dit fêtes de fin d’année ! Mais en attendant les guirlandes et les cadeaux sous le sapin, Noël est aussi l’occasion de décorer un site web ou un support graphique en lui apportant une petite touche d’originalité.
Nous avons donc sélectionné pour vous une multitude de ressources gratuites sur ce thème, à utiliser sans modération pour vos projets : icônes, arrière-plans, mockups, polices, cartes de vœux…

Les librairies d’animation web sont de véritables mines d’or pour les webdesigners et les développeurs qui souhaitent créer des interfaces dynamiques et modernes, tout en proposant une expérience utilisateur vraiment unique.

Qu’il s’agisse d’animations CSS ou JavaScript, les possibilités sont nombreuses sur internet : voici donc une sélection de bibliothèques qui proposent une grande variétés d’effets et de styles.

Que cela soit dans le cadre d’une sortie d’études, d’une reconversion professionnelle, ou de la création d’une activité complémentaire, il se peut que vous commenciez tout juste une activité d’auto-entrepreneur, ou bien que vous recherchiez votre premier emploi dans le monde du design.

Tout d’abord : félicitations ! Ensuite, de nombreux employeurs ou clients vous demanderont (à juste titre) de leur fournir un portfolio afin d’avoir une meilleure visibilité sur votre patte artistique ou sur vos compétences.

Mais, votre activité débutant à peine, il est possible (et normal) que votre portfolio soit pour l’instant une feuille blanche. Voici quelques exemples de projets que vous pourriez rajouter à votre portfolio si vous n’avez pas d’expérience professionnelle.

Un peu d’humour et de légèreté pour commencer à préparer les vacances :). Inspiré par le concept des joies du code, nous avons partagé depuis plusieurs semaines sur notre page Facebook, une série de mèmes que nous avons créé ou traduit autour du métier de Webdesigner et des joies du web design.

J’espère que ces images vous donneront le sourire pour commencer la journée de bonne humeur.

A partager sans modération

Avec quelques modifications ici ou là, vous pouvez rendre votre contenu interactif encore plus intéressant pour vos utilisateurs.

Nous allons voir quelques exemples d’animations à faire pour mettre en évidence la hiérarchie de votre site, attirer l’attention de votre utilisateur, ou même le divertir.

La typographie joue une place importante dans l’univers graphique d’une marque ainsi que la façon dont un message peut être plus ou moins bien reçu par son audience.

Cet article est une traduction libre d’un article de RefactoringUI

Qu’il le veuille ou non, tout développeur devra, un jour ou l’autre, gérer le design de sa création. Qu’il s’agisse de prendre des décisions vis-à-vis de l’apparence d’un site, ou de gérer l’interface utilisateur, savoir coder ne suffit pas toujours. 

En effet, peut-être que votre entreprise ne dispose pas d’un webdesigner à plein temps et qu’il vous revient la lourde tâche de prendre des décisions en matière d’esthétique ou d’UI. 

Je vous vois déjà lever les yeux au ciel : « Mais je suis un développeur moi, pas un artiste ! ». Détendez-vous, on vous offre quelques conseils pour améliorer le design de vos interfaces avec de la technique plutôt que du talent, même si vous n’y connaissez rien au webdesign.

Aujourd’hui nous partageons avec vous un petit jeu en ligne ludique et très simple qui vous permettra de tester votre oeil de designer web.

Aujourd'hui nous vous proposons un outil qui n'est pas nouveau, mais qu'il faut connaître si vous avez l'habitude de générer à la main les sprites pour vos projets web.

Un petit saut dans le temps vous intéresse ? Découvrez le site UX Timeline qui vous propose de revenir sur les interfaces des plateformes du web.

Vous vous sentez d’humeur nostalgique ? Aujourd’hui le BlogDuWebdesign vous propose de découvrir un framework CSS centré sur la Nes et sa grande soeur la Super Nintendo : NES.css.

Dans cet article, le BlogDuWebdesign vous propose de découvrir une des réalisations CSS et HTML les plus impressionnantes que nous avons découverts : The Mine

Si nous devions classer la liste des manques incompréhensibles de la spécification Web, la personnalisation en CSS de la barre de défilement serait très certainement dans le top 3 (nous donnons la palme à l'impossibilité de choisir comment est réparti le stroke en SVG, mais ce n'est pas le sujet d'aujourd'hui).

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir une ressource pour simplifier l'usage des SVG, sobrement nommé SVG.js.

Pour terminer cette première semaine de septembre, on vous propose de découvrir une belle ressource qui vous permettra de faire le plein de sites web et de liens à garder pas loin de vous.

Aujourd'hui le BlogDuWebdesign vous propose de (re)découvrir le web des années 1995 à 2005 avec le Web Design Museum.

Aujourd'hui on vous propose un petit tour d'horizon sur les interfaces de connexion afin de vous faire découvrir des techniques efficaces et innovantes pour vos projets. 

On termine cette semaine avec un petit jeu ludique qui vous permettra de tester et améliorer vos capacités à différencier les typographies, découvrez dès maintenant le jeu Font Memory Game.

Aujourd’hui on vous propose un petit tour des lecteurs de musique que nous avons sélectionné pour leur design et ergonomie, le tout disponibles avec le site Code Pen.

Le site Code Pen est un véritable espace libre pour la créativité des designers web et intégrateurs qui peuvent mettre en avant leur création. Il permet de trouver de simples éléments interactifs comme des boutons à des interfaces très complètes et animées.

Pour nourrir votre curiosité et votre inspiration, nous avons sélectionné pour vous une série de 17 créations autour des Music Player avec des interactions et des animations modernes. Vous pourrez découvrir également les codes pour ces templates HTML, CSS et JS utilisés pour chacun des projets. 

Vous recherchez des systèmes de grilles pour réaliser vos projets sur iOS, Android et Bootstrap, le tout en choisissant votre support, mobile, tablette ou bureau. Découvrez une ressource qui pourra vous combler avec Grid System Library.

On termine la semaine non pas avec un, mais deux nouveaux outils pratiques qui pourront vous aider dans la conception de vos projets en réalisant facilement vos grilles web et templates Bootstrap pour vos intégrations. Découvrez dès maintenant Layoutit! 

On vous propose dans cet article, une bonne dose d'inspiration typographique en découvrant pas moins de 20 projets réalisés sous CodePen. 

Aujourd'hui, nous vous proposons une petite sélection d'effets de texte réalisés entièrement en CSS, des ressources qui vous seront utiles pour vos projets web.

On termine la semaine avec 3 projets réalisés sous CodePen qui vous aideront régulièrement dans vos créations web avec de beaux exemples de survols.

Aujourd'hui on vous propose un petit outil en ligne qui vous aidera à trouver et intégrer facilement vos caractères et emoji dans vos web design ou dans vos conversations.

Aujourd'hui le blog du web design vous propose de découvrir 3 librairies Javascript et CSS permettant de créer des animations pour vos interfaces. Les animations permettent de rendre plus vivant un site mais attention tout de même à ne pas en abuser sinon l'utilisteur pensera qu'il est à DisneyLand.

Si vous êtes à la recherche d'une bibliothèque de composants pour créer des interfaces utilisateurs et que vous avez envie d'essayer quelque chose de nouveau, bonne nouvelle ! Le BlogDuWebdesign vous propose de découvrir une liste de 5 UI Kits.

En ce jour d'halloween le blog du web design vous propose de découvrir 11 animations réalisées en CSS et Javascript. Bonbons ou animations ? Nous on a choisi les animations ! Rassurez vous il n'y a pas de screamer dans l'article, les plus peureux d'entre vous peuvent revenir !

Bonne découverte et bonne lec.. BOUUH !!

Donnez du mouvement à vos typographies web avec Moving Letters. On termine cette semaine avec un projet intéressant autour de l'animation de typographie web en CSS et Js proposé par le designer Tobias Ahlin.

On termine la semaine avec la présentation d'une ressource qui pourra vous être utile si vous réalisez régulièrement des Personas pour vos projets web.

Aujourd'hui le BlogDuWebdesign vous propose de découvrir un petit site bien sympathique qui vous servira de fenêtre vers le passé.

Aujourd'hui sur le BlogDuWebdesign, focus sur la nouvelle version de Foundation Framework, qui bien que n'étant pas une version "majeure" vient chambouler le game avec un changement de taille, le plus gros envisageable pour un framework responsive : une nouvelle grille !

Troisième article de notre dossier sur la 3D en CSS ! Aujourd'hui, attaquons-nous à des formes un peu plus complexes et courbes.

Après la liste d'exemples de la semaine dernière, il est temps de commencer avec la 3D en CSS ! Comme d'habitude avec les deuxièmes jeudis du mois : les bases.

Aujourd'hui comme tous les premiers jeudis de chaque mois, il est l'heure d'annoncer le sujet du dossier des techniques pour intégrateurs qui nous accompagnera tout le long du mois ! Au programme : la 3D.

Le Grid layout étant maintenant supporté par la plupart des navigateurs, il est temps de se pencher dessus et de façon ludique !

Découvrez Animista, un petit outil en ligne permettant de visualiser, personnaliser et créer de nombreuses animations CSS à insérer dans vos projets web.

Les animations CSS sont sans conteste le moyen le plus simple d'insérer rapidement un peu de vie dans vos sites web. Moins puissantes que les animations Javascript, elles sont néanmoins suffisantes pour rendre dynamique vos créations en y ajoutant des réponses subtiles aux interactions de vos visiteurs.

Aujourd'hui, le BlogDuWebdesign vous propose de découvrire un outil qui vous permettra de découvrire et créer de tres nombreuses animations CSS simplement : Animista.

Suite de l'article Petit guide d'utilisation des pré-processeurs CSS #1. Aujourd'hui, les bases de l'algorithmique.

Envie de changer de framework CSS ? Découvrez donc 5 frameworks CSS très légers et très tendance en ce moment !

Au programme : comment se passer du Javascript sans pour autant se passer de l'interactivité. Nous allons aborder la création d'animations sans coder en javascript.

Dernier article des techniques d'integrations centrees sur le SVG sur le BlogDuWebdesign. Au programme : Interactions avec le Javascript et path.

On termine la semaine avec une sélection qui ne vous donnera pas une journée très productive, mais celle-ci sera riche en expériences. 

Aujourd'hui, le BlogDuWebdesign vous propose le premier article de cette série ayant pour sujet les bases du format SVG.

Aujourd'hui, le BlogDuWebdesign vous propose de faire un point sur la propriété CSS box-shadow : son rôle, ses usages, le tout a travers quelques exemples simples.

Aujourd'hui, le BlogDuWebdesign vous propose le premier article des techniques de l'intégrateur : les bases de l'illustration animée en CSS.

Aujourd'hui le BlogDuWebdesign vous propose de découvrir un outil Javascript permettant de simplifier la création d'animations : Anime.js

Noël est pour ce weekend ! C'est l'occasion de vous proposer un petit article qui vous fera patienter jusqu'à demain avec une sélection unique de 23 gifs qui méritent le détour. 

Retrouvez des créations originales et ludiques qui pourront vous amuser, vous surprendre ou vous donner de belles idées pour vos projets.
Toute l'équipe du BlogDuWebDesign vous souhaite de très bonnes fêtes de Noël et on vous remercie pour votre fidélité !

Joyeux Noël à tous !

Aujourd'hui les inspirations pour intégrateurs vous proposent un focus sur un point vraiment très peu connu et utilisé : l'aléatoire dans le CSS.

Aujourd'hui le BlogDuWebdesign vous propose de jeter un oeil à un logiciel gratuit disponible en bêta : Google Web designer.

Vous avez besoin de créer un template mail, mais ne connaissez pas les subtilités inhérentes au médium ? Le BlogDuWebdesign vous propose de découvrir trois techniques différentes pour créer des templates pour personnaliser les templates de base inclus dans les différents logiciels d’e-mailing.

Dans cet article, on vous propose de découvrir une belle ressource qui vous permettra de créer rapidement et facilement un large choix de visualisation de données pour vos projets, le tout de manière interactive.

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir cssreference.io, une documentation visuelle de (presque) toutes les propriétés CSS illustrées par des exemples visuels et interactifs.

Aujourd'hui le BlogDuWebdesign et les inspirations pour intégrateurs vous propose une liste d'interactions centrées sur la gravité. Au programme : effet de particules, génération de points d'attraction et un éventail très divers pour mettre tout ces effets en pratique !

Bonne découverte.

Aujourd'hui, les inspirations pour intégrateurs vous proposent un call-to-action intéressant pour tous vos produits et solutions ayant pour cible des profils techniques : un affichage en mode "terminal".

Dans la culture populaire (et un peu dans les faits aussi, il faut tout de même l'avouer), les développeurs et intégrateurs sont souvent vu comme des barbus assis devant leur affichage en mode texte, en train de faire leur "magie technique". Et bien que nous sachions tous que c'est en grande partie faux, cet imaginaire nous impacte forcément aussi un petit peu.

Je vous propose donc aujourd'hui une manière intéressante à mettre votre produit très technique en avant et mieux coller à votre cible, avec cette liste d'affichage console. Que ce soit comme Call To action pour proposer un téléchargement ou une inscription, ou comme moyen de tester en ligne votre API, je suis sûr que vous en tirerez de bonnes idées !

Bonne découverte.

Aujourd'hui nous vous proposons la découverte d'une liste riche en ressources et sites web qui risque de vous faire découvrir de belles surprises !

Aujourd'hui, le Blog Du Webdesign vous propose un voyage au pays de la 3D en CSS, du simple cube à l'environnement complet en CSS.

Aujourd'hui, le BlogDuWebdesign vous propose une liste de ressources pour travailler sur vos images en Javascript. Crop, responsive ou simplification du retina, il y en a pour tous les goûts !

On termine cette semaine avec une petite présentation rapide, d'un site qui pourra vous être utile si vous cherchez régulièrement des ressources en ligne. Découvrez dès maintenant Resource Cards.

Aujourd'hui, je vous propose de découvrire une ressource qui vous permettra de créer un style guide qui pourra aussi vos servir de bac à sable pour vos projets : Styleguide

Le quatrième sondage du BlogDuWebdesign est enfin en ligne ! Découvrez vos réponses et les tendances dans le domaine de la veille et des ressources en web design.

Aujourd'hui les inspirations pour intégrateurs rendent hommage à une des plateformes les plus importantes en matière d'inspiration pour les graphistes mais aussi pour les intégrateurs : Dribbble.

Aujourd'hui le Blog Du Webdesign vous propose des ressources centrées sur l'utilisation de vos images. Gestion des images à 360°, adaptation des éléments UI à la couleur de vos images ou détection de visages sont de la partie ! Bonne découverte.

Pour bien finir la semaine, nous vous proposons la découverte de deux services en ligne qui pourront vous aider à personnaliser votre curseur de souris facilement et donner à vos projets web une touche d'originalité. 

Après les derniers articles de jeux pour développeurs, on nous a fait la remarque qu'il n'y en avait que pour les développeurs et jamais pour les intégrateurs ! Pour réparer cette injustice, je vous propose cette liste de 5 jeux permettant d'apprendre à manier le CSS et le HTML.

Attention, ces jeux sont tous en anglais et vous demanderont une connaissance au moins basique de cette langue pour comprendre les exercices.

Le weekend se rapproche à grands pas et pour assurer une productivité en ce vendredi nous vous proposons la découverte du projet Games for designers qui fera appel à vos capacités dans l’univers du design web.

Parmi les nouveautés du HTML5 méconnues et très peu utilisés, je veux l'API Audio. La faute à Internet explorer, qui ne la supporte toujours pas, même dans sa version 11, et à un support assez hétérogène de la plupart des autres navigateurs.

On termine cette semaine avec un service pratique et gratuit pour personnaliser vos cartes rapidement et facilement !

Aujourd'hui, les inspirations pour intégrateurs vous proposent de ranger les palettes de couleurs, et sortir les lampes torches. Sujet du jour : les ombres et la lumière.

Autant le dire tout de suite, la réponse est "oui". Ce n'est une surprise pour personne. La vraie question est de savoir à quel prix ? Cet article n'est pas le défouloir d'un graphiste qui trouvait que "c'était mieux avant", mais un article qui souhaite poser les questions du futur du web design et son impact autant sur le métier de web designer que sur les utilisateurs. Un point de vue personnel, qui enfonce parfois des portes ouvertes, mais qui je l'espère, trouvera écho chez certains et qui vous donnera envie de réagir et partager votre avis.

Découvrez un très bon ouvrage proposé par l'auteur Scott Jehl sur le domaine du responsive, de son utilisation et ses contraintes. Le livre "Design web responsive et responsable" est le numéro 13 de la célèbre collection "A Book Apart" aux Éditions Eyrolles.

L'objectif n'est évidemment pas de déterminer si l'un est mieux que l'autre, car les deux s'adressent évidemment à des publics très différents, avec des besoins différents : les développeurs JavaScript avec de gros besoins 3Ds (jeux, interfaces totalement en 3D, ….) iront vers Three.js , et les intégrateurs se tourneront vers le CSS3 pour ajouter des effets intéressants pour leur web designs.

Mettre les deux en comparaison permet surtout de présenter les deux technologies et vous donner envie d'expérimenter avec la 3D sur le web mais également de nourrir votre inspiration pour vos prochaines expériences.

Aujourd’hui, je vous propose de découvrir la seconde infographie du BlogDuWebdesign suite au sondage qui a eu lieu entre juillet et août.