Conception des interfacesresponsive pour le web        Explorer les techniques ou méthodes de        travail pour la produ...
http://bit.ly/VgtDfo
CONCEP TI ONI NT ÉG RA TION              D ES I GN
?Questions
MOBILE           F L E X I B L E L AY O U T M A X-W I D T H                        HTML5         WEB              MEDIAQUE...
CO NCEPTION
La Presse
Wikipedia
Youtube
Facebook
Twitter
Dribbble
Mashable
Google
TIM
?  Par oùcommencer?
Ce qu’on sait
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
Accueil                       Stages                         TwitterActualités                    Infos employeurs        ...
Ce qu’on planifie
BUT     CI BL ET EC H N OLOG I ES   ME SS AG E   CO N TE NU
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
BUT     CI BL ET EC H N OLOG I ES   ME SS AG E   CO N TE NU
C ONT ENU ≠ T E XT E
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
FOR M EC O NT EN U
C O NT EN U  FOR M E
Plan de page
PAGE    Accueil   OBJECTIF    Encourager les futurs étudiants à s’inscrire par               la découverte du programme et...
PAGE    Formation   OBJECTIF    Présenter la diversité de la formation et les               multiples défis à relever.MESSA...
Contenu
A CCU EIL            F O R M AT I O N«En vedette»         ProfsGalerie de projets   Grille de cours…                    Pr...
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 ”
Bâtir un système
SO L I DEFLE X I B LE  CL AIR
Patterns
bradfrost.github.com/this-is-responsive
Atelier
DESIGN
À proscrire en 2013
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
À faire en 2013
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 MA...
? Par yousséquessé qu’oncommence?
Cibler les contraintes
MED I A SPUB LI C I T ÉCO N T ENU   T YPO
Isoler les problèmes
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
Inspiration
T YPO      CO UL EU R ST RA IT E ME N T V I S UE L
T T
LienLIENLien
Typographie
?Comment travaillersans avoir la ou les polices installées
typecast.com
Formats
320 ?768 ?1 28 0 ?
Polices d’ icônes
Atelier
INTÉGRATION
Prototype HTML
Frameworks CSS
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           …
%
TARG ET ÷ CO N T EX T = R ES U LT
Media Queries
Mobile First
Merci!@_Tristan@heliomqcheliom.ca
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Conception d'interfaces responsive pour le Web
Prochain SlideShare
Chargement dans…5
×

Conception d'interfaces responsive pour le Web

452 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
452
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
9
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

×