Réflexions sur le webdesign, les nouvelles technologies, la vie ...

Flat Design : évolution minimaliste

Emergeant depuis quelque mois, le Flat Design est la nouvelle tendance graphique. Déjà présent dans les interfaces mobiles, il gagne de plus en plus le web. Mais qu’est ce que le Flat Design ?
Il se caractérise par une approche graphique minimaliste (et non pas simpliste), composée de formes géométriques en aplat de couleurs monochromatiques, sur fond contrasté.

Pour les Polices, les « Sans-Sérif » sont utilisées. Dans cet esprit radical, les effets de dégradé, biseau, texture et motif sont bannis. Pour les éléments graphiques et interactifs, comme les icônes et l’interface, les couleurs primaires vives sont privilégiées.

Si des effets de volume ou d’ombre sont présents, ils eux sont aussi faits avec des aplats de couleurs.
Partant de ces fondamentaux, d’autres approches graphiques moins radicales, ont déjà émergées. En ajoutant des gammes de couleurs plus discrètes, voir rétro, en ajoutant de légers dégradés ou des ombres portées, ou en utilisant des textures.


L’opposé du Flat Design :

Ce courant est en opposition avec ce que l’on appelle skeuomorphisme. Ce design privilégie l’aspect réaliste et familier de l’objet, sans forcément être très ergonomique. Souvenez-vous des applications Apple et leur iconographie hyperréaliste. Surement pour rassurer l’utilisateur devant ce monde virtuel et froid. S’opposant au design bien installé depuis quelques années (ex : Web2.0), le Flat Design est une rupture de plus dans l’histoire dans l’Art.
Il s’est largement répandu dans les grandes agences de communication, les leaders en technologies (IOS7, Windows8, Google, etc.) et la culture. Suivant (ou précédant) de près ce courant, la tendance des logos minimalistes a vu le jour. Quelques exemples ici sur themeflash.com ou encore webdesignledger.com.




Si la simplification esthétique est l’intention première, le Flat Design est conceptuel et plus exigeant qu’il n’y parait, du choix typographique au choix des couleurs. Il est complexe dans sa conception, car aucun artifice ne doit venir détourner la fonction de chaque élément. L’affordance n’est plus dans la ressemblance avec quelque chose de réel, mais dans sa compréhension primitive : couleur qui attire l’œil, texte clair qui indique la fonction.

Flat design et Responsive Design :

Oui, le Flat Design est bien adapté au Responsive design. Expression de besoin face aux nouvelles contraintes : vitesse de téléchargement, contenu adapté au support, visibilité, etc. Répondant en tous points aux nouveaux enjeux de la mobilité, ceux-ci eux mêmes dictés par nos besoins en perpétuel évolution, de consommer et d’interagir. Le Responsive Design n’est ni la seule réponse, ni dans sa forme définitive, c’est avant tout un ensemble de solutions, et d’outils technologiques du web. Le « design adaptatif » est l’expression de la mouvance et la perpétuelle évolution qu’est Internet. Devant les mutations culturelles, sociales, économiques et technologiques, nos métiers doivent s’adapter.





Mutation / évolution :

Déjà, un autre mouvement graphique issu du Flat design apparait, le Long Shadow Design. Il repose sur des règles : esthétiques inspiré du Flat Design, et techniques s’adaptant au Responsive Design. Il propose de ramener volume et profondeur à un Flat Design plutôt dépouillé. En allongeant démesurément et sans limite, l’ombre d’un objet graphique. L’ombre est représentée en aplat de couleur, elle est orientée vers la droite de préférence, dans un angle de 45°. Dans la grande communauté du Web Design, nombreux sont ceux déjà séduits par cette tendance. Les grandes marquent s’y mettent aussi, relookant ainsi leurs logos, boutons, icônes et interfaces. Gageons que ce n’est que le début d’une nouvelle mouvance. A suivre …




Ressources :

Générateur de couleurs pour le Flat Design : http://flatuicolors.com/
Kit Flat PSD d’Interface Utilisateur : http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit
40 packs d’icônes Flat Design : http://magazineduwebdesign.com/icones-flat-design
72 icônes EPS Flat Design : http://blog.shanegraphique.com/72-flat-icons-au-format-eps/
Pour les anglophones :
Les couleurs du Flat Design expliquées : http://designmodo.com/flat-design-colors/
Les principes du Flat Design : http://designmodo.com/flat-design-principles/
Source PSD pour générer des Long Shadow Design : http://graphicburger.com/long-shadow-generator/
Générateur de Long Shadow Design en CSS : http://codepen.io/awesomephant/pen/mAxHz


Havaianas : 50 ans déjà

C’est l’été, les vacances, la mer et le farniente … Et voilà qu’Havaianas fête ses 50 ans ! Pour fêter ça dignement, la marque leader de tongue dans le monde a décidé de sortir un modèle limité, dont les bénéfices seront entièrement reversés à l’UNICEF. Afin expliquer leur action, une très belle animation a été faite pour l’occasion. On ne peut qu’admirer le travail et l’initiative !

Havaianas 50 Years – Turning Point

Ecrans tactiles : nouveaux usages interactifs

Depuis longtemps, les interfaces tactiles existent dans l’univers des mobiles, particulièrement pour les PDA. Alors que ceux-ci évoluaient en PDAPhones, leur manipulation s’alourdissait, mélangeant clavier escamotable et système tactile.
 
Les téléphones portables devenaient smartphones, mais le foisonnement des fonctionnalités et les interfaces complexes étaient un des facteurs de mécontentement des utilisateurs.
 
Les manipulations se limitaient souvent à une interaction / une action, simple et efficace, sauf quand le choix est trop grand. Si une fonctionnalité demande un trop grande nombre d’interactions pour être activée, les utilisateurs ne rentre pas dans la logique et ne l’utilise plus. D’où le retour en grand nombre, d’appareils fonctionnant parfaitement, mais dont l’utilisation trop complexe était abandonnée par les utilisateurs.
 
Apple avait innové, avec l’iPod et sa la molette de défilement, bien utile sur les grandes listes, repris sur certains téléphone dédiés à la musique. Sur Internet le Web2.0 fit aussi une petite révolution, en proposant les widgets et en redonnant le pouvoir à l’utilisateur sur l’organisation des informations. Quel meilleur support pour l’accès, et la modification des informations que les écrans tactiles ? Les fabricants rendent alors les fonctionnalités accessibles, et totalement personnalisables.
 
Ceci explique l’engouement, depuis 2007, pour les écrans tactiles, dans tous les domaines de la téléphonie, avec des usages redéfinis et des ergonomies repensées. Une autre innovation fit son apparition, les interfaces tactiles multitouches, avec le célèbre iPhone.
 

Depuis longtemps, pour les PDA / PDAPhones, l’utilisation des écrans résistifs a été justifié par les impératifs économiques et ergonomiques. Cette technologie consiste à placer un film conducteur sur une plaque de verre, conductrice elle aussi, séparés par un espace microscopique. La pression exercée par un doigt ou un stylet crée le contact des surfaces électrifiée et détermine ses coordonnées.

La précision de ce type d’écran est suffisant pour l’utilisation avec un stylet ou au doigt, pour des opérations simples à moyennes. En revanche, ces écrans nécessitent un recalibrage avec les temps, et laisse moins passer la lumière, les rendant moins lumineux et moins précis.

 
Les écrans à technologie capacitive réagissent à la pulpe du doigt, par transfert de charge. Ils offrent une qualité et une clarté d’image supérieure (90 % de la lumière traversera une surface capacitive par rapport à 75 % pour les systèmes résistifs). Ce système n’est malheureusement pas facilement extensible aux écrans de plus d’une vingtaine de pouces. Très compétitif sur les petits formats, on les retrouve donc sur de nombreux smartphones et tablettes (Nokia N8, la gamme des Galaxy S2 ,Galaxy Tab, Apple iPhone, iPad et iPod Touch, Motorola Milestone, HTC Desire, LG Arena, Nexus One…).
 
D’un autre côté, il y a la technologie multi-touch, qui permet d’interagir avec plusieurs points de contact, comme exemple on a pu voir cette application dans le film Minority Report. Au delà de l’aspect ludique, la gestuelle tactile offre une solution radicale aux interfaces devenues de plus en plus complexes. Comment alors, rendre les interfaces tactiles intuitives et ergonomiques ?
 

Le problème sur des interfaces aussi « libre » est celui du guidage. Que ce soit sur le web, sur des applications ou des écrans tactiles, le plus ergonomique serait de tout montrer. C’est vrai, mais pas que. Les fonctionnalités majeures et de navigation doivent être bien présentes, pour que l’utilisateur navigue tout de suite facilement. Il faut une interface affordante qui incite à cliquer naturellement. Mais pour enrichir l’user experience (expérience de l’utilisateur), il vaut mieux laisser des fonctionnalités « cachées » qu’il découvrira lui-même.
 
Une question se pose alors, comment enrichir l’expérience utilisateur, si celui-ci ne trouve pas certaines fonctions ? Justement, ces fonctions ne doivent pas être importantes, de second niveau même. De ce fait, si elles ne sont pas découvertes, ça ne gène en rien l’utilisation de l’interface.
 
L’humain possède une mémoire visuelle plus que gestuelle. Or, l’utilisation d’une I.H.M repose sur les gestes que va engendrer son fonctionnement. Donc, pour aider à la mémorisation, il vaut mieux reprendre des gestes quotidiens pour l’homme, ou des gestes que l’on s’attend a faire naturellement en voyant cet objet. On parle d’utilisabilité. Par exemple, tourner une page avec un doigt, le même geste sera reproduit pour passer au suivant ou au précédent.
 

Et le Fun dans tout ça ? Comme expliqué plus haut, pour les fonctionnalités importantes ont utilisera des gestes habituels, et pour les fonctions secondaires ont pourra utiliser plus de fantaisie. Par exemple, lorsque l’on secoue l’iPhone, ça active la lecture aléatoire des sons de la playlist.
 
Au vu de la demande grandissante des tablettes et smartphones, les fabricants devront faire preuve d’originalité pour se faire une place dans un marché à forte concurrence. Car les habitudes changent petit à petit, et les internautes délaissent l’ordinateur pour la tablette.

L’usage de tablettes tactiles nuit à celui des ordinateurs

Environ un tiers des utilisateurs de tablettes disent utiliser moins fréquemment leur ordinateur. Ils mettent en avant la simplicité d’usage de ces nouveaux écrans.
43 % des propriétaires de tablettes passent ainsi chaque jour davantage de temps sur ce nouvel écran que sur l’ordinateur
Source : JDN Tablettes VS Ordinateurs

J’ai découvert le travail de Luke Wroblewski, spécialiste en ergonomie et design d’applications, auteur de nombreux travaux sur la Touch Gesture (interaction tactile) qui gagne notre quotidien. Il a ainsi rédigé un guide complet sur toutes les actions tactiles possibles, en essayant de donner des noms à ces gestes : Tap, Flip, Press & Tap, etc.
Vous trouverez ce guide ci-dessous (merci à Luke), il a mis aussi en ligne plusieurs ressources sur ce sujet :

Pour finir, voici son guide de référence d’interactions tactiles (disponible en plusieurs formats).
 
Guide de référence des interactions tactiles

 Page 1 de 11  1  2  3  4  5 » ...  Last »