Web { DesignProject } Management*

David Roesslicybermedia concepts

© Copyright 2010, David Roessli. These slides may not be used without permission.

Web designer

Web designer

design visuel

Web designer

design visuel

design de l’interface (UI)

Web designer

design visuel design desinteractions (UX)

design de l’interface (UI)

Web designer

design visuel

design du code

design desinteractions (UX)

design de l’interface (UI)

Web designer

design visuel

design du code

design desinteractions (UX)

design de l’interface (UI)

design del’architecture

de l’information

Web designer

design visuel

design du code

design desinteractions (UX)

design de l’interface (UI)

design del’architecture

de l’informationdesign des stratégies

de contenu

Web designer

design visuel

design du code

design desinteractions (UX)

design de l’interface (UI)

design del’architecture

de l’informationdesign des stratégies

de contenu IT design

Web designer

design visuel

design du code

design desinteractions (UX)

design de l’interface (UI)

design del’architecture

de l’informationdesign des stratégies

de contenu IT design

designou

Design?

Je fais des sites web

http://cybmed.comhttp://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 de contenu

‣HTML5, CSS, JavaScript (enfin, juste

un peu)

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

vierge refonte intégrer

Types projets:

vierge refonte intégrer

Types projets:

Audience

Contexte Fonction

Contenu

mise en forme

rédaction balisage

comportement

accessibility

semantics usability

findability

multidisciplinaire

Le contenu avant le design

‣Comprendre la nature du contenu

‣Le contenu influence et guide le

design

‣Concevoir avec du vrai contenu

‣Responsabiliser le client

Faites votre mieux pour:

Lorem ipsum

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.

Lorem ipsum

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.

Concevoir dansle navigateur

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.

‣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 le processus de design

‣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

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/CSS3dès aujourd’hui

<!DOCTYPE HTML>

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

Styling

Styling > IE

Internet Explorer ne reconnait pas

les éléments HTML5 sauf s’ils ont été

créés par JavaScript avant…

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Styling > IE

Remy Sharphttp://html5shiv.googlecode.com

Stylez avecModernizr

Modernizr pour identifier les

capacités du navigateur

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

http://www.modernizr.com/

Modernizr pour identifier les

capacités du navigateur

http://www.modernizr.com/

<html>

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/

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/

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/

findmebyip.com

http://www. findmebyip.com/

Modernizr > Safari 5

http://www. findmebyip.com/

Modernizr > Safari 5

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étés pour ce type d’écran */}

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 */}

media query pour cibler les

plateformes mobiles

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)"/>

2010.dconstruct.org

2010.dconstruct.org

2010.dconstruct.org

IE conditionalstatements

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

IE conditional statements

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

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]-->

IE conditional statements

Universal Internet Explorer 6 CSS

Universal Internet Explorer 6 CSS

Andy Clarkehttp://forabeautifulweb.com/s/239

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

Universal Internet Explorer 6 CSS

Andy Clarkehttp://forabeautifulweb.com/s/239

<!--[if IE 6]> <link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/ files/ie6.1.1.css" media="screen, projection" /><![endif]-->

Universal Internet Explorer 6 CSS

Andy Clarkehttp://forabeautifulweb.com/s/239

osteofrance.com

osteofrance.com

osteofrance.com/osteopathie

osteofrance.com/osteopathie

<!--[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]-->

Universal Internet Explorer 6 CSS

Andy Clarkehttp://forabeautifulweb.com/s/239

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

utilisateurs et le ton doit promouvoir

la confiance qu’ils ont en vous.

‣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à

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/produits/

http://domaine.com/

Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là

http://domaine.com/produits/http://domaine.com/produit/nom/

http://domaine.com/

Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là

http://domaine.com/produits/http://domaine.com/produit/nom/

http://domaine.com/produit/nom/details/

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/

Identifiez les objets primaires de votre site internet, et construisez les URLs à partir de là

Ajoutez du sens et évitez les adresses illisibles.

http://domaine.com/http://domaine.com/produits/

http://domaine.com/produit/nom/http://domaine.com/produit/nom/details/

‣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;

‣Utilisez des verbes pour les actions;

‣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).

Enrichissez avec des microformats

http://microformats.org

hCardhCalendar

rel-licenserel-nofollow

rel-tagXFN…

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="dtstart" title="2010-07-09">9 juillet</abbr> aux <span class="location">Ateliers Nomades, Genève</span>.</span>

“My random ¢2 cents worth”

Créez rapidementquelque chose

7360738@N03/2054277784

Visez l’essentield’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