![Page 1: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/1.jpg)
WDT15 web design tendances 2015PHILIPPE RONDEPIERRE
>>
![Page 2: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/2.jpg)
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.
>>
![Page 3: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/3.jpg)
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.
![Page 4: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/4.jpg)
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…
>>
![Page 5: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/5.jpg)
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
![Page 6: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/6.jpg)
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
![Page 7: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/7.jpg)
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
![Page 8: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/8.jpg)
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
![Page 9: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/9.jpg)
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
![Page 10: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/10.jpg)
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
![Page 11: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/11.jpg)
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
![Page 12: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/12.jpg)
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
![Page 13: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/13.jpg)
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
![Page 14: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/14.jpg)
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é
![Page 15: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/15.jpg)
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
![Page 16: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/16.jpg)
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
![Page 17: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/17.jpg)
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
![Page 18: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/18.jpg)
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 ?
![Page 19: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/19.jpg)
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
![Page 20: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/20.jpg)
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.
![Page 21: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/21.jpg)
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
![Page 22: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/22.jpg)
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
![Page 23: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/23.jpg)
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
![Page 24: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/24.jpg)
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.
![Page 25: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/25.jpg)
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é.
![Page 26: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/26.jpg)
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
![Page 27: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/27.jpg)
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 28: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/28.jpg)
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
![Page 29: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/29.jpg)
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
![Page 30: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/30.jpg)
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
![Page 31: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/31.jpg)
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
![Page 32: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/32.jpg)
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
![Page 33: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/33.jpg)
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
![Page 34: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/34.jpg)
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
![Page 35: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/35.jpg)
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
![Page 36: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/36.jpg)
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
![Page 37: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/37.jpg)
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
![Page 38: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/38.jpg)
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
![Page 39: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/39.jpg)
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
![Page 40: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/40.jpg)
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
![Page 41: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/41.jpg)
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
![Page 42: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/42.jpg)
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
![Page 43: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/43.jpg)
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
![Page 44: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/44.jpg)
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
![Page 45: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/45.jpg)
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
![Page 46: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/46.jpg)
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
![Page 47: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/47.jpg)
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
![Page 48: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/48.jpg)
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
![Page 49: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/49.jpg)
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
![Page 50: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/50.jpg)
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
![Page 51: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/51.jpg)
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
![Page 52: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/52.jpg)
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
![Page 53: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/53.jpg)
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
![Page 54: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/54.jpg)
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
![Page 55: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/55.jpg)
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
![Page 56: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/56.jpg)
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
![Page 57: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/57.jpg)
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
![Page 58: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/58.jpg)
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
![Page 59: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/59.jpg)
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
![Page 60: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/60.jpg)
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
![Page 61: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/61.jpg)
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
![Page 62: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/62.jpg)
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
![Page 63: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/63.jpg)
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é
![Page 64: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/64.jpg)
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é
![Page 65: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/65.jpg)
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é
![Page 66: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/66.jpg)
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é
![Page 67: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/67.jpg)
À 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
![Page 68: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/68.jpg)
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.
![Page 69: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/69.jpg)
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
![Page 70: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/70.jpg)
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
![Page 71: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/71.jpg)
RErecyclage LE WEB DESIGN SOUS INFLUENCES
>>
![Page 72: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/72.jpg)
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
![Page 73: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/73.jpg)
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
![Page 74: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/74.jpg)
DOWN!obsolète
>>
![Page 75: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/75.jpg)
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
![Page 76: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/76.jpg)
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
![Page 77: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/77.jpg)
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
![Page 78: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/78.jpg)
alsacréations: articleTe
ndan
ces
Web
Des
ign
2015
- ph
ilipp
eron
depi
erre
.com
Lire l’article complet
![Page 79: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/79.jpg)
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…
![Page 80: WDT15 - Obsedoobsedo.com/portfolio/webDesignTendances2015.pdf · Le flat design optimisé pour le mobile. Tendances Web Design 2015 - philipperondepierre.com. 1/flat:material colors](https://reader031.vdocuments.us/reader031/viewer/2022011822/5ec64ac5f82c594ed22e6c2c/html5/thumbnails/80.jpg)
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 !