conception d'interfaces responsive pour le web
DESCRIPTION
Présentation aux professeurs de la TIM du Cégep Ste-Foy sur l'application concrète du responsive.TRANSCRIPT
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.
http://bit.ly/VgtDfo
CONCEPTION
DESIGNINTÉGRATION
?Questions
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
CONCEPTION
La Presse
Wikipedia
Youtube
Dribbble
Mashable
TIM
?Par où commencer?
Ce qu’on sait
CONTENU ACTUEL
MÉDIAS DISPONIBLES
ÉCHÉANCES
BUDGET
COMPÉTITION
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
Ce qu’on planifie
MESSAGE
TECHNOLOGIES
CIBLE
BUT
CONTENU
CONTENU ACTUEL
MÉDIAS DISPONIBLES
ÉCHÉANCES
BUDGET
COMPÉTITION
MESSAGE
TECHNOLOGIES
CIBLE
BUT
CONTENU
CONTENU ≠ TEXTE
DESKTOP FIRST MOBILE FIRST
CONTENT FIRST
CONTENU
FORME
CONTENU
FORME
Plan de page
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 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
Contenu
FORMATION
ProfsGrille de coursProcessus d’admissionContact coordination…
ACCUEIL
«En vedette»Galerie de projets…
“SHORT & SWEET”
PENSER MOBILE
SIMPLIFIER AVANT DE SUPPRIMER
Bâtir un système
CL AIR
FLEXIBLE
SOLIDE
Patterns
bradfrost.github.com/this-is-responsive
Atelier
D E S I G N
À proscrire en 2013
LOREM IPSUM
IPHONE.PSD, IPAD.PSD, DESKTOP.PSD
LOREM IPSUM
960 P X
À faire en 2013
LE MOINS D’IMAGES POSSIBLE
T YPOGRAPHIE
16 P X MINIMUM POUR TEXTE COURANT
“TOUCH-READY ”
OPTIMISATION RETINA
?Par youssé quessé qu’on commence?
Cibler les contraintes
PUBLICITÉ
MEDIAS
CONTENU
T YPO
Isoler les problèmes
HIÉRARCHIE DE CONTENU
NAVIGATION
VISUELS
LOGO
PIED DE PAGE
Inspiration
TRAITEMENT VISUEL
COULEURS
T YPO
T T
Lien
L IEN
Lien
Typographie
?Comment travailler sans avoir la ou les polices installées
typecast.com
Formats
768?
320?
1280?
Polices d’ icônes
Atelier
INTÉGRATION
Prototype HTML
Frameworks CSS
1140 CSS GRID
LESS FRAMEWORK
SKELETON
TWIT TER BOOTSTRAP
…
%
TARGET ÷ CONTEXT = RESULT
Media Queries
Mobile First
Merci!
@_Tristan
@heliomqc
heliom.ca