SlideShare une entreprise Scribd logo
1  sur  80
Télécharger pour lire hors ligne
webdesign
tendance s
20/5
Philippe Rondepierre
TendancesWebDesign2015-philipperondepierre.com
“La mode s’évapore,
la tendance s’érode...
Seul le style reste.
Contacter
Philippe Rondepierre
impRESSION
de 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 webde_
sign
// 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 design
ENCORE 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.
TendancesWebDesign2015-philipperondepierre.com
1/flat design
INTERFACES 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.
TendancesWebDesign2015-philipperondepierre.com
1/flatvs. skeuomorphisme
INITIÉ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
TendancesWebDesign2015-philipperondepierre.com
1/flat: graphique
APLATS DE PASTELS VIFS, POLICES ET ILLUSTRATIONS GRAPHIQUES / applove.se
TendancesWebDesign2015-philipperondepierre.com
1/flat: photogénique
PHOTOS ICONIQUES SUR FONDS EN APLATS : FRAIS ET GRAPHIQUE / dreamyourself.it
TendancesWebDesign2015-philipperondepierre.com
Bichromie ou couleurs, sosh.fr
burger icon menu
typo choc + photo chic
1/flat: minimal
MINIMAL 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.
TendancesWebDesign2015-philipperondepierre.com
présentation simple
optimisée e-commerce
1/flat: géométrique
CARRÉS, RONDS, TRIANGLES, RAYURES… LE DESIGN GÉOMÉTRIQUE RESTE TENDANCE / airnauts.com
TendancesWebDesign2015-philipperondepierre.com
1/flat: dynamic grid
GRILLE DYNAMIQUE ET RESPONSIVE : À CHAQUE FOIS, UNE PAGE DIFFÉRENTE / etchapps.com
TendancesWebDesign2015-philipperondepierre.com
1/flat: material
GOOGLE 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.
TendancesWebDesign2015-philipperondepierre.com
1/flat: material colors
DES 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”.
TendancesWebDesign2015-philipperondepierre.com
effet papier découpé
1/flat: menu
MENU CACHÉ, COULISSANT, EN PERSPECTIVE… INSPIRÉ PAR LE MOBILE / adidasoriginals.tumblr.com
TendancesWebDesign2015-philipperondepierre.com
Menu en perspective, tympanus.net
micro-interactions
1/flat: icônes
DES 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.
TendancesWebDesign2015-philipperondepierre.com
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ônes
SOUVENT BLANCHES OU MONOCHROMES POUR UNE MEILLEURE LISIBILITÉ / simpleicons.org
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
2/responsive
UNE MULTITUDE DE NAVIGATEURS ET RÉSOLUTIONS : LE DESIGN DEVIENT LIQUIDE, RESPONSIVE OU ADAPTATIF
* zdnet.fr - ** Alsacreations.com : « C’est quoi le Responsive Web Design ? »
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
2/responsive
SITE WEB OU APPLICATION : MOBILE FIRST / sarenza.com
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
2/responsive
3/monopage
STORYTELLING* + 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.
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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…
TendancesWebDesign2015-philipperondepierre.com
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…
TendancesWebDesign2015-philipperondepierre.com
3/monopage
micro-interactions
MONOPAGE, GRAPHIQUE, PARALLAXE, CLIP EN PLEINE PAGE… UN SITE TENDANCE / hollysiz.com
TendancesWebDesign2015-philipperondepierre.com
3/monopage
social
PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme
cadres et filets
TendancesWebDesign2015-philipperondepierre.com
4/l’image d’abord
4/l’image d’abord
PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme
TendancesWebDesign2015-philipperondepierre.com
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é…
TendancesWebDesign2015-philipperondepierre.com
4/l’image d’abord
4/l’image d’abord
DES 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é”.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
4/l’image d’abord
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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… ).
TendancesWebDesign2015-philipperondepierre.com
5/typographie
Transparent + multicolore, lemonde.fr
5/typographie
LA TYPO SE CONJUGUE AU PLURIEL : GRAPHIQUE, GRILLE, FLAT, PICTOS, PHOTOS… / sosh.fr
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
5/typographie
TendancesWebDesign2015-philipperondepierre.com
5/typographie
POLICES WEB : OMBRES, RELIEF, MULTICOLORES, TRANSPARENCE… / Player
GRANDE TYPO LIGHT, SIMPLE ET SANS SERIF : PLUS LISIBLE SUR MOBILES / Google
TendancesWebDesign2015-philipperondepierre.com
5/typographie
ruptures marquées
LA HAUTE DÉFINITION REDONNE DU CARACTÈRE À LA POLICE
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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é.
TendancesWebDesign2015-philipperondepierre.com
6/data design
TendancesWebDesign2015-philipperondepierre.com
6/data design
FLAT DESIGN + DATA, POUR UN MESSAGE CLAIR, LUDIQUE ET GRAPHIQUE / Brandz.com
TendancesWebDesign2015-philipperondepierre.com
6/data design
OUTIL 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
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
7/gamification
JEU EN LIGNE OU APPLICATION DÉDIÉE SELON LA PERTINENCE / Beer Me
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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…
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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 !
TendancesWebDesign2015-philipperondepierre.com
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 ?
TendancesWebDesign2015-philipperondepierre.com
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.
TendancesWebDesign2015-philipperondepierre.com
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 ?
TendancesWebDesign2015-philipperondepierre.com
10/tout connecté
RÉALITÉ AUGMENTÉE : LE SMARTPHONE DEVIENT PLV / iBeacon
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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 !
TendancesWebDesign2015-philipperondepierre.com
10/tout connecté
flat + data
TV CONNECTÉE : À VOUS DE JOUER ! / France Télévision
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
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
TendancesWebDesign2015-philipperondepierre.com
10/tout connecté
Samsung Gear
Nest : thermostat
Samsung : réfrigérateur
Sharp : free form display
rerecyclageLe web design sous influences
>>
recyclage/1
NÉOPLASTICISME / Mondrian
FLAT DESIGN / Windows Phone
– = +
LESS IS MORE
MINIMAL / jtcdesign.com
RÉTRO / Coca-Cola
VINTAGE / missmarysmix.com
TendancesWebDesign2015-philipperondepierre.com
recyclage/2…
TYPOGRAPHIE
TYPOGRAPHIE / handiemail.com
INTERFACE GRAPHIQUE / Xerox
DATA DESIGN / google analytics
JEUX VIDÉO 70’s / Atari : Pong
PIXEL ART / eboy.com
TendancesWebDesign2015-philipperondepierre.com
down!obsolète
>>
down!
LE SKEUOMORPHISME DATÉ
≠ FLAT DESIGN
FLASH
PRÉFÉRER HTML5 + CSS3 + JAVASCRIPT
LES INTERFACES CHARGÉES
TROP DE PAGES, BOUTONS, POLICES…
LE DESIGN LOW COST
DESIGN AGRESSIF, KITSCH OU CHEAP
LES PHOTOS CLICHÉS/CREUSES
IMAGES LIBRES DE DROIT USÉES
TROP DE TEXTE
PRÉFÉRER IMAGES, PICTOS OU DATA
TendancesWebDesign2015-philipperondepierre.com
LA LIGHTBOX
ET LES POP-UP INTRUSIFS
CRÉATIVITÉ ÉGALE À ZÉRO
0 + 0 = LA TÊTE À TOTO
LE CARROUSEL FOURRE-TOUT
SOUVENT DÉSUET ET INNEFICACE
LE SLIDER QUI TUE
TROP D’EFFETS TUE L’EFFET
IFRAME (FENÊTRE INCLUSE)
DÉCONSEILLÉ POUR LE RÉFÉRENCEMENT
LE PLASTIQUE BRILLANT
(iOS 6)
TendancesWebDesign2015-philipperondepierre.com
down!
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 liens
TendancesWebDesign2015-philipperondepierre.com
alsacréations: article
TendancesWebDesign2015-philipperondepierre.com
Lire l’article complet
clic !
TendancesWebDesign2015-philipperondepierre.com
Apple,
Branding
STORY
2015
Philippe Rondepierre
Décryptage : branding, communication,
marketing, design, influences, historique…
/merci!
Philippe Rondepierre
Directeur Artistique
360° : branding, design,
print, web, in-store…
philipperondepierre.com • LinkedIn • Viadeo • e-mail
© Philippe Rondepierre, 2014 - 2015. Reproduction et utilisation commerciale interdite - Les sites présentés en exemple le sont à titre de citation
et d’analyse. Tous droits réservés par les ayants droit - Présentation en public interdite sans autorisation écrite.
© Philippe Rondepierre, 2014 - 2015. Do not reproduce - The images are presented as examples and analysis. All rights reserved by copyright holders.

Contenu connexe

Tendances

Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Teester
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Ametys
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018Concept Image
 
Tendance design 2018
Tendance design 2018Tendance design 2018
Tendance design 2018CCI Yonne
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)i-breed et associés
 
20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli AgencyWax Interactive
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Le webdesign au coeur du produit
Le webdesign au coeur du produitLe webdesign au coeur du produit
Le webdesign au coeur du produitFabien Berthoux
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...maclic
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017NiceToMeetYou
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCBrioude Internet
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenSolange Derrey
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesMehdi Kabab
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11USERADGENTS
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entrepriseCOMPETITIC
 

Tendances (20)

Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018
 
Tendance design 2018
Tendance design 2018Tendance design 2018
Tendance design 2018
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
 
20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Le webdesign au coeur du produit
Le webdesign au coeur du produitLe webdesign au coeur du produit
Le webdesign au coeur du produit
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by Vanksen
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégies
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
 

En vedette

En vedette (9)

Material design
Material designMaterial design
Material design
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Présentation du Material Design
Présentation du Material DesignPrésentation du Material Design
Présentation du Material Design
 
Esp chap 4 materials design (finished)
Esp chap 4   materials design (finished)Esp chap 4   materials design (finished)
Esp chap 4 materials design (finished)
 
Material design
Material designMaterial design
Material design
 
Google Material design
Google Material designGoogle Material design
Google Material design
 
Material Design: Google's New Design Language
Material Design: Google's New Design LanguageMaterial Design: Google's New Design Language
Material Design: Google's New Design Language
 
Materials design
Materials designMaterials design
Materials design
 
What is ux?
What is ux?What is ux?
What is ux?
 

Similaire à Tendances Web Design 2015

Responsive design
Responsive designResponsive design
Responsive designniklofr
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012MBA Multimedia
 
Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014Nineteengroupe
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
Eurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransEurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransAgence-Eurelis
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupThiga
 
Touristic presentation aintourisme
Touristic presentation aintourismeTouristic presentation aintourisme
Touristic presentation aintourismeOtioyonnax
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Idean France
 
Introduction au Responsive Design
Introduction au Responsive Design Introduction au Responsive Design
Introduction au Responsive Design Solange Derrey
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web designDagobert
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?Smile I.T is open
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 
Benchmark tendances digital et social media 2012
Benchmark tendances digital et social media 2012Benchmark tendances digital et social media 2012
Benchmark tendances digital et social media 2012DISKO_AGENCY
 
Veille sqli agency février 2011
Veille sqli agency février 2011Veille sqli agency février 2011
Veille sqli agency février 2011Wax Interactive
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesFrederic CAVAZZA
 
Conference microsoft&sqliagency ubimedia
Conference microsoft&sqliagency ubimediaConference microsoft&sqliagency ubimedia
Conference microsoft&sqliagency ubimediaWax Interactive
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 

Similaire à Tendances Web Design 2015 (20)

Responsive design
Responsive designResponsive design
Responsive design
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Eurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransEurelis - Présentation multi-écrans
Eurelis - Présentation multi-écrans
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
 
Touristic presentation aintourisme
Touristic presentation aintourismeTouristic presentation aintourisme
Touristic presentation aintourisme
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
Introduction au Responsive Design
Introduction au Responsive Design Introduction au Responsive Design
Introduction au Responsive Design
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Benchmark tendances digital et social media 2012
Benchmark tendances digital et social media 2012Benchmark tendances digital et social media 2012
Benchmark tendances digital et social media 2012
 
Veille sqli agency février 2011
Veille sqli agency février 2011Veille sqli agency février 2011
Veille sqli agency février 2011
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobiles
 
Conference microsoft&sqliagency ubimedia
Conference microsoft&sqliagency ubimediaConference microsoft&sqliagency ubimedia
Conference microsoft&sqliagency ubimedia
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 

Tendances Web Design 2015

  • 2. TendancesWebDesign2015-philipperondepierre.com “La mode s’évapore, la tendance s’érode... Seul le style reste. Contacter Philippe Rondepierre
  • 3. impRESSION de 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.
  • 4. 10tendances webde_ sign // 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…
  • 5. 1/flat design ENCORE 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. TendancesWebDesign2015-philipperondepierre.com
  • 6. 1/flat design INTERFACES 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. TendancesWebDesign2015-philipperondepierre.com
  • 7. 1/flatvs. skeuomorphisme INITIÉ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 TendancesWebDesign2015-philipperondepierre.com
  • 8. 1/flat: graphique APLATS DE PASTELS VIFS, POLICES ET ILLUSTRATIONS GRAPHIQUES / applove.se TendancesWebDesign2015-philipperondepierre.com
  • 9. 1/flat: photogénique PHOTOS ICONIQUES SUR FONDS EN APLATS : FRAIS ET GRAPHIQUE / dreamyourself.it TendancesWebDesign2015-philipperondepierre.com Bichromie ou couleurs, sosh.fr burger icon menu typo choc + photo chic
  • 10. 1/flat: minimal MINIMAL 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. TendancesWebDesign2015-philipperondepierre.com présentation simple optimisée e-commerce
  • 11. 1/flat: géométrique CARRÉS, RONDS, TRIANGLES, RAYURES… LE DESIGN GÉOMÉTRIQUE RESTE TENDANCE / airnauts.com TendancesWebDesign2015-philipperondepierre.com
  • 12. 1/flat: dynamic grid GRILLE DYNAMIQUE ET RESPONSIVE : À CHAQUE FOIS, UNE PAGE DIFFÉRENTE / etchapps.com TendancesWebDesign2015-philipperondepierre.com
  • 13. 1/flat: material GOOGLE 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. TendancesWebDesign2015-philipperondepierre.com
  • 14. 1/flat: material colors DES 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”. TendancesWebDesign2015-philipperondepierre.com effet papier découpé
  • 15. 1/flat: menu MENU CACHÉ, COULISSANT, EN PERSPECTIVE… INSPIRÉ PAR LE MOBILE / adidasoriginals.tumblr.com TendancesWebDesign2015-philipperondepierre.com Menu en perspective, tympanus.net micro-interactions
  • 16. 1/flat: icônes DES 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. TendancesWebDesign2015-philipperondepierre.com 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
  • 17. 1/flat: icônes SOUVENT BLANCHES OU MONOCHROMES POUR UNE MEILLEURE LISIBILITÉ / simpleicons.org TendancesWebDesign2015-philipperondepierre.com
  • 18. 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 TendancesWebDesign2015-philipperondepierre.com 2 flat design en impasse ? mix avec le skeuomorphisme ? nouvelles technologies ? illustrations ?
  • 19. 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. TendancesWebDesign2015-philipperondepierre.com
  • 20. 2/responsive UNE MULTITUDE DE NAVIGATEURS ET RÉSOLUTIONS : LE DESIGN DEVIENT LIQUIDE, RESPONSIVE OU ADAPTATIF * zdnet.fr - ** Alsacreations.com : « C’est quoi le Responsive Web Design ? » TendancesWebDesign2015-philipperondepierre.com 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.
  • 21. 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. TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 22. SITE WEB OU APPLICATION : MOBILE FIRST / sarenza.com TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 23. 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. TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 24. 3/monopage STORYTELLING* + 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. TendancesWebDesign2015-philipperondepierre.com 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.
  • 25. SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / fifteenrobin.com.sg TendancesWebDesign2015-philipperondepierre.com 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é.
  • 26. SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / www.puma.com DOUBLE SCROLL TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 27. 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… TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 28. 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… TendancesWebDesign2015-philipperondepierre.com 3/monopage micro-interactions
  • 29. MONOPAGE, GRAPHIQUE, PARALLAXE, CLIP EN PLEINE PAGE… UN SITE TENDANCE / hollysiz.com TendancesWebDesign2015-philipperondepierre.com 3/monopage social
  • 30. PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme cadres et filets TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 31. 4/l’image d’abord PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme TendancesWebDesign2015-philipperondepierre.com
  • 32. 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é… TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 33. 4/l’image d’abord DES 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é”. TendancesWebDesign2015-philipperondepierre.com
  • 34. 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. TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 35. TendancesWebDesign2015-philipperondepierre.com ILLUSTRATIONS ET INFOGRAPHIES : BD VERTICALE OU SITE MONOPAGE ? / CollegeAtlas.org 4/l’image d’abord
  • 36. 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 TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 37. 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… ). TendancesWebDesign2015-philipperondepierre.com 5/typographie Transparent + multicolore, lemonde.fr
  • 38. 5/typographie LA TYPO SE CONJUGUE AU PLURIEL : GRAPHIQUE, GRILLE, FLAT, PICTOS, PHOTOS… / sosh.fr TendancesWebDesign2015-philipperondepierre.com
  • 39. 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. TendancesWebDesign2015-philipperondepierre.com 5/typographie
  • 40. TendancesWebDesign2015-philipperondepierre.com 5/typographie POLICES WEB : OMBRES, RELIEF, MULTICOLORES, TRANSPARENCE… / Player
  • 41. GRANDE TYPO LIGHT, SIMPLE ET SANS SERIF : PLUS LISIBLE SUR MOBILES / Google TendancesWebDesign2015-philipperondepierre.com 5/typographie ruptures marquées
  • 42. LA HAUTE DÉFINITION REDONNE DU CARACTÈRE À LA POLICE TendancesWebDesign2015-philipperondepierre.com 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
  • 43. L’ART DE RENDRE VISUELLES DES DONNÉES, CHIFFRÉES OU NON / healthland.time.com TendancesWebDesign2015-philipperondepierre.com 6/data design minimal + photo
  • 44. 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é. TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 45. TendancesWebDesign2015-philipperondepierre.com 6/data design FLAT DESIGN + DATA, POUR UN MESSAGE CLAIR, LUDIQUE ET GRAPHIQUE / Brandz.com
  • 46. TendancesWebDesign2015-philipperondepierre.com 6/data design OUTIL DE VULGARISATION, LE DATA DESIGN EST PLÉBISCITÉ PAR LES MÉDIAS ET LES ENTREPRISES / IBM
  • 47. STATIQUE OU DYNAMIQUE, LE DATA DESIGN EST RESPONSIVE OU S’ANIME / Metronic - Admin dashboard TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 48. 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. TendancesWebDesign2015-philipperondepierre.com 7/gamification
  • 49. JEU EN LIGNE OU APPLICATION DÉDIÉE SELON LA PERTINENCE / Beer Me TendancesWebDesign2015-philipperondepierre.com 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
  • 50. JEU VÉRITABLE OU EMPRUNTS DES CODES GRAPHIQUES LUDIQUES / Robby Leonardi TendancesWebDesign2015-philipperondepierre.com 7/gamification flat + retro gaming
  • 51. 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. TendancesWebDesign2015-philipperondepierre.com Gamification et serious game. Voir lien en fin de document. * Source : ed-tech.fr 7/gamification
  • 52. 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… TendancesWebDesign2015-philipperondepierre.com 8/vintage typo
  • 53. 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. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 54. 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. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 55. 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. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 56. 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. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 57. 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. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 58. 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. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 59. 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. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 60. 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. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 61. 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 ! TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 62. 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 ? TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 63. 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. TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 64. 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 ? TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 65. RÉALITÉ AUGMENTÉE : LE SMARTPHONE DEVIENT PLV / iBeacon TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 66. 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 TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 67. À 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 ! TendancesWebDesign2015-philipperondepierre.com 10/tout connecté flat + data
  • 68. TV CONNECTÉE : À VOUS DE JOUER ! / France Télévision TendancesWebDesign2015-philipperondepierre.com 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.
  • 69. INTERFACES HYBRIDES : MOUVEMENTS, CAMÉRA 3D, TACTILE, ÉCRITURE, VIDÉO… / Sprout TendancesWebDesign2015-philipperondepierre.com 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
  • 70. OBJETS CONNECTÉS : DES ÉCRANS DE TOUTES SORTES. L’OBJET ET L’ÉCRAN INTRINSÈQUEMENT LIÉS TendancesWebDesign2015-philipperondepierre.com 10/tout connecté Samsung Gear Nest : thermostat Samsung : réfrigérateur Sharp : free form display
  • 71. rerecyclageLe web design sous influences >>
  • 72. recyclage/1 NÉOPLASTICISME / Mondrian FLAT DESIGN / Windows Phone – = + LESS IS MORE MINIMAL / jtcdesign.com RÉTRO / Coca-Cola VINTAGE / missmarysmix.com TendancesWebDesign2015-philipperondepierre.com
  • 73. recyclage/2… TYPOGRAPHIE TYPOGRAPHIE / handiemail.com INTERFACE GRAPHIQUE / Xerox DATA DESIGN / google analytics JEUX VIDÉO 70’s / Atari : Pong PIXEL ART / eboy.com TendancesWebDesign2015-philipperondepierre.com
  • 75. down! LE SKEUOMORPHISME DATÉ ≠ FLAT DESIGN FLASH PRÉFÉRER HTML5 + CSS3 + JAVASCRIPT LES INTERFACES CHARGÉES TROP DE PAGES, BOUTONS, POLICES… LE DESIGN LOW COST DESIGN AGRESSIF, KITSCH OU CHEAP LES PHOTOS CLICHÉS/CREUSES IMAGES LIBRES DE DROIT USÉES TROP DE TEXTE PRÉFÉRER IMAGES, PICTOS OU DATA TendancesWebDesign2015-philipperondepierre.com
  • 76. LA LIGHTBOX ET LES POP-UP INTRUSIFS CRÉATIVITÉ ÉGALE À ZÉRO 0 + 0 = LA TÊTE À TOTO LE CARROUSEL FOURRE-TOUT SOUVENT DÉSUET ET INNEFICACE LE SLIDER QUI TUE TROP D’EFFETS TUE L’EFFET IFRAME (FENÊTRE INCLUSE) DÉCONSEILLÉ POUR LE RÉFÉRENCEMENT LE PLASTIQUE BRILLANT (iOS 6) TendancesWebDesign2015-philipperondepierre.com down!
  • 77. 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 liens TendancesWebDesign2015-philipperondepierre.com
  • 79. clic ! TendancesWebDesign2015-philipperondepierre.com Apple, Branding STORY 2015 Philippe Rondepierre Décryptage : branding, communication, marketing, design, influences, historique…
  • 80. /merci! Philippe Rondepierre Directeur Artistique 360° : branding, design, print, web, in-store… philipperondepierre.com • LinkedIn • Viadeo • e-mail © Philippe Rondepierre, 2014 - 2015. Reproduction et utilisation commerciale interdite - Les sites présentés en exemple le sont à titre de citation et d’analyse. Tous droits réservés par les ayants droit - Présentation en public interdite sans autorisation écrite. © Philippe Rondepierre, 2014 - 2015. Do not reproduce - The images are presented as examples and analysis. All rights reserved by copyright holders.