MMI Web Design P1

WEB DESIGN
Master 2 MMI | Université Panthéon - Sorbonne

Octobre 2009 : Partie 1/4 David Raichman - Senior UX Designer @ OgilvyInteractive

1. PRÉSENTATION DU COURS

Web Design - Master 2 MMI Université Panthéon - Sorbonne

A. Objectifs

‣Acquérir une vision globale du web (design, technologie...)

‣Comprendre la chaîne des processus de la conception à la

réalisation

‣Apprendre les langages front-end (XHTML, CSS,

Javascript/DOM)

‣Utiliser DW comme outil de web authoring et de

prototypage

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

B. Enjeux et contextes

‣Industrialisation du web

‣Globalisation

‣Conseil et vision stratégique

‣Design centré sur l’utilisateur

‣Progression technologique


2. FONDAMENTAUX DU WEB


A. (R)évolutions
1995

web 1.0

HTML
images
javascript


A. (R)évolutions
1995

web 1.0

HTML
images
http://www.hec.fr
javascript


A. (R)évolutions
1995 1997 - 98

web 1.0 web dynamique

HTML ASP, PHP
images panier, session
javascript transaction, sécurisation


A. (R)évolutions
1995 1997 - 98


HTML ASP, PHP

“multimedia”

animation,
Shockwave Flash
QuickTime, son
bannières


A. (R)évolutions
1995 1997 - 98 2000


HTML ASP, PHP
Transaction vs
images panier, session Information

“multimedia” BULLE
INTERNET
animation,
Shockwave Flash
QuickTime, son
bannières


A. (R)évolutions
1995 1997 - 98 2000 - 2004

web 1.0 web dynamique web social
W3C
HTML ASP, PHP standards,
web sémantique,
images panier, session XML, XHTML, CSS,
javascript transaction, sécurisation Blogs

“multimedia”

animation,
Shockwave Flash
QuickTime, son
bannières


A. (R)évolutions
1995 1997 - 98 2004...2008


HTML ASP, PHP

“multimedia”

animation,
Shockwave Flash
web 2.0
QuickTime, son
bannières


A. (R)évolutions

Les mutations induites par la standardisation (W3C) : le
comportement des utilisateurs comme créateurs de contenus,
la socialisation du web…

‣ XML standard de diffusions de l’information RSS, ATOM…
‣ Phase d’expansion de l’open source (dont LAMP) et créations de
CMS gratuits qui faciliterons la naissance des blogs
‣ Ajax : le navigateur devient un lecteur d’application (google
documents, googlemap,…)
‣ Programmes collaboratifs (wiki)
‣ Agrégateurs (Netvibes, iGoogle...)
‣ Widgets


A. (R)évolutions
1995 1997 - 98 2004...2008

web 1.0 web dynamique web 2.0

HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS

“multimedia”

animation,
Shockwave Flash
QuickTime, son
bannières


A. (R)évolutions
1995 1997 - 98 2004...2008



“multimedia” RIA

animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API


A. (R)évolutions
1995 1997 - 98 2004...2008



“multimedia” RIA

animation, Ajax, Flex
QuickTime, son partage de media
bannières API

RDA, RMA

Adobe AIR, Flex,
SDK Iphone
Objets web-connectés


A. (R)évolutions
1995 1997 - 98 2004...2008 2009...

web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique

temps-réel

“multimedia” RIA intelligence collective

animation, Ajax, Flex métadonnées
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud

PubSubHubBub

RDA, RMA

Adobe AIR, Flex,
SDK Iphone
Objets web-connectés


B. Typologie et positionnement



Une perpective

pour comprendre

le web d’aujourd’hui



Informationnel

vs

Audiovisuel



applicatif

Desktop Itunes

audiovisuel informationnel



applicatif

Desktop Itunes

audiovisuel informationnel

RIA Rich Internet Application



applicatif

Desktop Itunes

audiovisuel RDA Rich Desktop Application informationnel

RIA Rich Internet Application


tag surf



Virtual Me


World of Warcraft



communication information



temps horizontal espace vertical



interactivité immersion trouvabilité émersion



forme = fond = fonction forme ! fond ! fonction



forme = fond = fonction forme ! fond ! fonction
concret pictural abstrait textuel


C. Mise en perspective...


D. Domaines technologiques
!11)$2/0$,

3('40%1567%-+('56/"0-('888

A32:15C2()>,/,<<<
93!6:69$2;63('40%16!11)$2/0$%+

)78:-%*?@()<=:5()'AB<<<
9G!6:69$2;6G%7$)(6!11)$2/0$%+

!"#$%&$'"() *+,%-./0$%++()

9*!6:69$2;6*+0(-+(06!11)$2/0$%+

<=:5()>,/,<<< 78,09()'38/:283;95 !"#$%&''()*+,-).+,/,0123456

=-

>)

@
<%
E(

D$

B"

/
G

(A
%?
).

+'
"F

2$
7)
%+

'
'
'5

/)

/
$2
6(
#(

20
6#

$
+6

0/

$%
%2
'6

)$?

$-(

++
&$

6$+
+(

56C
-0"

()
0(

&0
()

-/

56B
'

20

%-
$,'

0,%
)$%
888


3. FORMATS STRUCTURÉS


A. Fondements du web informationnel

Format structuré = contenu (texte)
+ structure sémantique + structure hiérarchique

SGML (Standard Generalized Markup Language) – 1986
Balisage, DTD, head et body

HTML (Hyper Text Markup Language) a été déﬁni pour être
un langage d'échange de documents scientiﬁques et
techniques.



HTML a résolu le problème de la complexité SGML en
spéciﬁant un petit ensemble de balises sémantiques et
structurelles, facilement utilisable pour l'écriture de
documents relativement simples. De même, pour simpliﬁer la
structure du document, HTML a ajouté la possibilité de
l'hypertexte.



1986

{
HTML
SGML



1986 1995

{
HTML 2.0
SGML



1986 1995 1997

{
HTML 2.0 4.0
SGML

CSS 1.0



1986 1995 1997 1998

{
HTML 2.0 4.0
SGML

XML 1.0

CSS 1.0 CSS 2.0


B. Les apports du W3C

XML (eXtended Markup Language) – 1998
XML, langage à balisage structuré, est une forme restreinte de
SGML, et préserve pratiquement toute la puissance et la richesse
de SGML.



de SGML.

<racine>
... suite du document XML ...
</racine>



de SGML.

<parents>
""""" <enfants>
"""""""""" <petits_enfants> ... </petits_enfants>
""""" </enfants>
</parents>



Un document XML est structuré de telle sorte qu’il puisse être
matérialisé par plusieurs médias avec un effort minimum :
papier, web, base de données, synthèse vocales, etc…
A une matérialisation donnée correspond une feuille de style.



Plus d’exemples sur http://www.csszengarden.com



1986 1995 1997 1998

{
HTML 2.0 4.0
SGML

XML 1.0

CSS 1.0 CSS 2.0



1986 1995 1997 1998 2000 - 2001

{
HTML 2.0 4.0

{
XHTML 1.0

WML
XML 1.0
MathML

...

CSS 1.0 CSS 2.0



XHTML (eXtended Hypertext Markup Language)
XHTML est une reformulation de HTML mais respecte les normes
du XML.

Les documents XHTML sont conformes à XML. Ainsi,
ils sont directement lisibles, éditables, et validables avec
les outils XML standards.

Les documents XHTML peuvent être écrits pour fonctionner aussi
bien ou mieux qu'ils ne le faisaient précédemment dans les agents
utilisateurs compatibles HTML!4.0 (rétro-compatibilité) ainsi que
dans les nouveaux agents utilisateurs compatibles XHTML 1.0.



XHTML 1.0 repose sur le fait qu’il existe deux catégories
d’éléments structurant un document :

les éléments bloc
les éléments en ligne

En-tête (header)

élément bloc

Corps (body)
élément en ligne

Modèle document XHTML


C. HTML 5 : un format naissant

1986 1995 1997 1998 2000 - 2001

{
HTML 2.0 4.0

{
SGML

XHTML 1.0

WML
XML 1.0
MathML

...

CSS 1.0 CSS 2.0



1986 1995 1997 1998 2000 - 2001 2009...

{
HTML 2.0 4.0 HTML 5

{
X
SGML

XHTML 1.0 2.0
rétro-compatibilité HTML
non assurée
WML
XML 1.0
MathML

...

CSS 1.0 CSS 2.0 CSS 3.0



HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories

Métadata
Ce sont les éléments qui
ﬁxent la présentation du
document en indiquant
l’adresse de la feuille de style
par exemple.



catégories

Flow content
Ce sont les éléments qui sont
le plus couramment utilisés
dans le corps d’un
document, par exemple les
titres, les boutons...



catégories

Sectioning
Sous-ensemble des ﬂow
contents. Ce sont des
contenus qui déﬁnissent le
périmètre d’une en-tête et
d’un pied de page. Par
exemple un article ou la
navigation.



catégories
header

section

header

nav aside
article

footer

footer

Modèle document HTML 5



catégories

Heading
contents. Ce sont des
contenus qui déﬁnissent la
titraille d’un document.



catégories

Phrasing
contents. Ce sont les
éléments de texte du
document ainsi que les
éléments qui balisent le texte.



catégories

Embed
Sous-ensemble des phrasing
content. Ce sont les
contenus qui importent des
sources externes au
document, comme mes
vidéos.



to be continued...


4. FRONT-END & BACK-END


A. Fond, forme et fonction

FONCTION

web
front

FORME FOND


A. Fond, forme et fonction

Javascript
FONCTION

web
front

FORME
CSS FOND
HTML


B. Site statiques

Un site “statique”
= chaque page est codée “à la main” LIEN

LIEN

LIEN


B. Site statiques

Un site “statique”
= chaque page est codée “à la main” LIEN

LIEN

LIEN

LIEN

LIEN

LIEN


C. Site dynamiques
Exemple de site dynamique : un BLOG


C. Site dynamiques

Les coulisses d’un site dynamique


C. Site dynamiques

ARTICLES

TITRE

TEXTE

IMAGE


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.
ARTICLES

TITRE

TEXTE

IMAGE


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.
ARTICLES

TITRE

TEXTE

IMAGE

CM
S


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.
ARTICLES

TITRE

TEXTE no
ch
te

rt
IMAGE te
ID en
ARTICLE. n
sig
ID de
ARTICLE. ce
ien
ID sc
ARTICLE.

ID
ARTICLE.
CM
S


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.
ARTICLES

TITRE

TEXTE no
ch
te

rt
IMAGE te
ID en
ARTICLE. n
sig
ID de
ARTICLE. ce
ien
ID sc
ARTICLE.

ID
ARTICLE.
CM
S

BD
D


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.

e
êt
ARTICLES

TITRE
u
no
Req CH

?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.

ID
ARTICLE.
CM
S

BD
D


C. Site dynamiques
Exemple de site dynamique : un BLOG

CATEGORIES
CATEG.

CATEG.

e
êt
ARTICLES

TITRE
u
no
Req CH

?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.

ID
ARTICLE.
CM
S

BD
D


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.

e
êt
ARTICLES

TITRE
u
no
Req CH

?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.

ID
ARTICLE.
CM AR
IT
S B
GA

IT
BAR
GA

BD
D


C. Site dynamiques

CATEGORIES
CATEG.

CATEG.

e
êt
ARTICLES

TITRE
u
no
Req CH

?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.

ID
ARTICLE.
CM AR
IT
S B
GA

IT
BAR
GA

BD
D

MO
TE
UR


C. Site dynamiques

CATEGORIES
Un site “dynamique”
= chaque page est CATEG.
générée par un moteur
CATEG.

e
êt
ARTICLES

TITRE
u
no
Req CH

?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.

ID
ARTICLE.
CM AR
IT
S B
GA

IT
BAR
GA

BD
D
EB
MO W
TE E
UR G
PA


C. Site dynamiques


C. Site dynamiques

Les systèmes de publication permettent un travail collaboratif
dont les membres, webmaster inclus, doivent connaître le
balisage HTML.


C. Site dynamiques

Les systèmes de publication permettent un travail collaboratif
dont les membres, webmaster inclus, doivent connaître le
balisage HTML.

Les systèmes de CMS. sont variés et utilisent des technologies
différentes (PHP/MySQL, .Net, J2EE, etc.)
Quelques exemples : Typo3, SPIP, Joomla, Drupal, WordPress...


5. DESIGN


5. DESIGN
A. Déﬁnition

Le design pour le web (web design au sens large) est un
processus qui suit une méthodologie pour assurer une
expérience utilisateur optimale. Il amène les designers à
développer une esthétique nouvelle de l’information, des
opérations de pensée et de l’interaction.

Au sens restreint, le web design n’est que l’opération
d’intégration visant à implémenter un ensemble de spéciﬁcations
(techniques, graphiques et d’interaction). On parle dans ce cas de
web authoring.


5. DESIGN
B. Processus

surface

squelette

tactique
structure
strategie

périmètre fonctionnel

stratégie

5. DESIGN
B. Processus

Surface : rassemblons tout. Quelle
est l’apparence du produit ﬁni ?

Squellette : rendons les choses
concrêtes. Quels composants vont
être à la disposition des
utilisateurs ?

Structure : rassemblons les
briques. Comment les différents
éléments vont-ils se comporter et
vivre ensemble ?

Périmètre : transformons la
stratégie en recommandation.
Quelles sont les fonctionnalités ?
Strategie : que voulons-nous
retirer du site ? Quel sont les
besoins des utilisateurs ?


The Elements of User Experience Jesse James G
jjg@j
A basic duality: The Web was originally conceived as a hypertextual information space; 30 March

5. DESIGN
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond

B. Processus
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.

Web as software interface Concrete Completion Web as hypertext s

Visual Design: visual treatment of text
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel") Visual Design graphic page elements and navigation
components

Interface Design: as in traditional HCI: Navigation Design: design of interface
design of interface elements to facilitate elements to facilitate the user's movem
user interaction with functionality
Interface Design Navigation Design through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information Information Design Information Design: in the Tuftean sen
designing the presentation of informat
to facilitate understanding Interface Système
to facilitate understanding

applicative
Interaction Design: development of Interaction Information hypertexte
Information Architecture: structural de

time
application flows to facilitate user tasks,
defining how the user interacts with
Design Architecture of the information space to facilitate
intuitive access to content
site functionality

Functional Specifications: "feature set":
detailed descriptions of functionality the site
Functional Content Content Requirements: definition of
content elements required in the site
must include in order to meet user needs Specifications Requirements in order to meet user needs

User Needs: externally derived goals User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc. User Needs for the site; identified through user res
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site Site Objectives Site Objectives: business, creative, or
internally derived goals for the site
task-oriented Abstract Conception information-ori

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

6. ADOBE DREAMWEAVER


A. Précautions

DW ne peut être un outil de mise en page efﬁcace (HTML
visuel) pour novice : la séparation Développeur/Designer
est trompeuse


B. Web authoring

DW peut être utilisé dans les contexte d’authoring web front et back

En front :
Outil de développement de gabarits HTML/CSS/Javascript en vue d’une
exploitation dynamique : autocomplétion efﬁcace pour XHTML et
CSS
Outil de validation XHTML, Outil de transition HTML>XHTML

En back :
Outil de développement pour PHP, ASP, Coldfusion, JSP,...
Simpliﬁcation de l’accès aux bases de données.


C. Prototypage

DW peut être utilisé dans les contextes de prototypage à
base de wireframes.

Nativement, il garantie la faisabilité de la phase
via le XHTML et l’utilisation de wireframe comme base
visuelle


MMI Web Design P1

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à MMI Web Design P1

Similaire à MMI Web Design P1 (20)

Plus de David Raichman

Plus de David Raichman (10)

MMI Web Design P1