Principles Of Design

E-Artsup.
Département Design interactif & communication visuelle.
Principles of design, William Lidwell,
La Fête du Graphisme
Design interactif S.03 // Sujet 02 : Principles of Design // Alexandre Rivaux [email protected]
Département Design interactif & communication visuelle:
Enseignants:
Nicolas Baumgartner
Félicie d’Estienne D’Orves
Jonathan Munn
Alexandre Rivaux
Principles of Design, William Lidwell
La Fête du Graphisme
• Contexte
• Brief
• Principles of Design
• Références
E-Artsup - Priinciples of Design . Design Interactif - Alexandre Rivaux
2
1 - Contexte
Principles of Design, William Lidwell
La Fête du Graphisme
La Fête du Graphisme
Édition 2015
Initiée par Artevia en 2014, agence de
developpement de projet culturel, la Fête
du graphisme a pour mission d’assurer le
développement et la promotion du graphisme
en France.
Plateforme de communication, cet événement a
pour but de faire découvrir au public la richesse et
les enjeux de la pratique du design graphique ainsi
que des secteurs auxquels elle est liée.
Durant cet manifestation, le public sera amené à
découvrir l’excellence du graphisme français et
international.
Liens
Agence Artevia
La Fête du Graphisme
La Fête du Graphisme, tout ce que vous avez raté
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
4
2 - Brief
Principles of Design, William Lidwell
La Fête du Graphisme
Principles of Design
La fête du Graphisme
À l’occasion de la Fête du Graphisme 2015 il
vous est demandé de réaliser un jeux mobile
(tablette / telephone) permettant de (re)
découvrir les 6 principes du design initiés par
William Lidwell dans son ouvrage “Universal
principles of Design”.
Votre travail de conception se portera sur les 6
principes du design, chacun correspondant à
un niveau de jeu. Vous presenterez chacun des
niveaux sous formes de wireframe / user journey.
Vous réaliserez les maquettes des 3 premiers
niveaux.
Votre travail se portera sur la composition de
l’image et le signe. Vous developperez un univers
et un langage graphique adapté à votre jeu.
Vous réaliserez également le site de présentation
de votre jeu ainsi qu’une vidéo de demonstration
de son gameplay.
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
6
Principles of Design, William Lidwell
La Fête du Graphisme
Contraintes
Chaque niveau conçu sera présenté sous forme
de wireframe et user journey.
Vous réaliserez le design des 3 premiers niveaux
en vous limitant à l’utilisation :
1.
2.
3.
4.
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Formes géométriques simples
Noir et Blanc pour le 1er niveau
3 couleurs pour le 2nd niveau
6 couleurs pour le 3ème niveau
7
Principles of Design, William Lidwell
La Fête du Graphisme
Rendu
Planning
Vous formaliserez votre rendu sous la forme d’un
document PDF contenant :
1. Rappel du brief
2. Concept
3. Moodboard
4. Recherches graphiques traditionnelles
5. Recherches graphiques numériques
6. Rendus aux différents formats demandés
7. Rédaction du gamedesign
8. Présentation de chacun des niveaux et
leur gameplay (wireframe / user journey /
maquettes...)
9. Site internet
10. Video du gamplay
11. making-of
17 Novembre 2014
Prise de brief
Validation des groupes
Analyse du sujet, Recherches, conception et
gameplay
...
Votre document sera également accompagné des
annexes necessaire :
1. Carnet de recherches
1. Wireframes
2. User journey
3. Maquettes
4. Video de présentation du jeu
5. Video de gameplay
1 Décembre 2014
User Journey
Storyboard
Direction artistique
...
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
24 Novembre 2014
Benchmark
Recherches d’inspiration graphique et
ergonomique
Concepts
Game Design
Wireframe
...
5 Janvier 2015
Rendu
8
3 - Principles of Design
Principles of Design, William Lidwell
La Fête du Graphisme
Principles of Design
William Lidwell
“Universal Principles of Design” est un ouvrage
de William Lidwell théorisant une pratique du
design par la definition de divers éléments et
principes à suivre dans chaque composition
d’image.
Professeur au Gerald D. Hines Collège
d’Architecture de l’Université de Houston, il
est également directeur de l’innovation et du
développement au Studio Stuff Creator à
Houston, Texas. Designer, enseignant et auteur,
professeur Lidwell a plus de 20 ans d’expérience
dans la conception du produit et de l’interaction
de l’utilisateur. Il consulte fréquemment sur les
questions de conception et de l’expérience du
consommateur avec de grands cabinets, y compris
Harrah, IKEA, Merrill Lynch, et Procter & Gamble.
Principles of design
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
10
Principles of Design, William Lidwell
La Fête du Graphisme
Elements of Design
William Lidwell
Dans son ouvrage Lidwell défini 7 éléments
composant le design qu’il nomme Elements of
Design (où Element of Art)
1.
2.
3.
Line (la réunion de 2 points). Elle peut
être calme, dynamique, nerveuse, courbe,
stable...
Shape (une forme créée par une suite de
points). Une Shape est en 2 dimensions
et possède une largeur et une hauteur.
Les Shapes produites par une suite
mathématique sont décrites comme
Geometric. Celles basées sur des formes
naturelles ou incurvées sont décrites
comme Organic.
Forms (L’extrusion du Shape, son
passage en 3 dimensions). Une
Form possède une largeur, hauteur
et profondeur. Toute les Forms sont
composées de Shapes
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
4.
Space représente la région dans laquelle
les Forms, Shapes et Lines évoluent.
5.
Texture se réfère à l’aspect de la surface
des Shapes et Forms. Elle peut être
réflective, rugueuse, brillante... On défini
deux types de texture, les textures tactiles
(physique) ou en 3 dimensions (peinture
au couteau par exemple) et les textures
visuals ou illusions de surface.
6.
Color aussi appelé teinte.
7.
Value / Luminosity se réfère à la
luminosité de la couleur
11
Principles of Design, William Lidwell
La Fête du Graphisme
Line
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
12
Principles of Design, William Lidwell
La Fête du Graphisme
Shape
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
13
Principles of Design, William Lidwell
La Fête du Graphisme
Shape
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
14
Principles of Design, William Lidwell
La Fête du Graphisme
Space
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
15
Principles of Design, William Lidwell
La Fête du Graphisme
Texture
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
16
Principles of Design, William Lidwell
La Fête du Graphisme
Color
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
17
Principles of Design, William Lidwell
La Fête du Graphisme
Value
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
18
Principles of Design, William Lidwell
La Fête du Graphisme
Principles of Design
William Lidwell
Par la suite Lidwell défini 6 principes de design
qu’il nomme Principles of Design et définissant
l’utilisation des Elements of design dans une
composition.
1.
2.
3.
Balance se réfère à la distribution
des éléments dans la composition.
Similaire à la notion de balance
en physique. La balance d’une
composition peut être symetrique,
asymetrique ou radiale.
Proximity / Emphasis / Harmony
se réfère à la distribution des éléments
par rapport aux autres. Les éléments
doivent être distribués de manière
harmonieuse et donc connectés entre eux
visuellement. Cela peut être par un jeux
de tailles ou de couleurs. Il permet de
créer des points de focus.
Alignment proche du principe précédent
(harmony), alignment se réfère à l’ordre
et l’organisation dans la composition. Les
éléments doivent être ordonnés entre eux
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
afin de créer un hierarchisation visuelle
autour du point de focus.
4.
Repetition/Pattern se réfère
à l’utilisation répétitive d’un élément afin
de créer une unité visuelle, un pattern
visuel. (Typographie de titrage,
typographie de texte courant,
code couleurs, formes...)
5.
Contrast est l’utilisation d’éléments
opposés (lignes verticales/horizontales,
couleurs opposées, luminosités
inverses...). Il permet de détacher des
éléments
d’une composition.
6.
White Space se réfère à l’espace vierge
entre les élements dans une composition.
Cet espace permet une meilleur lecture
de la composition et du message. Il créer
le rythme de l’image
19
Principles of Design, William Lidwell
La Fête du Graphisme
Balance
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
20
Principles of Design, William Lidwell
La Fête du Graphisme
Proximity / Harmony
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
21
Principles of Design, William Lidwell
La Fête du Graphisme
Alignement
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
22
Principles of Design, William Lidwell
La Fête du Graphisme
Repetition / Pattern
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
23
Principles of Design, William Lidwell
La Fête du Graphisme
Contraste
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
24
Principles of Design, William Lidwell
La Fête du Graphisme
Rythme / White Space
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
25
4 - Références
Principles of Design, William Lidwell
La Fête du Graphisme
Thomas was alone
Mike Bithell
Thomas était seul, et après, et bien, il ne l’était
plus.
Thomas Was Alone est un jeu de plateforme
indépendant minimaliste, en 2D, à propos d’amitié,
de sauts, de flottement et d’anti-gravité.
Guidez un groupe de rectangles à travers une série
d’obstacles, utilisant leurs différentes capacités
ensemble afin d’arriver à la fin de chaque
environnement.
Ecoutez des musiques incroyables par David
Housden. Sautez à travers des rectangles
méticuleusement placés par Mike Bithell.
Ecoutez la voix off lue avec nostalgie et un peu
d’amusement par Danny Wallace.
Liens
Steam - Thomas was alone
Thomas was alone
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
27
Principles of Design, William Lidwell
La Fête du Graphisme
Puk
Laser Dog Games
Puk est un puzzle action game jouant sur le
principe de rebond.
Eliminer l’ensemble des éléments de la scène à
l’aide d’un nombre limité de projectiles dans le
temps imparti.
Liens
Puk game
Game trailer
Laser Dog Games
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
28
Principles of Design, William Lidwell
La Fête du Graphisme
Monument Valley
Us Two
Monument valley est un puzzle game
d’anamorphose basé sur les travaux de Escher.
Manipuler les objets de la scène de sorte à créer
de nouvelles anamorphoses et perspectives
permettant de faire avancer votre personnage
au sein de l’intrigue principale.
Liens
Monument Valley
Game trailer
Us Two
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
29
Principles of Design, William Lidwell
La Fête du Graphisme
Hoshi Saga
Neko Games
Hoshi saga est une série de puzzle games où
l’utilisateur doit retrouvé une étoile à travers divers
expérimentations visuelles et interactive
Liens
Hoshi Saga
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
30
Principles of Design, William Lidwell
La Fête du Graphisme
Together
Universal Everything
Together est une installation artistique collaborative
réalisée à l’occasion de l’exposition Digital
Revolution au Barbican (Londres).
Chaque spectateur est invité, à travers une
application mobile, à réaliser un courte boucle
animée à partir d’une palette limitée. Chaque
boucle est par la suite affichée sur un mur vidéo
créant ainsi une animation collaborative globale.
Liens
Together, Universal Everything
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
31
Principles of Design, William Lidwell
La Fête du Graphisme
Pedagogical Skecthbook
Paul Klee
Pédagogical Sketchbook est un livre de Paul Klee
basé sur ses vastes conférences sur la forme
visuelle au Bauhaus Staatliche Art School où il était
un enseignant entre 1921-1931.
Avec d’autres livres du Bauhaus tels que la théorie
de la couleur (par Johannes Itten) et Point et ligne
sur plan (par Wassily Kandinsky), pédagogical
Sketchbook est une méthode d’enseignement sur
la théorie de l’art et de la pratique du Bauhaus.
Liens
Pedagogical Sketchbook
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
32
Principles of Design, William Lidwell
La Fête du Graphisme
Flatland
Edwin Abbott Abbott
Flatland est une allégorie écrite en 1884, où
l’auteur, Edwin Abbott Abbott, donne vie aux
dimensions géométriques, le point, la ligne et
les surfaces, avant d’en arriver à faire découvrir
l’univers des volumes par un carré.
Liens
Flatland
Flatland - wikipedia
Flatland the movie
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
33
Contact
Alexandre Rivaux
Visual Designer & Partner Bonjour, interactive Lab
www.bonjour-lab.com
[email protected]