Web site pattern& le design en mode solution
3règles de mon
manifeste
10Web site patterns
Être designer ne se réduit pas
à être un spécialiste de l’esthétique.
C’est un spécialiste en résolution de problèmes
de communication.
La couleur
Banane Féminin
RafraîchissantÉcologique
La Typographie
Classique
Retro vintageRococo
La photographie
Alfred Eisenstaedt
Eddie Adams, The Associated Press
La composition
Piet Mondrian Anna Blume, Dichtungen, 1919
C’est un spécialiste en résolution de problèmes
de communication.
C’est un spécialiste en résolution de problèmes
de communication.
Sans problèmes, il ne peut y avoir
de solutions.
1 Il faut trouver les bons
PROBLÈMESafin d’avoir les bonnes
SOLUTIONS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ?
Quelle est l’influence du lorem ipsum sur le travail
de conception ?
La Typographie
Lorem
Dolor AmetIpsum
La photographie
Alfred Eisenstaedt
Eddie Adams, The Associated Press
La composition
Piet Mondrian Anna Blume, Dichtungen, 1919
Lorem ipsum dolor sit amet, consectetur adipiscing elit ?
« Je vais ajuster les textes en fonction
du design. »
« Je vais pouvoir changer les textes dans le CMS. »
« Je vais remettre les textes lorsqu’ils seront finaux. »
2Parlez-vous
& défiez-vous.La communication
donne toujours de meilleurs résultats.
Designers, rédacteurs, concepteurs et clients,
vous devez trouver les problèmes de communication à résoudre.
Designers
Intégrateurs
UX / UI
InfographistesPhotographes
Créateurs de contenu
Rédacteurs
Concepteurs
ClientsStratèges
La conception
3Être
TENDANCE c’est bien.
Être INTELLIGENT
c’est mieux.
Couleur Typographie
Photo Image de marque
Technologie
contenu &
composition
Les objectifsLa clientèle
La nature des textesLa longueur des textes
La navigationLa composition
Navigation principal
Navigation secondaire
Titre de la pageLorem ipsum
le ty
pe
class
ique
• Versatile• Efficace• Fonctionnel• Rassurant
Des règles qui orientent la création d’un projet.
4,473,900+ articles*en anglais seulement
http://en.wikipedia.org/wiki/Wikipedia:Size_of_Wikipedia
Comment mettre en page une quantité phénoménale d’articles de natures différentes ?
• Grille liquide – Parfait pour toutes les résolutions d’écran
• Majoritairement texte • Images à l’appui• Navigation : Moteur de recherche
et hyperliens• Style graphique simple
Comment expliquer un concept ou une idée ?
• 100 % de l’écran• Navigation progressive• Textes courts• Débute par une page couverture• Termine par les contacts
et les réseaux sociaux• Variation graphique entre
les diapositives
le ty
pe
prés
enta
tion
quebecnumerique.com
quebecnumerique.com
1 2 3
4 5 6
quebecnumerique.com
kickstarter.com/year/2013 thecharlesnyc.com/annual_report/2013/
Mettre en parallèle des informations de même nature ?
• 100 % de l’écran• Longueur des textes similaires• Constance graphique entre
les diapositives• Navigation par ordre
alphabétique, date, couleur, etc.
le ty
pe
com
para
tif
cyclemon.com evanshalshaw.com/bondcars/
Comment conserver l’attentionlorsque l’on traite d’un sujet complexe ?
Histoire fantastique
• Structuré comme une histoire• Navigation continue• Éléments de composition
intimement reliésle ty
pe
hist
oire
fant
astiq
ue
Il était une fois...
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Dénouement
dangersoffracking.com
http://www.earthworksaction.org/issues/detail/hydraulic_fracturing_101#.UyoHVa1dXzU
lostworldsfairs.com/atlantis inception-explained.com
Comment convaincre mes actionnaires de la qualitéde leur investissement ?
le ty
pe
ency
clop
édiq
ue• Mot du président• Chiffres • Événements importants de l’année• Chiffres• Cartes• Chiffres• Diagrammes
ge.com/ar2013/#/letter
La mission Qui nous sommesIntercalaire
Des chiffres Plus de chiffresUne carte
thecharlesnyc.com
thecharlesnyc.com
thecharlesnyc.com
frankandoak.com/annualreport/2013 sailthru.com/annual
Comment présenter plusieurs nouvelles de façon neutre & objective ?
le ty
pe
ency
clop
édiq
ue• Grande quantité d’éléments
à présenter• Typographie importante• Sans artifice inutile• Grille stable
nymag.com nytimes.com/skimmer
Comment présenter plusieurs nouvelles sans être neutre & objective ?
le ty
pe
mag
azin
e• Grande photo de couverture• Variation de la grille selon
le contenu• Beaucoup d’images de qualités• Division du contenu en champ
d’intérêt
esquire.co.uk vanityfair.fr
Comment faire vivre une émotion en utilisant le concept d’immersion ?
le ty
pe
on ra
il• Immersion narrative• Navigation continue• Conception sous forme d’un scénario• Utilisation de la vidéo et de l’audio
6millionsdemorts.com
6millionsdemorts.com
6millionsdemorts.com
6millionsdemorts.com
diesel.com/collection-diesel-home promo.vitra-russia.ru/promise
Ces patterns ne sont pas des solutions, ce sont des réponses à des problèmes.
1Trouvons des solutions
3Soyons intelligents
2Parlons-nous
jsdaigle.com | [email protected] | @jsdaigle