Agence LunaWeb, Concepteurs d’expériences Web.
Présentation “Le design, cet inconnu” au Mobile Monday, le lundi 30 septemb...
1.
Explorons ensemble quelques exemples.
Kaiseki,
2010.
Mais qu’est-ce que c’est ?
Orangerie de Versailles,
1660.
Est-ce juste un jardin ?
Les Gémeaux,
2001.
Des affiches de théatre ?
Radice Stool,
2013.
Une assise confortable ?
TOUT
ÇA…
C’EST
DU
DESIGN !
Et ne pas dire “c’est design”, merci.
DU DESIGN
GRAPHIQUE,
CULINAIRE,
PRODUIT,
ETC.
MAIS LE
DESIGN,
C’EST
QUOI ?
Le rôle du design est de répondre à un besoin,
de résoudre un problème.
Son rôle est aussi de proposer des solutions
innov...
Le design c’est aussi :

LE FOND =
LA STRUCTURE
+ LA FORME
+ LA FONCTION
Le fond, la structure,
la forme et la fonction
s’expriment dans
chaque projet issu du
design.
2.
Le design mobile.
LE
DESIGN
MOBILE.
C’est parti !
2001, L’odysée de l’espace,
1968.
Le monolithe serait-il un smartphone ?
DU
DESIGN
PRODUIT.
Ça c’est pour l’objet.
Twin Peaks,
1990.
L’écran tactile, une scène ouverte et vide.
DU
DESIGN
D’INTERACTION.
Ça c’est pour l’interface.
eXistenZ,
1999.
Une relation particulière avec l’interface.
Le design d’interaction c’est :

L’HOMME
+ LA MACHINE
+ LE RÉSEAU
+ LE CONTENU
Essential Killing,
2010.
De vastes espaces d’exploration.
1.
LA SITUATION.
La mobilité en toutes conditions, un objet personnel et à taille humaine.
Twin Peaks,
1990.
Les connexions se font.
2.
L’INTERACTION.
Avec l’écran tactile, avec les doigts, la voix, le réseau et les contenus.
Fresque égyptienne,
1800 AV. JC..
Entre dessin et dessein.
3.
LA
REPRÉSENTATION.
Qu’elle soit typographique, iconographique, photographique, etc.
Orchestre Philharmonique.
Laissez-vous guider.
LE DESIGNER AGIT
TEL UN CHEF
D’ORCHESTRE.
Il apporte et soutient une vision globale, fait appel et coordonne les intervena...
3.
Revenons sur le flat “graphic” design.
La Linéa,
1970.
Le graphisme “flat” ne date pas d’hier.
LE
FLAT
DESIGN
?
F. Champenois,
1897.
L’Art décoratif à son sommet.
Puis

LE DÉBUT DU 20e
SIÈCLE MARQUE
UNE
RUPTURE.
C’est l’ère du

DÉPOUILLEMENT,
DE L’OBJECTIVITÉ
ET DE LA
LISIBILITÉ.
C’est

L’HÉRITAGE.
Ou comment le design moderne s’inspire largement du swiss style.
Microsoft Design Language,
2012.
L’inspiration revendiquée au swiss style.
Google Now,
2012.
La simplification des interfaces Google est aussi influencée par le swiss style.
iOS 7,
2013.
Une influence sous-jacente, pas tout à fait assumée ?
LayerVault,
2012.
Une définition du flat “graphic” design.
Mais alors

LE
FLAT
DESIGN
c’est vraiment une révolution ?! Pas vraiment, juste un outil de plus.
4.
Le design à travers le process.
Escalier de Penrose,
1961.
Un cercle vertueux de création.
LE PROCESS
ITÉRATIF.
Le droit et le devoir de faire des erreurs dans le processus créatif.
First Step,
1969.
Voir plus loin.
1.
EXPLORATION.
Snowmission,
2007.
Imaginer tout azimut !
2.
CRÉATION.
CHE,
2010.
Transformer l’idée.
3.
RÉFLEXION.
Dans le sens “refléter l’idée” grâce aux prototypes.
Chantier du Guip,
2013.
Construire !
4.
IMPLÉMENTATION.
CONCLUSION
Pour résumer :

LE DESIGN
MOBILE
≠
LE FLAT
DESIGN.
Le design c’est avant tout un
process et des métiers.
Ne vous enfermez pas dans
certaines tendances
technophiles.
Embauche...
Sources
Kaïseki © 2010 - Il cavoletto di bruxelles
L’orangerie des jardins de Versailles © 1660 - André le Nôtre / 2008 - ...
Agence LunaWeb - Le design, cet inconnu
Agence LunaWeb - Le design, cet inconnu
Agence LunaWeb - Le design, cet inconnu
Agence LunaWeb - Le design, cet inconnu
Prochain SlideShare
Chargement dans…5
×

Agence LunaWeb - Le design, cet inconnu

1 740 vues

Publié le

Présentation réalisée dans le cadre du 15e Mobile Monday, le lundi 30 septembre, à la Cantine Numérique de Rennes.

Publié dans : Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 740
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Bonjour à tous.
  • Explorons ensemble le terme, parfois mystérieux, de “design”…
  • Kaiseki, 2010. La cuisine Kaiseki désigne dans la gastronomie japonaise une forme traditionnelle de repas composée de plusieurs petits plats servis conjointement. Le terme peut aussi renvoyer à l'ensemble des compétences et techniques qui permettent de préparer un tel repas qui sont comparables à la grande cuisine occidentale.
  • Orangerie de Versailles, 1660. En 1660, Louis XIV charge André Le Nôtre de la création et de l’aménagement des jardins de Versailles qui, à ses yeux, sont aussi importants que le Château.
  • Affiches du théatre Les Gémeaux, 2001. Réalisées par Michel Bouvet pour promouvoir le théatre des Gémeaux. Un mélange culturel de dessins, d’éléments graphiques et typographique.
  • Radice Stool, 2013. Tabouret designés par Industrial Facility.
  • Quel est le point commun entre tous les éléments précédents ?
  • Le point commun, c’est le terme “design”. Et ne pas dire “c’est design”, car cela a autant de sens que de dire “c’est cool”. Ou “c’est swag”.
  • Le design est omniprésent dans nos vies. Voilà quelques exemples des disciplines du design : Communication design, Engineering design, Fashion design, Game design, Graphic design, Industrial design, Interaction design, etc.
  • Excellente question Michel !
  • En voici une définition. Le design est à la fois “dessein” et “dessin”.
  • Le design peut se découper en 4 champs d’explorations interconnectés et interdépendants.
  • Par exemple, dans le cas de ce tabouret, le fond s’apprente à l’ensemble des données culturelles et sociales entourant l’assise en Occident. Ces données seront évidemment différentes dans d’autres parties du monde. Le fond c’est aussi le “pourquoi ?”. Pourquoi réaliser cette chaise, pour qui, etc. La structure, elle, est composée principalement du bois utilisé. La forme, très sobre ici, est intimement liée à la structure, et à ces possibilités de transformation. La forme entretient également avec la fonction une relation très proche. En effet ici la fonction d’assise, un peu haute, guide et est guidée par la forme. L’ensemble de ces données forme le design de cet objet, et sont interdépendants.
  • Comment la notion de design s’exprime-t-elle dans le cadre du mobile.
  • C’est parti pour comprendre la notion de design mobile.
  • 2001, l’odyssée de l’espace, 1968. L’objet, le smartphone, se réduit de plus en plus à un simple parallèlépipède avec quelques boutons et surtout un écran, qui permet de visualiser, mais aussi d’interagir, car tactile. Un objet particulièrement “neutre” donc…
  • L’objet en lui même, le smartphone, est lié au monde du design produit.
  • Twin Peaks, 1990. Au travers de cet écran tactile, c’est une scène vide, ouverte, pour imaginer différents usages et possibilités.
  • C’est donc ce qui se passe sous la glace qui va importer maintenant : on rentre dans le champ du design d’interaction.
  • eXistenZ, 1999. La trame du film est basée sur la confusion entre la réalité et la réalité virtuelle, que les personnages vivent hors et dans le jeu vidéo appelé eXistenZ, dont le but est tout simplement de vivre une, dans un monde ultra-réaliste. Dans ce film, David Cronenberg s'amuse à donner une texture biologique aux objets technologiques : les consoles de jeu sont des sortes de fœtus, les connexions sont assurées par des cordons ombilicaux s'enfichant dans des sphincters (le thème de la symbiose entre biologie et technologie est également présent dans ses autres œuvres, comme par exemple The Naked Lunch ou Videodrome).
  • Une relation complète donc !
  • Essential Killing, 2010. Dans les montagnes arides de l'Afghanistan un taliban tente d'échapper aux hélicoptères et à la puissance de feu de l'armée américaine qui quadrille la région… Capturé, ce moudjahid n'a, pourtant, guère l'apparence d'un homme du pays. Il est transféré vers un lieu de détention inconnu, où il est interrogé et torturé. Il réussit à s'évader. À travers une forêt enneigée, le personnage est engagé désormais dans une lutte pour la survie…
  • La première dimension à explorer : la situation. Ici, 1/ la mobilité, en toutes conditions, 2/ un objet que l’on tient dans une main et 3/ Un objet personnel.
  • Twin Peaks, 1990. Thumbs up !
  • La deuxième, l’interaction : 1/ avec un écran tactile, 2/ avec les doigts, la voix et 3/ avec le réseau et les contenus. C’est le phénomène simple d’action / réaction.
  • Fresque égyptienne, 1800 av. Jc. La 3e dimension à explorer, c’est celle qui semble la plus familière et à laquelle on réduit trop souvent le design sur le web ou sur mobile.
  • La représentation (donc la forme) : 1/ typographique, 2/ iconographique, 3/ graphique, 4/ photographique, etc.
  • Mais au fait, et le designer là dedans ?
  • En effet, Il apporte et soutient une vision globale, fait appel et coordonne différents experts : d’autres designers spécialisés dans telle ou telle problématique, des ingénieurs, etc.
  • Revenons…
  • …au Flat Design.
  • Revenons sur ce terme et cette tendance qui a émergé récemment sur mobile et sur le web. Remontons un peu dans le temps pour mieux la comprendre.
  • Le mouvement Art Déco fait suite à l’art nouveau. Autant les formes de l'Art nouveau étaient ondulantes, très détaillées et prenaient exemple sur la nature, autant l'Art déco s'est tourné vers des formes épurées et essentiellement géométriques. La courbe, encore très présente aux débuts de ce mouvement, tend à disparaître progressivement au profit de l'angle droit, notamment avec le courant De Stijl.
  • On constaste une interruption pendant la première guerre modiale puis…
  • … dans les années 50, c’est l’émergence du Style Internationnal / Swiss Style qui prolonge le Bahaus. Ce style prône le dépouillement, l’objectivité et la lisibilité. Un peu à l’opposé du style Art déco en somme ! Voyons ensemble quelques exemples dans le champ du design graphique.
  • C’est l’ère de l’information structurée (Hiérarchie, grilles, ryhtme vertical)…
  • … de la typographie, sans-serif, création de typographies telles que l’Helvetica… Et de l’usage de la photographie dans des dimensions importantes…
  • On constate une uniformité et l’utilisation de la géométrie (récurrence, système… ). Les couleurs sont marquées, contrastées, pures, en aplat.
  • Tout est un éternel recommencement !
  • Revenons au Flat Design. Microsoft et son interface «Métro», inspiration Swiss Style revendiquée. Au delà de la forme, une UI qui est le contenu lui-même (différent de l’approche Apple ou Google de l’époque avec laquelle, traditionnellement, l’interface contient le contenu).
  • Depuis le swiss style a une grosse influence. L’exemple des interfaces Google, adepte déjà d’un certain dépouillement, qui commencent à explorer ce vocabulaire, notamment au niveau typographique.
  • Puis Apple récemment, avec plus ou moins de succès pour iOS7, qui est devenu un sujet polémique ! Pas de rupture, contrairement aux habitudes de la firme… C’est avant tout un travail de surface. D’où une certaine insatisfaction et peut-être un manque de cohésion au niveau de la structure / fonction / forme. Se design s’améliorera-t-il avec le temps dans une volonté de rupture ?
  • A propos du terme Flat Design: utilisé la première fois dans un article de blog de Layer Vault. Désigne ici un style graphique très restrictif, loin de toutes les possibilités explorées avec le Swiss Style pendant des dizaines d’années dans le design graphique.
  • Clairement non. C’est une tendance web (une certaine communauté très techno-centrée, qui aime unifomiser), qui partait d’une ouverture forte vers des qualités graphiques peu exploitées dans le design d’interaction, pour la renfermer dans des codes plus illustratifs, parfois naïfs… Bref, il ne faut pas s’enfermer là dedans, et plutôt continuer à explorer.
  • Et pour continuer à explorer, le design s’appuie sur des process simples. Ce qui suit est assez général et peut s’appliquer à beaucoup de disciplines du design.
  • C’est avant tout un processus itératif, réellement !
  • “Le processus itératif est une séquence d'instructions destinées à être exécutées plusieurs fois et autant de fois qu'on peut en avoir besoin. C'est aussi une exécution de la séquence.» Ici on parle d’éxécutions multiples, indispensables.” L’idée principale étant de faire le maximum d’erreurs possibles, le plus tôt possible.
  • La première phase de ce processus…
  • … c’est l’exploration. Une exploration dans les objectifs, les besoins, l’analyse du contexte et des cibles, des pistes…
  • La 2e phase…
  • …la création. Recherches, Brainstorming, workshops, dessins, croquis, wireframes… De multiples formes et outils peuvent être utilisés sans restriction.
  • 3e phase…
  • … la réflexion, dans le sens «refléter» et non «réfléchir/penser». On prototype et on teste. Les conclusions permettent de retourner en phase de recherche ou de création avec plus d’informations.
  • Et enfin la 4e phase…
  • … l’implémentation. Il s’agit de la production. Les erreurs ont été faites avant… sinon c’est le drame.
  • Parce que toute les bonnes choses ont une fin.
  • Le design c’est donc bien plus qu’une question d’interface graphique, de peinturlurage ou de style tel que le Flat Design. C’est avant tout un process et des métiers. Ne pas s’enfermer dans certaines tendances technophiles. Embauchez des designers, et mettez les au coeur des projets et non en périphérie. Tout le monde a à y gagner 
  • C’est dit !
  • Merci.
  • À bientôt !
  • Agence LunaWeb - Le design, cet inconnu

    1. 1. Agence LunaWeb, Concepteurs d’expériences Web. Présentation “Le design, cet inconnu” au Mobile Monday, le lundi 30 septembre 2013. La Cantine Numérique — Rennes.
    2. 2. 1. Explorons ensemble quelques exemples.
    3. 3. Kaiseki, 2010. Mais qu’est-ce que c’est ?
    4. 4. Orangerie de Versailles, 1660. Est-ce juste un jardin ?
    5. 5. Les Gémeaux, 2001. Des affiches de théatre ?
    6. 6. Radice Stool, 2013. Une assise confortable ?
    7. 7. TOUT ÇA…
    8. 8. C’EST DU DESIGN ! Et ne pas dire “c’est design”, merci.
    9. 9. DU DESIGN GRAPHIQUE, CULINAIRE, PRODUIT, ETC.
    10. 10. MAIS LE DESIGN, C’EST QUOI ?
    11. 11. Le rôle du design est de répondre à un besoin, de résoudre un problème. Son rôle est aussi de proposer des solutions innovantes ou d’inventer de nouvelles possibilités dans le but d’améliorer l'expérience d'utilisation d'un produit. La pluridisciplinarité se trouve par conséquent au cœur du travail du design, dont la nature se nourrit aussi bien des arts, des techniques, et des sciences.
    12. 12. Le design c’est aussi : LE FOND = LA STRUCTURE + LA FORME + LA FONCTION
    13. 13. Le fond, la structure, la forme et la fonction s’expriment dans chaque projet issu du design.
    14. 14. 2. Le design mobile.
    15. 15. LE DESIGN MOBILE. C’est parti !
    16. 16. 2001, L’odysée de l’espace, 1968. Le monolithe serait-il un smartphone ?
    17. 17. DU DESIGN PRODUIT. Ça c’est pour l’objet.
    18. 18. Twin Peaks, 1990. L’écran tactile, une scène ouverte et vide.
    19. 19. DU DESIGN D’INTERACTION. Ça c’est pour l’interface.
    20. 20. eXistenZ, 1999. Une relation particulière avec l’interface.
    21. 21. Le design d’interaction c’est : L’HOMME + LA MACHINE + LE RÉSEAU + LE CONTENU
    22. 22. Essential Killing, 2010. De vastes espaces d’exploration.
    23. 23. 1. LA SITUATION. La mobilité en toutes conditions, un objet personnel et à taille humaine.
    24. 24. Twin Peaks, 1990. Les connexions se font.
    25. 25. 2. L’INTERACTION. Avec l’écran tactile, avec les doigts, la voix, le réseau et les contenus.
    26. 26. Fresque égyptienne, 1800 AV. JC.. Entre dessin et dessein.
    27. 27. 3. LA REPRÉSENTATION. Qu’elle soit typographique, iconographique, photographique, etc.
    28. 28. Orchestre Philharmonique. Laissez-vous guider.
    29. 29. LE DESIGNER AGIT TEL UN CHEF D’ORCHESTRE. Il apporte et soutient une vision globale, fait appel et coordonne les intervenants.
    30. 30. 3. Revenons sur le flat “graphic” design.
    31. 31. La Linéa, 1970. Le graphisme “flat” ne date pas d’hier.
    32. 32. LE FLAT DESIGN ?
    33. 33. F. Champenois, 1897. L’Art décoratif à son sommet.
    34. 34. Puis LE DÉBUT DU 20e SIÈCLE MARQUE UNE RUPTURE.
    35. 35. C’est l’ère du DÉPOUILLEMENT, DE L’OBJECTIVITÉ ET DE LA LISIBILITÉ.
    36. 36. C’est L’HÉRITAGE. Ou comment le design moderne s’inspire largement du swiss style.
    37. 37. Microsoft Design Language, 2012. L’inspiration revendiquée au swiss style.
    38. 38. Google Now, 2012. La simplification des interfaces Google est aussi influencée par le swiss style.
    39. 39. iOS 7, 2013. Une influence sous-jacente, pas tout à fait assumée ?
    40. 40. LayerVault, 2012. Une définition du flat “graphic” design.
    41. 41. Mais alors LE FLAT DESIGN c’est vraiment une révolution ?! Pas vraiment, juste un outil de plus.
    42. 42. 4. Le design à travers le process.
    43. 43. Escalier de Penrose, 1961. Un cercle vertueux de création.
    44. 44. LE PROCESS ITÉRATIF. Le droit et le devoir de faire des erreurs dans le processus créatif.
    45. 45. First Step, 1969. Voir plus loin.
    46. 46. 1. EXPLORATION.
    47. 47. Snowmission, 2007. Imaginer tout azimut !
    48. 48. 2. CRÉATION.
    49. 49. CHE, 2010. Transformer l’idée.
    50. 50. 3. RÉFLEXION. Dans le sens “refléter l’idée” grâce aux prototypes.
    51. 51. Chantier du Guip, 2013. Construire !
    52. 52. 4. IMPLÉMENTATION.
    53. 53. CONCLUSION
    54. 54. Pour résumer : LE DESIGN MOBILE ≠ LE FLAT DESIGN.
    55. 55. Le design c’est avant tout un process et des métiers. Ne vous enfermez pas dans certaines tendances technophiles. Embauchez des designers, et mettez-les au coeur de vos projets.
    56. 56. Sources Kaïseki © 2010 - Il cavoletto di bruxelles L’orangerie des jardins de Versailles © 1660 - André le Nôtre / 2008 - Σταύρος Théatre Les Gémeaux © 2001 - Michel Bouvet Radice Stool © 2013 - Industrial Facility 2001, l'odyssée de l'espace © 1968 - Stanley Kubrick - Metro Goldwyn Meyer Twin Peaks © 1990 - David Lynch - ABC eXistenZ © 1999 - David Cronenberg - Alliance Atlantis Communications Essential Killing © 2010 - Jerzy Skolimowski Fresque égyptienne © 1800 AV. JC. Orchestre Philharmonique - Source inconnue La Linéa © 1971 - Osvaldo Cavandoli F. Champenois Imprimeur-Éditeur © 1897 - Alfons Mucha Opernhaus Zurich © 1968 - Müller-Brockmann Josef David Bowie © 2012 - Mike Joyce The Velvet Underground © 2012 - Mike Joyce Bella Musica Ibiza © 2010 - Nikola Lazarevic New Order © 2012 - Mike Joyce Microsoft design language © 2012 - Microsoft Now © 2012 - Google iOS 7 © 2013 - apple LayerVault © 2012 - Allan Grinshtein Escalier de Penrose © 1961 - Maurits Cornelis Escher First step © 1969 - NASA Spray © 2007 - SNOWMISSION CHE © 2010 - Vincent Parreira Chantier du Guip © 2013 - Yann Mauffret

    ×