jeudi 2 mai 2013

La nouvelle mode ou tendance Web : le Flat design
















En 2009-2010, la tendance «grunge» était à son apogée : photos déchirées, textures salies et typographies extravagantes étaient au rendez-vous.  Fini la petite interface habituelle, proprette et bien alignée! Mais cela n’a pas été long avant qu’Apple nous rappelle à l’ordre et impose à tous son style avant-gardiste : le skeuomorphisme.  On peut résumer ce style par des lignes épurées et des interfaces  intuitives, communément appelée « user friendly ».

Aujourd’hui, quelle est la nouvelle tendance à suivre? Il semblerait que le «flat design» soit la nouvelle «fashionista» des designers Web  et qu’elle serait là pour rester.

Mais tout d’abord, le «flat design», c’est quoi? C’est un style graphique minimaliste et épuré. Plus précisément, il se caractérise par des formes simples, sans textures, ni  effets de volume et les couleurs vives, très présentes, sont utilisées en aplat.

Ce style prend racine dans la tendance « responsive Web design» (ou en français « site adaptable »), qui est une méthode permettant d’adapter un site à la taille d’un écran. Il est de plus en plus habituel de voir ce genre de style utilisé par les concepteurs de site Web. Les contraintes de cette méthode nécessitent une certaine souplesse d’utilisation, c’est-à-dire que les éléments graphiques vectoriels sont mieux adaptés que les images bitmap. Vectoriel et flat font donc un très bon mariage!

Mais est-ce qu’on aime ça ?

Pas sûr. J’ai mené ma petite enquête et les avis sont partagés. Du point de vue d’un graphiste, le « flat design » serait une bonne nouvelle puisqu’un design plus épuré et plus simple demande moins de temps à réaliser. Mais comme toute tendance, celle-ci fera son temps  et une autre idée verra le jour et la remplacera, croit-on.

Du point de vue d’un intégrateur, c’est tout le contraire, voire « Quelle horreur! » s’est-il exclamé. La trop grande simplicité et le manque de réalisme du concept le fait douter que ce style soit là pour durée. Et simplicité ne veut pas dire moins grande complexité dans l’intégration des éléments.
Alors le « flat design » c’est in ou pas ? Qu’en pensez-vous ?

Source :

mardi 29 janvier 2013

Tendance Web : les fontes d’icônes.

Il semble qu’une tendance émerge sur le Web depuis l’utilisation de fontes telles que celles proposées par Google Web Fonts. Il s’agit de l’utilisation de fontes d’icônes.


En effet, il y a quelque temps, les fontes utilisées devaient être disponibles sur le poste de la majorité des utilisateurs d’un site Web. On appelait Web Safe Fonts la liste de fontes pouvant être utilisée. On pouvait contourner le problème en affichant une image plutôt qu’un texte…ce qui était moins pratique pour l’utilisateur (le texte ne pouvant être agrandi ou réduit) et pour le référencement (il fallait se servir de la balise ALT pour compenser cette lacune).

Bien sûr, on avait utilisé les fontes comme Wingdings pour insérer des pictogrammes. Mais le peu de formes disponibles dans ces fontes fit qu’on se lassa assez rapidement de voir les mêmes icônes.

Par la suite, des sites tels que Google Web Font et Font Squirrel proposèrent d’intégrer un lien vers un serveur, lequel se chargerait d’afficher la fonte sans que l’utilisateur ne la possède. Ceci ouvra la porte à un Web plus riche au niveau typographique, et ce sans utilisation d’images.

Ce n’est que récemment que les Web designers ne recommencèrent à utiliser les pictogrammes contenu à même les fontes. Le fait que la communauté Internet est vaste pousse aussi dans cette direction car on voit apparaître des fontes faciles à utiliser contenant beaucoup de symboles.

Les avantages d’utiliser les fontes d’icônes :
  • On peut les redimensionner 
  • Elles sont compatibles avec tous les navigateurs 
  • On peut leur appliquer différentes couleurs 
  • On peut leur appliquer des effets (les mêmes effets applicables à un texte)
Liens intéressants :
http://typicons.com/
http://fortawesome.github.com/Font-Awesome/
http://www.entypo.com/
http://www.zurb.com/playground/foundation-icons
http://tipogram.com/
http://icons.marekventur.de/
http://www.fontsquirrel.com/fonts/modern-pictograms
http://css-tricks.com/flat-icons-icon-fonts/
http://sixrevisions.com/resources/free-icon-fonts/
http://css-tricks.com/examples/IconFont/
http://css-tricks.com/html-for-icon-font-usage/


Source :
http://en.wikipedia.org/wiki/Wingdings

vendredi 11 janvier 2013

jeudi 3 janvier 2013

Tendances visuelles découlant de systèmes d’exploitation : après le web 2.0 provenant d’Apple, l’interface de Windows 8 fait son apparition.

Nous voyons depuis quelques années, beaucoup de dégradés, d’ombres, d’effets de réflexions et de miroirs. Ces éléments graphiques furent à l’origine inspirés de design créés par Apple. Cette fois, c’est Microsoft qui part le bal en introduisant la nouvelle interface Windows, fortement inspiré par le style typographique international aussi appelé style suisse. Ce style prône la simplicité et l’efficacité et utilise la typographie et des formes de base. L’interface fût pensé pour être facile d’utilisation sur une tablette ou un téléphone à écran tactile car on le sait, les gros boutons ayant peu de texte facilite la navigation sur ce genre d’appareils.

Microsoft décline son design par la présence d’icônes simples et épurées de couleur blanche, par l’usage de typographie sans sérif et par la présence de masses de couleur rectangulaires ou carrées. La palette de couleur utilisée y est assez vive.

Appelé au départ «interface Metro » (Metro style), Windows dût abandonner cette appellation suite à la menace de poursuite judiciaire de la part de la chaîne allemande Metro AG. Les noms les plus communément utilisés sont Modern UI, interface Windows ainsi qu’interface Windows 8. Le débat fait toujours rage sur le Web au sujet du nom définitif à donner à cette interface et seul l’avenir nous éclairera à ce sujet.

Sources : 
http://www.theinquirer.net/inquirer/news/2198399/microsoft-renames-metro-to-modern-ui
http://www.neowin.net/news/is-metro-now-called-modern-ui
http://www.tomsguide.fr/actualite/Windows8-WindowsRT-Interface-Windows-Metro,18720.html
http://www.pcinpact.com/dossier/600-l%E2%80%99interface-le-mauvais-carreau-de-windows-8/1.htm
http://fr.wikipedia.org/wiki/Windows_8
http://onepartscissors.com/2012/04/web-design-trends-into-2013.html
http://en.wikipedia.org/wiki/Metro_(design_language)
http://www.fastcodesign.com/1669407/microsoft-gets-brutally-honest-about-redesigning-windows
http://fr.wikipedia.org/wiki/Style_typographique_international
http://www.01net.com/editorial/571209/windows-8-microsoft-renomme-l-interface-metro-en-windows-8/


lundi 19 novembre 2012

Le défilement parallaxe

Pour ajouter un effet de profondeur aux sites Web, les designers Web ont recours à une méthode utilisée depuis longtemps dans le domaine du jeu vidéo : le défilement parallaxe.

Celui-ci consiste à faire bouger différents plans à différentes vitesses pour créer un effet de profondeur et de mouvement. Par exemple, au premier plan un personnage bougerait rapidement, au second plan une forêt lointaine bougerait à vitesse moyenne et finalement au troisième plan des nuages bougeraient à vitesse lente. Tout ceci dans le bus de créer un effet de profondeur.

Le mouvement peut être associé au défilement du site (scroll) ou au mouvement de la souris et est exploité de différentes façons. Vous en trouvez aussi des exemples sur le site de ProWeb au moyen des icônes de médias sociaux qui se chevauchent dans l'arrière-plan et dans la bannière présentant les services dans le haut de la page.

Cet effet, bien utilisé, offre de multiples possibilités au designer Web. À noter qu'il faut garder la lisibilité, la facilité de navigation et le temps de chargement en tête lors de l'utilisation d'un tel effet dans un site Web.

Source :
Définition du défilement parallaxe
http://fr.wikipedia.org/wiki/D%C3%A9filement_parallaxe

Six tendances prévues pour 2013 (anglais)
http://smashinghub.com/web-design-trends-in-2013.htm

Explication des effets de parallaxe
http://design.ikomeo.fr/les-effets-de-parallaxe-webtrends


Liens intéressants :
21 exemples de défilement parallaxe (anglais)
http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

30 sites contenants un effet parallaxe (anglais)
http://www.awwwards.com/20-great-websites-with-parallax-scrolling.html