principles of design, william lidwell, la fête du...
TRANSCRIPT
E-Artsup. Département Design interactif & communication visuelle.
Design interactif s.03 // Sujet 02 : Principles of Design // Alexandre Rivaux [email protected]
Département Design interactif & communication visuelle:
Enseignants: Nicolas BaumgartnerFélicie d’Estienne D’OrvesJonathan MunnAlexandre Rivaux
Principles of design, William Lidwell,La Fête du Graphisme
2
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design . Design Interactif - Alexandre Rivaux
• Contexte• Brief• Principles of Design• Références
1 - Contexte
4
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
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.
LiensAgence Artevia
La Fête du GraphismeLa Fête du Graphisme, tout ce que vous avez raté
2 - Brief
6
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Principles of Designla 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.
7
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
ContraintesChaque 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. Formes géométriques simples2. Noir et Blanc pour le 1er niveau3. 3 couleurs pour le 2nd niveau4. 6 couleurs pour le 3ème niveau
8
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Rendu PlanningVous formaliserez votre rendu sous la forme d’un document PDF contenant :
1. Rappel du brief2. Concept3. Moodboard4. Recherches graphiques traditionnelles5. Recherches graphiques numériques6. Rendus aux différents formats demandés7. Rédaction du gamedesign8. Présentation de chacun des niveaux et
leur gameplay (wireframe / user journey / maquettes...)
9. Site internet10.Video du gamplay11.making-of
Votre document sera également accompagné des annexes necessaire :
1. Carnet de recherches1. Wireframes2. User journey3. Maquettes4. Video de présentation du jeu5. Video de gameplay
17 Novembre 2014Prise de briefValidation des groupesAnalyse du sujet, Recherches, conception et gameplay...
24 Novembre 2014BenchmarkRecherches d’inspiration graphique et ergonomiqueConceptsGame DesignWireframe...
1 Décembre 2014User JourneyStoryboardDirection artistique...
5 Janvier 2015Rendu
3 - Principles of Design
10
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Principles of DesignWilliam 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
11
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Elements of DesignWilliam lidwell
Dans son ouvrage Lidwell défini 7 éléments composant le design qu’il nomme Elements of Design (où Element of Art)
1. Line (la réunion de 2 points). Elle peut être calme, dynamique, nerveuse, courbe, stable...
2. 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.
3. 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
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
12
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Line
13
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Shape
14
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Shape
15
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Space
16
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Texture
17
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Color
18
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Value
19
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Principles of DesignWilliam 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. 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.
2. 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.
3. 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
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
20
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Balance
21
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Proximity / Harmony
22
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Alignement
23
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Repetition / Pattern
24
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Contraste
25
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Rythme / White Space
4 - Références
27
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Thomas was alonemike BithellThomas é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.
LiensSteam - Thomas was alone
Thomas was alone
28
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Puklaser Dog gamesPuk 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.
LiensPuk game
Game trailerLaser Dog Games
29
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Monument Valleyus twoMonument 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.
LiensMonument Valley
Game trailerUs Two
30
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Hoshi Saganeko gamesHoshi saga est une série de puzzle games où l’utilisateur doit retrouvé une étoile à travers divers expérimentations visuelles et interactive
LiensHoshi Saga
31
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Togetheruniversal everythingTogether 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.
LiensTogether, Universal Everything
32
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Pedagogical Skecthbookpaul KleePé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.
LiensPedagogical Sketchbook
33
Principles of Design, William LidwellLa Fête du Graphisme
E-Artsup - Priinciples of Design - Design Interactif - Alexandre Rivaux
Flatlandedwin abbott abbottFlatland 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é.
LiensFlatland
Flatland - wikipediaFlatland the movie
