DĂ©couvrir assoconnect Essai Gratuit

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

13 mai 2020

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

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

  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 largement devant l’ordinateur et les tablettes en termes de nombre d’utilisateurs en France en 2020. Ce sont aujourd’hui 37,4 millions de Français qui utilisent leur smartphone au quotidien, soit 7 millions de plus qu’il y a deux ans. 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 abandonne de plus en plus le "clic" au profit du "scroll", soit le fait de faire dĂ©filer le contenu d’une page web). 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 "splitté" de votre site internet d'association

écran-splité-site-internet

L’écran splitté, ou split screen, consiste à diviser la page en deux ou plusieurs "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 (aussi appelĂ© "vide") est aussi important, si ce n'est plus important que le contenu.

Afin de laisser ce contenu respirer, le premier réflexe peut être de vouloir remplir chaque pixel de votre site. Il est fortement déconseillé de succomber à cette tentation ! En revanche, 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.

Le principe est simple : à vous de faire jouer votre créativité ensuite !

créer-site-internet-design

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

design-site-internet-association-couleurs

Il y a eu la pĂ©riode des couleurs neutres, puis celle des couleurs pastel… Aujourd’hui, 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

En réalité, les couleurs choisies ont de l’importance, mais ce qui permet de capter au mieux l’attention est plutôt l’association de vos couleurs entre elles. Appliquez-vous donc à utiliser des couleurs qui se marient bien, et qui font surtout ressortir les informations importantes.

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, ce qui va générer de nouvelles associations de couleurs. Vous pouvez continuer et verrouiller au fur et à mesure les couleurs qui vous plaisent 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. La mode est d'ailleurs de plus en plus aux thèmes sombres (souvent appelés “dark”), plus reposants pour les yeuxNotons que les tendances graphiques pour le design de sites internet dont nous parlons ici ne sont pas qu’un effet de mode. Elles sont cohérentes avec les nouveaux usages des internautes puisqu’elles en sont directement tirées. que les fonds blancs.

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

Notons que les tendances graphiques pour le design de sites internet dont nous parlons ici ne sont pas qu’un effet de mode. Elles sont cohérentes avec les nouveaux usages des internautes et, mieux encore, en sont directement tirées.

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.

Même si votre site vous semble convenable, pensez donc bien à le faire tester par des personnes extérieures afin qu’elles puissent vous donner leur avis sur son design. En procédant ainsi, vous devriez vite vous rendre compte du moment où votre site internet ne sera plus à la page. Et vous pourrez ainsi directement réagir !

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