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


HTML5 et CSS3 : Faites évoluer le web design

Voici un livre qui m’a beaucoup intéressé, un livre pour les webdesigners. La conception d’un site passe par les langages fondateurs que sont le HTML et les CSS (HyperText Markup Language + Cascading Style Sheets). Arrivés à leurs versions majeures, HTML5 et CSS3 marquent sans aucun doute, une évolution fondamentale dans la façon de concevoir les sites web.

La connaissance de ces langages est indispensable pour les utilisateurs de CMS, comme WordPress, aussi bien du côté design que développement. Car pour moi, un bon développeur doit avoir un minimum de connaissances Front, tout comme le web-designer doit avoir des notions de PHP.

Ce livre s’adresse aux concepteurs de sites Web et aux designers Web ayant déjà la connaissance de l’HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites Web intégrant ces nouveaux standards.

Dans la partir consacrée à l’HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation…) et les formulaires interactifs.

Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif…).

Ecris dans un style accessible, même pour les débutants, ce livre est destiné à dégrossir le sujet et vous permettra de tester ces nouveaux standards qui seront bientôt démocratisés. Vous pourrez ainsi tester avec des exercices concrets ces évolutions.
 

A propos de l’auteur :

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd’hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums.

Table des matières :

  • Introduction
  • Chapitre 1 : L’évolution de l’HTML et des CSS
  • Chapitre 2 : La nouvelle syntaxe HTML5
  • Chapitre 3 : Les éléments de structure HTML5
  • Chapitre 4 : Des modèles de sites HTML5
  • Chapitre 5 : Évoluer vers les CSS3
  • Chapitre 6 : Les nouveaux sélecteurs CSS3
  • Chapitre 7 : La mise en forme CSS3 des boîtes
  • Chapitre 8 : L’HTML5 et les CSS3 pour le texte
  • Chapitre 9 : L’HTML5 et les CSS3 pour les formulaires
  • Chapitre 10 : Les transformations CSS3
  • Chapitre 11 : Les transitions CSS3
  • Chapitre 12 : Les animations CSS3
  • Chapitre 13 : Le multimédia : audio et vidéo
  • Chapitre 14 : Le canevas de dessin
  • Chapitre 15 : Le design Web adaptatif
  • Chapitre 16 : Un design HTML5/CSS3 : The Cat Template
  • Chapitre 17 : Un design HTML5/CSS3 : FlipThru
  • Chapitre 18 : Un design HTML5/CSS3 : dConstruct

 
Lien vers les Editions ENI : http://www.editions-eni.fr
Pour l’achat de la version papier, la version numérique est offerte.
 
Voici aussi deux dépliants aide-mémoire de 12 pages, recensant les principales propriétés. L’aspect pratique, plastifié et moins encombrant qu’un gros livre, permet de les garder toujours à portée de main.
HTML5 CSS3

Freebies : Septembre

Voici une petite sélection de tutos et ressources, indispensables et totalement gratuits. Have fun !

- Tutoriel pour designer un bouton graphique en CSS :
http://line25.com/tutorials/how-to-create-a-stylish-button-entirely-with-css3

- Développer des menus à plusieurs niveaux en full CSS (compatibles) :
http://css3menu.com/index.html

- Créer des boutons de toutes tailles et toutes couleurs en full CSS3 :
http://acrisdesign.com/2011/06/create-a-multi-color-and-size-css3-buttons/

- Pour visualiser son travail dans toutes les tailles d’écrans :
http://resizemybrowser.com/

- Pour générer des CSS3 :
http://css3generator.com/

- Un générateur de grille gratuit :
http://netprotozo.com/grid/

- Générateur de palettes de couleurs :
http://www.colorschemedesigner.com/

- Créer et installer de belles Polices sur vos sites, avec générateur de CSS :
http://awesome-fontstacks.com/

 Page 1 de 3  1  2  3 »