Webdesign Passe, Present et... Present Part1

Slide 1: WEBDESIGN | Part1 PASSÉ, PRÉSENT ET… PRÉSENT Une présentation de Benoit Duverneuil | Tubatomic Worldwide Webdesign Festival | Rouyn-Noranda | Novembre 2007 http://creativecommons.org/licenses/by-sa/3.0/

Slide 2: 2 questions, des dizaines de réponses possibles Qu’est-ce que le Webdesign? Qu’est-ce qu’un Webdesigner?

Slide 3: “ In a room full of top software designers, if any two of them agree, that’s a majority. ” Bill Curtis, Expert en ingénierie logiciels

Slide 4: Webdesigner? Designer d’applications Web Designer de contenus Architecte d’Information { Spécialisés ou Spécialiste en expérience utilisateur pluridisciplinaires, Expert en usabilité/accessibilité Flasheur le métier est Webmaster en perpétuelle Webdesigner évolution, Designer Sonore Designer de formats nourrie par un environnement publicitaires interactifs Designer Interactif Intégrateur HTML de plus en plus Motion Designer multimédia Designer CSS Directeur Artistique Designer d’interactions Advergame Designer…

Slide 5: Wikipédia – FR vs US/UK Le webdesign désigne la création du support visuel à destination d’un site Web. Il s’agit d’une phase prépondérante dans la conception d’un tel site. Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface (GUI).

Slide 6: Wikipédia - Espagne No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Il ne s'agit pas simplement d’appliquer un modèle de conception sur l'Internet, car cela implique la prise en compte de questions telles que l'aptitude à la navigation, l’interactivité, la facilité d'utilisation, l’architecture de l'information et de l'interaction des médias tels que l'audio, texte, image et vidéo.

Slide 7: Wikipédia - Allemagne Webdesign umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW bzw. das Interface-Design in diesem Bereich. Dabei werden in der Regel strukturierte Texte, die in XHTML bzw. HTML verfasst sind, samt ergänzenden Grafiken mit CSS formatiert. Webdesign comprend la conception, la construction et la gestion des utilisateurs des sites Web pour le WWW ou conception de l'interface, dans ce domaine. Ce sont, en règle générale, des textes structurés qui en XHTML et HTML sont rédigés, avec des outils de mise en forme complémentaires comme le CSS.

Slide 8: Wikipédia - Italie Web design, letteralmente progettazione per il world wide web, è l'attività di ideazione, progettazione e costruzione di un sito internet destinato ad essere fruito con un browser web, browser testuali. Web design, literally design for the World Wide Web, is the business of designing, planning and building a website intended to be enjoyed with a web browser, text browser.

Slide 9: Wikipédia - Portugal O web design é uma extensão da prática do design, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. The web design is an extension of the practice of design, where the focus of the project is the creation of web sites and documents available on the web environment. The web design tends to multidisciplinarity, since the construction of web pages requires subsidies of various technical areas, in addition to the design itself.

Slide 10: Wikipédia - Russie Веб-разработка — процесс создания веб-сайта или веб-приложения. Термин включает разработку приложений электронной коммерции, веб-дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб-сервера. Web design is the process of creating a website or the Web. The term includes the development of e-commerce, web design, web programming for a client-side and server, as well as the configuration of a web server.

Slide 11: Supports visuels Architecture de l’Information ? XHTML Design Web Programming Utilisation Web Conception Serveurs GUI CSS Markup Interactivité Language Planification Process Multidisciplinary HTML Contenus multimédia E-commerce

Slide 12: Pour mieux comprendre les mutations qui s’opèrent, un voyage dans le temps est nécessaire, un retour vers le futur!

Slide 13: 1963 Ivan Sutherland invente le dessin sur écran avec crayon optique : le Sketchpad.

Slide 14: 1973 Xerox alto. Premier ordinateur qui se rapproche de ceux que nous utilisons aujourd'hui. Dick Shoup du Xerox PARC met au point une machine dotée de la première carte graphique (640x486 en 256 couleurs). Superpaint : 1er logiciel de dessin en couleurs et 1er logiciel d'effets vidéo numériques.

Slide 16: 1973 Muriel Cooper fonde le Visible Language Workshop au MIT. Pionnière dans les relations entre design graphique et nouvelles technologies. Elle développe des systèmes de visualisation 3D inédits

Slide 17: 1982 Le Minitel, un terminal numérique connecté par le câble téléphonique. L’ancêtre de l’Internet à la Française. 6 millions de terminaux, 20.000 services actifs (1990).

Slide 18: 120 caractères par seconde, d'autre part la norme vidéotex. 960 cases dont chacune ne peut contenir qu'un seul caractère, une seule « couleur » ou plutôt nuance de gris, et un seul fond.

Slide 19: Compuserve, premier service en ligne principal aux USA. Premier service de courrier électronique (dès 1979)

Slide 20: 1984 Apple lance le Macintosh Bill Atkinson créé McPaint, l’ancêtre des logiciels actuels de création graphique numérique

Slide 22: 1989 Et Sir Timothy John Berners-Lee créa le World Wide Web Avec son collègue Robert Cailleau, il invente le Web en liant le principe d’hypertexte à l’Internet

Slide 24: 1990 Un premier site Web, un premier navigateur Disponible à partir d’un ordinateur NeXT Le premier browser est à la fois un navigateur et un éditeur de contenus. Le Web 2.0 existait déjà en 1990.

Slide 26: 1987 Thomas & 1990 John Knoll commencent La jeune société Adobe le développement d’un programme révolutionnaire lance le logiciel Photoshop

Slide 28: “ The most powerful designs are always the result of a continuous process of ” simplification and refinement. Kevin Mullet, designer d’interfaces utilisateurs

Slide 29: 1991 John Maeda publie Design by Numbers au MIT Press L’artiste, graphiste et enseignant chercheur recherche incessamment la simplicité dans l’utilisation des nouvelles technologies pour favoriser la créativité.

Slide 30: Recherche constante de la simplicité dans les travaux de John Maeda.

Slide 31: Processus de création de la Couverture du Hors-Série spécial immobilier du New-York Times par John Maeda.

Slide 32: 1993 L’agence française Virtools introduit des comportements dynamiques et temps réels pour les contenus 3D off et online.

Slide 33: 1993-94 Marc Andressen conçoit le navigateur Web Mosaic Rapidement, il développe Netscape Navigator, 1er navigateur commercial distribué à grande échelle

Slide 36: Les débuts de la création Web Une histoire faite de contradictions et de faux-débats

Slide 37: Idée reçue n°1 Print & Ecran CREATION POUR LE WEB = design print sur un écran transposer le d’ordinateur et plus particulièrement sur un canal de diffusion comme le Web.

Slide 38: Idée reçue n°2 Infographie CRÉATION POUR LE WEB = PHOTOSHOP

Slide 39: 1994 Naissance du World Wide Web Consortium: W3C Mission de promotion de la compatibilité des technologies du Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. > Certifications et Recommandations

Slide 40: 1994 CSS = Cascading Style Sheet Le CSS permet de styliser les contenus HTML Différentes expérimentations de développement de langages pour feuilles de styles sont menées. - "stylesheet proposal" de Pei Wei, - "Stylesheets for HTML" de Robert Raisch (O'Reilly) - "Cascading HTML Style Sheets" (CHSS) d’Håkon Wium Lie. 1996 Le Cascading Style Sheets est né de la collaboration entre Håkon Lie et Bert Bos.

Slide 41: 1994 Naissance du Deuxième Monde. Produit par Studio Canal, il permet d’évoluer dans une communauté virtuelle 3D.

Slide 42: 1994 La société japonaise Denzo-Wave invente le QR Code, un code- barre en deux dimensions. Plus tard, ils deviendront de nouvelles interfaces pour les contenus Web mobiles.

Slide 43: 1995 Brendan Eich développe avec SUN/Netscape le language JavaScript Inséré dans les pages Web, lecode JavaScript permet d’exécuter des scripts directement dans le navigateur Web.

Slide 44: 1996 Macromedia créé le format Shockwave qui permet d’afficher des contenus multimédia sur le Web Ces fichiers créés à l’aide de Macromedia Director introduirent la 3D temps réel sur le Web

Slide 46: 1996 Jonathan Gay et son équipe développe Future Splash Animator qui permet de créer des animations vectorielles pour le Web Macromedia rachète l’entreprise Future Wave Software et lance la 1ère version de Flash.

Slide 47: 1998 The Remedi Project est la 1ère galerie interactive pour Web designers. Développée par Josh Ulm, cette plateforme est 100% Flash.

Slide 48: 1998 L’animation interactive Frog in a blender créée par Joe Shields est vue par des millions d’internautes dans le monde entier.

Slide 49: “ Designers talk and think a lot like science fiction writers do, except in a much less ” melodramatic and histrionic way. Bruce Sterling, auteur de science-fiction

Slide 50: 1999 Démocratisation de Flash. Sortie du navigateur Internet Explorer 5.0 qui intègre Flash Player.

Slide 51: 1999 Le créateur japonais Yugo Nakamura révolutionne le design interactif et les interfaces de navigation avec le site Yugop.com.

Slide 52: 1999 Inventé par Takeshi Natsuno, l'i-mode fut lancé au Japon en 1999 par NTT DoCoMo, et fut un énorme succès.

Slide 53: 2000 1ère convention qui regroupe plus de 4000 créateurs et développeurs utilisant le logiciel Flash de Macromedia.

Slide 54: 2000 En utilisant de manière innovante l’Action Script, le site Lookanfeel.com propose une interface cognitive en insistant sur l’interaction des mouvements avec la souris et le design sonore.

Slide 55: Développement et Webdesign Par nature, beaucoup de designers Web sont réfractaires à la programmation. Pourtant, le début des années 2000 fut riche en démonstrations. De nombreux artistes, designers, graphistes se sont approprié les techniques du développement informatique pour apporter une valeur ajoutée à leurs projets.