Le flat design, kezaco ?

Le flat design est donc basé sur un style graphique très minimaliste et surtout très épuré. La technique consiste à utiliser des effets très simples (voir pas du tout d’effets) sur des éléments placés dans un environnement dit « 2D » et non « 3D ». Oubliez donc les effets de volume, d’ombres, de dégradés et j’en passe. Le flat design joue donc avec des couleurs vives sur des éléments utilisés en aplat.

« Flat » design ? Vraiment ?

Non. Le flat design ne se veut pas forcément « flat » (plat). Ce style graphique s’est popularisé très (trop) rapidement à tel point que son nom de « flat design » ne correspond pas exactement à son style et qu’il possède même plusieurs noms : flat design, minimal design et même authentically digital (utilisé par Microsoft).

Prenons en exemple les boutons suivants :

Ils sont créés en utilisant la technique « minimaliste ». Des couleurs simples, vives, et pas de surplus d’effets. Pourtant ils sont « volumineux » mais sont tout de même catégorisés dans le « flat design ».

Le flat design n’est donc pas tout le temps « flat » (plat) mais plutôt « minimaliste ». La dénomination la plus appropriée serait donc « minimal design ». Mais que voulez-vous, … les tendances, tout ça tout ça.

On peut également parler de « almost flat » ou encore « skeuominimalism ». Cette méthode est probablement le meilleur des deux mondes réunis. Je ne vais pas m’étaler sur le sujet car c’est très long et je suis loin d’être compétent à ce niveau. Voici simplement une capture de Google Maps sur iOS qui représente bien la méthode.

Le design est « flat » mais possède tout de même de petites ombres et dégradés. C’est très peu visible, c’est « almost flat ».

Où et comment utiliser le flat design ?

Ce style graphique possédant des attributs simples, il n’est en apparence pas très difficile de l’appliquer partout. Et pourtant, c’est un style qui demande beaucoup de méthode et de rigueur pour être appliqué correctement. Voici donc quelques points non-exhaustifs très importants qui vous aideront peut-être :

1. Ne pensez plus « décoration » ou « habillage ». Ou pensez-y un peu moins. Si vous avez compris les explications précédentes, vous comprendrez que ça ne s’applique pas ou peu au flat design. Vous pouvez utiliser des décorations mais rien de superflus. Une simple bordure suffira à « faire le job » au lieu d’une bordure plus « graphique » et stylisée.
2. Faites les bons choix de couleur. Utilisez des couleurs vives et contrastées. La couleur est un élément clé du flat design. Cela fonctionnera dans certains cas avec le noir et blanc mais cela aura plus d’impact si vous utilisez des couleurs.
3. Jouez avec la typographie. C’est grâce à cela que vous véhiculerez votre message. Les mots indiquerons aux visiteurs où ils doivent aller, ce qu’ils doivent comprendre. Jouez avec différentes fonts, styles et couleurs. Préférez des fonts « sans serif » et variez avec le style de ces dernières. Par exemple, une « Roboto light » aura de l’impact si elle est associée avec une « Roboto Black ». Idem pour une « Open Sans ». Vous trouverez ici une collection de 10 fonts intéressantes pour du flat design.
4. Choisissez une interface utilisateur simple et des éléments d’interface (UI elements) simples. Ne mettez pas trop de style (voir pas du tout) sur vos boutons. Une interface simple et compréhensive est un des points clé du flat design.

Pour prendre un exemple qui fonctionne bien, Microsoft démontre très bien les points précédents sur sa Modern UI (anciennement Interface Metro).

En bref, moins vous en ferez, mieux ce sera.

Pour quelle cible ?

Actuellement, le flat design est plutôt « réservé » (entre guillemets hein !) à une cible qui « connaît le web ». La maman qui recherche des produits de beauté ou le jeune qui recherche des chansons de r’n'b seront moins impactés par un flat design. Le message passera moins bien, il sera moins dans le thème. Gardez-ça pour un site qui parle de webdesign, le site d’une agence digitale, la présentation d’une application smartphone ou d’un logiciel.

Ce style doit être appliqué avec parcimonie et ne sera donc pas efficace pour tout les types de messages que vous voudrez faire passer.

Et dans le développement web ?

Vous l’aurez compris, la particularité du flat design est qu’il est simple et épuré et plat. En terme de développement (ou intégration), il sera beaucoup plus facile à coder qu’un concentré d’effets visuels, d’ombres ou de lumières. D’autant plus que le « flat design » s’intègre très facilement et suit extrêmement bien la tendance du « responsive design ».

Puisqu’il est simple, le temps de chargement de votre site sera lui aussi amélioré. Un site « efficace » contiendra par exemple une image pour votre logo, quelques images pour illustrer les articles ou catégories du site, des icônes, et c’est tout. Aucune images pour les boutons, le « background » etc.

Historique, Microsoft et Apple

Il est très difficile de tracer l’historique d’une mode. Car oui, le flat design n’est rien de plus qu’une mode. Je vais donc essayer de reprendre le moins maladroitement possible quelques points concernant cette « mode ».

Je vais tenir compte de l’avis très pertinent d’un ami qui fait du dev Apple depuis très longtemps parce que c’est celui qui selon-moi correspond le mieux.

On pourrait dire que le phénomène « flat » provient de l’iPhone. Oui oui, de l’iPhone.

Je m’explique et je vais être un peu long.

• Apple révolutionne le monde du mobile en sortant en 2007 son premier iPhone. Jusqu’ici, tout va bien.

Au fur et à mesure des nouveaux OS (iOS 2, 3, 4 etc …), Apple améliore drastiquement le réalisme de ses applications. La technique du skeuomorphisme venait d’être popularisée.
Alors le skeuomorphisme, qu’est ce qui se cache derrière ce nom barbare ? Déjà, il ne faut pas la confondre avec le « skeuominimalism ». Oui, vous pouvez vérifier l’orthographe des deux mots, ils sont différents.

Dans le skeuominimalism, on a une interface globalement « flat » mais avec quelques ombres et dégradés comme je l’expliquais auparavant. On a même parfois des notions de volumes.
Dans le skeuomorphisme, il s’agit tout simplement du fonctionnement et de l’aspect d’un logiciel qui se rapproche d’un objet physique réel.

Exemple de skeuomorphisme réussi : iBook.

Design et fonctionnalités proches du réel (on peut tourner les pages comme un livre).

Exemple de skeuomorphisme ou on a que l’aspect et pas la fonctionnalité : l’application Contact.

On a l’aspect réel de l’objet (un carnet de contacts) mais pas le fonctionnement (on ne peut pas tourner les pages)

Exemple de skeuomorphisme ou la partie « visuelle » est ratée : l’application Game Center.

La partie visuelle est ratée. C’est pas forcément « joli » et ça ressemble plus à un billard qu’à un « game center ».

Pourquoi je parle de skeuomorphisme ? Parce que du coup on se retrouve en 2010 ou le leader mondial du smartphone Apple tend à pousser le design de ses applications au réalisme alors qu’au même moment, Microsoft se cherche une place sur le marché du smartphone. La firme de Redmond choisi donc la voie opposée du leader et sort son premier Windows Phone. L’interface est flat.

Aucune ombre, pas de relief ou volume, pas de texture, c’est très « plat ».

C’est totalement différent du leader actuel iOS et ça fonctionne, ça fait le job (sans mauvais jeu de mot).
Ça fonctionne tellement bien que cette interface « fait le buzz » et cartonne partout dans le monde. Microsoft voyant cette belle réussite se décide à préparer et sortir Windows 8, son OS avec ce traditionnel « start screen » très « flat ». Changement radical pour l’OS et tout les utilisateurs. La firme de Redmond décide même de refaire son site corporate en utilisant son flat design habituel.

Les webdesigners s’approprient et crééent de nouvelles choses, de nouveaux designs plat et c’est à ce moment là que l’envolée réelle du flat design se fait, que l’alchimie prend et se propage. Qu’on se comprenne bien. On parle ici de « buzz » et donc de nouvelle mode. Le flat design devait probablement exister bien avant que Microsoft sorte son OS mais n’était pas encore popularisé.

Microsoft, c’est bien. Mais Apple ? Et le futur ? Qu’est-ce que le fuck ?

Maintenant qu’on a posé quelques bases, on peut en arriver aux spéculations et à ce qui sera probablement la deuxième explosion du flat design. Je vais être très théorique et me baser sur des faits concrets mais aussi des rumeurs donc il va falloir lire ce paragraphe avec des pincettes.

Partons du présent et avançons dans ce sens sur l’historique de la firme à la pomme.

• Aujourd’hui, le flat design est partout. On en mange (trop) à toutes les sauces et il doit probablement même exister des webdesigns qui mélangent skeuomorphisme et flat.
• Apple licencie Scott Forstall, le papa d’iOS et surtout le gars qui a poussé le skeuomorphisme sous toutes ses formes sur iOS.
• Apple place Jonathan Ive (Jony Ive pour les intimes) au poste de designer hardware/software. Mais si, Jony Ive, vous avez forcément vu ce mec quelque part. Au passage, détail important, ce mec est réputé pour sa touche plus « simpliste ». Regardez donc les nouveaux iMac, Mac Book, Mac Book Air, etc… .

Et c’est là que la spéculation arrive et qu’on peut revenir à la deuxième explosion du flat design.
Nouveau mec à la tête du design de iOS donc possiblement nouveau design pour iOS 7. Ce gars est réputé pour faire du « minimal design », on peut donc penser que iOS 7 sera beaucoup plus flat que les précédentes versions ou en tout cas même si ce n’est pas totalement « flat », ça pourrait s’approcher de l’UI de Windows 8.

Je m’égare un petit peu mais c’était important de préciser qu’il y aura probablement deux envolées majeures du flat design. Vous comprendrez que le passage par Apple était ainsi inévitable. Encore une fois, ce paragraphe n’est que pure spéculation et c’est l’avis d’un ami sur lequel je suis entièrement d’accord.

Donc ne vous inquiétez pas. Que Apple fasse un iOS 7 flat ou non, on en bouffera encore pendant quelques mois voir quelques années en partie grâce à Microsoft. Big up Bill !

Donc le flat design sera partout, mais quelles sont les limites ?

Comme je le disais précédemment, le flat design a la particularité d’être un effet de mode. Malheureusement comme dans beaucoup d’exemples dans la « mode », on en fait un peu tout et n’importe quoi sans vraiment réfléchir au besoin et aux avantages/inconvénients.

L’ergonomie pour commencer. L’internaute est habitué depuis très longtemps aux interfaces qui possèdent des ombres, des dégradés, des effets lumineux et des coins arrondis. Ce sera à vous ou votre designer de choisir quand et comment utiliser le flat design. Comment ne pas perdre en ergonomie ? Est-ce que cet élément est un bouton ou une simple image ? Est-ce que si je clique ici il se passera quelque chose ? C’est à ces questions que vous devrez répondre et construire votre design en conséquence.

La notion de « volumes » et « niveaux ». Sur la plupart des smartphones ou simplement sur les barres de menu des sites/blog, on a une notion de « niveau » sur les rubriques et sous-rubriques. Lorsque vous passez votre souris sur un menu, il se déroule pour faire apparaître plusieurs sous-menus. Cette sensation de « niveau » est très difficile à rendre dans le flat design. Il faudra donc réfléchir à l’importance de ces éléments. un menu déroulant n’est peut-être pas toujours la meilleure solution.

En conclusion :

Je me répète mais c’est très important, gardez un style général simple. Ne jouez pas trop avec les effets, ne jouez pas trop avec des typo trop arrondies ou trop « graphiques » (manuscrit, calligraphie, … ). utilisez des couleurs vives et surtout qui s’accordent entre-elles. N’allez pas mélanger un fushia avec un bleu marine par exemple.

Pour conclure, voici quelques liens utiles qui j’espère pourront vous inspirer :

• 15+ innovative flat design websites
• Google Image, ton ami pour la vie
• Flat design (fltdsgn.com)
• Comment aborder le flat design ?
• Exemples d’icônes « flat » et « minimal »

Et plus généralement, une fat flat recherche sur Google.

@Manoz

Sources : designmodo.com – magazineduwebdesign.com – viceup.com
Merci à Sébastien Desbenoit pour ses avis sur le flat design.
Merci à Sébastien Cardoso pour les parties concernant Apple et Microsoft.

Spacebound c’est l’histoire d’un jeune garçon et de son chien qui sont perdu dans l’espace. Ils ne leur reste que très peu d’oxygène et choisiront de passer leur derniers moments ensembles de façon amusante.

Cette vidéo remet en question un concept que je trouve très intéressant dans une vie : lorsque la mort est proche, très proche, où, comment et avec qui passer ses derniers moments ?

@Manoz

Après de multiples combats avec SFR et mon assurance, j’ai préféré abandonner et acheter un smartphone téléphone dans un bureau de tabac. Et oui, trente euros chez votre marchand de journaux comme ils disent … . Je pensais vraiment acheter un vrai smartphone dans les semaines voir les mois à venir, mais non.

Bref. J’ai passé dix longs mois sans smartphone, sans les Internets mobiles, avec un téléphone que j’ai cassé très rapidement. Pour les plus curieux d’entre-vous, il s’agissait d’un Text Edition By SFR. Oui, j’étais en possession de cette merde.

Bref ! Je vous passe les détails et l’analyse comportementale que j’aurais pu écrire à propos de la vie sans smartphone. Tout ça c’est terminé, j’ai enfin acheté un smartphone \o/

J’avais vraiment envie de quitter la marque à la pomme et de retourner chez le petit robot vert. J’ai eu le choix entre un Nexus 4, un HTC One et un LG Optimus G. J’ai donc choisi le LG Optimus G. Juste parce qu’il me revenait moins cher que le HTC One et qu’il avait une vraie 4G. Et puis surtout parce que « Optimus G », c’est plutôt swag cool comme nom de smartphone.

Me voilà donc en possession de ce chouette smartphone et je peux vous dire que ça fait putain du bien.

J’avais sauté pas mal d’étapes chez Android. J’ai arrêté à Android Gingerbread pour passer chez Apple. Je ne suis pas mécontent d’être revenu sur Android.
Du coup je ne vais pas vous faire une review complète de ce smartphone, vous en trouverez un peu partout sur les Internets.

Après plusieurs jours de tests, de benchmarks et d’utilisation, je vais simplement vous énoncer les points positifs et les points négatifs que j’ai trouvé. Allons-y Alonzo !

Les +

• La fluidité du smartphone. Tout va très vite. On peut regarder une vidéo et envoyer un message en même temps sans problèmes, le multitâche est vraiment efficace.
• Android. Je suis sous Jelly Bean (4.1.2) et je dois dire que c’est super simple. Moi qui suis passé de Gingerbread à Jelly Bean, je n’ai eu aucun mal à m’y retrouver.
• L’appareil photo. Car oui, on peut dire ce que l’on veut, de nos jours, c’est important. Son capteur 13 Mpixels envoie tout simplement du lourd. Même si il faut souvent ajuster la balance des blancs et la luminosité, cet appareil est de très bonne facture. Que ce soit de nuit (avec flash) ou de jours, j’ai pas une seule photographie vraiment dégueulasse.
• L’écran. Ce True HD-IPS+ de 4,7 pouces envoie sévèrement du lourd. Même si ce n’est « qu’un » écran 720p, il cartonne. Les couleurs sont magnifiques, la définition est vraiment bonne. J’ai été sur le cul en lisant un livre ou en défilant simplement ma timeline Twitter. C’est beau, très beau.
• La batterie n’est pas si mal non plus. Je pensais que le processeur 4 coeur et l’Adreno 320 allaient sucer un max de batterie mais en fait non. Pas tant que ça. Pour faire simple, je le laisse en charge la nuit. Je le débranche aux alentours de 7h30 le matin pour le rebrancher le soir aux alentours de 22h. Il tient donc la journée sans problèmes si on pense à modifier quelques réglages useless comme le capteur qui détecte si vous regardez ou non l’écran pour le laisser allumer.

Les -

• Le haut parleur. Je ne suis pas du genre à me balader avec le son à fond sur mon smartphone sans écouteurs mais je dois avouer qu’en montrant des vidéos à des amis, je me suis aperçu que la qualité du son n’était pas au top. En revanche avec les écouteurs, rien à dire, c’est d’excellente qualité.
• La fameuse surcouche SFR. J’ai pris mon téléphone chez SFR. J’ai du désinstaller une dizaine voir une quinzaine d’applications qui ne me servaient à rien. En revanche, la surcouche LG ne me déplaît pas. Je pensais devoir rooter mon téléphone pour tout supprimer mais finalement, ça me va très bien.

Voilà ! Globalement, c’est tout ce que j’avais à dire sur ce smartphone. J’en suis plus que content et il correspond parfaitement à mes attentes. On m’a en revanche conseillé de nombreuses fois d’acheter rapidement une coque car la vitre est très fragile. Je suis du genre à prendre soin de mon téléphone mais on est jamais à l’abri d’un accident.

Si vous avez des questions ou des suggestions d’applications ou de paramétrages intéressants, n’hésitez pas à m’en parler dans les commentaires de cet article ou sur Twitter.

@Manoz

Crédit images : ultimatepc.fr et ubergizmo.com

Et là, c’est un monstre qui a débarqué le 1er mars à Lyon : le Terminal Club.

Pour faire simple, je n’y suis allé qu’une seule fois et c’est tout de suite devenu mon nouveau Quartier Général. J’en ai fait un bon paquet des clubs, bars, boites, mais rarement d’aussi bonne qualité.

Le Terminal Club est donc un club tout frais à Lyon spécialisé dans les musiques électroniques. Ils y ont une très bonne programmation musicale avec des artistes locaux ainsi que des grands noms à l’international.

Pour ne citer qu’eux, on y retrouve Max Cooper, Le Loup, Yogi et j’en passe.

Comme il est très bien précisé sur leur site, ce lieu a été créé dans un but précis :  répondre à des envies particulières jusqu’à ce jour insatisfaites dans le monde de la musiques électronique lyonnaise.

Et effectivement à Lyon, il y avait des envies complètement insatisfaites. La plupart des gens que je connais se limitaient au DV1 (qui est au passage un très bon club) pour leurs sorties musicales. Le soucis des clubs à Lyon c’est que les autochtones qui y vont commencent à en avoir marre des soirées étouffantes, pleines de jeunes ados qui ne savent pas boire et qui foutent malheureusement souvent le bordel.

J’ai mis pas mal d’espoir et d’attente dans la Terminal Club et je suis certain qu’ils sauront s’en sortir sans problèmes. Ils ont également la particularité d’enregistrer les mixs qu’ils passent et de les publier sur leur Terminal Play, une webTV dédié au club. Et ça, c’est plutôt cool.

Bref vous l’avez compris, je suis déjà fan de ce club et j’espère qu’ils apporteront ce petit quelque chose qu’il manquait à Lyon. Longue vie au Terminal donc :)

Et comme d’habitudes, les liens qui vont bien :

• Le site
• La page Facebook

@Manoz.

Crédit photo : terminal-club.com

J’ai reçu cet email rédigé très maladroitement par le/la manager du groupe Ladybug and the Wolf. Quand je dis « maladroitement », c’est que l’email ne contenait quasiment rien. Une simple photo, quelques url YouTube, Soundcloud et c’est tout. Pas de description, pas de texte, pas de « bonjour je vous présente gniagniagnia … », rien de tout ça.

Du coup j’ai été un peu retissant mais par curiosité, j’ai écouté quelques chansons de ce groupe.

Et là … c’était la grande surprise.

Ladybug and the Wolf est donc un groupe folk qui se démarque des autres groupes folk (notez que cette phrase est complètement inintéressante). La voix de Ladybug (la chanteuse) est juste magique et fait vraiment du bien aux oreilles. Et lorsque s’ajoute la voix du chanteur, the Wolf, c’est la débandade. Ces deux voix ont été faites pour se rencontrer, obligatoirement.

Ladybug and the Wolf c’est donc une musique très douce et souvent « joyeuse » mais ce n’est pas tout. Comme tout bon groupe de folk, on a aussi droit à des notes plus sombres, plus tristes qui, personnellement, m’aident généralement à me concentrer pour bosser.

Accompagné de percussions, clavier, harmonica, xylophone, Q chord et melodica, ce groupe est tout ce qu’il me fallait pour bien démarrer la journée.

Je vous laisse écouter, et, apprécier.

N’hésitez pas à me faire vos retours si vous avez aimé ou non :)
Je vous recommande vivement la chanson Moods qui est juste fabuleuse.

Les liens qui vont bien :

• Soundcloud
• YouTube
• Facebook
• Twitter
• Contact management, press, booking

À savoir pour les Lyonnais(es), Ladybug and the Wolf seront à La Marquise le 13 avril. Plus d’infos ici.

@Manoz

PS : je viens de trouver un chouette remix électro’ de la chanson Moods sur YouTube. On aime :)

Je me suis dis que ça pourrait probablement intéresser d’autres personnes donc j’ai gentiment demandé l’autorisation de mettre en image ces chiffres (non, ce n’est pas une infographie) de façon un peu plus propre qu’une simple capture d’écran de l’email.

Là voilà donc :

(cliquez pour agrandir)

Ces chiffres nous montrent clairement que OnlyLyon continue toujours à avancer et à « exploser ». Nous sommes désormais plus de 11 000 ambassadeurs (dont 1 629 expatriés) et 1 860 emplois ont été générés grâce au programme « Invest In Lyon ».

Et c’est sur une bande son de Savant, un groupe que j’aime beaucoup que je vous présente des petits chatons en slowmotion.

Et vu que je suis un mec hyper sympatoche (note : ne plus utiliser cette expression), voici la vidéo bonus avec encore plus de slowmotion. Ooooowww <3

32 ans plus précisément … . Oui, les ordinateurs portables ne sont pas tout jeunes. Pour tout vous dire, je suis presque aussi vieux que le tout premier ordinateur « portable ». En tout cas, à six ans près.

Et c’est ça qui est amusant car même si je n’ai pas connu l’ancêtre des ancêtres, j’ai eu la chance de côtoyer, plus tard, ses petits frères.

C’est aux alentours de 2007 que j’ai connu mon premier ordinateur portable. Je me dis que même en 2007, il y avait déjà eu 26 ans d’évolutions derrière moi.

C’était un ordinateur tout moche et tout lourd qui avait un processeur de 1,60 MHz (Pentium M 730), 256 MB de mémoire RAM et un disque dur de 35 Go. Et c’était vraiment top.

Je pense que j’ai même encore cette belle machine dans un carton et il y a même moyen qu’elle redémarre sans problème. C’était du solide, très solide.

Suite à ça, j’ai connu mon premier Ordinateur portable VAIO. Cette révolution de la mobilité … . Sony a été et est encore aujourd’hui considéré comme un des pionniers de l’informatique moderne. Que ce soit en terme de poids, de puissance ou de design général, l’ Ordinateur portable VAIO a toujours su rester assez proche de la marque à la pomme (notamment). Et on a beau dire ce que l’on veut, c’est une excellente marque « grand public ».

Voici donc une très chouette infographie publiée par le site gaborit-d.com

Ordinateur portable Sony

C’est tout de même assez dingue comment en si peu d’années (oui parce qu’au final, ce n’est pas beaucoup) la technologie a évoluée. Et c’est un constat qui me laisse rêveur puisque j’ai déjà hâte de voir ce qu’il y aura dans 26 ans.

Quoi qu’il en soit, pour moi, l’ordinateur portable est et restera un des meilleurs outils de travail que ce soit chez moi, au bureau ou en déplacement.

Et vous ? Que pensez-vous de tout ça ? Avez-vous également une anecdote à partager ? Votre premier ordinateur portable, son design, … ?

@Manoz.

Article sponsorisé

Je penses qu’il y en a pour tous les goûts. Du Rock au classique en passant par la musique électronique et le jazz, voici donc ma petite sélection de playlist.

Tout simplement, une petite équipe de passionnés postent chaque jours des perles musicales sur ce Tumblr.
Ce blog a été créé par @JeanFromageau et très vite, @LaFilleDeDC , @Sirimande et @LitePanda ont rejoint l’aventure pour apporter leurs recommandations musicales.

Cette petite équipe de chevronnés font ce que nous pourrions appeler de la « veille musicale« . Personne ne sait comment ils font, comment ils dénichent ces morceaux, même pas eux. Mais putain qu’ils le font bien !

Si Écoute Prolongée était un mot-composé dans le dictionnaire, sa définition serait probablement la suivante :

Écoute Prolongée, nom féminin
Action de recommander de la musique au travers d’un site. Provoque généralement des spasmes nocturnes lors de l’éveil du sang, sur la posture d’un Rock posé.

Écoute Prolongée, c’est donc ça. De la musique, de la bonne musique, et encore de la musique. Vous y découvrirez tous les styles, tout ce que vous aimez ou que vous aimerez.

Écoute Prolongée

@Manoz