web site pattern – le design en mode solution

Web site pattern& le design en mode solution

Bonjour !

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.

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 couleur

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. »

Textes ou Design

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

Classique

Navigation principal

Navigation secondaire

Titre de la pageLorem ipsum

le ty

pe

class

ique

• Versatile• Efficace• Fonctionnel• Rassurant

Classique?

Web site pattern

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

Accueil

x 41 425

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

wikipedia.org

Encyclopédique

Comment expliquer un concept ou une idée ?

Présentation

• 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 ?

Comparatif

• 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

flatguitars.com

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


Dénouement


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 ?

Rapport annuel

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

frankandoak.com/annualreport/2013 sailthru.com/annual

Comment présenter plusieurs nouvelles de façon neutre & objective ?

Journal

le ty

pe

ency

clop

édiq

ue• Grande quantité d’éléments

à présenter• Typographie importante• Sans artifice inutile• Grille stable

nytimes.com

nymag.com nytimes.com/skimmer

Comment présenter plusieurs nouvelles sans être neutre & objective ?

Magazine

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

gqmagazine.fr

esquire.co.uk vanityfair.fr

Comment faire vivre une émotion en utilisant le concept d’immersion ?

On rail

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

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