L’évolution du design pour la création de site internet
Less is more
le Flat Design est la tendance graphique qui a explosé en 2013 dans la création de site internet, en 2014 elle a continué à se développer à un rythme effréné.
Les raisons de son succès sont multiples :
- sa simplicité, le Flat Design permet de créer des interfaces ergonomiques facilement compréhensibles,
- cette même simplicité réduit les coûts de conception graphiques,
- l’adaptation est facilitée sur les petits écrans et interfaces responsives : smartphones, tablettes…
- la réduction du poids des interfaces, le Flat Design permet de réduire considérablement le poids des images voire de s’en passer totalement,
- l’avènement des WebFonts : avant on était limité aux typographies système. Tout autre choix typographique nous obligeait à créer des images. Aujourd’hui exit les images, et vive les web-fonts !
Si Microsoft a donné ses lettres de noblesse au Flat Design avec Windows 8 , Apple la intégré dans iOS 7, ainsi que Google dans ses nouvelles interfaces. Aujourd’hui quasiment tous les poids lourds utilisent des interfaces en Flat Design.
Pour comprendre un peu mieux le succès du Flat Design je vous conseille de lire ce très bon article : Flat design VS Skeulmorphisme sur Grapheine.
Et oui, l’interface de votre site internet préféré est un exemple de Flat Design !
Les icônes actuelle de Google
Le responsive design
Considéré comme expérimental il y a encore 2 ans, le responsive design est aujourd’hui devenu quasi obligatoire lors de la création de site internet vitrine. En effet, comment un client pourrait il aujourd’hui accepter de commander un site qui ne soit pas visible sur les tablettes et smartphones ?
Pour nous, développeurs, c’est une contrainte en plus car nous devons prendre en compte l’adaptation des interfaces en fonction de la taille des écrans. Pour ce faire, certains éléments sont déplacés, d’autres supprimés pour ne garder que les informations essentielles.
Les sliders
Ils ont envahi la création de site internet, ce sont ces défilement d’images et de texte souvent positionnés sur les pages d’accueils. Ils peuvent être utilisés pour faire défiler les dernières informations comme sur le site du CINES ou pour présenter une entreprise et ses services de manière dynamique, comme sur le site de SINERGIA SUD.
Techniquement l’utilisation des sliders remplace en HTML5 + CSS3 ce qui était anciennement développé en Flash. L’avantage étant que la compatibilité de ces technologies permet l’affichage des animations sur l’ensemble des systèmes d’exploitations et navigateurs.
Le défilement infini
Sites internet également appelés One Page, tout simplement car ils tiennent sur une seule page, le défilement infini est gage de simplicité pour les visiteurs. L’utilisation de ce type de design est particulièrement adaptés aux sites de petite taille. La navigation est facilitée, il suffit de faire défiler la page pour afficher toutes les informations. Vous pouvez en voir un exemple sur le site que nous avons développé pour www.ce3d.fr.
Cependant, cette technique a ses limites. En effet, si elle est adaptée aux petits sites, elle devient vite inutilisable lorsque les contenus s’avèrent conséquents. Autre problème, le fait de n’avoir qu’une page sur un site internet limite les points d’entrée pour les visiteurs et… les moteurs de recherche. C’est donc un frein pour un bon référencement.
L’effet Parralax
Cet effet permet le déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Avec le défilement de l’écran (scroll en anglais) ou en fonction de la position de la souris, les différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Ce principe qui plusieurs éléments peut être appliqué à plusieurs endroits : sur les images de fond, un pied de page, des images…
Le plugin javascript
La mise en place de cet effet est rendu possible par le plugin javascript Parallax.js.
.
Un article rédigé pour vous par JP Loup
He’s sexy and he knows it, you can touch his mustach. "Issu de l'imaginaire de l'équipe, Jean-Pierre Loup c'est une mascotte, une égérie, un mythe. Il vous propose dans ce blog de découvrir les coulisses du web à travers la plume virtuelle des gens qui sont passés par l'agence Keole : stagiaires, anciens employés, amis, famille..." Spécialités : sauver le monde | taper l'incruste | raconter de belles histoires. Il aime : se compliquer la vie, car optimisé c'est triché | les arrêts maladie | la deeptechnopunktrancealternative. Il aime pas : réfléchir à outrance | les au revoir | signer ses mails avec un "Cordialement".
Ok pour la liste, mais j’ai pour ma part l’impression que l’effet Parallax est « SO 2013 ».
LA tendance, c’est le responsive.
Parallax, j’espère qu’il perdurera. Il ne faut pas trop trop en abuser mais dans certaines circonstances, ça rajoute vraiment un truc sympa au défilement des pages.