UX / Webdesign/ visual designFévrier 2013a RITAteachingRelax In The Air1
www.relaxintheair.com@mccasal @relaxintheairMC CasalUX STRATEGIST & DESIGNER
relax in the air© Relax In The Air 2013
Relax in The Air is a digital consultancythat thinks and designs user experiencesfor a digital world.Strategy & ResearchBe...
We value our work on digital by thehappiness we bring to the customer.____________________Relax In The Air
Cliquez sur les images qui vont suivre pour accéder aux lienspartage
social networks report
apps/websites reviews
conférences
vidéos
#RITAsawi
ICE BREAKER
end of ICE BREAKER
GLOSSAIRE
accessibilitéDegré auquel un site peut être utilisépar tous les utilisateurs, en incluantceux ayant un handicap.
ADRESSE ip85.4.242.24Une adresse IP (avec IP pour InternetProtocol) est un numéro didentificationqui est attribué à chaque...
adwordsAdWords est le nom du systèmepublicitaire du moteur de rechercheGoogle. Celui-ci affiche des bannièrespublicitaires...
agileLes méthodes agiles sont des groupesde pratiques de développement. Ellespermettent une grande réactivité auxdemandes ...
ASP .netFramework de développement web deMicrosoft qui permet aux développeursde construire des sites dynamiques,des appli...
BACK ENDPartie cachée d’un site et invisible auxvisiteurs. Il inclut entre autresl’information de structure, applicationse...
BANDE PASSANTETaux auquel les data sont transféréesou la quantité de datas autorisées à êtretransférées depuis un hébergem...
Bounce rate / taux de rebondPourcentage dinternautes qui sontentrés sur une page Web et qui ontquitté le site après. Ils n...
breadcrumbLe fil d’Ariane ou chemin de fer est uneaide à la navigation sous forme designalisation de la localisation dulec...
browserLogiciel pour présenter, afficher etconsulter le WorldWide Web.
cacheLes fichiers cache sont ceux qui sontsauvés et stockés par un browser(navigateur) pour rendre la prochainevisite plus...
cloudRessources numériques stockées surdes serveurs distants et permettant unaccès depuis n’importe quel point deconnectio...
http://www.apple.com/icloud/cool link
Wordpress Drupal Joomla Magento Umbraco Typo3cmsFamille de logiciels destinés à laconception et à la mise à jourdynamique ...
cookieTémoin de connection. Il stocke desinformations spécifiques surlutilisateur, comme les préférencesdun site ou le con...
cssOu Cascading Style Sheets (feuille destyle) sont utilisées pour définir le lookand feel d’un site en dehors du codeHTML...
css3CSS3 est divisé en modules dont chacunpermet de gérer séparément lescouleurs, des requêtes médias ouencore des sélecte...
www.css3.mecool link
beta.theexpressiveweb.comcool link
dns /DOMAIN NAME SERVICEC’est un service permettant détablirune correspondance entre une adresseIP et un nom de domaine.
e-commercePour electronic commerce. Acheter ouvendre des produits ou des services viainternet ou tout autre réseauinformat...
embedPermet d’insérer du contenumultimédia ou des formats quinativement ne sont pas supportés parles navigateurs dans des ...
faviconImage de 16x16 pixel qui reprendgénéralement le logo du site dans labarre d’adresse du navigateur.
firewallLogiciel permettant de faire respecterla politique de sécurité d’un réseau. Ildéfinit les types de communicationau...
fixed widthLargeur fixe dans le design d’un site.La largeur reste la même quelque soitla résolution d’écran, la taille dum...
flashLogiciel qui permet la création degraphiques vectoriels et de bitmapanimés par un langage script appeléActionScript.
www.thefwa.comcool link
front endL’opposé du back-end. Ce sont tous lescomposants d’un site que le visiteurpeut voir (pages, images, contenu etc).
gifFormat d’image permettant de fairedes animations sommaires avec desimages en couleurs pleines.http://gifparty.tumblr.com/
google analyticsGoogle Analytics lets you measure youradvertising ROI as well as track yourFlash, video, and social networ...
Great creativeyour websitegoogle fontsCollection de typographies gratuites etcompatibles pour le web.fonts for free on
grid / grilleSérie de lignes horizontales etverticales à espacement régulierservant à rétablir l’ordre dans le chaos.Un ou...
www.gridulator.comcool link
guiGraphical User Interface / Interfaceutilisateur qui permet d’interagir avecdes devices électroniques avec desimages plu...
hosting /hébergementServeur physique sur lequel se trouventles pages d’un site web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
html5C’est la révision majeure de l’HTML.
cool linkwww.thewildernessdowntown.com
jpegFormat d’image compressé pour le web(entre autres)...
jqueryBibliothèque JavaScript qui porte surlinteraction entre JavaScript et HTML,et a pour but de simplifier descommandes ...
www.zensorium.com/tinke/cool link
landing pagePage d’arrivée principale d’un site.
liquid layoutSite dont la largeur est basée sur lepourcentage de la taille de la fenêtre dunavigateur. Le layout du site c...
navigationC’est le système qui permet auxutilisateurs d’un site de se déplacer àl’intérieur de celui-ci.
tralala.comnom de domaineNom par lequel un site internet estidentifié.Le nom de domaine est associé à uneadresse IP.
open sourceCode source d’un programmeinformatique fait pour être utilisablepar le public. Les programmes opensource sont g...
phpLangage de développement adapté auweb et pouvant être «inséré» dans duHTML.
pixelLe pixel, souvent abrégé px, est lunitéde base permettant de mesurer ladéfinition dune image numérique.
pluginUn plug-in est un petit programme quiétend les capacités et fonctionnalitésd’un site sans devoir retravailler tout l...
Format d’image compressé pour le web(entre autres)... et qui permet lestransparences.PNG
prototypageVersion papier ou informatique d’unsite montrant ses fonctionnalités et saforme.
résolutionNombre physique de pixels sur unécran (ex: 1280x1024).
retinaTechnologie développée par Apple quipermet d’afficher les applications enhaute résolution à l’écran (326 dpi).
responsive webdesignC’est une approche ou philosophie quidéfend l’idée d’une grille fluide avecdes colonnes qui s’adaptent...
colly.comcool link
flux rssFichier dont le contenu est produitautomatiquement en fonction desmises à jour d’un site. Les flux RSS sontsouvent...
ruby on railsLangage de programmation opensource avec comme focus la simplicitéet la productivité.
scrumFramework de project managementitératif et incrémental souvent utilisédans l’agile software delopment.
seo / semProcessus pour augmenter la visibilitéd’un site ou page dans les moteurs derecherche via le référencementnaturel.
sharepointPlateforme de développement web deMicrosoft qui permet de développerdes sites axés le management decontenu et de...
templateFichier type utilisé pour créer undesign consistent sur tout le site web.Il sert de base de travail pour d’autresp...
themeTemplates de sites prédéfinis pour unCMS donné et évitant l’étape de designdans un site. Généralement payants.
ui / user interfaceEspace dans lequel l’interaction entreles humains et des machines ou desinterfaces informatiques ont li...
usabilityApproche pour faire des sites faciles àutiliser sans que cela demande descapacités particulières à l’utilisateur.
ux / user experienceCréer des interfaces à haute valeurexpérientielle basées sur l’Affectifversus la Rentabilité.
littlebigdetails.comcool link
safe web fontsArial / HelveticaTimes New Roman / TimesCourier New / CourierVerdanaGeorgiaTrebuchet MSTypographies acceptée...
web standardsCe sont des specificationsrecommandées par le W3C pourstandardiser le design des sites, celadans le but de re...
web app ≠ appHTMLVS Natif
wireframeGuide visuel qui représente lastructure filaire (squelette) d’un site.
wireframes.linowski.cacool link
wireflowCombinaison de wireframe etworkflow. Utilisé pour décrirel’architecture de l’information dans unsite ou une applic...
Upcoming SlideShare
Loading in...5
×

Webdesign, UX et UCD #1

1,884

Published on

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.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,884
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Webdesign, UX et UCD #1"

  1. 1. UX / Webdesign/ visual designFévrier 2013a RITAteachingRelax In The Air1
  2. 2. www.relaxintheair.com@mccasal @relaxintheairMC CasalUX STRATEGIST & DESIGNER
  3. 3. relax in the air© Relax In The Air 2013
  4. 4. Relax in The Air is a digital consultancythat thinks and designs user experiencesfor a digital world.Strategy & ResearchBenchmarking & User ResearchDigital & UX StrategyMulti Platforms Content StrategySocial Media IntegrationAuditTrainingUX & DesignInformation Architecture (IA)User Centered Design (UCD)Wireframing & PrototypingUser Interface Design (UI)Interaction Design (IxD)Digital Branding & Visual Design© Relax In The Air 2013
  5. 5. We value our work on digital by thehappiness we bring to the customer.____________________Relax In The Air
  6. 6. Cliquez sur les images qui vont suivre pour accéder aux lienspartage
  7. 7. social networks report
  8. 8. apps/websites reviews
  9. 9. conférences
  10. 10. vidéos
  11. 11. #RITAsawi
  12. 12. ICE BREAKER
  13. 13. end of ICE BREAKER
  14. 14. GLOSSAIRE
  15. 15. accessibilitéDegré auquel un site peut être utilisépar tous les utilisateurs, en incluantceux ayant un handicap.
  16. 16. ADRESSE ip85.4.242.24Une adresse IP (avec IP pour InternetProtocol) est un numéro didentificationqui est attribué à chaque branchementdappareil à un réseau informatiqueutilisant lInternet Protocol.
  17. 17. adwordsAdWords est le nom du systèmepublicitaire du moteur de rechercheGoogle. Celui-ci affiche des bannièrespublicitaires, qui sont ciblées enfonction des mots-clés que tapelinternautep.
  18. 18. agileLes méthodes agiles sont des groupesde pratiques de développement. Ellespermettent une grande réactivité auxdemandes du clientp.
  19. 19. ASP .netFramework de développement web deMicrosoft qui permet aux développeursde construire des sites dynamiques,des applications web et des webservices.
  20. 20. BACK ENDPartie cachée d’un site et invisible auxvisiteurs. Il inclut entre autresl’information de structure, applicationset le CMS qui contrôle le contenu.
  21. 21. BANDE PASSANTETaux auquel les data sont transféréesou la quantité de datas autorisées à êtretransférées depuis un hébergementweb.
  22. 22. Bounce rate / taux de rebondPourcentage dinternautes qui sontentrés sur une page Web et qui ontquitté le site après. Ils nont vu quuneseule page.
  23. 23. breadcrumbLe fil d’Ariane ou chemin de fer est uneaide à la navigation sous forme designalisation de la localisation dulecteur dans un document.
  24. 24. browserLogiciel pour présenter, afficher etconsulter le WorldWide Web.
  25. 25. cacheLes fichiers cache sont ceux qui sontsauvés et stockés par un browser(navigateur) pour rendre la prochainevisite plus rapide.
  26. 26. cloudRessources numériques stockées surdes serveurs distants et permettant unaccès depuis n’importe quel point deconnection au web.
  27. 27. http://www.apple.com/icloud/cool link
  28. 28. Wordpress Drupal Joomla Magento Umbraco Typo3cmsFamille de logiciels destinés à laconception et à la mise à jourdynamique de sitesWeb oudapplications multimédia.
  29. 29. cookieTémoin de connection. Il stocke desinformations spécifiques surlutilisateur, comme les préférencesdun site ou le contenu dun panierdachat électronique.
  30. 30. cssOu Cascading Style Sheets (feuille destyle) sont utilisées pour définir le lookand feel d’un site en dehors du codeHTML du site.
  31. 31. css3CSS3 est divisé en modules dont chacunpermet de gérer séparément lescouleurs, des requêtes médias ouencore des sélecteurs. Puissant wow!
  32. 32. www.css3.mecool link
  33. 33. beta.theexpressiveweb.comcool link
  34. 34. dns /DOMAIN NAME SERVICEC’est un service permettant détablirune correspondance entre une adresseIP et un nom de domaine.
  35. 35. e-commercePour electronic commerce. Acheter ouvendre des produits ou des services viainternet ou tout autre réseauinformatique.
  36. 36. embedPermet d’insérer du contenumultimédia ou des formats quinativement ne sont pas supportés parles navigateurs dans des pages web.
  37. 37. faviconImage de 16x16 pixel qui reprendgénéralement le logo du site dans labarre d’adresse du navigateur.
  38. 38. firewallLogiciel permettant de faire respecterla politique de sécurité d’un réseau. Ildéfinit les types de communicationautorisés sur ce réseau.
  39. 39. fixed widthLargeur fixe dans le design d’un site.La largeur reste la même quelque soitla résolution d’écran, la taille dumoniteur ou la taille du navigateur.
  40. 40. flashLogiciel qui permet la création degraphiques vectoriels et de bitmapanimés par un langage script appeléActionScript.
  41. 41. www.thefwa.comcool link
  42. 42. front endL’opposé du back-end. Ce sont tous lescomposants d’un site que le visiteurpeut voir (pages, images, contenu etc).
  43. 43. gifFormat d’image permettant de fairedes animations sommaires avec desimages en couleurs pleines.http://gifparty.tumblr.com/
  44. 44. google analyticsGoogle Analytics lets you measure youradvertising ROI as well as track yourFlash, video, and social networkingsites and applications.
  45. 45. Great creativeyour websitegoogle fontsCollection de typographies gratuites etcompatibles pour le web.fonts for free on
  46. 46. grid / grilleSérie de lignes horizontales etverticales à espacement régulierservant à rétablir l’ordre dans le chaos.Un outil puissantissime au service dudesigner.
  47. 47. www.gridulator.comcool link
  48. 48. guiGraphical User Interface / Interfaceutilisateur qui permet d’interagir avecdes devices électroniques avec desimages plutôt qu’avec des commandestexte.
  49. 49. hosting /hébergementServeur physique sur lequel se trouventles pages d’un site web.
  50. 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 duweb", "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:htmlFormat de données conçu pourreprésenter les pages web.
  51. 51. html5C’est la révision majeure de l’HTML.
  52. 52. cool linkwww.thewildernessdowntown.com
  53. 53. jpegFormat d’image compressé pour le web(entre autres)...
  54. 54. jqueryBibliothèque JavaScript qui porte surlinteraction entre JavaScript et HTML,et a pour but de simplifier descommandes communes de JavaScript.
  55. 55. www.zensorium.com/tinke/cool link
  56. 56. landing pagePage d’arrivée principale d’un site.
  57. 57. liquid layoutSite dont la largeur est basée sur lepourcentage de la taille de la fenêtre dunavigateur. Le layout du site change enfonction de la taille du navigateur.
  58. 58. navigationC’est le système qui permet auxutilisateurs d’un site de se déplacer àl’intérieur de celui-ci.
  59. 59. tralala.comnom de domaineNom par lequel un site internet estidentifié.Le nom de domaine est associé à uneadresse IP.
  60. 60. open sourceCode source d’un programmeinformatique fait pour être utilisablepar le public. Les programmes opensource sont généralement gratuits oulow cost et développés par despassionnés souvent bénévoles.
  61. 61. phpLangage de développement adapté auweb et pouvant être «inséré» dans duHTML.
  62. 62. pixelLe pixel, souvent abrégé px, est lunitéde base permettant de mesurer ladéfinition dune image numérique.
  63. 63. pluginUn plug-in est un petit programme quiétend les capacités et fonctionnalitésd’un site sans devoir retravailler tout lecode.
  64. 64. Format d’image compressé pour le web(entre autres)... et qui permet lestransparences.PNG
  65. 65. prototypageVersion papier ou informatique d’unsite montrant ses fonctionnalités et saforme.
  66. 66. résolutionNombre physique de pixels sur unécran (ex: 1280x1024).
  67. 67. retinaTechnologie développée par Apple quipermet d’afficher les applications enhaute résolution à l’écran (326 dpi).
  68. 68. responsive webdesignC’est une approche ou philosophie quidéfend l’idée d’une grille fluide avecdes colonnes qui s’adaptent à l’espacedisponible sur un écran.
  69. 69. colly.comcool link
  70. 70. flux rssFichier dont le contenu est produitautomatiquement en fonction desmises à jour d’un site. Les flux RSS sontsouvent utilisés par les sites dactualitéou les blogs pour présenter lesdernières mises à jour.
  71. 71. ruby on railsLangage de programmation opensource avec comme focus la simplicitéet la productivité.
  72. 72. scrumFramework de project managementitératif et incrémental souvent utilisédans l’agile software delopment.
  73. 73. seo / semProcessus pour augmenter la visibilitéd’un site ou page dans les moteurs derecherche via le référencementnaturel.
  74. 74. sharepointPlateforme de développement web deMicrosoft qui permet de développerdes sites axés le management decontenu et de documents.
  75. 75. templateFichier type utilisé pour créer undesign consistent sur tout le site web.Il sert de base de travail pour d’autrespages.
  76. 76. themeTemplates de sites prédéfinis pour unCMS donné et évitant l’étape de designdans un site. Généralement payants.
  77. 77. ui / user interfaceEspace dans lequel l’interaction entreles humains et des machines ou desinterfaces informatiques ont lieu.
  78. 78. usabilityApproche pour faire des sites faciles àutiliser sans que cela demande descapacités particulières à l’utilisateur.
  79. 79. ux / user experienceCréer des interfaces à haute valeurexpérientielle basées sur l’Affectifversus la Rentabilité.
  80. 80. littlebigdetails.comcool link
  81. 81. safe web fontsArial / HelveticaTimes New Roman / TimesCourier New / CourierVerdanaGeorgiaTrebuchet MSTypographies acceptées par défaut partous les navigateurs et systèmesd’exploitations.
  82. 82. web standardsCe sont des specificationsrecommandées par le W3C pourstandardiser le design des sites, celadans le but de rendre le travail desdesigners et des développeurs plusconsistent sur les différentesplateformes.
  83. 83. web app ≠ appHTMLVS Natif
  84. 84. wireframeGuide visuel qui représente lastructure filaire (squelette) d’un site.
  85. 85. wireframes.linowski.cacool link
  86. 86. wireflowCombinaison de wireframe etworkflow. Utilisé pour décrirel’architecture de l’information dans unsite ou une application.

×