![Page 1: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/1.jpg)
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.
![Page 2: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/2.jpg)
http://bit.ly/VgtDfo
![Page 3: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/3.jpg)
![Page 4: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/4.jpg)
![Page 5: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/5.jpg)
CONCEPTION
DESIGNINTÉGRATION
![Page 6: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/6.jpg)
?Questions
![Page 7: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/7.jpg)
F L E X I B L E L AY O U T
C S S 3M E D I A Q U E R I E S
F L E X I B L E G R I D
P R O G R E S S I V E E N H A N C E M E N T
M A X -W I D T H
A D A P T I V E D E S I G N
R E S P O N S I V E D E S I G N
S E O
WEBH T M L 5
M O B I L E
![Page 8: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/8.jpg)
CONCEPTION
![Page 9: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/9.jpg)
![Page 10: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/10.jpg)
![Page 11: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/11.jpg)
La Presse
![Page 12: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/12.jpg)
Wikipedia
![Page 13: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/13.jpg)
Youtube
![Page 14: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/14.jpg)
![Page 15: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/15.jpg)
![Page 16: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/16.jpg)
Dribbble
![Page 17: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/17.jpg)
Mashable
![Page 18: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/18.jpg)
![Page 19: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/19.jpg)
TIM
![Page 20: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/20.jpg)
![Page 21: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/21.jpg)
?Par où commencer?
![Page 22: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/22.jpg)
Ce qu’on sait
![Page 23: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/23.jpg)
CONTENU ACTUEL
MÉDIAS DISPONIBLES
ÉCHÉANCES
BUDGET
COMPÉTITION
![Page 24: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/24.jpg)
AccueilActualités
À l’agenda
Projets des étudiants
FormationAdmission
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
StagesInfos employeurs
International
Témoignages (7)
ATE
Futur étudiant • Employeur
Séquence des stages
Responsables des stages
DiplômésDiplômés (±25)
Nom, Projets, Compétences,
Profil, Forces
Diplômés 2002 à 2012
ContactFormulaire
Coordination
Adresse
![Page 25: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/25.jpg)
Ce qu’on planifie
![Page 26: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/26.jpg)
MESSAGE
TECHNOLOGIES
CIBLE
BUT
CONTENU
![Page 27: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/27.jpg)
CONTENU ACTUEL
MÉDIAS DISPONIBLES
ÉCHÉANCES
BUDGET
COMPÉTITION
![Page 28: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/28.jpg)
MESSAGE
TECHNOLOGIES
CIBLE
BUT
CONTENU
![Page 29: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/29.jpg)
CONTENU ≠ TEXTE
![Page 30: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/30.jpg)
DESKTOP FIRST MOBILE FIRST
CONTENT FIRST
![Page 31: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/31.jpg)
CONTENU
FORME
![Page 32: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/32.jpg)
CONTENU
FORME
![Page 33: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/33.jpg)
Plan de page
![Page 34: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/34.jpg)
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.
![Page 35: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/35.jpg)
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
![Page 36: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/36.jpg)
Contenu
![Page 37: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/37.jpg)
FORMATION
ProfsGrille de coursProcessus d’admissionContact coordination…
ACCUEIL
«En vedette»Galerie de projets…
![Page 38: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/38.jpg)
“SHORT & SWEET”
PENSER MOBILE
SIMPLIFIER AVANT DE SUPPRIMER
![Page 39: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/39.jpg)
Bâtir un système
![Page 40: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/40.jpg)
CL AIR
FLEXIBLE
SOLIDE
![Page 41: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/41.jpg)
Patterns
![Page 42: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/42.jpg)
bradfrost.github.com/this-is-responsive
![Page 43: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/43.jpg)
Atelier
![Page 44: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/44.jpg)
D E S I G N
![Page 45: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/45.jpg)
À proscrire en 2013
![Page 46: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/46.jpg)
LOREM IPSUM
IPHONE.PSD, IPAD.PSD, DESKTOP.PSD
LOREM IPSUM
960 P X
![Page 47: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/47.jpg)
À faire en 2013
![Page 48: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/48.jpg)
LE MOINS D’IMAGES POSSIBLE
T YPOGRAPHIE
16 P X MINIMUM POUR TEXTE COURANT
“TOUCH-READY ”
OPTIMISATION RETINA
![Page 49: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/49.jpg)
?Par youssé quessé qu’on commence?
![Page 50: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/50.jpg)
Cibler les contraintes
![Page 51: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/51.jpg)
PUBLICITÉ
MEDIAS
CONTENU
T YPO
![Page 52: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/52.jpg)
Isoler les problèmes
![Page 53: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/53.jpg)
HIÉRARCHIE DE CONTENU
NAVIGATION
VISUELS
LOGO
PIED DE PAGE
![Page 54: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/54.jpg)
Inspiration
![Page 55: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/55.jpg)
TRAITEMENT VISUEL
COULEURS
T YPO
![Page 56: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/56.jpg)
T T
![Page 57: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/57.jpg)
![Page 58: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/58.jpg)
Lien
L IEN
Lien
![Page 59: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/59.jpg)
Typographie
![Page 60: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/60.jpg)
![Page 61: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/61.jpg)
![Page 62: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/62.jpg)
?Comment travailler sans avoir la ou les polices installées
![Page 63: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/63.jpg)
typecast.com
![Page 64: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/64.jpg)
Formats
![Page 65: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/65.jpg)
768?
320?
1280?
![Page 66: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/66.jpg)
Polices d’ icônes
![Page 67: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/67.jpg)
![Page 68: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/68.jpg)
Atelier
![Page 69: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/69.jpg)
INTÉGRATION
![Page 70: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/70.jpg)
Prototype HTML
![Page 71: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/71.jpg)
Frameworks CSS
![Page 72: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/72.jpg)
1140 CSS GRID
LESS FRAMEWORK
SKELETON
TWIT TER BOOTSTRAP
…
![Page 73: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/73.jpg)
%
![Page 74: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/74.jpg)
TARGET ÷ CONTEXT = RESULT
![Page 75: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/75.jpg)
Media Queries
![Page 76: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/76.jpg)
Mobile First
![Page 77: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/77.jpg)
![Page 78: Conception d'interfaces responsive pour le Web](https://reader033.vdocuments.site/reader033/viewer/2022052601/558a3558d8b42a0f3c8b4760/html5/thumbnails/78.jpg)
Merci!
@_Tristan
@heliomqc
heliom.ca