Conception d'interfaces responsive pour le Web

Conception d'interfaces responsive pour le Web

Présentation aux professeurs de la TIM du Cégep Ste-Foy sur l'application concrète du responsive.

0da36eb39e2fe36f1bc689a3736ae26a?s=128

Tristan L'Abbé

January 10, 2013
Tweet

Transcript

  1. Conception des interfaces responsive pour le web Tristan L’Abbé Designer

    et Associé chez Heliom Explorer les techniques ou méthodes de travail pour la production graphique et explorer les possibilités du responsive.
  2. http://bit.ly/VgtDfo

  3. None
  4. None
  5. CONCEPTION DESIGN INTÉGRATION

  6. ? Questions

  7. F LEX IB LE L AYO UT CSS 3 ME

    DI AQ U ER I ES F L E XI BL E G RID PROGRE SSIVE EN HANC EME NT MAX-WI DTH A DA P T IV E D ES I G N R ES PONS IV E D ESIGN S EO WEBH TML 5 M OB IL E
  8. CONCEPTION

  9. None
  10. None
  11. La Presse

  12. Wikipedia

  13. Youtube

  14. Facebook

  15. Twitter

  16. Dribbble

  17. Mashable

  18. Google

  19. TIM

  20. None
  21. ? Par où commencer?

  22. Ce qu’on sait

  23. CONTENU ACTUEL MÉDIAS DISPONIBLES ÉCHÉANCES BUDGET COMPÉTITION

  24. Accueil Actualités À l’agenda Projets des étudiants Formation Admission Avez-vous

    le profil? Équipe Grille de cours Étudiant d’un jour Perspectives Études universitaires Témoignages (2) Programmes universitaires Professions Témoignages (12) Métiers Stages Infos employeurs International Témoignages (7) ATE Futur étudiant • Employeur Séquence des stages Responsables des stages Diplômés Diplômés (±25) Nom, Projets, Compétences, Profil, Forces Diplômés 2002 à 2012 Contact Formulaire Coordination Adresse Twitter Facebook LinkedIn
  25. Ce qu’on planifie

  26. MESSAGE TECHNOLOGIES CIBLE BUT CONTENU

  27. CONTENU ACTUEL MÉDIAS DISPONIBLES ÉCHÉANCES BUDGET COMPÉTITION

  28. MESSAGE TECHNOLOGIES CIBLE BUT CONTENU

  29. CONTENU ≠ TEXTE

  30. DESKTOP FIRST MOBILE FIRST CONTENT FIRST

  31. CONTENU FORME

  32. CONTENU FORME

  33. Plan de page

  34. PAGE Accueil OBJECTIF Encourager les futurs étudiants à s’inscrire par

    la découverte du programme et de ses défis. MESSAGE CLÉ Enseignement de qualité dans le domaines des technologies de l’information. PRIORITÉ 1 Encourager l’étudiant à faire une demande d’admission. PRIORITÉ 2 Proposer des stagiaires de qualité aux employeurs de la région.
  35. PAGE Formation OBJECTIF Présenter la diversité de la formation et

    les multiples défis à relever. MESSAGE CLÉ La formation est variée et actuelle. PRIORITÉ 1 Faciliter la demande d’admission par un processus clair. PRIORITÉ 2 Présenter le collectif d’enseignants
  36. Contenu

  37. FORMATION Profs Grille de cours Processus d’admission Contact coordination …

    ACCUEIL «En vedette» Galerie de projets …
  38. “SHORT & SWEET” PENSER MOBILE SIMPLIFIER AVANT DE SUPPRIMER

  39. Bâtir un système

  40. CLAIR FLEXIBLE SOLIDE

  41. Patterns

  42. bradfrost.github.com/this-is-responsive

  43. Atelier

  44. D E S I G N

  45. À proscrire en 2013

  46. LOREM IPSUM IPHONE.PSD, IPAD.PSD, DESKTOP.PSD LOREM IPSUM 960PX

  47. À faire en 2013

  48. LE MOINS D’IMAGES POSSIBLE TYPOGRAPHIE 16PX MINIMUM POUR TEXTE COURANT

    “TOUCH-READY” OPTIMISATION RETINA
  49. ? Par youssé quessé qu’on commence?

  50. Cibler les contraintes

  51. PUBLICITÉ MEDIAS CONTENU TYPO

  52. Isoler les problèmes

  53. HIÉRARCHIE DE CONTENU NAVIGATION VISUELS LOGO PIED DE PAGE

  54. Inspiration

  55. TRAITEMENT VISUEL COULEURS TYPO

  56. T T

  57. None
  58. Lien LIEN Lien

  59. Typographie

  60. None
  61. None
  62. ? Comment travailler sans avoir la ou les polices installées

  63. typecast.com

  64. Formats

  65. 768? 320? 1280?

  66. Polices d’ icônes

  67. None
  68. Atelier

  69. INTÉGRATION

  70. Prototype HTML

  71. Frameworks CSS

  72. 1140 CSS GRID LESS FRAMEWORK SKELETON TWITTER BOOTSTRAP …

  73. %

  74. TARGET ÷ CONTEXT = RESULT

  75. Media Queries

  76. Mobile First

  77. None
  78. Merci! @_Tristan @heliomqc heliom.ca