0
Web { Design
Project } Management*
David Roessli
cybermedia concepts



© Copyright 2010, David Roessli. These slides may ...
Web designer
design visuel


     Web designer
design de
           l’interface (UI)

design visuel


     Web designer
design de
           l’interface (UI)
                        design des
design visuel        interactions (UX)


     Web...
design de
            l’interface (UI)
                         design des
design visuel         interactions (UX)


     ...
design de
            l’interface (UI)
                         design des
design visuel         interactions (UX)


     ...
design de
            l’interface (UI)
                         design des
design visuel         interactions (UX)


     ...
design de
            l’interface (UI)
                         design des
design visuel         interactions (UX)


     ...
design de
              l’interface (UI)
                           design des
design visuel           interactions (UX)

...
Je fais des sites
web
http://cybmed.com
http://davidroessli.com/about
@roessli
Les choses dont
je ne parlerai pas
aujourd’hui:
Les sujets qui ne figurent pas
 à l’agenda:

‣ Systèmes de gestion de projet
‣ Méthodologies de développement
‣ Stratégie ...
Le web design
aujourd’hui*

(*) pour moi
Présenter   Expliquer    Conseiller




Analyser     Proposer    Concevoir




 Gérer      Développer     Tester
Présenter   Expliquer    Conseiller




Analyser     Proposer    Concevoir




 Gérer      Développer     Tester
Présenter   Expliquer    Conseiller




Analyser     Proposer    Concevoir




 Gérer      Développer     Tester
Types projets:




  vierge         refonte   intégrer
Types projets:




 vierge
           refonte   intégrer
Contexte   Fonction




Audience   Contenu
rédaction       balisage




mise en forme   comportement
semantics      usability




accessibility   findability
multidisciplinaire
Le contenu
avant le design
Faites votre mieux pour:

‣ Comprendre la nature du contenu
‣ Le contenu influence et guide le
 design
‣ Concevoir avec du...
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqu...
Lorsque vous utilisez Lorem Ipsum
vous assumez que le problème de
communication a déjà été résolu,
et qu’il n’est qu’un br...
Concevoir dans
le navigateur
Pour concevoir le meilleur site web
possible, utilisez le meilleur
navigateur du moment, et pas leur
plus petit commun dén...
‣ Choisir votre navigateur de test
‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
 navigateur
‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
 navigateur
‣ Identifier les problèmes plus tôt
 dans...
‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
 navigateur
‣ Identifier les problèmes plus tôt
 dans...
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
non

http://dowebsitesneedtolookexactlythesameineverybrowser.com
Est-ce que les sites web
doivent être vécus
exactement de la même
manière dans tous les
navigateurs?
Est-ce que les sites web
doivent être vécus
exactement de la même
manière dans tous les
navigateurs?
non plus

 http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
Oui, mais…
et IE6?
HTML5/CSS3
dès aujourd’hui
<!DOCTYPE HTML>
Styling

    article, aside, dialog,
    figure, footer, header,
    hgroup, nav, section
    {
    	 display:block;
    }
Styling > IE


 Internet Explorer ne reconnait pas
 les éléments HTML5 sauf s’ils ont été
 créés par JavaScript avant…
Styling > IE


<!--[if lt IE 9]>
<script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js
"></script>
<![endif]-->...
Stylez avec
Modernizr
Modernizr pour identifier les
 capacités du navigateur


<script src="modernizr-1.5.min.js"></script>




                ...
Modernizr pour identifier les
 capacités du navigateur

<html>




                             http://www.modernizr.com/
Modernizr pour identifier les
 capacités du navigateur

<html class="canvas canvastext geolocation
rgba hsla multiplebgs b...
Modernizr pour identifier les
 capacités du navigateur

<html class=”canvas canvastext geolocation
rgba hsla no-multiplebg...
Modernizr pour identifier les
 capacités du navigateur

.multiplebgs div p {
  /* propriétés pour les navigateurs qui
    ...
findmebyip.com
Modernizr > Safari 5




                       http://www. findmebyip.com/
Modernizr > Safari 5




                       http://www. findmebyip.com/
media queries
media query pour cibler le
device de sortie

 @media print {

     /* propriétés pour la
        version imprimable */
 }
media query pour cibler les
plateformes mobiles

 @media only screen
       and (max-device width:480px) {

     /* propri...
media query pour cibler les
plateformes mobiles

 @media only screen
       and (max-device width:480px
       and (orient...
media query pour cibler les
plateformes mobiles

 <link rel="stylesheet"
       href="handheld.css"
       media="only scr...
2010.dconstruct.org
2010.dconstruct.org
2010.dconstruct.org
IE conditional
statements
IE conditional statements




  <!--[if IE]> … <![endif]-->
IE conditional statements


<!--[if gte IE 7]>
  <link rel="stylesheet"
  href="ie7.css"
  media="screen, projection" />
<...
IE conditional statements


<!--[if !IE 6]><!--><link rel="stylesheet"><!--<!
[endif]-->
<!--[if gte IE 7]><link rel="styl...
Universal Internet
Explorer 6 CSS
Universal Internet Explorer 6 CSS




                            Andy Clarke
                            http://forabeaut...
Universal Internet Explorer 6 CSS




<!--[if IE 6]><link rel="stylesheet" /><![endif]-->




                            ...
Universal Internet Explorer 6 CSS


<!--[if IE 6]>
  <link rel="stylesheet"
    href="http://universal-ie6-css.googlecode....
osteofrance.com
osteofrance.com
osteofrance.com/osteopathie
osteofrance.com/osteopathie
Universal Internet Explorer 6 CSS

<!--[if !IE 6]><!-->
  <link rel="stylesheet" href=" … " />
<!--<![endif]-->

<!--[if I...
Le diable est dans
les détails
Soignez la
microcopie
La taille ne fait
   pas tout
Lorsque vous rédigez pour le web, les
petits détails font toute la différence.
Votre microcopie doit guider les
utilisateu...
‣Guider
‣Aider
‣Rassurer
‣Guider
‣Aider
‣Rassurer
‣Stylé et fonctionnel
Soyez fétichiste
avec vos URLs
_cassia_/3990384437
Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là

        http://domaine.com/
Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là

        http://domaine.com...
Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là

        http://domaine.com...
Identifiez les objets primaires de
   votre site internet, et construisez les
   URLs à partir de là

           http://do...
Identifiez les objets primaires de
   votre site internet, et construisez les
   URLs à partir de là

           http://do...
Identifiez les objets primaires de
   votre site internet, et construisez les
   URLs à partir de là

             http://...
‣ Choisissez des mots simples mais
 pertinents;
‣ Choisissez des mots simples mais
 pertinents;
‣ N’utilisez que les abbréviations qui
 ont un sens dans le contexte;
‣ Choisissez des mots simples mais
 pertinents;
‣ N’utilisez que les abbréviations qui
 ont un sens dans le contexte;
‣ Ut...
‣ Choisissez des mots simples mais
 pertinents;
‣ N’utilisez que les abbréviations qui
 ont un sens dans le contexte;
‣ Ut...
Enrichissez avec
des microformats
http://microformats.org
hCard
 hCalendar
rel-license
rel-nofollow
  rel-tag
    XFN
     …
Je donne une présentation
sur le web design le 9 juillet
aux Ateliers Nomades, à
Genève.
<span class="vevent">
  Je donne une<span class="summary">
  présentation sur le web design</span> le
  <abbr class="dtsta...
“My random
¢2 cents worth”
Créez rapidement
quelque chose
7360738@N03/2054277784
Visez l’essentiel
d’abord
35483361@N02/3741956789
Soyez
agile
joiseyshowaa/2402764792
Dansez, chantez,
dessinez, codez
bettermo/539452482
Remettez-vous en
cause
7360738@N03/2054277784/
Inspirez-vous,
mais ne volez pas
batiks/3779699489
Merci.
http://ro.ess.li/nomades
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Web { Design Project } Management
Upcoming SlideShare
Loading in...5
×

Web { Design Project } Management

1,175

Published on

Présentation sur la “prise en charge d'un projet web - ce qui fait la différence” préparée pour les Atelier Nomades à Genève (9 juillet 2010)

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,175
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Web { Design Project } Management"

  1. 1. Web { Design Project } Management* David Roessli cybermedia concepts © Copyright 2010, David Roessli. These slides may not be used without permission.
  2. 2. Web designer
  3. 3. design visuel Web designer
  4. 4. design de l’interface (UI) design visuel Web designer
  5. 5. design de l’interface (UI) design des design visuel interactions (UX) Web designer
  6. 6. design de l’interface (UI) design des design visuel interactions (UX) Web designer design du code
  7. 7. design de l’interface (UI) design des design visuel interactions (UX) Web designer design du code design de l’architecture de l’information
  8. 8. design de l’interface (UI) design des design visuel interactions (UX) Web designer design du code design de l’architecture de l’information design des stratégies de contenu
  9. 9. design de l’interface (UI) design des design visuel interactions (UX) Web designer design du code design de l’architecture de l’information design des stratégies IT design de contenu
  10. 10. design de l’interface (UI) design des design visuel interactions (UX) Web designer design du code design de l’architecture de l’information design design des ou Design? stratégies IT design de contenu
  11. 11. Je fais des sites web
  12. 12. http://cybmed.com http://davidroessli.com/about @roessli
  13. 13. Les choses dont je ne parlerai pas aujourd’hui:
  14. 14. Les sujets qui ne figurent pas à l’agenda: ‣ Systèmes de gestion de projet ‣ Méthodologies de développement ‣ Stratégie de contenu ‣ HTML5, CSS, JavaScript (enfin, juste un peu)
  15. 15. Le web design aujourd’hui* (*) pour moi
  16. 16. Présenter Expliquer Conseiller Analyser Proposer Concevoir Gérer Développer Tester
  17. 17. Présenter Expliquer Conseiller Analyser Proposer Concevoir Gérer Développer Tester
  18. 18. Présenter Expliquer Conseiller Analyser Proposer Concevoir Gérer Développer Tester
  19. 19. Types projets: vierge refonte intégrer
  20. 20. Types projets: vierge refonte intégrer
  21. 21. Contexte Fonction Audience Contenu
  22. 22. rédaction balisage mise en forme comportement
  23. 23. semantics usability accessibility findability
  24. 24. multidisciplinaire
  25. 25. Le contenu avant le design
  26. 26. Faites votre mieux pour: ‣ Comprendre la nature du contenu ‣ Le contenu influence et guide le design ‣ Concevoir avec du vrai contenu ‣ Responsabiliser le client
  27. 27. Lorem ipsum
  28. 28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  29. 29. Lorsque vous utilisez Lorem Ipsum vous assumez que le problème de communication a déjà été résolu, et qu’il n’est qu’un bruit de fond par rapport au problème “plus important” du style visuel.
  30. 30. Concevoir dans le navigateur
  31. 31. Pour concevoir le meilleur site web possible, utilisez le meilleur navigateur du moment, et pas leur plus petit commun dénominateur ou le plus populaire.
  32. 32. ‣ Choisir votre navigateur de test
  33. 33. ‣ Choisir votre navigateur de test ‣ Présentez vos maquettes dans le navigateur
  34. 34. ‣ Choisir votre navigateur de test ‣ Présentez vos maquettes dans le navigateur ‣ Identifier les problèmes plus tôt dans le processus de design
  35. 35. ‣ Choisir votre navigateur de test ‣ Présentez vos maquettes dans le navigateur ‣ Identifier les problèmes plus tôt dans le processus de design ‣ Eviter les remises en cause tardives
  36. 36. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  37. 37. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  38. 38. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  39. 39. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  40. 40. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  41. 41. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
  42. 42. non http://dowebsitesneedtolookexactlythesameineverybrowser.com
  43. 43. Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?
  44. 44. Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?
  45. 45. non plus http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  46. 46. Oui, mais… et IE6?
  47. 47. HTML5/CSS3 dès aujourd’hui
  48. 48. <!DOCTYPE HTML>
  49. 49. Styling article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
  50. 50. Styling > IE Internet Explorer ne reconnait pas les éléments HTML5 sauf s’ils ont été créés par JavaScript avant…
  51. 51. Styling > IE <!--[if lt IE 9]> <script src="http:// html5shiv.googlecode.com/svn/trunk/html5.js "></script> <![endif]--> Remy Sharp http://html5shiv.googlecode.com
  52. 52. Stylez avec Modernizr
  53. 53. Modernizr pour identifier les capacités du navigateur <script src="modernizr-1.5.min.js"></script> http://www.modernizr.com/
  54. 54. Modernizr pour identifier les capacités du navigateur <html> http://www.modernizr.com/
  55. 55. Modernizr pour identifier les capacités du navigateur <html class="canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> http://www.modernizr.com/
  56. 56. Modernizr pour identifier les capacités du navigateur <html class=”canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”> http://www.modernizr.com/
  57. 57. Modernizr pour identifier les capacités du navigateur .multiplebgs div p { /* propriétés pour les navigateurs qui supportent multiple backgrounds */ } .no-multiplebgs div p { /* propriétés alternatives pour ceux qui ne le supportent pas */ } http://www.modernizr.com/
  58. 58. findmebyip.com
  59. 59. Modernizr > Safari 5 http://www. findmebyip.com/
  60. 60. Modernizr > Safari 5 http://www. findmebyip.com/
  61. 61. media queries
  62. 62. media query pour cibler le device de sortie @media print { /* propriétés pour la version imprimable */ }
  63. 63. media query pour cibler les plateformes mobiles @media only screen and (max-device width:480px) { /* propriétés pour ce type d’écran */ }
  64. 64. media query pour cibler les plateformes mobiles @media only screen and (max-device width:480px and (orientation:landscape) { /* propriétés pour ce type d’écran dans cette orientation */ }
  65. 65. media query pour cibler les plateformes mobiles <link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)"/>
  66. 66. 2010.dconstruct.org
  67. 67. 2010.dconstruct.org
  68. 68. 2010.dconstruct.org
  69. 69. IE conditional statements
  70. 70. IE conditional statements <!--[if IE]> … <![endif]-->
  71. 71. IE conditional statements <!--[if gte IE 7]> <link rel="stylesheet" href="ie7.css" media="screen, projection" /> <![endif]-->
  72. 72. IE conditional statements <!--[if !IE 6]><!--><link rel="stylesheet"><!--<! [endif]--> <!--[if gte IE 7]><link rel="stylesheet"><![endif]--> <!--[if IE 8]><link rel="stylesheet"><![endif]--> <!--[if IE 6]><link rel="stylesheet" href="http:// universal-ie6-css.googlecode.com/files/ie6.0.3.css" media="screen, projection" /><![endif]--> <!--[if IE 6]><link rel="stylesheet"><![endif]-->
  73. 73. Universal Internet Explorer 6 CSS
  74. 74. Universal Internet Explorer 6 CSS Andy Clarke http://forabeautifulweb.com/s/239
  75. 75. Universal Internet Explorer 6 CSS <!--[if IE 6]><link rel="stylesheet" /><![endif]--> Andy Clarke http://forabeautifulweb.com/s/239
  76. 76. Universal Internet Explorer 6 CSS <!--[if IE 6]> <link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/ files/ie6.1.1.css" media="screen, projection" /> <![endif]--> Andy Clarke http://forabeautifulweb.com/s/239
  77. 77. osteofrance.com
  78. 78. osteofrance.com
  79. 79. osteofrance.com/osteopathie
  80. 80. osteofrance.com/osteopathie
  81. 81. Universal Internet Explorer 6 CSS <!--[if !IE 6]><!--> <link rel="stylesheet" href=" … " /> <!--<![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/ files/ie6.1.1.css" media="screen, projection" /> <![endif]--> Andy Clarke http://forabeautifulweb.com/s/239
  82. 82. Le diable est dans les détails
  83. 83. Soignez la microcopie
  84. 84. La taille ne fait pas tout
  85. 85. Lorsque vous rédigez pour le web, les petits détails font toute la différence. Votre microcopie doit guider les utilisateurs et le ton doit promouvoir la confiance qu’ils ont en vous.
  86. 86. ‣Guider ‣Aider ‣Rassurer
  87. 87. ‣Guider ‣Aider ‣Rassurer ‣Stylé et fonctionnel
  88. 88. Soyez fétichiste avec vos URLs
  89. 89. _cassia_/3990384437
  90. 90. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là
  91. 91. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/
  92. 92. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/ http://domaine.com/produits/
  93. 93. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/
  94. 94. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/
  95. 95. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/
  96. 96. Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/ Ajoutez du sens et évitez les adresses illisibles.
  97. 97. ‣ Choisissez des mots simples mais pertinents;
  98. 98. ‣ Choisissez des mots simples mais pertinents; ‣ N’utilisez que les abbréviations qui ont un sens dans le contexte;
  99. 99. ‣ Choisissez des mots simples mais pertinents; ‣ N’utilisez que les abbréviations qui ont un sens dans le contexte; ‣ Utilisez des verbes pour les actions;
  100. 100. ‣ Choisissez des mots simples mais pertinents; ‣ N’utilisez que les abbréviations qui ont un sens dans le contexte; ‣ Utilisez des verbes pour les actions; ‣ Prévoyez des redirections pour les typos et pluriels (voire les synonymes).
  101. 101. Enrichissez avec des microformats
  102. 102. http://microformats.org
  103. 103. hCard hCalendar rel-license rel-nofollow rel-tag XFN …
  104. 104. Je donne une présentation sur le web design le 9 juillet aux Ateliers Nomades, à Genève.
  105. 105. <span class="vevent"> Je donne une<span class="summary"> présentation sur le web design</span> le <abbr class="dtstart" title="2010-07-09">9 juillet</abbr> aux <span class="location">Ateliers Nomades, Genève</span>. </span>
  106. 106. “My random ¢2 cents worth”
  107. 107. Créez rapidement quelque chose
  108. 108. 7360738@N03/2054277784
  109. 109. Visez l’essentiel d’abord
  110. 110. 35483361@N02/3741956789
  111. 111. Soyez agile
  112. 112. joiseyshowaa/2402764792
  113. 113. Dansez, chantez, dessinez, codez
  114. 114. bettermo/539452482
  115. 115. Remettez-vous en cause
  116. 116. 7360738@N03/2054277784/
  117. 117. Inspirez-vous, mais ne volez pas
  118. 118. batiks/3779699489
  119. 119. Merci.
  120. 120. http://ro.ess.li/nomades
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×