Tweet
Tweet

Slide 1

Slide 1 text

ISO { redesign } project David Roessli cybermedia concepts © Copyright 2011, David Roessli. These slides are confidential and may not be used without permission.

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Web designer

Slide 4

Slide 4 text

Web designer design visuel

Slide 5

Slide 5 text

Web designer design visuel design de l’interface (UI)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information

Slide 9

Slide 9 text

Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu

Slide 10

Slide 10 text

Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu IT design

Slide 11

Slide 11 text

Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu IT design design ou Design?

Slide 12

Slide 12 text

Je fais des sites web

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

www.xstrata.com

Slide 15

Slide 15 text

www.xstrata.com

Slide 16

Slide 16 text

www.xstrata.com

Slide 17

Slide 17 text

www.xstrata.com

Slide 18

Slide 18 text

www.xstrata.com

Slide 19

Slide 19 text

www.xstrata.com

Slide 20

Slide 20 text

www.cgmplc.com

Slide 21

Slide 21 text

www.osteofrance.com

Slide 22

Slide 22 text

www.osteofrance.com

Slide 23

Slide 23 text

www.osteofrance.com

Slide 24

Slide 24 text

www.amberpeaks.com

Slide 25

Slide 25 text

www.amberpeaks.com

Slide 26

Slide 26 text

www.amberpeaks.com

Slide 27

Slide 27 text

www.favre-guth.ch

Slide 28

Slide 28 text

www.favre-guth.ch

Slide 29

Slide 29 text

www.favre-guth.ch

Slide 30

Slide 30 text

www.favre-guth.ch

Slide 31

Slide 31 text

www.favre-guth.ch

Slide 32

Slide 32 text

www.favre-guth.ch

Slide 33

Slide 33 text

www.cerutti.net

Slide 34

Slide 34 text

www.cerutti.net

Slide 35

Slide 35 text

www.celine-artiste.org

Slide 36

Slide 36 text

www.celine-artiste.org

Slide 37

Slide 37 text

www.celine-artiste.org

Slide 38

Slide 38 text

www.groupesida.ch

Slide 39

Slide 39 text

www.groupesida.ch

Slide 40

Slide 40 text

www.groupesida.ch

Slide 41

Slide 41 text

personal projects

Slide 42

Slide 42 text

personal projects

Slide 43

Slide 43 text

http://cybmed.com http://davidroessli.com/about @roessli

Slide 44

Slide 44 text

www.iso.org

Slide 45

Slide 45 text

www.iso.org

Slide 46

Slide 46 text

‣Concevoir une nouvelle ligne graphique www.iso.org

Slide 47

Slide 47 text

‣Concevoir une nouvelle ligne graphique ‣Optimiser l’expérience du visiteur www.iso.org

Slide 48

Slide 48 text

‣Concevoir une nouvelle ligne graphique ‣Optimiser l’expérience du visiteur ‣Etablir une stratégie de contenu www.iso.org

Slide 49

Slide 49 text

Nouveau design visuel

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

‣Comprendre la nature du contenu ‣Le contenu influence et guide le design ‣Concevoir avec du vrai contenu ‣Le client fait partie intégrante processus de design Nouveau design visuel

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Andy Clarke

Slide 54

Slide 54 text

Andy Clarke

Slide 55

Slide 55 text

Andy Clarke

Slide 56

Slide 56 text

lanyrd.com/people/malarkey/sessions/

Slide 57

Slide 57 text

lanyrd.com/people/malarkey/sessions/

Slide 58

Slide 58 text

http://stuffandnonsense.co.uk/ http://forabeautifulweb.com/ @Malarkey

Slide 59

Slide 59 text

stuffandnonsense.co.uk

Slide 60

Slide 60 text

stuffandnonsense.co.uk

Slide 61

Slide 61 text

stuffandnonsense.co.uk

Slide 62

Slide 62 text

forabeautifulweb.com

Slide 63

Slide 63 text

www.xstrata.com

Slide 64

Slide 64 text

www.newint.org

Slide 65

Slide 65 text

www.newint.org

Slide 66

Slide 66 text

www.newint.org

Slide 67

Slide 67 text

www.newint.org

Slide 68

Slide 68 text

www.newint.org

Slide 69

Slide 69 text

www.cannybill.com

Slide 70

Slide 70 text

www.cannybill.com

Slide 71

Slide 71 text

www.cannybill.com

Slide 72

Slide 72 text

www.mobi-cart.com

Slide 73

Slide 73 text

www.mobi-cart.com

Slide 74

Slide 74 text

www.mobi-cart.com

Slide 75

Slide 75 text

www.caerwysview.net

Slide 76

Slide 76 text

www.caerwysview.net

Slide 77

Slide 77 text

www.caerwysview.net

Slide 78

Slide 78 text

Stratégie de contenu

Slide 79

Slide 79 text

“There’s really only one central principle of good content: it should be appropriate for your business, for your users, and for its context. Appropriate in its method of delivery, in its style and structure, and above all in its substance.” – Erin Kissane @kissane

Slide 80

Slide 80 text

‣Le contenu est adéquat pour un utilisateur lorsqu’il lui permet d’atteindre ses buts. Stratégie de contenu

Slide 81

Slide 81 text

‣Le contenu est parfaitement adéquat quand l’utilisateur se sent génial, après avoir trouvé exactement ce dont il avait besoin, au moment où il en avait besoin, et sous la forme requise. Stratégie de contenu

Slide 82

Slide 82 text

‣Le contenu est adéquat pour votre entreprise lorsqu’il vous permet d’atteindre vos buts commerciaux d’une manière durable. Stratégie de contenu

Slide 83

Slide 83 text

‣utile ‣centré sur l’utilisateur ‣clair ‣consistent ‣concis ‣maintenu En plus d’être adéquat un bon contenu doit être,

Slide 84

Slide 84 text

Le diable est dans les détails

Slide 85

Slide 85 text

La passion du travail bien fait

Slide 86

Slide 86 text

Audience Contexte Fonction Contenu

Slide 87

Slide 87 text

mise en forme rédaction balisage comportement

Slide 88

Slide 88 text

accessibilité sémantique fonctionnalité ndability

Slide 89

Slide 89 text

web standards accessibilité design visuellement engageant simple fonctionnel attrayant technologies appropriées

Slide 90

Slide 90 text

On fait ce qu’on fait, parce qu’on aime ce qu’on fait

Slide 91

Slide 91 text

Concevoir dans le navigateur

Slide 92

Slide 92 text

Utiliser le meilleur navigateur du moment pour concevoir le meilleur site web possible, et pas leur plus petit commun dénominateur ou le plus populaire.

Slide 93

Slide 93 text

‣Présenter les maquettes dans le navigateur

Slide 94

Slide 94 text

‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design

Slide 95

Slide 95 text

‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design ‣Eviter les remises en cause tardives

Slide 96

Slide 96 text

‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design ‣Eviter les remises en cause tardives ‣Cycles de design plus courts

Slide 97

Slide 97 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 98

Slide 98 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 99

Slide 99 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 100

Slide 100 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 101

Slide 101 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 102

Slide 102 text

Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?

Slide 103

Slide 103 text

non http://dowebsitesneedtolookexactlythesameineverybrowser.com

Slide 104

Slide 104 text

Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?

Slide 105

Slide 105 text

Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?

Slide 106

Slide 106 text

non plus http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Slide 107

Slide 107 text

Soigner la microcopie

Slide 108

Slide 108 text

La taille ne fait pas tout

Slide 109

Slide 109 text

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.

Slide 110

Slide 110 text

‣Guider ‣Aider ‣Rassurer

Slide 111

Slide 111 text

‣Guider ‣Aider ‣Rassurer ‣Stylé et fonctionnel

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

Enrichir avec des microformats

Slide 119

Slide 119 text

http://microformats.org

Slide 120

Slide 120 text

hCard hCalendar rel-license rel-nofollow rel-tag XFN …

Slide 121

Slide 121 text

Je donne une présentation sur le web design le 31 mars à l’ISO, à Genève.

Slide 122

Slide 122 text

Je donne une présentation sur le web design le 31 mars à l’ ISO, à Genève.

Slide 123

Slide 123 text

Etre fétichiste avec vos URLs

Slide 124

Slide 124 text

_cassia_/3990384437

Slide 125

Slide 125 text

Identifier les objets primaires du site web, et construire les URLs à partir de là

Slide 126

Slide 126 text

http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là

Slide 127

Slide 127 text

http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/

Slide 128

Slide 128 text

http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/ http://domaine.com/produit/nom/

Slide 129

Slide 129 text

http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/

Slide 130

Slide 130 text

Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/

Slide 131

Slide 131 text

Identifier les objets primaires du site web, et construire 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/

Slide 132

Slide 132 text

‣Choisir des mots simples mais pertinents;

Slide 133

Slide 133 text

‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte;

Slide 134

Slide 134 text

‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte; ‣Utiliser des verbes pour les actions;

Slide 135

Slide 135 text

‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte; ‣Utiliser des verbes pour les actions; ‣Prévoir des redirections pour les typos et pluriels (voire les synonymes).

Slide 136

Slide 136 text

‣Grande expérience du web ‣Expertise en HTML, CSS et JavaScript ‣Approche flexible et agile ‣Collaboration proche et intense ‣Un soin maniaque des détails Ce que nous vous offrons

Slide 137

Slide 137 text

31 mars 2011 http://ro.ess.li/talk/iso

Slide 138

Slide 138 text

No content