LE DESIGN NUMERIQUE

A short introduction to

Je m’appelle Marc-André et je travaille depuis plus de 20 ans dans le monde de la communication. J’ai débuté comme directeur artistique dans les grandes agences. Parallèlement, j’ai été un des pionniers de l’infographie en France et j’ai connu les débuts du design numérique (télématique). J’ai ouvert deux studios spécialisés dans la création graphique « print » : Bleu Petrol et Public Image Factory. Je suis actuellement à la tête du studio i-breed spécialisé dans le design numérique… »

« Hello !

Le Web a évolué. On estime que depuis 2004, il est entré dans ce que certains spécialistes appellent sa version 2.

Au départ (dans sa version 1), la plupartdes pages Web disponibles étaient surtout statiques et peu remises à jour. 

Avec l’apparition du haut débit et de meilleures installations, avec de meilleurs ordinateurs, le Web s’oriente définitivement vers une plus grande interaction avec l’utilisateur.

Au début était le Web 1.0

Un peu d’histoire !

1971 > 1er email (@)1978 > 1er spam1981 > 1er virus 1985 > .com1990 > www1992 > 1er email « formaté »• > Flash et hotmail• > Google• > Wikipedia2004 > Facebook

Notons qu’internet est un réseau en étoile…

Par lequel du code est transmis

Puis finalement être interprété

par notre navigateur :

>> Le Web 1.0 :• des pages statiques• un simple report des pages papiers• peu d’interactivité• de longs temps de chargement• du matériel informatique préhistorique• un « tuyau » étroit• un temps de connection « coûteux »

LE WEB 1.0 = LA TELEVISION« un diffuseur vers n utilisateurs, chaque contenu est optimisé pour plaire au plus grand nombre car le temps de diffusion est limité, l’interaction est faible. »

Bref, le Web 1.0 est toujours d’actualité…

Depuis 2001 et l’explosionde la « bulle internet »,le Web évolue et est entré dans sa deuxième version…

Le choix du « 2.0 » n’est pas anodin !

Le terme « Web 2.0 » a été utilisé pour la première fois en 2004 par Dale Dougherty

Petite leçon de langage numérique

à l’usage de ceux qui veulent briller

dans les soirées mondaines en ville :

On ne dit pas : « Web deux points zéro »

Mais bien :« Web deux points »

Ou mieux encore :« Web : »

Le WEB 2.0 est le marronnier

de la presse française…

« Le Web 2.0 c’est tout simplement l’internet d’aujourd’hui, c’est à dire le… Ce que… Enfin… Le, le, enfin sur quoi surfent tous les français, moi comme les autres (…) C’est à dire internet d’aujourd’hui ! »

A la question « Qu’est-ce que le Web 2.0 ? » posé par un journaliste de BFM, Frédéric Lefebvre, l'un des ex-porte-paroles de l'UMP répondait (il y a 4 ans) de cette façon :

>> Mais c’est quoi alors, le Web 2.0 ?

Si le Web n’a pas changé, son contenu,

lui, évolue. On admet généralement qu'un

site ou une application Web est Web 2.0

lorsque :

• Elle repose sur le partage

des informations ou des données• Les standards sont respectés*• Il existe une dimension sociale

* soit des technologies standards recommandées par le W3C :html, Xhtml, feuilles de style, Ajax… Etc. Le site peut être utilisé d’un navigateur standard !

>> Et le Web 2.0 est arrivé…Le Web s’oriente définitivement vers une plus grande interaction avec l’utilisateur, ou entre utilisateurs. La notion de groupe, de réseau est au cœur du Web 2.0

« Qu’est -ce que le Web 2.0 ?» par Tim O’Reilly (article fondateur)

Google versus Netscape

= service

« Le service s’améliore quand le nombre de ses utilisateurs augmente ».

Cette dimension communautaire est une spécificité du Web 2.0.

Si possible gratuit !

• 90 % des foyers français utilisent Google• + de 67% de parts de marché au niveau mondial(devant Yahoo, Baidu, Bing…etc)

 90%

>> 7 critères pour un Web 2.0

• Offrir un service,• Disposer de données uniques qui vont s’accroître et s’enrichir à mesure de leur utilisation,

7 critères pour un Web vraiment 2.0

• Considérer les utilisateurs comme des co-développeurs, • Tirer parti de l’intelligence collective,

•  Toucher le marché jusque dans sa longue traîne,

Seul, le cycliste ira beaucoup moins loin qu’un peloton dûment constitué où physiquement chaque individu créera un effet d’aspiration sur son voisin.

Plutôt que de vendre massivement un produit en grande quantité dans un lieu unique de vente, on vend une multitude de produits en petite quantité via une multitude de réseaux. C’est notamment la raison de la réussite de sites comme Amazon.

7 critères pour un Web vraiment 2.0

La longue traine et le monde de l’édition…

7 critères pour un Web enfin 2.0

• Libérer le logiciel du seul PC en visant notamment le nomadisme et les « devices » adaptés (pda, smartphones, portables…),

• Offrir de la souplesse dans les interfaces utilisateurs, les modèles de développement et les modèles de gestion.

Mais attention, le nomadisme démultiplie les contraintes en terme de design !

>> le Web 2.0 crée de nouveaux usages, des nouveaux outils…

• Le succès de sites Web 2.0 crée de nouveaux usages et de nouveaux standards

(Soit des habitudes communes à un groupe, en l’occurrence ici les internautes) LE DESIGN DOIT ACCOMPAGNER CES STANDARDS• On apprend en même temps que l’on découvre ces nouveaux services

LE DESIGN DOIT ENCADRER CET APPRENTISSAGE

• Jour après jour, les technologies se démultiplient

LE DESIGN DOIT S’ADAPTER AUX CONTRAINTES

Du fait de ce dernier point….

Le design numériquedonne encore(et pour l’instant) le lead à la technique

En gros, on est passé de :

À… Et ce en moins de 25 ans

Du fait de ses contraintes, le Web 2.0 crée une esthétique

Qui colonise notre quotidien numérique… et donne un sens différent à la « beauté » graphique !

Google est ressenti comme « beau » car pratique, voir reposant…

Le Web 2.0, c’est aussi le Web des « services »Google est le champion des services « gratuits »

• Le moteur de recherche :- Utilisé par 91% des internautes français- 1 000 Milliards de page indexées- 2,5 Milliards / requête Jour

• le navigateur : Google Chrome• Google desktop• Google documents• Google pack (11 applications gratuites)• Google Alerte • Google reader (flux rss)• Google Earth et Map

Le Web 2.0, c’est aussi le Web des « services »

Google est le champion des services « gratuits »

• Google Books• Google Analytics• Google talk• Google Groupes • Picasa• YouTube• Google Sites• Le Smartphone Android• Google Labs :

- Google Image Swirl - Google fast flip- Google Wave - Etc…

Service ou non, la guerre du contenu a commencé !

• Il y a plus de 40 millions d’internautes en France (pour 65 millions d’habitants),

• Depuis 1990, le prix moyen des micro-ordinateurs baisse de 30% par an,

• 93,6 % des foyers ayant accès à Internet ont choisi le haut débit (ADSL ou câble),

• 19 millions de mobinautes en France, • 77,2% des internautes se connectent tous les jours.

> La musique (et le téléchargement illégal) !

> Le cinéma, les replays et la V.O.D. !

> L’édition, la presse…

Les créateurs historiques de contenus ont été pris de vitesse…

Les blogs et lescommunautés diffusent des contenus illégaux !

Les créateurs historiques de contenus ont été pris de vitesse…

Le graphiste/designera un rôle à jouer dansces futurs contenusà créer…

Ces contenus êtant un peuplus que de belles imagesavec des belles couleurs…

En résumé :Quelle expérience, les marqueset les entreprises peuvent-elles offrir à leur utilisateur ?

« L’expérience utilisateur représente la qualité d’une expérience globale perçue par une personne (utilisateur) qui interagit avec un système. Cette expérience d’un produit/service se fait sur une relation durable et donc globale car elle tient compte de TOUS les moments d’utilisation, avant/pendant/après l’acte d’achat : la prise de conscience, la découverte, la commande, l’achat, l’installation, le service, le support, l’évolution, la fin d’utilisation… »

UX

Une bonne UX = un bon design

UX

Une bonne UX:-Des usages « utiles »-Un bon design graphique-Une bonne animatique

(L’expérience utilisateur selon le blog synthesio.fr)

les wikis« Tirer parti de l’intelligence collective »

Trois types :

• généraliste (wikipedia)

• thématiques (également wikipedia)

• d’entreprise

WikipediaJurispediaWikipol

« wikiwiki » signifie « vite » en hawaïen !

Quelques usages…

L‘hébergement et partage de medias« Je t’envoie les photos et des vidéos du petit dernier ! »

PhotosC’est une des résultantes du « tout numérique » : appareil photo, visionnage et partage des photos. Les acteurs historiques de la photographie proposent tous des solutions (Kodak, Fnac..) de mises en ligne et de partage, mais c’est bien sûr flickr qui tire son épingle du jeu.

VidéosLes services tels que DailyMotion et YouTube constituent une véritable révolution : avant eux, partager une vidéo personnelle avec ses proches relevait du parcours du combattant. Il fallait par exemple régler finement la compression de la vidéo, choisir un hébergement Internet approprié, construire son site Web, etc.

Attention aux et aux !

Documents (ppt)Les services de partage de présentation PowerPoint ou Impress (OpenOffice) sont de plus en plus nombreux. Ils vous permettent de mettre en ligne vos présentations facilement et rapidement. Les fonctionnalités de ces services se rapprochent de celles que nous retrouvons sur YouTube. C’est-à-dire que vous pouvez non seulement partager vos présentations depuis le site qui offre ce service, mais vous pouvez aussi les intégrer sur votre site Web ou blogue.

- slideshare- zohoshow- slideburner- scribd

Attention aux et aux !

L‘hébergement et partage de medias« Je partage ma prez ! »

YouTube est devenu unréseau social !• Plus de 72h de vidéos sont uploadées

chaque minute ! • Aux Etats-Unis, les internautes ont visionné

en mai 16 milliards de vidéos en streaming,•  Ces utilisateurs ont représenté 136 millions

de visiteurs uniques* en mai.* Internaute identifié comme unique visitant un site pendant une période donnée, un mois en général. Ce visiteur est identifié par une adresse IP unique et un témoin (cookie). Une audience de 100 000 visiteurs uniques par mois signifie que 100 000 internautes différents (100 000 ordinateurs différents en fait) ont visité le site pendant la période de référence.

Les flux RSS« Je m’abonne pour avoir des infos avant tout le monde ! »RSS désigne une famille de formats XML utilisés pour la syndication de contenu Web.Ce standard est habituellement utilisé pour obtenir les mises à jour d'informations dont la nature change fréquemment. Typiquement cela peut être des listes de tâches dans un projet, des prix, des alertes de toutes natures, des nouveaux emplois proposés, les sites d'information ou les blogs.

Trois formats peuvent être désignés par ces initiales :• Rich Site Summary (RSS 0.91)• RDF Site Summary (RSS 0.90 et 1.0)• Really Simple Syndication (RSS 2.0)

Les Agrégateurs« Je centralise l’information »Un agrégateur est un logiciel permettant de suivre plusieurs fils de

syndication en même temps. Il prévient de la mise à jour d'un site web ou des actualités qu'il publie (par notification sonore, visuelle, etc.). Également, il importe le contenu nouveau en question et il le fait pour un ensemble de sites. (editeur ou hébergeur ?)

En ligne :Alvinet Google Blackle Mon MSN Mon Yahoo Netvibes NewsRSS OnemoretabSymbaloo Technorati

(existe en local aussi)

Les tags« J‘étiquette mes contenus pour mieux les échanger »

Les tags sont simplement des étiquettes qu'on peut coller comme on le souhaite sur du contenu - le lecteur de ce contenu va lui-même ajouter ses proprestags). Le classement et l’organisation de ces tags est directementréalisé par ceux qui les utilisent (folksonomie)…

Le social bookmarking« J’échange mes bonnes adresses »

Le social bookmarking (en français « marque-page social », « navigation sociale » ou « partage de signets ») est une façon pour les internautes de stocker, de classer, de chercher et de partager leurs liens favoris.

Bookmarks.fr

Blogmarks.net

Mister-Wong.fr

Shimoo

Delicious

Digg

Diigo

Jamespot

…Etc.

Les configurateurs« J’achète des produits uniques »

Un configurateur est un logiciel applicatif permettant de guider un consommateur acheteur vers la définition exacte ou approchée du Bien ou du Service censé répondre à ses besoins et attentes. Ces configurateurs sont proposés en magasin, sur Internet, ou disponibles par l'intermédiaire d'un délégué commercial lors d'un contact client.Très présent dans le monde automobile : Audi, Citroën, BMW… et

dans

le monde du prêt à porter : My Adidas, NikeiD, Converse, H&M… Etc.

L‘open source, le partage de ressources et d’information« Je suis le pionnier d’un monde meilleur »La désignation open source s'applique aux logiciels dont la licence respecte des critères précisément établis par l'Open Source Initiative, c'est-à-dire la possibilité de libre redistribution, d'accès au code source et aux travaux dérivés.

Souvent, un logiciel libre est qualifié d'« open source », car les licences compatibles open source englobent les licences libres selon la définition de la Free Software Foundation ou FSF.

Ce mouvement a permis l’émergence de CMS ultra-efficaces (plug-ins et back offices) avec une grosse communauté pour les soutenir.

Le partage d’infos à travers des plates-formes « accessibles » à tous… Comme par exemple :

Le Cloud

« Je suis sur un nuage »

Le Cloud computing est l'accès via un réseau de télécommunications, à la demande et en libre-service, à des ressources informatiques partagées configurables…

Le Crowd sourcing« L’intelligence du communautaire.»

« le crowdsourcing consiste à canaliser les besoins ou désirs d'experts pour résoudre un problème et ensuite partager librement la réponse avec tout le monde. Google et Wikipédia sont les plus gros utilisateurs de crowdsourcing. »Henk van Ess

journaliste économique

Un exemple symptomatique : Eyeka

Le Micro blogging« Je bloggue sur ma vie en direct live »

Twitter est un outil de réseau social et de microbloggage qui permet aux utilisateur d’envoyer gratuitement des messages brefs, appellés tweets (gazouillis), par Internet, par messagerie instantanée ou par SMS.

Les blogs« Je raconte ma vie qui est super intéressante ! »

Blog vient de la contraction de deux mots Web et log.Web pour Internet et log qui est un journal de bord dans le milieu de l’aviation - navigation.En français, on a opté officiellement pour bloc note ou bloc tant dis que les Canadiens ont eux adopté blogues.

Un blog est une suite antéchronologique de billets (d’articles, notes ou postes) constitués de texte, d’image, de sons, de vidéos. Il s’agit donc d’un site inernet interactif composés d’articles qui peuvent êtres commentés par tout internaute.

Les forums « Je pose des questions et on m’aide à y répondre »

Un forum de discussion est un forum utilisant les ressources d'Internet.

Un forum est tout simplement un site d'échange, par le biais de messages, que ceux-là soient disponibles sur Internet ou bien sur un réseau interne comme un intranet ou encore un extranet (Utilisation du "net" dans laquelle une organisation structure le réseau pour s'interconnecter avec ses partenaires...).

Les discussions y prennent place sous la forme de « fils » de messages, à publication instantanée ou différée ; cette publication est souvent durable, car les messages ne sont pas effacés. Elle est par nature le fait de plusieurs auteurs. Dans certains forums à inscription, les messages sont modifiables a posteriori par leurs auteurs.

Les réseaux sociaux « Si je n’ai pas le temps de te retrouver au café, je te retrouve sur Facebook ou Viadeo ! »

Quelques exemples :

• MySpace

• Facebook

• Viadeo

• Linkedin

• Copains d’avant

En 1988, la première plate-forme sociale est lancée par AOLEn juillet 2005, MySpace est lancé,Février 2004, Facebook est lancé…

Si Facebook est ouvert à tous,Pinterest est réservé à « l’image ».

Pinterest est un réseau social créé en 2010 permettant à ses utilisateurs de partager de belles photos ou contenus trouvés sur le web. Le principe de base de ce réseau social est d'épingler ses trouvailles sur un tableau (board), comme on pourrait épingler des photos sur un tableau en liège. Ce site, étroitement interconnecté avec Facebook, connaît une croissance fulgurante aux Etats-Unis.

En tant qu’éditeur de site Internet, vous êtes soumis à diverses dispositions issues de la loi du 29 juillet 1881 sur la liberté de la presse, de la loi du 30 septembre 1986 sur la liberté de la communication audiovisuelle, de la loi du 1er août 2000, et de la loi du 21 juin 2004 pour la confiance dans l’économie numérique (LCEN).

Le succès des Réseaux Sociaux change le monde de la communication/design

« La stupéfiante croissance du temps consacré par les gens à ces sites change la manière dont ils organisent leur temps sur Internet et a des ramifications sur la manière dont les gens se comportent, partagent et interagissent dans leurs vies quotidiennes. Par conséquent, les industries des médias et de la publicité font face à de nouveaux défis autour des opportunités et des risques que ce nouveau média crée. » Etude Nielsen 2009

La marque doit « expliquer » en configuration « ONE to ONE ».Bref, elle doit engager une « Conversation »

Le marketing conversationnel consiste à construire et à maintenir dans le temps un dialogue personnalisé sur l’ensemble des canaux. Alors que les plate-formes marketing traitaient traditionnellement les campagnes sortantes, les plate-formes de marketing conversationnel fusionnent les campagnes sortantes et les contacts entrants, à l’initiative du consommateur.

3.0

>> Et demain ? Le Web 3.0

« Idéalement, le système du Web sémantique doit être capable de donner une réponse complète à une question du type « Je veux partir en vacances cet été en Toscane. J’ai un budget de 4 000 euros. Et nous avons un enfant de 8 ans ». Aujourd’hui, répondre à une telle question va exiger des heures de tri dans des listes distinctes d’hôtels et de location de voitures. »

On nomme ergonomie « l'étude scientifique de la

relation entre l'homme et ses moyens, méthodes et milieux de

travail »

Pour faciliter l’accès à ces usages et/ou

ces nouvelles fonctionnalités…l’ergonomie se

développe

et l'application de ces connaissances à la conception de

systèmes « qui puissent être utilisés avec le maximum de

confort, de sécurité et d'efficacité par le plus grand

nombre. »

Certains domaines de pointe ont permis de développer

l’ergonomie (accessibilité et réactivité)

L’ergonomiepar essence à pour

vocation d’« d’aider » et d’être « pratique »

Elle concerne les espaces physiques, les processus

de production, les interfaces professionnelles ou grand

public.

On parle aussi d’IHM

L'interface homme-machine, interaction humain-machine (IHM), intégration homme-

système (IHS) ou interface personne-machine (IPM) définit, les moyens et outils mis en

œuvre, afin qu'un humain puisse contrôler et communiquer avec une machine.

On parle aussi d’IHM

Le «WEB » n’est qu’une partie du problème…

Aujourd’hui tout est « connecté » : de l’automobile au frigidaire !LA NOTION « D’INTERFACE » EST LE CŒUR

DUDESIGN NUMERIQUE D’AUJOURD’HUI !!!

L’ergonomiepermet d’optimiser (par

exemple)

L'ergonomie est l'utilisation de connaissances scientifiques

relatives à l'homme (psychologie, physiologie,

médecine) dans le but d'améliorer son environnement

de travail.

L'ergonomie se caractérise généralement selon

deux composantes :

L'efficacité, consistant à adopter des solutions

appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur ;

Dans le cas d’ergonomie Web,on préférera parler d’Utilité

(= répondre à un besoin)

L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur.

Elle se décline en confort d'utilisation, consistant à réduire au

maximum la fatigue physique et nerveuse. sécurité, consistant à choisir des solutions

adéquates pour protéger l'utilisateur ;

Pour résumer, l’ergonomie web :

Ergonomie générale

Ergonomie des interfaces

homme-machine

Ergonomie informatique

Ergonomie web

L’ergonomie a ses stars…Par exemple, Amélie Boucher

(et son blog ergolab.net)

La vision ergo. est orientée

« utilisateur »

On part d’un utilisateur, d’objectifs et d’un contexte pour atteindre :

1 > L’efficacité2 > L’efficience3 > La satisfaction

L'efficience est la qualité d'un rendement permettant de réaliser un objectif avec l'optimisation des moyens engagés. Autrement dit c'est l'efficacité de l'efficacité.

Le design numérique s’appuie sur des méthodes de conception« spécifique »du fait du« lead »technique, et de l’approcheergonomique

De fait, deux visions/méthodes s’affrontent…Et doivent cohabiter !

Vision « développement » Vision « design »

(on s’en fout, si c’est un peu pixellisé )

Le vert anis, parce que c’est tendance !

Pour l’instant,le design numériqueet le designers doivent enrichir et compléterdes dispositifs purementinformatiques et techniques.

Un designer peut aider à créer des interfaces qui prennent en compteles 3 facteurs fondamentaux :

1 > la fonction : à quoi ça sert ? 2 > l'esthétique : est-ce que c'est beau ? 3 > l’économie : combien ça vaut ?

Certaines méthodologies sont souvent utilisées par les designers

le design émotionnelD’après Emotional Design de Donald A. Norman

Il existe trois niveaux d’appréhension de l’objet chez l’être humain :

• le niveau viscéral, • le niveau comportemental (inconscient) • le niveau intellectuel.

D’après A. Norman, la bonne équation (comme souvent) se situe à l’intersection de la prise en considération des trois !

les décisions prises par l’utilisateur sont liées instantanément à ce faisceaux d’influences qui le traversent face à un design.

L’intelligence objective évalue l’intérêt de l’objet (ou du service) pour l’individu propre mais une partie émotionnelle en qualibre parallèlement les valeurs émotionnelles (telles que la nostalgie, l’empathie, …).

la performance ergonomique d’un site web ne suffit pas à en faire un site bien « designé ».

Il faut aussi qu’il parle au « cœur » de l’usager pour produire une bonne UX

(tout en sachant que « l’usager » n’existe pas, il y a des usagers ; et donc des choix à opérer dans sa communication ; ou multiplier ses choix).

Pour en revenir au design émotionnel !A.Walter fait un parallèle avec la pyramide des besoins de Maslow

« Pour engager émotionnellement

votre public, vous devez afficher la personnalité de votre

marque »

Le design émotionnel s’appuie sur des principes ultra-

simples…

Une 2e approche :La conception centrée utilisateur

La Conception Centrée Utilisateur est un modèle de conception, au carrefour de disciplines différentes (facteurs humains, architecture de l'information, design, marketing, qualité, etc.) qui vise une expérience utilisateur optimale.

En effet de nombreux défauts d'utilisabilité n'apparaissent qu'à l'occasion de tests avec des participants semblables aux utilisateurs finaux.

Un processus général de conception centrée sur les utilisateurs (user-centred design) se caractérise par :

1 > des solutions de conception itératives 2 > l'implication active des utilisateurs

3 > des équipes de conception multidisciplinaires incluant techniciens et spécialistes des facteurs humains

4 > une allocation appropriée des fonctions

entre l'utilisateur et le système

En pratique, au cours d'un tel processus, il s'agit de :

• spécifier le contexte d'utilisation : les utilisateurs, leurs buts, leurs tâches, et leurs environnements

• spécifier les besoins d'efficacité, d'efficience et de satisfaction

• prototypage itératif• tests auprès d'utilisateurs représentatifs

Ce qui nous amèneau fameux :Design Thinking

L'expression « Design Thinking » est à entendre comme une abréviation de « Design Thinking Process ».

Cela signifie : le processus de pensée propre aux designers.

Parler de « Design Thinking », c'est parler du « Thinking like a designer ». Ce qu'on suggère par là, c'est que le design est avant tout une pratique de penseur ou une méthode de pensée.

Mais laissons les pros parler, à savoir Tim Brown de l’agence IDEO

3 accroches qui résument bien le bousin :

«  Human needs is theplace to start »

«  Learning by making »

«  Design is too important to be left to designers »

Le Design Thinking est une méthode de conception particulière :

• définition du brief • recherche• conceptualisation des solutions• création du prototype• sélection de la méthode retenue• mise en œuvre de la création débriefing

Prototyper (rapidement)

Le designer cherche à tester la faisabilitéTechnique d’un concept. Le prototype n’a pas besoin d’être fait dans les bons matériaux avec les bonnes techniques… On peutFaire du « Quick and dirty ».

Ou pour les interfaces…

« …pour être simple, le design thinking c’est la discipline qui utilise la sensibilité et les méthodes d’un designer pour satisfaire les besoins des gens avec ce qui est technologiquement faisable et dans le but de convertir une opportunité de marché en proposition de valeur économiquement viable ».

Tim Brown / Ideo

Enfin, le design graphique donne la toucheFinale au Design (avec un grand D)

Parmi une multitude decourants, 2 vagues graphiquesont marqué ces 5 dernières années

En matière de design, il décrit un élément visuel dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine, par exemple, des éléments d’interface reproduisant des objets physiques (cf: les textures de cuir, de papier, de bois…). Les exemples les plus connus sont les icônes d’IOS 6 comme pour la plateforme de jeux Game Center, le calepin Notes ou encore la Boussole2.

Le skeuomorphisme

Le flat design, à l’opposé du Skeumorphisme, prend le parti pris du minimalisme. Le flat design exclut tout effet de profondeur, d’ombre portée, de reflets. Il privilégie les grands aplats de couleurs, sans bordures, sans chichi… Les défenseurs du « design-plat » affirment que les interfaces graphiques ne doivent pas chercher à imiter « visuellement » les fonctionnalités existantes, mais se concentrer l’essentiel, trouver le plus court chemin pour transmettre une information afin de faciliter la navigation et optimiser la lisibilité. Less is more prends tout son sens avec le Flat-Design.

Le flat design

Google& Windows 8sont despionniers

>Le design par le code> Une optimisation du design pour une meilleure UX.

Le flat design poussé dans ses derniers retranchements :Le responsive design

Ajoutons une bonne dosed’HTML5 et de typographies

Sans oublier les CSSqui vont bien…Pour de beaux effets deParallaxe !

Des sites en 1 pagePour une belle navigation

Un peu de gifs animéspour que ça bouge un peu !