Avant de dessiner une page d’accueil, de choisir une palette ou de définir une hiérarchie de contenus, il est utile d’observer des réalisations existantes. L’objectif n’est pas de reproduire une interface, mais d’identifier des solutions adaptées à son propre projet : organisation d’une page, rôle d’une image, contraste typographique, rythme du défilement ou place laissée au texte. Dans le cadre d’un projet pour créer un site web, cette phase d’observation permet surtout de formuler des choix plus précis.
En bref
- Behance permet de rechercher des projets créatifs par mots-clés, notamment en conception de site et interface UI/UX.
- Awwwards évalue des conceptions web selon des critères comprenant le design, la créativité, l’expérience utilisateur et le contenu.
- Siteinspire classe des conceptions de sites web par thématique ou par sujet et permet de constituer des collections.
- Les exemples de Toggl, Adova Group et Miranda illustrent des partis pris distincts en matière de typographie, d’images, de couleurs et d’animation.
Voici dix sources à explorer pour nourrir la conception d’un site, en distinguant les plateformes de recherche, les sélections éditoriales et quelques exemples de partis pris graphiques.
Plateformes pour repérer des références de webdesign
1. Behance pour chercher par discipline
Behance rassemble des projets présentés par des professionnels du design. Sa recherche par mots-clés couvre notamment la conception de sites, le graphisme, l’illustration et les interfaces UI/UX. Cette diversité permet de partir d’un besoin concret, par exemple une navigation, une page de présentation ou une identité graphique, puis de comparer plusieurs manières de le traiter. La présentation de ces ressources créatives par BDM rappelle que la plateforme associe recherche de contenus et publication de projets.
2. Awwwards pour observer des sites évalués
Awwwards met en avant des conceptions web soumises par des professionnels du secteur. Les critères cités comprennent le design, la créativité, l’expérience utilisateur et le contenu. C’est une source pertinente lorsque la recherche porte sur un site complet plutôt que sur un élément isolé : elle invite à regarder le rapport entre l’identité visuelle, la navigation et les informations proposées, sans réduire l’analyse à un seul effet graphique.
3. Dribbble pour isoler un détail visuel
Dribbble regroupe des travaux dans des domaines variés, parmi lesquels l’animation, le branding, l’illustration, la typographie et la conception de sites web. Cette variété peut servir à étudier un composant précis, comme le traitement d’un titre, une combinaison de couleurs ou un style d’icône. Il est alors préférable de noter ce qui rend le détail lisible dans son contexte, plutôt que de le détacher de la fonction qu’il remplit.
4. Siteinspire pour trier par univers
Siteinspire référence des conceptions de sites classées par thématique ou par sujet. La possibilité d’enregistrer des designs dans des collections facilite la comparaison de références partageant une même direction : minimaliste, illustrée, monochrome ou liée à un secteur. Une collection peut ainsi devenir un support de travail pour distinguer ce qui relève d’une ambiance générale, d’une architecture de page ou d’un choix de contenus.
5. Designspiration pour travailler la couleur
Designspiration regroupe des créations visuelles, dont des travaux de webdesign, et propose une recherche par mots-clés ou par colorimétrie. La recherche par couleur peut être particulièrement utile au début d’une réflexion sur une identité visuelle. Elle ne remplace pas les choix d’accessibilité ou de lisibilité, mais elle aide à observer comment les couleurs structurent une composition et mettent certains éléments en avant.
6. Pinterest pour croiser les formats
Pinterest est présenté comme un catalogue d’idées où figurent des ressources liées au design graphique, à la conception de sites, aux logos et aux typographies. Les résultats peuvent mêler interfaces, moodboards, illustrations et éléments de marque. Cette approche transversale est intéressante pour constituer un tableau de références, à condition de vérifier ensuite comment les idées retenues peuvent se traduire dans une interface web cohérente.
Exemples de sites à analyser selon un angle précis
7. Toggl pour le contraste entre sobriété et décalage
Dans sa sélection de dix sites, Les Audacieuses Créatives décrivent plusieurs choix de webdesign concrets. Le site de Toggl y est présenté avec une structure classique, une typographie penchée, une image de fond de flamants roses ainsi que des icônes ou illustrations rétro. Cet exemple donne une grille de lecture utile : un site peut conserver une structure familière tout en introduisant des signes visuels plus singuliers. L’enjeu consiste alors à observer le dosage entre les éléments décoratifs et les contenus à lire.
8. Adova Group pour étudier une ambiance chromatique
Le site d’Adova Group est décrit comme épuré, avec des tonalités pastel en dégradé, des animations légères et un changement de couleur au fil du défilement. Cette référence peut nourrir une réflexion sur la continuité visuelle d’une page longue. Il ne s’agit pas seulement de choisir des couleurs, mais de voir comment elles accompagnent la progression du lecteur et séparent les différentes séquences de contenu.
9. Miranda pour regarder les codes éditoriaux
Miranda est présenté comme un portfolio influencé par la presse papier, avec un arrière-plan texturé, une typographie avec sérif et des contrastes de taille entre les textes. Cet exemple est particulièrement intéressant pour les projets où le contenu éditorial occupe une place importante. Les références imprimées peuvent y éclairer la hiérarchie des titres, les respirations entre les blocs et le rôle de la matière visuelle, sans effacer les contraintes propres à la lecture sur écran.
10. Les banques d’images pour préparer une direction iconographique
Les banques d’images figurent aussi parmi les ressources citées pour les projets créatifs. Elles peuvent aider à définir le type de visuels recherché : photographie, illustration, icône ou mockup. Avant toute sélection, il est utile de préciser ce que l’image doit apporter à la page. Une photographie peut donner un contexte, une illustration peut synthétiser une idée et une icône peut soutenir une action ou une information. Cette distinction évite d’ajouter des images décoratives sans fonction claire.
Transformer les références en décisions de conception
Une veille efficace ne consiste pas à accumuler des captures d’écran. Pour chaque référence retenue, il est plus utile de relever quelques observations vérifiables : la structure de la première page, le niveau de contraste des titres, la présence ou non d’animation, la manière dont les images dialoguent avec le texte et la fonction des appels à l’action. Ces notes permettent de séparer l’impression générale des mécanismes qui la produisent.
Les références les plus utiles ne sont donc pas nécessairement celles qui se ressemblent. Mettre côte à côte une interface très structurée, une page portée par sa typographie et un site à l’ambiance colorée permet de mieux définir les choix à retenir ou à écarter. Le design prend alors forme à partir des objectifs du site, de ses contenus et de son identité, plutôt qu’à partir d’un modèle reproduit.
Photo à la une. Source: Pexels. Attribution: Thirdman. Licence: Pexels License.
