• Save
Webdesign, UX et UCD #4
Upcoming SlideShare
Loading in...5
×
 

Webdesign, UX et UCD #4

on

  • 1,022 views

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

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.

Statistics

Views

Total Views
1,022
Views on SlideShare
1,020
Embed Views
2

Actions

Likes
5
Downloads
8
Comments
0

1 Embed 2

http://visual3d.fr 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webdesign, UX et UCD #4 Webdesign, UX et UCD #4 Presentation Transcript

  • Février 2013a RITAteachingRelax In The Air4UX / Webdesign/ visual design
  • lois de la gestalt
  • most powerful toolEven more than Arnold
  • “C’est une théorie, une école de pensée, qui étudiecomment l’être humain perçoit les choses qui l’entourent.Les lois de la Gestalt rendent claires les questions dedistribution des éléments dans l’espace, quand et commentgrouper des objets... etc.Quand vous connaîtrez ces lois, tout deviendra simplecomme un croque-monsieur.”MC casal
  • psychologieObjectivité VS SubjectivitéGeorge What else?
  • psychologieLes lois de la Gestalt sont innéesRio the movie
  • • distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• ClôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Les éléments sont perçus autant comme desfigures (éléments distincts) que comme fond(background ou paysage sur lequel repose lafigure)distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Processus vital pour l’humain etprobablement sa base de lévolution dans ladétection des menaces.distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Prioriser nos yeux pour ne pas ignorerquelque chose de proximité immédiate etd’importance.organiser ce que nous voyons par la façondont chaque objet se rapporte à dautres.distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesignAide à distinguer le contenu de la structure dansun milieu à 2 dimensions.Un concepteur peut utiliser un grand nombre demécanismes visuels et des traitements de styleafin de communiquer des indices importants pourétablir des relations figure-fond.
  • webdesign www.duoh.com
  • des choses qui sont similaires sont perçuescomme étant plus liées que les choses quisont dissemblables.similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • similitude decouleurtailleformetextureorientation...similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • peu de cohérencesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • exploiter la taillesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • similitude de couleur /fortesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns aux autres
  • webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’il voit
  • cette règle peut s’appliquer aux liens sur unepage, cela permet alors à l’utilisateur derapidement identifier les zones cliquablessoit par la couleur soit par une différence deforme, soit par un soulignement.similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • comportement cohérentuxmag.com
  • “Ne croyez pas que l’intérêt des fondamentauxconsiste à conserver le design simpliste.Leur but est de s’ouvrir, grâce à leur maîtrise,plus largement à des subtilités qui se trouventau-delà.”anyone
  • les choses qui sont proches les unes desautres sont perçues comme étant plus liéesque les choses qui sont plus espacées.proximitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Ces éléments sont perçuscomme un groupe et donc enrelation les uns avec les autres.On perçoit deux groupes etcomprenons qu’il y a desdifférences entre eux.proximitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Ces groupes sont séparés par lacouleur.La proximité reste le signal dedistinction le plus fort.proximité + similaritéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à exploiter dans une situation X
  • les éléments qui sont reliés par despropriétés visuelles uniformes sont perçuscomme étant plus liés que les éléments qui nesont pas connectés.connectivité uniformeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Même si la proximité, la taille et la couleur sont lesmêmes, les figures entourées paraissent plus liéesque les autres.connectivité uniformeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesign
  • connectivité?Y a une drôled’odeur...Ouhla ça vasentir. Crotte.Me sens pasbien...
  • lignes de connectionOuhla ça vasentir. Crotte.Y a une drôled’odeur...Me sens pasbien...
  • des éléments disposés sur une ligne ou unecourbe sont perçus comme étant plus liés quedes éléments séparés.bonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Le fait que les mots dans ce paragraphe soientsur une ligne nous aide à comprendre quilssont liés les uns aux autres et par conséquentqu’ils forment une phrase... (cqfd)bonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Plus facile à lire car il suggèreune ligne continue.Nombre defollowerssur TwitterL’information est plus difficile àdiscerner.Max Anne Paul Otto Max AnnePaul Ottobonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • bonne continuité unitinteractive.com
  • Use the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use therid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use therid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use the
  • jlern.combons usagesProximité, connectivité uniforme et bonnecontinuité sont des fondamentaux de la Gestalt. Lesprincipes de la Gestalt doivent être utilisés commemécanisme de base, mais la conception doittoujours être élégante et invisible.
  • les objets tendent à apparaître groupéslorsqu’ils présentent un mouvement dans lemême sens, avec la même vitesse.destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • destin communVous et les autres conducteurs qui allez dans lemême sens, êtes liés par un sort commun etcollectif (façon de parler...)
  • destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
  • Les humains sont programmés pourreconnaître les mouvements contrastés plusfacilement et fortement que la couleur, lecontraste, la taille ou tout autre stimulivisuel.destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesignerIl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Comment?
  • En vous inscrivant,vous profiterez detous les avantagesde la plateformeEn vous donnant,vous faciliterez ledéveloppement duproduitSign indonnezSlide-out menudestin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • webdesigner serialcut.com
  • webdesigner serialcut.com
  • webdesigner serialcut.com
  • Lorsque l’humain regarde un arrangementcomplexe déléments individuels, il a tendancea ré-interpréter l’ensemble pour créer un seulmotif reconnaissable.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Nous n’avons presque jamais un tableaucomplet de ce qui nous entoure. le principe defermeture est alors au cœur de presquetoutes les décisions que nous prenons.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • pour utiliser la clôture de façon efficace,vous devez simplifier la fermeture de lafigure.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • VIIBLESinVIIBLESIci la clôture est facilité. Lemessage est clair.Cet exemple demande tropd’effort et l’information risqued’être perdue.clôtureGestaltRelax In The AirexempleFévrier 2013Copyright© 2013 Relax In The Air
  • exemple
  • conclusionGestalt
  • • structure de la page• taille des éléments• liens entre les éléments• équilibre entre les éléments• espaces• comportement et construction de la grille• rythme• couleurs• profondeur• texturesGestaltRelax In The AirconclusionFévrier 2013Copyright© 2013 Relax In The Air
  • GestaltRelax In The Airconclusionfaciliter la lecture, la compréhension etl’accès à l’information à l’utilisateur.Février 2013Copyright© 2013 Relax In The Air
  • liens utileswww.bestwebgallery.comwww.boagworld.comwww.thinkvitamin.comwww.webdesignfile.com
  • fondamentaux
  • ____________________David AakerA company’s brand is the primary source of itscompetitive advantage and a valuablestrategic advantage.
  • the visual interface is your brand
  • pixel
  • Pictureelement
  • This is a pixel
  • résolution
  • Travailler pour le plus grand nombre.S’adapter aux statistiques de votre marché.La norme l’emporte.Rentrer dans le moule.N’imposez pas votre résolution d’écran.résolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Pixels par pouce / DPIrésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • standard web: 72dpi / 96dpiimpression: 300dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • retina326 dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 800x6001024x7681280x960résolutionfondamentaux1024x736Relax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • basse résolution
  • haute résolution
  • taille
  • taille____________________Anne-Sophie FradierLa page web a des dimensions et un formatimprévisibles, une longueur illimitée.Elle est interprétée par le navigateur etsoumise au contrôle de l’utilisateur.
  • 960< de droite à gauche >taillefondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • < Navigation >< Call to action >< Informations >960Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  • Mon site du bichon frisé960 pixels That’s right baby!Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  • Mon site du bichon frisé+ que 960 pixels Bichon frisé looks really freakyRelax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  • vimeo.com/50071857cool link
  • touch / mobile
  • 44px
  • 44px
  • 320 X 480iphone 3
  • 640 X 960iphone 4
  • RETINAATTENTION à LA TAILLE DES TYPOS
  • 640 x 1136en 326 dpi
  • iPhone 4640 x 960iPhone 5 HD640 x 1136
  • • Exporter en double résolution (72dpi+326dpi)• travaillez sur le plus grand canevas• travaillez pour la lisibilité• testez avec des images dans la bibliothèque• utilisez de l’adaptatif pour les différentssmartphones• utilisez des medias queriesretinatouch / mobilefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • TESTEZTESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ
  • ligne de flottaison
  • Limite de visibilité verticaleCall to action.Information importantes.Montrer qu’il y a une vie sous la ligne deflottaison.ligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Mon site de Angelina JolieFeels like something is missingligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Mon sitedeAngelinaJolie600plus ou moins>>Je suis invisible si je ne scroll pasligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • grille
  • ____________________Anne-Sophie FradierLe choix de la grille dépend du contenu quel’on doit organiser.
  • Pattern de lignes horizontales et verticalesrégulièrement espacéesPlus beau > Plus lisible > Plus facile d’utilisationgrillefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • Organiser visuellement.organise l’espace à l’intérieur du design.Faciliter l’usability et la lecture.grillefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • grillefondameNtauxRelax In The AircolonneFévrier 2013Copyright© 2013 Relax In The Air
  • 3colonnes
  • 30colonnes
  • grillefondameNtauxRelax In The AirmargesFévrier 2013Copyright© 2013 Relax In The Air
  • grillefondameNtauxRelax In The AirgouttièreFévrier 2013Copyright© 2013 Relax In The Air
  • grillebases graphiqueschamps
  • http://methodandcraft.com/videos/extensible-baseline-grids
  • grillebases graphiquesoutil
  • liens utileshttp://madebymany.com/blog/the-tyranny-of-the-gridhttp://www.slideshare.net/Leursism/grid-systemshttp://www.slideshare.net/markboultondesign/designing-grid-systems-media2010
  • anatomie de page
  • ____________________MC CasalLe rôle du designer est de comprendre leshabitudes de l’utilisateur et les conventions.
  • anatomie de pagefondameNtauxRelax In The Air1.2.3.4.5.6.7.1. Header2. Navigation3. Focus4. Body / Contenu5. Sidebar6. Footer7. Fond de page /BackgroundFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air1.Reste relativement constanttout au long du site.Le code du header contientdu code vital pour le SEO.Sert à identifier la marquerapidement.headerFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air2.Doit se trouver au dessus dela ligne de flottaison.Doit rester constante dansson aspect et sescomportements.navigationFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air3.Zone d’attraction qui doitêtre perçue rapidement.Crée la hiérarchie dans lapage.Plus fort en couleur ettypographie.focusFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air4.Permet des entrées multiplessur le site.Doit être une zone très lisibleet organisée.Zone de scan de l’oeil.bodyFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air5.Zone d’informationssecondaires.Espace publicitaire.Ne doit visuellement pasprendre le dessus sur le restede la page.sidebarFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The Air6.Utile pour le SEO.Peut-être utilisé commesitemap ou toutesinformations disponible toutau long du site.Zone de copyright.footerFévrier 2013Copyright© 2013 Relax In The Air
  • anatomie de pagefondameNtauxRelax In The AirSeptembre 2012Copyright© 2012 Relax In The AirCréer de la profondeur et dela dimension.Apporte de la richesse entexture.Agrandit l’image de lamarque au-delà des limitesde la page.background7.