Découvrir assoconnect Essai gratuit

7 tendances du design à appliquer au site web de votre association

Vous souhaitez remettre le site internet de votre association au goût du jour mais ne trouvez pas l’inspiration ?

Les 7 tendances exposées ci-dessous vous aideront à y voir plus clair. De la structure du site jusqu’aux détails les plus discrets, tous les éléments de design qu’il est facile et utile d’inclure dans votre site web sont couverts ici.

  1. Le "responsive design"
  2. Le "long scrolling"
  3. L'écran "splité"
  4. Jouer sur l'espace négatif
  5. Oser les couleurs vives
  6. Les majuscules et le gras
  7. Les animations

 

1. Le "responsive design" pour votre site internet d'association

responsive design

Selon une étude de Médiamétrie, le mobile est devant l’ordinateur en termes de nombre d’utilisateurs en France en 2016. Cela signifie qu’un site qui n’est pas adapté aux petits écrans passe à côté d’un grand nombre d'adhérents potentiels !

Grâce au responsive design, un site qui est conçu pour l’ordinateur peut s’adapter à n’importe quelle taille d’écran. De plus en plus, les webdesigners commencent même par concevoir leurs sites pour un écran de smartphone, pour ensuite l’adapter aux écrans plus grands : c’est ce que l’on appelle le “mobile first”.

Pour savoir si le site internet de votre association est responsive, il vous suffit de faire le test d’optimisation mobile de Google. Et pour aller plus loin, vous pouvez aussi consulter notre article dédié au responsive design.

design site web association assoconnect

2. Le "long scrolling" sur votre site web

long scrolling

Avec le développement des appareils tactiles, l’utilisateur préfère de plus en plus le scroll (le fait de faire défiler le contenu d’une page web) au clic. En conséquence, les pages web s’allongent de plus en plus... jusqu’à devenir infinies ! Si, par exemple, vous gérez une association sportive, plutôt que de créer 4 ou 5 pages (accueil, planning entraînement, tarifs, contact, …), il est donc préférable de présenter toutes ces informations à la suite sur la page d’accueil.

design site web association assoconnect

3. L’écran "splité" de votre site internet d'association

split screen

L’écran splité, ou split screen, consiste à diviser la page en deux "compartiments" bien distincts. Vous pouvez par exemple opter, comme ci-dessus, pour une photographie à droite et un bloc de texte à gauche.

Cette composition a l’avantage d’utiliser tout l’espace horizontal des écrans d’ordinateur. Et parce que le responsive est maintenant la norme, la division devient verticale sur un écran mobile. Le split screen convient pour tout type d’association, et est très facile à mettre en place.

design site web association assoconnect

4. Jouer sur l’espace négatif

negative space

C’est un des grands principes du minimalisme : l’espace négatif (vide) est aussi important, voire plus important que le contenu. Afin de laisser ce contenu respirer, ne succombez pas à la tentation de remplir chaque pixel de votre site. Mais pour éviter que cela ne rime avec ennui, il est possible de jouer de ces espaces blancs afin de créer des effets visuels intéressants.

design site web association assoconnect

5. Oser les couleurs vives sur le site web de votre association

2015 était l’année des couleurs neutres, 2016 celle des couleurs pastel… En 2017, il ne faut pas hésiter à utiliser des couleurs vives ! Ces couleurs, à condition d’être bien assorties, captent l’attention de l’utilisateur lors de sa visite.

Des dizaines d’outils en ligne permettent de choisir une combinaison de couleurs harmonieuse pour le site internet d’une association. Avec Coolors par exemple, vous pouvez générer gratuitement des milliers de palettes. Tout ce que vous avez à faire, c’est appuyer sur la barre espace jusqu’à trouver la combinaison parfaite.

design site web association assoconnect

6. Les majuscules et le gras sur le site web de votre association

majuscules et gras

Source : https://performingarts.withgoogle.com/en_us

Cette année, il n’y a pas que la couleur qui aime se faire remarquer. Pour la typographie, la tendance est la même. Optez pour une police sobre (Arial, Lato…) et mettez-la en valeur en gras et en majuscules. Pour plus d’originalité, n’hésitez pas à utiliser du blanc sur du noir comme dans l’exemple ci-dessus.

design site web association assoconnect

7. Les animations de votre site internet d'association

animations

source : https://dribbble.com/shots/1623679-Open-Close

Pour donner vie à un site internet déjà bien conçu, rien de tel que les interactions animées. Elles permettent de faire la différence entre un bon et un très bon site internet.

Un bouton qui change de couleur lorsque l’on passe la souris dessus, des éléments qui apparaissent et disparaissent lors du défilement de la page… Les interactions animées consistent à déclencher un mouvement lorsque le visiteur interagit avec un élément du site.

Grâce aux animations, l’utilisateur sait que ses actions sont prises en compte, et cela l’incite donc à cliquer. Si vous cherchez à collecter des dons, et donc à provoquer une action de la part de vos visiteurs, les animations peuvent devenir votre meilleur allié.

design site web association assoconnect

Ces tendances graphiques pour le design de sites internet ne sont pas qu’un effet de mode. Elles sont cohérentes avec les nouveaux usages des internautes. Face à la quantité pléthorique de sites internet, l’utilisateur doit juger très rapidement la crédibilité du site sur lequel il se trouve. Cette crédibilité est donc principalement identifiée grâce à la qualité et l’actualité du design du site.

Ne pas mettre à jour un site internet qui date d’il y a quelques années peut ainsi avoir des conséquences sur le nombre de visiteurs et le temps passé sur le site par chaque visiteur. C’est pour cette raison que nous avons décidé de repenser notre site vitrine : www.assoconnect.com.

Nous vous avons concocté le guide complet du site internet pour votre association. N'hésitez pas à le télécharger :

Nouveau call-to-action