Conception d'interfaces responsive pour le Web

478 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
478
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception d'interfaces responsive pour le Web

  1. 1. Conception des interfacesresponsive pour le web Explorer les techniques ou méthodes de travail pour la production graphique et explorer les possibilités du responsive. Tristan L’Abbé Designer et Associé chez Heliom
  2. 2. http://bit.ly/VgtDfo
  3. 3. CONCEP TI ONI NT ÉG RA TION D ES I GN
  4. 4. ?Questions
  5. 5. MOBILE F L E X I B L E L AY O U T M A X-W I D T H HTML5 WEB MEDIAQUERIES CSS3 PROGRESSIVEADAPTIVE DESIGN ENHANCEMENT FLEXIBLE GRID SEO RESPONSIVE DESIGN
  6. 6. CO NCEPTION
  7. 7. La Presse
  8. 8. Wikipedia
  9. 9. Youtube
  10. 10. Facebook
  11. 11. Twitter
  12. 12. Dribbble
  13. 13. Mashable
  14. 14. Google
  15. 15. TIM
  16. 16. ? Par oùcommencer?
  17. 17. Ce qu’on sait
  18. 18. B UDG ET É CH ÉA N C E SM ÉD I AS D I SP ON I BL ES CO N TE NU AC TU E L CO MPÉ T I TI O N
  19. 19. Accueil Stages TwitterActualités Infos employeurs FacebookÀ l’agenda International LinkedInProjets des étudiants Témoignages (7) ATEFormation Futur étudiant • EmployeurAdmission Séquence des stagesAvez-vous le profil? Responsables des stagesÉquipeGrille de cours DiplômésÉtudiant d’un jour Diplômés (±25) Nom, Projets, Compétences,Perspectives Profil, ForcesÉtudes universitaires Diplômés 2002 à 2012 Témoignages (2) Programmes universitaires ContactProfessions Formulaire Témoignages (12) Coordination Métiers Adresse
  20. 20. Ce qu’on planifie
  21. 21. BUT CI BL ET EC H N OLOG I ES ME SS AG E CO N TE NU
  22. 22. B UDG ET É CH ÉA N C E SM ÉD I AS D I SP ON I BL ES CO N TE NU AC TU E L CO MPÉ T I TI O N
  23. 23. BUT CI BL ET EC H N OLOG I ES ME SS AG E CO N TE NU
  24. 24. C ONT ENU ≠ T E XT E
  25. 25. DESK TO P F IR S T MO B IL E F I R S T C ON T E N T FI R S T
  26. 26. FOR M EC O NT EN U
  27. 27. C O NT EN U FOR M E
  28. 28. Plan de page
  29. 29. 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.
  30. 30. 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
  31. 31. Contenu
  32. 32. A CCU EIL F O R M AT I O N«En vedette» ProfsGalerie de projets Grille de cours… Processus d’admission Contact coordination …
  33. 33. PEN S E R M O B I LESI MPLIF IER AVA NT DE S U PPR I M ER “ S H O R T & S WE E T ”
  34. 34. Bâtir un système
  35. 35. SO L I DEFLE X I B LE CL AIR
  36. 36. Patterns
  37. 37. bradfrost.github.com/this-is-responsive
  38. 38. Atelier
  39. 39. DESIGN
  40. 40. À proscrire en 2013
  41. 41. 960PX LO R EM I P S UMI PHON E .P SD, I PA D.P S D, DE S K TO P.P S D LO R EM I P S UM
  42. 42. À faire en 2013
  43. 43. T YP O G R A PH I E16 P X M I N IM UM PO U R T E XT E CO U R A N T “TO UC H-R E A DY ” LE M O I N S D’ I MAG ES P O S S I BL E O P TI MIS AT IO N R E TI N A
  44. 44. ? Par yousséquessé qu’oncommence?
  45. 45. Cibler les contraintes
  46. 46. MED I A SPUB LI C I T ÉCO N T ENU T YPO
  47. 47. Isoler les problèmes
  48. 48. LO GO N AVIG ATI O NH I ÉRA R CH I E D E CO N T ENU V I SU E LS PI E D D E PAGE
  49. 49. Inspiration
  50. 50. T YPO CO UL EU R ST RA IT E ME N T V I S UE L
  51. 51. T T
  52. 52. LienLIENLien
  53. 53. Typographie
  54. 54. ?Comment travaillersans avoir la ou les polices installées
  55. 55. typecast.com
  56. 56. Formats
  57. 57. 320 ?768 ?1 28 0 ?
  58. 58. Polices d’ icônes
  59. 59. Atelier
  60. 60. INTÉGRATION
  61. 61. Prototype HTML
  62. 62. Frameworks CSS
  63. 63. TWIT T ER B OOTS TR A P LE SS F RA M E WO R K 1 1 40 C S S GR I D SKE LETO N …
  64. 64. %
  65. 65. TARG ET ÷ CO N T EX T = R ES U LT
  66. 66. Media Queries
  67. 67. Mobile First
  68. 68. Merci!@_Tristan@heliomqcheliom.ca

×