Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

1. UX / Webdesign
/ visual design
Février 2013
a RITAteaching
Relax In The Air
1

2. www.relaxintheair.com
@mccasal @relaxintheair
MC Casal
UX STRATEGIST & DESIGNER

3. relax in the air
© Relax In The Air 2013

4. Relax in The Air is a digital consultancy
that thinks and designs user experiences
for a digital world.
Strategy & Research
Benchmarking & User Research
Digital & UX Strategy
Multi Platforms Content Strategy
Social Media Integration
Audit
Training
UX & Design
Information Architecture (IA)
User Centered Design (UCD)
Wireframing & Prototyping
User Interface Design (UI)
Interaction Design (IxD)
Digital Branding & Visual Design
© Relax In The Air 2013

5. We value our work on digital by the
happiness we bring to the customer.
____________________
Relax In The Air

6. Cliquez sur les images qui vont suivre pour accéder aux liens
partage

7. social networks report

8. apps/websites reviews

9. conférences

10. vidéos

11. #RITAsawi

12. ICE BREAKER

13. end of ICE BREAKER

14. GLOSSAIRE

15. accessibilité
Degré auquel un site peut être utilisé
par tous les utilisateurs, en incluant
ceux ayant un handicap.

16. ADRESSE ip
85.4.242.24
Une adresse IP (avec IP pour Internet
Protocol) est un numéro d'identification
qui est attribué à chaque branchement
d'appareil à un réseau informatique
utilisant l'Internet Protocol.

17. adwords
AdWords est le nom du système
publicitaire du moteur de recherche
Google. Celui-ci affiche des bannières
publicitaires, qui sont ciblées en
fonction des mots-clés que tape
l'internautep.

18. agile
Les méthodes agiles sont des groupes
de pratiques de développement. Elles
permettent une grande réactivité aux
demandes du clientp.

19. ASP .net
Framework de développement web de
Microsoft qui permet aux développeurs
de construire des sites dynamiques,
des applications web et des web
services.

20. BACK END
Partie cachée d’un site et invisible aux
visiteurs. Il inclut entre autres
l’information de structure, applications
et le CMS qui contrôle le contenu.

21. BANDE PASSANTE
Taux auquel les data sont transférées
ou la quantité de datas autorisées à être
transférées depuis un hébergement
web.

22. Bounce rate / taux de rebond
Pourcentage d'internautes qui sont
entrés sur une page Web et qui ont
quitté le site après. Ils n'ont vu qu'une
seule page.

23. breadcrumb
Le fil d’Ariane ou chemin de fer est une
aide à la navigation sous forme de
signalisation de la localisation du
lecteur dans un document.

24. browser
Logiciel pour présenter, afficher et
consulter le WorldWide Web.

25. cache
Les fichiers cache sont ceux qui sont
sauvés et stockés par un browser
(navigateur) pour rendre la prochaine
visite plus rapide.

26. cloud
Ressources numériques stockées sur
des serveurs distants et permettant un
accès depuis n’importe quel point de
connection au web.

27. http://www.apple.com/icloud/
cool link

28. Wordpress Drupal Joomla Magento Umbraco Typo3
cms
Famille de logiciels destinés à la
conception et à la mise à jour
dynamique de sitesWeb ou
d'applications multimédia.

29. cookie
Témoin de connection. Il stocke des
informations spécifiques sur
l'utilisateur, comme les préférences
d'un site ou le contenu d'un panier
d'achat électronique.

30. css
Ou Cascading Style Sheets (feuille de
style) sont utilisées pour définir le look
and feel d’un site en dehors du code
HTML du site.

31. css3
CSS3 est divisé en modules dont chacun
permet de gérer séparément les
couleurs, des requêtes médias ou
encore des sélecteurs. Puissant wow!

32. www.css3.me
cool link

33. beta.theexpressiveweb.com
cool link

34. dns /DOMAIN NAME SERVICE
C’est un service permettant d'établir
une correspondance entre une adresse
IP et un nom de domaine.

35. e-commerce
Pour electronic commerce. Acheter ou
vendre des produits ou des services via
internet ou tout autre réseau
informatique.

36. embed
Permet d’insérer du contenu
multimédia ou des formats qui
nativement ne sont pas supportés par
les navigateurs dans des pages web.

37. favicon
Image de 16x16 pixel qui reprend
généralement le logo du site dans la
barre d’adresse du navigateur.

38. firewall
Logiciel permettant de faire respecter
la politique de sécurité d’un réseau. Il
définit les types de communication
autorisés sur ce réseau.

39. fixed width
Largeur fixe dans le design d’un site.
La largeur reste la même quelque soit
la résolution d’écran, la taille du
moniteur ou la taille du navigateur.

40. flash
Logiciel qui permet la création de
graphiques vectoriels et de bitmap
animés par un langage script appelé
ActionScript.

41. www.thefwa.com
cool link

42. front end
L’opposé du back-end. Ce sont tous les
composants d’un site que le visiteur
peut voir (pages, images, contenu etc).

43. gif
Format d’image permettant de faire
des animations sommaires avec des
images en couleurs pleines.
http://gifparty.tumblr.com/

44. google analytics
Google Analytics lets you measure your
advertising ROI as well as track your
Flash, video, and social networking
sites and applications.

45. Great creative
your website
google fonts
Collection de typographies gratuites et
compatibles pour le web.
fonts for free on

46. grid / grille
Série de lignes horizontales et
verticales à espacement régulier
servant à rétablir l’ordre dans le chaos.
Un outil puissantissime au service du
designer.

47. www.gridulator.com
cool link

48. gui
Graphical User Interface / Interface
utilisateur qui permet d’interagir avec
des devices électroniques avec des
images plutôt qu’avec des commandes
texte.

49. hosting /hébergement
Serveur physique sur lequel se trouvent
les pages d’un site web.

50. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hypertext Markup Language - Wikipédia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="MediaWiki 1.17wmf1" />
<link rel="alternate" type="application/x-wiki" title="Modifier" href="/w/index.php?title=Hypertext_Markup_Language&amp;action=edit" />
<link rel="edit" title="Modifier" href="/w/index.php?title=Hypertext_Markup_Language&amp;action=edit" />
<link rel="apple-touch-icon" href="http://fr.wikipedia.org/apple-touch-icon.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Wikipédia (fr)" />
<link rel="EditURI" type="application/rsd+xml" href="http://fr.wikipedia.org/w/api.php?action=rsd" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<link rel="alternate" type="application/atom+xml" title="Flux Atom de Wikipédia" href="/w/index.php?title=Sp%C3%A9cial:Modifications_r
%C3%A9centes&amp;feed=atom" />
<link rel="stylesheet" href="http://bits.wikimedia.org/fr.wikipedia.org/load.php?debug=false&amp;lang=fr&amp;modules=mediawiki%21legacy
%21commonPrint%7Cmediawiki%21legacy%21shared%7Cskins%21vector&amp;only=styles&amp;skin=vector" type="text/css" media="all" />
<meta name="ResourceLoaderDynamicStyles" content="" /><link rel="stylesheet" href="http://bits.wikimedia.org/fr.wikipedia.org/load.php?
debug=false&amp;lang=fr&amp;modules=site&amp;only=styles&amp;skin=vector" type="text/css" media="all" />
<style type="text/css" media="all">a.new,#quickbar a.new{color:#ba0000}
/* cache key: frwiki:resourceloader:filter:minify-css:5:f2a9127573a22335c2a9102b208c73e7 */</style>
<script src="http://bits.wikimedia.org/fr.wikipedia.org/load.php?
debug=false&amp;lang=fr&amp;modules=startup&amp;only=scripts&amp;skin=vector" type="text/javascript"></script>
<script type="text/javascript">if ( window.mediaWiki ) {
mediaWiki.config.set({"wgCanonicalNamespace": "", "wgCanonicalSpecialPageName": false, "wgNamespaceNumber": 0, "wgPageName":
"Hypertext_Markup_Language", "wgTitle": "Hypertext Markup Language", "wgAction": "view", "wgArticleId": 1386, "wgIsArticle": true,
"wgUserName": null, "wgUserGroups": ["*"], "wgCurRevisionId": 68371494, "wgCategories": ["Portail:Informatique/Articles liés", "Standard du
web", "Codage du texte", "SGML", "HTML", "Format ouvert", "Protocole réseau sur la couche présentation", "Bon article en ukrainien"],
"wgBreakFrames": false, "wgRestrictionEdit": [], "wgRestrictionMove": [], "wgSearchNamespaces": [0], "wgVectorEnabledModules":
{"collapsiblenav": true, "collapsibletabs": true, "editwarning": true, "expandablesearch": false, "footercleanup": false,
"sectioneditlinks": false, "simplesearch": true, "experiments": true}, "wgWikiEditorEnabledModules": {"toolbar": true, "dialogs": true,
"templateEditor": false, "templates": false, "addMediaWizard": false, "preview": false, "previewDialog": false, "publish": false, "toc":
false}, "Geo": {"city": "", "country": ""}, "wgNoticeProject": "wikipedia"});
}
</script>
<style type="text/css">/*<![CDATA[*/
.source-html4strict {line-height: normal;}
.source-html4strict li, .source-html4strict pre {
line-height: normal; border: 0px none white;
}
/**
* GeSHi Dynamically Generated Stylesheet
* --------------------------------------
* Dynamically generated stylesheet for html4strict
* CSS class: source-html4strict, CSS id:
html
Format de données conçu pour
représenter les pages web.

51. html5
C’est la révision majeure de l’HTML.

52. cool link
www.thewildernessdowntown.com

53. jpeg
Format d’image compressé pour le web
(entre autres)...

54. jquery
Bibliothèque JavaScript qui porte sur
l'interaction entre JavaScript et HTML,
et a pour but de simplifier des
commandes communes de JavaScript.

55. www.zensorium.com/tinke/
cool link

56. landing page
Page d’arrivée principale d’un site.

57. liquid layout
Site dont la largeur est basée sur le
pourcentage de la taille de la fenêtre du
navigateur. Le layout du site change en
fonction de la taille du navigateur.

58. navigation
C’est le système qui permet aux
utilisateurs d’un site de se déplacer à
l’intérieur de celui-ci.

59. tralala.com
nom de domaine
Nom par lequel un site internet est
identifié.
Le nom de domaine est associé à une
adresse IP.

60. open source
Code source d’un programme
informatique fait pour être utilisable
par le public. Les programmes open
source sont généralement gratuits ou
low cost et développés par des
passionnés souvent bénévoles.

61. php
Langage de développement adapté au
web et pouvant être «inséré» dans du
HTML.

62. pixel
Le pixel, souvent abrégé px, est l'unité
de base permettant de mesurer la
définition d'une image numérique.

63. plugin
Un plug-in est un petit programme qui
étend les capacités et fonctionnalités
d’un site sans devoir retravailler tout le
code.

64. Format d’image compressé pour le web
(entre autres)... et qui permet les
transparences.
PNG

65. prototypage
Version papier ou informatique d’un
site montrant ses fonctionnalités et sa
forme.

66. résolution
Nombre physique de pixels sur un
écran (ex: 1280x1024).

67. retina
Technologie développée par Apple qui
permet d’afficher les applications en
haute résolution à l’écran (326 dpi).

68. responsive webdesign
C’est une approche ou philosophie qui
défend l’idée d’une grille fluide avec
des colonnes qui s’adaptent à l’espace
disponible sur un écran.

69. colly.com
cool link

70. flux rss
Fichier dont le contenu est produit
automatiquement en fonction des
mises à jour d’un site. Les flux RSS sont
souvent utilisés par les sites d'actualité
ou les blogs pour présenter les
dernières mises à jour.

71. ruby on rails
Langage de programmation open
source avec comme focus la simplicité
et la productivité.

72. scrum
Framework de project management
itératif et incrémental souvent utilisé
dans l’agile software delopment.

73. seo / sem
Processus pour augmenter la visibilité
d’un site ou page dans les moteurs de
recherche via le référencement
naturel.

74. sharepoint
Plateforme de développement web de
Microsoft qui permet de développer
des sites axés le management de
contenu et de documents.

75. template
Fichier type utilisé pour créer un
design consistent sur tout le site web.
Il sert de base de travail pour d’autres
pages.

76. theme
Templates de sites prédéfinis pour un
CMS donné et évitant l’étape de design
dans un site. Généralement payants.

77. ui / user interface
Espace dans lequel l’interaction entre
les humains et des machines ou des
interfaces informatiques ont lieu.

78. usability
Approche pour faire des sites faciles à
utiliser sans que cela demande des
capacités particulières à l’utilisateur.

79. ux / user experience
Créer des interfaces à haute valeur
expérientielle basées sur l’Affectif
versus la Rentabilité.

80. littlebigdetails.com
cool link

81. safe web fonts
Arial / Helvetica
Times New Roman / Times
Courier New / Courier
Verdana
Georgia
Trebuchet MS
Typographies acceptées par défaut par
tous les navigateurs et systèmes
d’exploitations.

82. web standards
Ce sont des specifications
recommandées par le W3C pour
standardiser le design des sites, cela
dans le but de rendre le travail des
designers et des développeurs plus
consistent sur les différentes
plateformes.

83. web app ≠ app
HTMLVS Natif

84. wireframe
Guide visuel qui représente la
structure filaire (squelette) d’un site.

85. wireframes.linowski.ca
cool link

86. wireflow
Combinaison de wireframe et
workflow. Utilisé pour décrire
l’architecture de l’information dans un
site ou une application.