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.

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
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
11. La Presse
12. Wikipedia
13. Youtube
14. Facebook
15. Twitter
16. Dribbble
17. Mashable
18. Google
19. TIM
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
58. Lien LIEN Lien
59. Typographie
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
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
78. Merci! @_Tristan @heliomqc heliom.ca