DĂ©couvrir assoconnect Essai gratuit

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

14 mars 2017

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

design-site-internet-association-responsive

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-internet

2. Le "long scrolling" sur votre site web

long-scrolling-site-internet

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-internet-association

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

écran-splité-site-internet

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-association

4. Jouer sur l’espace négatif

création-site-internet-association

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.

créer-site-internet-design

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

design-site-internet-association-couleurs

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.

couleurs-site-internet-association

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.

bon-design-site-internet

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

design-site-internet-association-idées

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-internet-association-animation

7. Les animations de votre site internet d'association

animation-site-internet

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é.

site-internet-association-design

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