design site internet association

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

Corinne

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 :

 

Site internet
Corinne
Newsletter AssoConnect
Recevez chaque mercredi matin nos infos et astuces pour gérer votre association
Articles recommandés
  • Recherches fréquentes
  • Logiciel club de Football
  • Logiciel club de Basket
  • Logiciel club de Danse
  • Logiciel club de Judo
  • Logiciel club de Tennis
  • Solution associations
  • Solution de paiement en ligne pour association
  • Intranet pour association
  • ERP pour association
  • CRM pour association
  • Logiciel Association Gratuit
  • Logiciel Comptabilité Gratuit
  • Site Internet Gratuit
  • Ressources
  • Blog AssoConnect FR
  • Blog AssoConnect US
  • Formations pour association
  • Guides gratuits pour associations
  • OpenAsso
  • Newsletter d'AssoConnect
  • Entreprise
  • Qui sommes-nous ?
  • Notre engagement
  • L'équipe AssoConnect
  • AssoConnect Recrute
  • Page Presse
  • Contacter AssoConnect
  • Nous aider
  • Partenaires d'AssoConnect
  • Partenariats avec AssoConnect
  • Foire Aux Questions
  • Recherches fréquentes
  • Solution associations
  • Ressources
  • Entreprise

AssoConnect est conçu avec 💙 à ParisMentions légalesCGUVCGVPSPolitique de ConfidentialitéParamétrer les cookies