(flat design… ).

Transcription

(flat design… ).
WDT15
web design
tendances 2015
PHILIPPE
RONDEPIERRE
>>
Tendances Web Design 2015 - philipperondepierre.com
La mode s’évapore,
la tendance s’érode...
Seul le style reste.
>>
IMPRESSI
O
N
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.
10
tendances
web
design
>>
// 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
Tendances Web Design 2015 - philipperondepierre.com
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.
1/flat design
INTERFACES ORDINATEURS : LE SMARTPHONE EN GRAND / Apple OS X Yosemite
Le style plat et simplifié sur mobile
influencera plus que jamais celui sur
grands écrans. Tout comme OS X
Yosemite customisé à la sauce iOS 8.
transparence
police iOS
Tendances Web Design 2015 - philipperondepierre.com
Idem pour Windows 10 (mi 2015) dont
l’interface plate en tuiles est optimisée
pour les écrans tactiles.
notifications + widgets
maquette
fond flou
icônes aplatis et fluos
aplat + flou
1/flat vs. skeuomorphisme
INITIÉE PAR MICROSOFT EN 2010, L’INTERFACE FLAT DESIGN A “RINGARDISÉ” LE PHOTORÉALISME D’iOS
RAPPEL
SKEUOMORPHISME
(iOS 6)
Tendances Web Design 2015 - philipperondepierre.com
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 ?
1/flat: graphique
Tendances Web Design 2015 - philipperondepierre.com
APLATS DE PASTELS VIFS, POLICES ET ILLUSTRATIONS GRAPHIQUES / applove.se
1/flat: photogénique
PHOTOS ICONIQUES SUR FONDS EN APLATS : FRAIS ET GRAPHIQUE / dreamyourself.it
Tendances Web Design 2015 - philipperondepierre.com
burger icon menu
typo choc + photo chic
Bichromie ou couleurs, sosh.fr
1/flat: minimal
MINIMAL DESIGN : UNE TENDANCE QUI VA SE RENOUVELER, MAIS DURER / alainberteau.tumblr.com
Tendances Web Design 2015 - philipperondepierre.com
présentation simple
optimisée e-commerce
Prisé des graphistes, designers et sites
tendances, le style minimal est une
lame de fond qui a changé la perception du web design. Ici sur tumblr.
1/flat: géométrique
Tendances Web Design 2015 - philipperondepierre.com
CARRÉS, RONDS, TRIANGLES, RAYURES… LE DESIGN GÉOMÉTRIQUE RESTE TENDANCE / airnauts.com
1/flat: dynamic grid
Tendances Web Design 2015 - philipperondepierre.com
GRILLE DYNAMIQUE ET RESPONSIVE : À CHAQUE FOIS, UNE PAGE DIFFÉRENTE / etchapps.com
1/flat: material
GOOGLE A PRÉSENTÉ “MATERIAL DESIGN” POUR MOBILES ET DESKTOP / Google
Tendances Web Design 2015 - philipperondepierre.com
Aplats, ombres, dégradés, reliefs,
effets 3D, grandes typos, couleurs
acidulées, animations responsives…
Le flat design optimisé pour le mobile.
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”.
Tendances Web Design 2015 - philipperondepierre.com
effet papier découpé
1/flat: menu
Tendances Web Design 2015 - philipperondepierre.com
MENU CACHÉ, COULISSANT, EN PERSPECTIVE… INSPIRÉ PAR LE MOBILE / adidasoriginals.tumblr.com
micro-interactions
Menu en perspective, tympanus.net
1/flat: icônes
DES ICÔNES SIMPLES OPTIMISÉS UI ET UX* / maud.com.au
Tendances Web Design 2015 - philipperondepierre.com
outline
Flat design + couleurs, huaban.com
Plus efficaces et universelles que le
texte, les icônes se gèrent comme les
polices vectorielles.
Ici avec Font Awesome.
* Interface utilisateur (UI) et expérience utilisateur (UX). Voir lien en fin de document.
1/flat: icônes
Tendances Web Design 2015 - philipperondepierre.com
SOUVENT BLANCHES OU MONOCHROMES POUR UNE MEILLEURE LISIBILITÉ / simpleicons.org
1/flat: et après?
CONCEPTS ET VARIANTES : UN AIR DE DÉJÀ VU ? / Alexey Masalov - Amazon Fire Phone - Thair Joudi - John Menard
1
2
3
nouvelles technologies ?
flat design en impasse ?
Tendances Web Design 2015 - philipperondepierre.com
4
mix avec le skeuomorphisme ?
illustrations ?
1/flat: et après?
Tendances Web Design 2015 - philipperondepierre.com
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 skeuomorphisme à 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.
2/responsive
UNE MULTITUDE DE NAVIGATEURS ET RÉSOLUTIONS : LE DESIGN DEVIENT LIQUIDE, RESPONSIVE OU ADAPTATIF
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).**
Tendances Web Design 2015 - philipperondepierre.com
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.
MOBILE FIRST : consiste à concevoir
un site en priorité pour la version
mobile, puis de le décliner pour les
écrans plus grands.
* zdnet.fr - ** Alsacreations.com : « C’est quoi le Responsive Web Design ? »
2/responsive
Tendances Web Design 2015 - philipperondepierre.com
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.
2/responsive
Tendances Web Design 2015 - philipperondepierre.com
SITE WEB OU APPLICATION : MOBILE FIRST / sarenza.com
2/responsive
LIQUIDE, RESPONSIVE OU ADAPTATIF : DE NOMBREUX OUTILS
HTML5, CSS3, JAVASCRIPT…
Gridset
Tableaux
FitText
Bootstrap
Mise en page web évoluée.
https://gridsetapp.com
Tendances Web Design 2015 - philipperondepierre.com
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
Des tableaux ajustés.
http://zurb.com/playground/responsive-tables
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
* 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.
…
3/monopage
STORYTELLING* + NAVIGATION AU SCROLL SIMPLIFIÉE, HÉRITÉE DU TACTILE / everylastdrop.co.uk
Tendances Web Design 2015 - 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.
SITES ANIMÉS ET STORYTELLING* :
ici, en scrollant on vit la journée du
personnage qui nous raconte une
histoire pleine de sens.
* Communication narrative par l’intermédiaire d’une histoire pour capter l’attention de l’internaute et créer une connexion émotionnelle.
3/monopage
Tendances Web Design 2015 - philipperondepierre.com
SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / fifteenrobin.com.sg
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é.
3/monopage
SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / www.puma.com
Tendances Web Design 2015 - philipperondepierre.com
DOUBLE SCROLL
3/monopage
Tendances Web Design 2015 - philipperondepierre.com
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 mouvement/profondeur plus immersif.
La parallaxe est remixée : animations,
mouvements asynchrones, vidéo,
zoom, superpositions…
3/monopage
PAGE WEB OU APPLICATION ? / Apple Mac Pro
Tendances Web Design 2015 - philipperondepierre.com
micro-interactions
Technologies et effets se conjuguent
pour donner à la page des airs de
véritable application : animations 3D
fluides, micro-interactions, vidéo…
3/monopage
MONOPAGE, GRAPHIQUE, PARALLAXE, CLIP EN PLEINE PAGE… UN SITE TENDANCE / hollysiz.com
Tendances Web Design 2015 - philipperondepierre.com
social
4/l’image d’abord
PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme
Tendances Web Design 2015 - philipperondepierre.com
cadres et filets
4/l’image d’abord
Tendances Web Design 2015 - philipperondepierre.com
PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme
4/l’image d’abord
Tendances Web Design 2015 - 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é…
4/l’image d’abord
DES PHOTOS AUTHENTIQUES ET DES ILLUSTRATIONS “ICONIQUES” / Google
Tendances Web Design 2015 - philipperondepierre.com
Les images, photos et illustrations
se conjuguent. Elles racontent une
histoire, sans filtre et avec simplicité.
La métaphore plutôt que le “cliché”.
4/l’image d’abord
Tendances Web Design 2015 - 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.
4/l’image d’abord
Tendances Web Design 2015 - philipperondepierre.com
ILLUSTRATIONS ET INFOGRAPHIES : BD VERTICALE OU SITE MONOPAGE ? / CollegeAtlas.org
4/l’image d’abord
Tendances Web Design 2015 - philipperondepierre.com
L’ILLUSTRATION, C’EST FUN, ROCK , PIXEL ART, COMICS, DATA, GÉOMÉTRIQUE, GIF, 3D… ET C’EST…
FLAT / timotheecottier.fr
PHOTO / julesjulien.com
BLOG / Pénélope Bagieu
TYPO / mikeyburton.com
GLITCH ART / 20three.com
VINTAGE / obsedo.com
5/typographie
Tendances Web Design 2015 - philipperondepierre.com
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… ).
Transparent + multicolore, lemonde.fr
5/typographie
Tendances Web Design 2015 - philipperondepierre.com
LA TYPO SE CONJUGUE AU PLURIEL : GRAPHIQUE, GRILLE, FLAT, PICTOS, PHOTOS… / sosh.fr
5/typographie
Tendances Web Design 2015 - 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.
5/typographie
Tendances Web Design 2015 - philipperondepierre.com
POLICES WEB : OMBRES, RELIEF, MULTICOLORES, TRANSPARENCE… / Player
5/typographie
GRANDE TYPO LIGHT, SIMPLE ET SANS SERIF : PLUS LISIBLE SUR MOBILES / Google
Tendances Web Design 2015 - philipperondepierre.com
ruptures marquées
5/typographie
LA HAUTE DÉFINITION REDONNE DU CARACTÈRE À LA POLICE
ee ee
R R RR
POLICES ÉCRAN
Tendances Web Design 2015 - philipperondepierre.com
e
POLICES CLASSIQUES
e
e
Lucida Grande
Georgia
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.
e
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.
Helvetica Neue
R
R
BodoniTS
RETOUR VERS LE FUTUR !
R
R
Les typographes vont pouvoir donner
libre cours à leur créativité et les classiques 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.
6/data design
L’ART DE RENDRE VISUELLES DES DONNÉES, CHIFFRÉES OU NON / healthland.time.com
Tendances Web Design 2015 - philipperondepierre.com
minimal + photo
6/data design
Tendances Web Design 2015 - philipperondepierre.com
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é.
6/data design
Tendances Web Design 2015 - philipperondepierre.com
FLAT DESIGN + DATA, POUR UN MESSAGE CLAIR, LUDIQUE ET GRAPHIQUE / Brandz.com
6/data design
Tendances Web Design 2015 - philipperondepierre.com
OUTIL DE VULGARISATION, LE DATA DESIGN EST PLÉBISCITÉ PAR LES MÉDIAS ET LES ENTREPRISES / IBM
6/data design
Tendances Web Design 2015 - philipperondepierre.com
STATIQUE OU DYNAMIQUE, LE DATA DESIGN EST RESPONSIVE OU S’ANIME / Metronic - Admin dashboard
7/gamification
Tendances Web Design 2015 - philipperondepierre.com
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.
7/gamification
JEU EN LIGNE OU APPLICATION DÉDIÉE SELON LA PERTINENCE / Beer Me
Tendances Web Design 2015 - 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
Tendances Web Design 2015 - philipperondepierre.com
JEU VÉRITABLE OU EMPRUNTS DES CODES GRAPHIQUES LUDIQUES / Robby Leonardi
flat + retro gaming
7/gamification
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
Tendances Web Design 2015 - philipperondepierre.com
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.
Gamification et serious game. Voir lien en fin de document. * Source : ed-tech.fr
8/vintage
Tendances Web Design 2015 - philipperondepierre.com
RIEN DE TEL QUE LES RÉFÉRENCES AU PASSÉ POUR PARAÎTRE PLUS AUTHENTIQUE / missmarysmix.com
typo
À contre courant du flat design, le
vintage revisite les codes du passé,
mais il reste moderne : monopage,
aplats, parallaxe, minimal, social…
8/vintage
Tendances Web Design 2015 - philipperondepierre.com
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.
8/vintage
Tendances Web Design 2015 - philipperondepierre.com
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.
8/vintage
Tendances Web Design 2015 - philipperondepierre.com
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.
8/vintage
Tendances Web Design 2015 - philipperondepierre.com
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.
9/social design
SNAPCHAT, DEVIANT ART, LULU, SKYPE, TUMBLR, PINTEREST, BADOO, LINE… LE DESIGN TRÈS SOCIAL
Tendances Web Design 2015 - philipperondepierre.com
Les réseaux sociaux recyclent les
modes. Ils peuvent aussi les lancer.
Le web design 2015 ne se fera pas
sans les réseaux.
Tumblr site de microblog essentiellement basé sur le visuel a insufflé son
style minimaliste et efficace à toute la
blogosphère.
9/social design
Tendances Web Design 2015 - philipperondepierre.com
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.
9/social design
SLIDESHARE, PINTEREST, LINKEDIN, INSTAGRAM, GOOGLE +, DRIBBBLE, WIX… LE DESIGN TRÈS SOCIAL
Tendances Web Design 2015 - philipperondepierre.com
Wix propose de véritables templates
web modernes, accesssibles à tous.
Le web design bancal bricolé par
papa n’est plus de mise.
9/social design
Tendances Web Design 2015 - philipperondepierre.com
WHATSAPP, LINKEDIN, DRIBBBLE, YAMMER, TANGO, SCOOP.IT, FACEBOOK… LE DESIGN TRÈS SOCIAL
Personal branding : scoop.it, plateforme de veille et curation de contenu
permet de valoriser sa marque
personnelle auprès de ses réseaux.
9/social design
Tendances Web Design 2015 - philipperondepierre.com
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 !
9/social design
Tendances Web Design 2015 - philipperondepierre.com
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 ?
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
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.
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
RÉALITÉ AUGMENTÉE : LE WEB PLUS PUISSANT QUE LE RÉEL / wahouu.com
La réalité augmentée va encore progresser, 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 ?
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
RÉALITÉ AUGMENTÉE : LE SMARTPHONE DEVIENT PLV / iBeacon
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
RÉALITÉ AUGMENTÉE : À l’instar d’Apple avec iBeacon, Samsung présente Proximity
Proximity, technologie de localisation
en intérieur, destinée à équiper les
lieux publics et proposer des informations contextuelles précises.
10/tout connecté
DOMOTIQUE ET OBJETS CONNECTÉS : BIENTÔT VOTRE SMARTPHONE PILOTERA TOUT OU PRESQUE !
Tendances Web Design 2015 - philipperondepierre.com
flat + data
Apple Watch
À la WWDC 2014 Apple a présenté
Home Kit. La domotique va révolutionner 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.
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
TV CONNECTÉE : À VOUS DE JOUER ! / France Télévision
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.
10/tout connecté
Tendances Web Design 2015 - philipperondepierre.com
INTERFACES HYBRIDES : MOUVEMENTS, CAMÉRA 3D, TACTILE, ÉCRITURE, VIDÉO… / Sprout
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
10/tout connecté
OBJETS CONNECTÉS : DES ÉCRANS DE TOUTES SORTES. L’OBJET ET L’ÉCRAN INTRINSÈQUEMENT LIÉS
Sharp : free form display
Tendances Web Design 2015 - philipperondepierre.com
Nest : thermostat
Samsung Gear
Samsung : réfrigérateur
RE
recyclage
LE WEB DESIGN
SOUS INFLUENCES
>>
recyclage/1
NÉOPLASTICISME / Mondrian
LESS IS MORE
RÉTRO / Coca-Cola
Tendances Web Design 2015 - philipperondepierre.com
–=+
FLAT DESIGN / Windows Phone
MINIMAL / jtcdesign.com
VINTAGE / missmarysmix.com
Tendances Web Design 2015 - philipperondepierre.com
recyclage/2…
TYPOGRAPHIE
INTERFACE GRAPHIQUE / Xerox
JEUX VIDÉO 70’s / Atari : Pong
TYPOGRAPHIE / handiemail.com
DATA DESIGN / google analytics
PIXEL ART / eboy.com
DOWN!
obsolète
>>
Tendances Web Design 2015 - philipperondepierre.com
obsolète!!
LE SKEUOMORPHISME DATÉ
≠ FLAT DESIGN
LES PHOTOS CLICHÉS/CREUSES
IMAGES LIBRES DE DROIT USÉES
PRÉFÉRER HTML5 + CSS3 + JAVASCRIPT
LES INTERFACES CHARGÉES
LE DESIGN LOW COST
TROP DE TEXTE
TROP DE PAGES, BOUTONS, POLICES…
DESIGN AGRESSIF, KITSCH OU CHEAP
FLASH
PRÉFÉRER IMAGES, PICTOS OU DATA
obsolète
Tendances Web Design 2015 - philipperondepierre.com
LE PLASTIQUE BRILLANT
(iOS 6)
LA LIGHTBOX
ET LES POP-UP INTRUSIFS
LE CARROUSEL FOURRE-TOUT
IFRAME (FENÊTRE INCLUSE)
LE SLIDER QUI TUE
CRÉATIVITÉ ÉGALE À ZÉRO
DÉCONSEILLÉ POUR LE RÉFÉRENCEMENT
TROP D’EFFETS TUE L’EFFET
SOUVENT DÉSUET ET INNEFICACE
0 + 0 = LA TÊTE À TOTO
quelques liens
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)
Tendances Web Design 2015 - philipperondepierre.com
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
Tendances Web Design 2015 - philipperondepierre.com
alsacréations: article
Lire l’article complet
clic !
Apple,
Branding
STORY
Tendances Web Design 2015 - philipperondepierre.com
2015
Philippe Rondepierre
Décryptage : branding, communication,
marketing, design, influences, historique…
merci!
PHILIPPE RONDEPIERRE
Graphiste et Directeur Artistique
Contact : philipperondepierre.com
Un projet, un séminaire,
une présentation…
Contactez-moi !
<<<
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.

Documents pareils