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

Facebook

Twitter

Dribbble

Mashable

Google

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

Twitter

Facebook

LinkedIn

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