WDT15 web design tendances 2015PHILIPPE RONDEPIERRE

>>

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

La mode s’évapore,la tendance s’érode...Seul le style reste.

>>

IMPRESSIONde Gutenberg à David Carson“THE END OF PRINT?”David Carson est un graphiste américain des années 1990. Il fut l’un des premiers à jouer avec la typographie numérique afin de l’intégrer à l’image. Il publie en 1995 “The End of Print” qui marque une rupture et augure la fin de l’impression, juste avant qu’internet devienne un média grand public.Et si au lieu d’enterrer le print, le web le rejoignait ? Hautes résolutions, retour de la typo, cloud, liseuses bientôt en couleur… Tout est prêt ou presque.

10tendances webdesign// FLAT DESIGN // GRAPHIQUE // PHOTOGÉNIQUE // MINIMAL // GÉOMÉTRIQUE // GRILLE // DYNAMIQUE // MATERIAL // COULEUR // FLUIDE // RESPONSIVE // ADAPTATIF // MOBILE FIRST // MONOPAGE // SCROLL // ANIMÉ // PARALLAXE // STORYTELLING // L’IMAGE D’ABORD // PHOTO // VIDÉO // ILLUSTRATION // TYPOGRAPHIE // DATA DESIGN // GAMIFICATION // SERIOUS GAME // VINTAGE // EMPATHIE // AUTHENTIQUE // SOCIAL DESIGN // TOUT CONNECTÉ // 3D // RÉALITÉ AUGMENTÉE // DOMOTIQUE // INTERFACE HYBRIDE // OBJETS CONNECTÉS…

>>

1/flat designENCORE PLUS PLAT ET MINIMAL, LE FLAT DESIGN RESTE TENDANCE EN 2015 / Apple iOS 8

Blanc et gris mettent en relief des couleurs franches. Un design simple et moderne pour un résultat efficace, optimisé web et apps.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat designINTERFACES ORDINATEURS : LE SMARTPHONE EN GRAND / Apple OS X Yosemite

fond flou

transparence

notifications + widgets

icônes aplatis et fluos

maquette aplat + flou

police iOSLe style plat et simplifié sur mobile influencera plus que jamais celui sur grands écrans. Tout comme OS X Yosemite customisé à la sauce iOS 8.

Idem pour Windows 10 (mi 2015) dont l’interface plate en tuiles est optimisée pour les écrans tactiles.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat vs. skeuomorphismeINITIÉE PAR MICROSOFT EN 2010, L’INTERFACE FLAT DESIGN A “RINGARDISÉ” LE PHOTORÉALISME D’iOS

SKEUOMORPHISME(iOS 6)

Imiter la réalité

Représentation réaliste d’un élément d’interface graphique par l’objet réel qui réalisait la fonction.

Exemple :pour l’heure on dessine

une véritable horloge photoréaliste.

FLAT DESIGN(Windows Phone)

Less is more

Représentation plate et graphique sans effet de profondeur (ombre, 3D, dégradé… ). Un style plus web, plus léger, conceptuel et épuré. Simple à décliner.

Plus efficace ?

≠

RAPPEL

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: graphiqueAPLATS DE PASTELS VIFS, POLICES ET ILLUSTRATIONS GRAPHIQUES / applove.se

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: photogéniquePHOTOS ICONIQUES SUR FONDS EN APLATS : FRAIS ET GRAPHIQUE / dreamyourself.it

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Bichromie ou couleurs, sosh.fr

burger icon menu

typo choc + photo chic

1/flat: minimalMINIMAL DESIGN : UNE TENDANCE QUI VA SE RENOUVELER, MAIS DURER / alainberteau.tumblr.com

Prisé des graphistes, designers et sites tendances, le style minimal est une lame de fond qui a changé la percep-tion du web design. Ici sur tumblr.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

présentation simple optimisée e-commerce

1/flat: géométriqueCARRÉS, RONDS, TRIANGLES, RAYURES… LE DESIGN GÉOMÉTRIQUE RESTE TENDANCE / airnauts.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: dynamic gridGRILLE DYNAMIQUE ET RESPONSIVE : À CHAQUE FOIS, UNE PAGE DIFFÉRENTE / etchapps.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: materialGOOGLE A PRÉSENTÉ “MATERIAL DESIGN” POUR MOBILES ET DESKTOP / Google

Aplats, ombres, dégradés, reliefs, effets 3D, grandes typos, couleurs acidulées, animations responsives…Le flat design optimisé pour le mobile.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: material colorsDES COULEURS FRAÎCHES, VIVES ET SATURÉES / Google

Les pastels vifs sont progressivement remplacés par des couleurs flash. Attention à la surdose ! Blanc et gris pour éviter la “saturation”.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

effet papier découpé

1/flat: menuMENU CACHÉ, COULISSANT, EN PERSPECTIVE… INSPIRÉ PAR LE MOBILE / adidasoriginals.tumblr.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Menu en perspective, tympanus.net

micro-interactions

1/flat: icônesDES ICÔNES SIMPLES OPTIMISÉS UI ET UX* / maud.com.au

* Interface utilisateur (UI) et expérience utilisateur (UX). Voir lien en fin de document.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Plus efficaces et universelles que le texte, les icônes se gèrent comme les polices vectorielles. Ici avec Font Awesome.

outline

Flat design + couleurs, huaban.com

1/flat: icônesSOUVENT BLANCHES OU MONOCHROMES POUR UNE MEILLEURE LISIBILITÉ / simpleicons.org

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

1/flat: et après?CONCEPTS ET VARIANTES : UN AIR DE DÉJÀ VU ? / Alexey Masalov - Amazon Fire Phone - Thair Joudi - John Menard

1 3

4

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

2

flat design en impasse ?

mix avec le skeuomorphisme ?

nouvelles technologies ?

illustrations ?

1/flat: et après?FLAT DESIGN ET SKEUOMORPHISME : VERS UN MARIAGE DE RAISON ? / skew

Le skeuomosphisme a t-il-dit son dernier mot ? Pas certain. À l’image d’iOS 8 qui emprunte encore aux deux styles.

Des étudiants ont poussé le skeuomor-phisme à son paroxysme (icônes réelles et animées… ), avec une touche “flat”. C’est une vue d’artiste, mais le champ créatif n’a pas fini de nous surprendre…

L’idée d’un design en partie customisable est aussi envisageable à moyen terme.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

2/responsiveUNE MULTITUDE DE NAVIGATEURS ET RÉSOLUTIONS : LE DESIGN DEVIENT LIQUIDE, RESPONSIVE OU ADAPTATIF

* zdnet.fr - ** Alsacreations.com : « C’est quoi le Responsive Web Design ? »

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

MOBILE FIRST : consiste à concevoir un site en priorité pour la version mobile, puis de le décliner pour les écrans plus grands.

LIQUIDE (ou fluide) : le site s’adapte à la fenêtre.ADAPTATIF : les unités de largeur sont fixes, mais diffé-rentes selon la taille de l’écran, avec des points de rupture.RESPONSIVE : liquide + refonte des styles, réorganisation de la page qui s’adapte à l’écran. (CSS3 Media Queries).**

Depuis 2013 il se vend plus de tablettes que de PC qui résistent cependant. 7,5 millions devraient s’écouler en 2014*. Les TabletPC devraient aussi progresser.

INTERFACE ET EXPÉRIENCE UTILISATEUR* OPTIMISÉES POUR TOUS LES FORMATS / skinnyties.com

* Interface utilisateur (UI) et expérience utilisateur (UX) . Voir lien en fin de document.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

2/responsive

SITE WEB OU APPLICATION : MOBILE FIRST / sarenza.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

2/responsive

HTML5, CSS3, JAVASCRIPT…Gridset Mise en page web évoluée. https://gridsetapp.com

FitText Tailles des polices ajustées. http://fittextjs.com

Images Des images optimisées et ajustées. http://adaptive-images.com

FlevNav Des menus optimisés pour le mobile. http://jasonweaver.name/lab/flexiblenavigation

Diaporamas Des diaporamas optimisés et ajustés. http://responsiveslides.com

Tableaux Des tableaux ajustés. http://zurb.com/playground/responsive-tables

Bootstrap Framework front-end* responsive. http://getbootstrap.com

Foundation Framework front-end* responsive. http://foundation.zurb.com

Wirefy Une conception intuitive. http://getwirefy.com

jQuery Bibliothèque JavaScript libre. http://jquery.com …

LIQUIDE, RESPONSIVE OU ADAPTATIF : DE NOMBREUX OUTILS

* Le terme back-end fait référence à des outils d’administration et front-end désigne la partie visible aux utilisateurs ou aux visiteurs.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

2/responsive

3/monopageSTORYTELLING* + NAVIGATION AU SCROLL SIMPLIFIÉE, HÉRITÉE DU TACTILE / everylastdrop.co.uk

SITES ANIMÉS ET STORYTELLING* : ici, en scrollant on vit la journée du personnage qui nous raconte une histoire pleine de sens.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Si les sites multipages répondent à un besoin réel (boutiques, presse… ), les sites monopages sont adpatés au tactile et simplifient la navigation.

* Communication narrative par l’intermédiaire d’une histoire pour capter l’attention de l’internaute et créer une connexion émotionnelle.

SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / fifteenrobin.com.sg

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

3/monopage

Des transitions subtiles d’un visuel à l’autre qui permettent de développer un univers autour d’un thème ou d’un produit, tout en fluidité.

SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / www.puma.com

DOUBLE SCROLL

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

3/monopage

LA PARALLAXE CRÉATIVE / cyclemon.com

PARALLAXE : déplacement variable de la position des éléments en fonction du scroll. En résulte un effet de mou-vement/profondeur plus immersif.La parallaxe est remixée : animations, mouvements asynchrones, vidéo, zoom, superpositions…

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

3/monopage

PAGE WEB OU APPLICATION ? / Apple Mac Pro

Technologies et effets se conjuguent pour donner à la page des airs de véritable application : animations 3D fluides, micro-interactions, vidéo…

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

3/monopage

micro-interactions

MONOPAGE, GRAPHIQUE, PARALLAXE, CLIP EN PLEINE PAGE… UN SITE TENDANCE / hollysiz.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

3/monopage

social

PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme

cadres et filets

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

4/l’image d’abord

4/l’image d’abordPHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

SILENCE, ON TOURNE ! LA VIDÉO EN PLEINE PAGE / dior.com

FIBRE OPTIQUE, 4G… : la vitesse de connexion plus rapide va développer les usages et les possibilités du web; haute définition, 3D, interactivité…

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

4/l’image d’abord

4/l’image d’abordDES PHOTOS AUTHENTIQUES ET DES ILLUSTRATIONS “ICONIQUES” / Google

Les images, photos et illustrations se conjuguent. Elles racontent une histoire, sans filtre et avec simplicité.La métaphore plutôt que le “cliché”.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

PHOTOS, TYPOS, ILLUSTRATIONS SONT MIXÉES. SURRÉALISTE ET CRÉATIF ! / edbangerrecords.com

Si l’illustration explore tous les domaines de la création, la mise en page est souvent simple et élégante, voir minimale.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

4/l’image d’abord

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

ILLUSTRATIONS ET INFOGRAPHIES : BD VERTICALE OU SITE MONOPAGE ? / CollegeAtlas.org

4/l’image d’abord

FLAT / timotheecottier.fr

TYPO / mikeyburton.com

BLOG / Pénélope Bagieu

VINTAGE / obsedo.com

PHOTO / julesjulien.com

L’ILLUSTRATION, C’EST FUN, ROCK , PIXEL ART, COMICS, DATA, GÉOMÉTRIQUE, GIF, 3D… ET C’EST…

GLITCH ART / 20three.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

4/l’image d’abord

LA TYPOGRAPHIE TOUJOURS PLUS PRÉSENTE / amazeelabs.com

Grande typographie travaillée à la main. Apporte de la fraîcheur dans un contexte web parfois normatif et aseptisé (flat design… ).

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

5/typographie

Transparent + multicolore, lemonde.fr

5/typographieLA TYPO SE CONJUGUE AU PLURIEL : GRAPHIQUE, GRILLE, FLAT, PICTOS, PHOTOS… / sosh.fr

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

LES POLICES DIRECTEMENT CHARGÉES PAR LE NAVIGATEUR / www.mixd.co.uk

Des outils comme Google Fonts permettent de sortir de l’Arial et de la Times… Compatibles avec tous les navigateurs modernes.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

5/typographie

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

5/typographiePOLICES WEB : OMBRES, RELIEF, MULTICOLORES, TRANSPARENCE… / Player

GRANDE TYPO LIGHT, SIMPLE ET SANS SERIF : PLUS LISIBLE SUR MOBILES / Google

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

5/typographie

ruptures marquées

LA HAUTE DÉFINITION REDONNE DU CARACTÈRE À LA POLICE

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

5/typographie

RETOUR VERS LE FUTUR !La police de caractères a dû s’adapter aux basses résolutions des moniteurs inférieures à celle du papier (300 ppp). Des polices comme Lucida Grande ou Georgia avaient été créées pour leur lisibilité sur ces écrans.

Les écrans haute définition de nos smartphones et tablettes ont comblé cette lacune avec une finesse parfois supérieure au papier. Les moniteurs haute définition vont se démocratiser.

Les typographes vont pouvoir donner libre cours à leur créativité et les clas-siques d’avant internet vont s’afficher superbement sur tous les écrans. Comme Apple qui remplace Lucida Grande par Helvetica Neue dans son dernier OS X Yosemite.

eee e eee e

RRR R RRR R

Lucida Grande Helvetica Neue

Georgia BodoniTS

POLICES ÉCRAN POLICES CLASSIQUES

L’ART DE RENDRE VISUELLES DES DONNÉES, CHIFFRÉES OU NON / healthland.time.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

6/data design

minimal + photo

MOBILE + DATA DESIGN = LE DUO GAGANT / Apple, Health

Lisible en une seconde sur mobile, le data design est adapté aux petits écrans. Avec Health, il deviendra votre compagnon de santé.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

6/data design

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

6/data designFLAT DESIGN + DATA, POUR UN MESSAGE CLAIR, LUDIQUE ET GRAPHIQUE / Brandz.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

6/data designOUTIL DE VULGARISATION, LE DATA DESIGN EST PLÉBISCITÉ PAR LES MÉDIAS ET LES ENTREPRISES / IBM

STATIQUE OU DYNAMIQUE, LE DATA DESIGN EST RESPONSIVE OU S’ANIME / Metronic - Admin dashboard

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

6/data design

SERIOUS GAMES : UTILISER LE JEU AFIN DE COMMUNIQUER UNE INFORMATION SÉRIEUSE / Apec

Un jeu sérieux ayant une intention de type pédagogique, informative, communicationnelle, marketing, idéologique ou d’entraînement.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

7/gamification

JEU EN LIGNE OU APPLICATION DÉDIÉE SELON LA PERTINENCE / Beer Me

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Pour mieux cibler son public, le serious game emprunte les codes graphiques du web, du jeu vidéo… Le jeu, plus efficace qu’un long discours.

7/gamification

JEU VÉRITABLE OU EMPRUNTS DES CODES GRAPHIQUES LUDIQUES / Robby Leonardi

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

7/gamification

flat + retro gaming

LE SERIOUS GAMES TRÈS TENDANCE :L’IDATE (Institut de l’Audiovisuel et des Télécommunications en Europe), a publié une étude selon laquelle le marché du Serious Game, qui représentait 1,5 milliard d’euros en 2013, pourrait peser 10 milliards d’euros en 2015 !*

NEWSGAME Jeu qui véhicule un message informatif.

ADVERGAME Jeu communiquant un message publicitaire, marketing, social, politique, religieux…

EDUGAME Jeu ayant des fins éducatives, préventives ou utilisé en entreprise.

SOCIALGAME Jeux sociaux liés aux réseaux sociaux (Facebook, Google +… ).

EXERGAME Jeu d’entraînement physique ou intellectuel.

EDUMARKETGAME Jeu qui passe un message marketing, sous une forme éducative, informative ou d’entraînement.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

Gamification et serious game. Voir lien en fin de document. * Source : ed-tech.fr

7/gamification

RIEN DE TEL QUE LES RÉFÉRENCES AU PASSÉ POUR PARAÎTRE PLUS AUTHENTIQUE / missmarysmix.com

À contre courant du flat design, le vintage revisite les codes du passé, mais il reste moderne : monopage, aplats, parallaxe, minimal, social…

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

8/vintage

typo

LE VINTAGE EMPATHIQUE ET RÉALISTE, VOIR SURRÉALISTE / pocopeople.com

Empathie, bienveillance… Le retour de l’humain symbolisé par un vintage qui s’ancre dans le présent de façon subtile, surprenante ou créative.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

8/vintage

FUN ET CRÉATIF, PAS DE PLACE À LA NOSTALGIE. LE VINTAGE EST HYPE ! / pacemaker.net

Disco is back! Les couleurs acidulées, les codes des 70’s, 80’s, 90’s… sont réinterprétés sur un ton fun, décalé et ludique.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

8/vintage

LA TYPOGRAPHIE VINTAGE PERMET D’AFFIRMER SA SINGULARITÉ / ridebarstow.com

La typographie vintage donne une image authentique tout en étant à la pointe des tendances web. Ici le fond vidéo s’anime en pleine page.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

8/vintage

LE WEB N’ÉCHAPPE PAS À LA MODE DU RETRO GAMING / pica-pic.com

Quelques sites de jeux développés en Flash résistent encore. Pour combien de temps ? Le passage au HTML5 n’est pas toujours simple.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

8/vintage

SNAPCHAT, DEVIANT ART, LULU, SKYPE, TUMBLR, PINTEREST, BADOO, LINE… LE DESIGN TRÈS SOCIAL

Tumblr site de microblog essentielle-ment basé sur le visuel a insufflé son style minimaliste et efficace à toute la blogosphère.

Les réseaux sociaux recyclent les modes. Ils peuvent aussi les lancer. Le web design 2015 ne se fera pas sans les réseaux.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

VINE, DRIBBBLE, MYSPACE, SKYPE, VIADEO, BEBO, INSTAGRAM, FACEBOOK… LE DESIGN TRÈS SOCIAL

Instagram à chambardé la photo avec son style très reconnaissable.Tout le web est impacté, du simple blog jusqu’aux fonctions d’iOS 8.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

SLIDESHARE, PINTEREST, LINKEDIN, INSTAGRAM, GOOGLE +, DRIBBBLE, WIX… LE DESIGN TRÈS SOCIAL

Wix propose de véritables templates web modernes, accesssibles à tous. Le web design bancal bricolé par papa n’est plus de mise.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

WHATSAPP, LINKEDIN, DRIBBBLE, YAMMER, TANGO, SCOOP.IT, FACEBOOK… LE DESIGN TRÈS SOCIAL

Personal branding : scoop.it, plate-forme de veille et curation de contenu permet de valoriser sa marque personnelle auprès de ses réseaux.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

FLICKR, BEHANCE, MYSPACE, WECHAT, FACEBOOK, BEBO, SNAPCHAT, VINE… LE DESIGN TRÈS SOCIAL

Narcissisme social et fugacité. Snapchat diffuse photos et vidéos durant 10 secondes sur mobile, avant suppression. Succès chez les jeunes !

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

DRIBBBLE, VINE, PINTEREST, DEVIANT ART, SNAPCHAT, BEHANCE, TWITTER… LE DESIGN TRÈS SOCIAL

Twitter à racheté Vine en 2012, qui sur mobile, héberge de courtes vidéos qui tournent en boucle. Quel réseau social va marquer 2015 ?

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

9/social design

RÉALITÉ AUGMENTÉE : LE VIRTUEL POUR DE VRAI, DU BOUT DES DOIGTS / IKEA

En scannant une page du catalogue, on peut voir des meubles en 3D prendre forme au sein d’une pièce. Un design sobre, plat et intuitif.

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

RÉALITÉ AUGMENTÉE : LE WEB PLUS PUISSANT QUE LE RÉEL / wahouu.com

La réalité augmentée va encore pro-gresser, de nombreux usages et des applications immersives. Un avant goût des Google Glass ?

Transports, immobilier, agencement, simulation, shopping, marketing… La réalité augmentée sera partout. Un design qui reste à inventer ?

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

RÉALITÉ AUGMENTÉE : LE SMARTPHONE DEVIENT PLV / iBeacon

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

Proximity, technologie de localisation en intérieur, destinée à équiper les lieux publics et proposer des informa-tions contextuelles précises.

RÉALITÉ AUGMENTÉE : À L’INSTAR D’APPLE AVEC IBEACON, SAMSUNG PRÉSENTE PROXIMITY

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

À la WWDC 2014 Apple a présenté Home Kit. La domotique va révolu-tionner notre quotidien, à la maison comme au bureau.

Home Kit anticipe les futurs produits Apple. L’Apple Watch récemment présentée et disponible en 2015 en tirera-t-elle parti ? Elle fera la part belle au data design et au flat design, dont la simplicité est optimale sur les très petits écrans.

Apple Watch

DOMOTIQUE ET OBJETS CONNECTÉS : BIENTÔT VOTRE SMARTPHONE PILOTERA TOUT OU PRESQUE !

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

flat + data

TV CONNECTÉE : À VOUS DE JOUER ! / France Télévision

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

Cinéma, internet, réseaux sociaux, multimédia, jeux, sport, formation… La TV connectée a redéfini l’usage de la télévision et va croître en 2015.

INTERFACES HYBRIDES : MOUVEMENTS, CAMÉRA 3D, TACTILE, ÉCRITURE, VIDÉO… / Sprout

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

Laissez de côté clavier et souris. Avec Sprout, HP réinvente la façon de communiquer, concevoir, créer… plus immersive et concrète.

Le tactile deviendra haptique. Senseg

OBJETS CONNECTÉS : DES ÉCRANS DE TOUTES SORTES. L’OBJET ET L’ÉCRAN INTRINSÈQUEMENT LIÉS

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

10/tout connecté

Samsung Gear

Nest : thermostat

Samsung : réfrigérateur

Sharp : free form display

RErecyclage LE WEB DESIGN SOUS INFLUENCES

>>

recyclage/1NÉOPLASTICISME / Mondrian

FLAT DESIGN / Windows Phone

– = +

LESS IS MORE

MINIMAL / jtcdesign.com

RÉTRO / Coca-Cola

VINTAGE / missmarysmix.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

recyclage/2…TYPOGRAPHIE

TYPOGRAPHIE / handiemail.com

INTERFACE GRAPHIQUE / Xerox

DATA DESIGN / google analytics

JEUX VIDÉO 70’s / Atari : Pong

PIXEL ART / eboy.com

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

DOWN!obsolète

>>

obsolète!!LE SKEUOMORPHISME DATÉ

≠ FLAT DESIGNFLASH

PRÉFÉRER HTML5 + CSS3 + JAVASCRIPT

LES INTERFACES CHARGÉESTROP DE PAGES, BOUTONS, POLICES…

LE DESIGN LOW COSTDESIGN AGRESSIF, KITSCH OU CHEAP

LES PHOTOS CLICHÉS/CREUSESIMAGES LIBRES DE DROIT USÉES

TROP DE TEXTEPRÉFÉRER IMAGES, PICTOS OU DATA

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

LA LIGHTBOXET LES POP-UP INTRUSIFS

CRÉATIVITÉ ÉGALE À ZÉRO0 + 0 = LA TÊTE À TOTO

LE CARROUSEL FOURRE-TOUTSOUVENT DÉSUET ET INNEFICACE

LE SLIDER QUI TUETROP D’EFFETS TUE L’EFFET

IFRAME (FENÊTRE INCLUSE)DÉCONSEILLÉ POUR LE RÉFÉRENCEMENT

LE PLASTIQUE BRILLANT (iOS 6)

Tend

ance

s W

eb D

esig

n 20

15 -

phili

pper

onde

pier

re.c

om

obsolète

DATA DESIGN http://www.strategies.fr/etudes-tendances/tendances/188580W/le-data-design-nouvelle-science-de-l-information.html

DESIGN LIQUIDE, RESPONSIVE OU ADAPTATIF http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

GAMIFICATION ET SERIOUS GAME http://blog.seriousgame.be

GEOMETRIC DESIGN http://blog.templatemonster.com/2014/01/29/geometric-web-design-2014-most-used-shapes

INTERFACE UTILISATEUR (UI) ET EXPÉRIENCE UTILISATEUR (UX) http://blog.lunaweb.fr/ux-ui-experience-utilisateur-interface

MINIMAL DESIGN http://www.minimalsites.com

MOBILE FIRST http://corp.beapp.fr/mobile-first

PARALLAXE http://magnetstuto.com/2014/05/670/

THEMEFOREST : DES MILLIERS DE THÈMES ET TEMPLATES http://themeforest.net

UI : UNE BONNE INTERFACE UTILISATEUR (anglais) http://www.goodui.org

quelques liensTe

ndan

ces

Web

Des

ign

2015

- ph

ilipp

eron

depi

erre

.com

alsacréations: articleTe

ndan

ces

Web

Des

ign

2015

- ph

ilipp

eron

depi

erre

.com

Lire l’article complet

clic !Te

ndan

ces

Web

Des

ign

2015

- ph

ilipp

eron

depi

erre

.com

Apple, BrAnding STOrY 2015

philippe rOndepierre Décryptage : branding, communication, marketing, design, influences, historique…

merci !PHILIPPE RONDEPIERREGraphiste et Directeur Artistique

Contact : philipperondepierre.com

Utilisation non commerciale uniquement. Sauf éducation, présentation en public interdite sans autorisation écrite.Version juin 2014, m-à-j novembre 2014. Les images présentées en exemple le sont à titre de citation et d’analyse. © Tous droits réservés par les ayants droits.

Non-commercial. June 2014, updated in November 2014. The images are presented as examples and analysis. © All rights reserved by copyright holders.

<<<

Un projet, un séminaire,une présentation…Contactez-moi !