Alexandre Soubrier

Transcription

1 Alexandre Soubrier

2 SCÉNOGRAPHIE ET DESIGN D ÉTUDES DE CONTROVERSES

3 La scénographie c est quoi?

4 Vous avez de la matière première : les articles, les acteurs, du droit, des interviews, des recherches webographiques, etc

5 Vous avez les outils : HTML, CSS, Photoshop, etc

6 Vous devez en faire quelque chose de comestible, avec goût, sans trop en faire. Vous avez mis en scène votre savoir faire au travers d une recette bien à vous, de votre style. Ça a l air beau visuellement, mais le contenu suivra-t-il? C est tout l enjeu.

7 Livre sujet verbe complément + = Des ingrédients, le langage, des outils, une plume donnent un livre.

8 Bande dessinée + = Un livre + un pinceau donne une bd

9 Film + = Un livre + une caméra donne un film. Avec la même matière première, on peut faire plein de formats différents. Le film est fait à partir de scenarios, storyboards, acteurs, réalisateurs, etc

10 Jeu vidéo + = Le jeu vidéo est fait à base de storyboards, de scenarios, de concepteurs 3D, de développeurs, etc

11 Scénographier un site de controverse, Ça veut dire quoi?

12 Le site de controverse C est la cartographie d une zone de conflit, avec des acteurs, des arbres de débats, un historique. Et pour s y retrouver, le site doit nous guider au travers de cette jungle. Il doit être compréhensible par le plus grand nombre, et même par ceux qui ne savent pas sur quoi ils sont tombés. Et dans une carte, il faut identifier les zones de conflits et leur limite.

13 La première chose est d organiser le contenu Organiser

14 Montrer Il n est pas nécessaire de tout montrer. Par contre, il faut montrer les facettes les plus significatives et le faire avec style.

15 Il faut capter l attention de l utilisateur final afin de le garder. Surprendre

16 Raconter une histoire Il est important de captiver l auditoire, et pour cela, la meilleure manière est de les emmener dans une histoire passionante.

17 Types d histoire Chronologie (linéaire), Chrono-thématique (étapes dans l histoire), Enquête, Débat, etc

18 Scénographier avec quels outils? Réponse : le design. Le design vous aidera à exprimer votre idée de manière élégante, simple, et directe. Mais le design c est quoi?

19 Le design c est quoi? Le design est partout, dans les villes, dans les maisons, dans le mobilier, dans les logos. Dans le design il y a toujours une part de technique, des contraintes (matériau, espace, outils, ). Dans le webdesign, c est pareil, le mieux est de connaître les contraintes et les techniques.

20 Un exemple de design réussi : allier technologie à la noblesse des matériaux, et la beauté de l ensemble. Comment faire rentrer autant de technologies dans un si petit boitier et le rendre beau?

21 Et comment aborde-t-on le design?

22 Réfléchir Ne pas foncer tête baissée. Prendre un crayon et noter le contenu dont on dispose et l organiser.

23 Prendre son crayon Identifier ce qui est important et intéressant. Ne pas mettre tous les éléments de recherche. Réfléchir à la rédaction.

24 Mettre en page Plein de mises en page possible. Essayez d être percutant, simple, élégant, et pourquoi pas original. Menez votre lecteur.

25 La mise en forme

26 La couleur Pas plus de 5 couleurs. Choisir une couleur contrastante pour mettre en valeur certains éléments. Mettre en valeur certaines informations

27 Si j associe le jaune à du noir, je signifie danger

28 Alors qu avec du bleu, je me sens bien C est le soleil, le beau temps, le calme et la volupté.

29 Adobe Color CC Plein de thèmes de couleur intéressants et harmonieux. Choisir les thèmes les plus populaires dans la partie «explorer».

30 Les espaces Ne négligez pas les espaces. C est ce qui va faire la qualité de votre site web. Des espaces mal gérés entrainent un inconfort qu il est difficile de mettre en évidence.

31 Je respire dans cette page, ça me donne envie d en voir plus.

32

33 La typographie Il faut que la typo soit lisible et adaptée au message. Ne pas dépasser 3 typographies différentes. Ne pas abuser des typos fantaisie (comme ici).

34 2 grandes familles E E Sans-serif (sans empattements) Serif (avec empattements) La serif est plus moderne et adaptée aux écrans. La sans-serif est plus adaptée aux livres. Elle se lit mieux. Sur l écran, les pixels ont parfois du mal à afficher les empattements.

35 Titre d une page SOUS-TITRE DE LA PAGE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus a metus commodo, sed egestas dolor fermentum. Nam sodales sollicitudin lacinia. Sed fermentum sem magna, quis congue lectus fermentum ut. Pellentesque in lorem a sem rhoncus lacinia. Nulla sit amet ullamcorper risus, quis mollis lacus. Duis porttitor, leo id aliquam laoreet, purus ipsum eleifend orci, ac tincidunt dolor justo at nunc. Proin aliquam mi nec posuere placerat. Vestibulum rhoncus lorem at ligula tempus adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Exemple d une page avec un parti pris fort sur le titre.

36 Titre d une page Sous-titre de la page Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus a metus commodo, sed egestas dolor fermentum. Nam sodales sollicitudin lacinia. Sed fermentum sem magna, quis congue lectus fermentum ut. Pellentesque in lorem a sem rhoncus lacinia. Nulla sit amet ullamcorper risus, quis mollis lacus. Duis porttitor, leo id aliquam laoreet, purus ipsum eleifend orci, ac tincidunt dolor justo at nunc. Proin aliquam mi nec posuere placerat. Vestibulum rhoncus lorem at ligula tempus adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Autre exemple de page avec un aspect beaucoup plus sérieux et littéraire.

37 Awwwards greatest fonts 2014 Des sites spécialisés peuvent vous aider à trouver de bonnes typos gratuites. Evitez Dafont

38 S entraîner l oeil pour comprendre les espaces en typographie, qui sont la base de la gestion des espaces dans tous les domaines du design.

39 Structure Après la mise en page qu on a vu tout à l heure, il faut structurer sa page grâce à des guides ou des grilles. Cela permet un confort de lecture inestimable, et donne un aspect professionnel au site.

40 Exemple de grille

41 Plus de détails

42 On n est pas obligé de se tenir strictement à la grille pour tous les éléments. Votre oeil va déterminer le positionnement idéal. Mais quand l oeil n est pas exercé, c est parfois compliqué. D où la grille.

43 Exemples de sites sur grille :

44 L iconographie Illustrez votre propos avec des icônes, des photos, des images. (l iconographie, ce n est pas que les icônes)

45 Photo plein pot avec un titre et un texte. Adapté pour une introduction.

46 Une image et un texte qui prend tout l espace. Adapté pour un texte bref.

47 Insert dans un texte pour illustrer le propos. Focus sur le texte et l image. Pas de perturbations.

48 Utiliser des icônes pour affirmer le propos. On voit toujours l image en premier, et on lit le texte ensuite. Si l image n est pas percutante, on ne lira pas le texte.

49 Sites d icônes Pour trouver des icônes facilement.

50 Sites d images Pour trouver tout un tas de ressources graphiques (un peu obsolète )

51 Et l animation? A utiliser avec beaucoup de pincettes. L animation attire toujours le regard et sera prédominante par rapport à tout le reste, et par rapport au texte. Utilisez des animations de transition. Ou des animations interactives avec des logiciels comme Flash, mais pas comme illustration d un texte (pas de gif animé dans un paragraphe).

52 Inspiration Pour avoir des idées, de structure, de contenus, d images, regardez ce qui se fait déjà.

53 Site assez lié au HTML 5 et aux animations javascript. Sites tape à l oeil.

54 Pareil mais avec un background plus orienté créa et animations Flash. Plus forts technologiquement.

55 La direction artistique Direction ne signifie pas que «diriger» mais aussi «se diriger» : vers quelle direction allons-nous?

56 Choisir son style Il est important de savoir dans quelle direction on va. Chaque élément graphique va orienter le visuel final.

57 Exemple : Choix de couleur plutôt désaturées. Utilisation des couleurs complémentaires (dominante orange à droite) pour réchauffer l ambiance. Aspect global nostalgique. Café qui mise sur le fait que c est toujours mieux avant. On voit des gens qui discutent, ce qui rend le lieu plus humain (iconographie). Contraste de typos modernes avec des aspects serif plus ancien. Joli contraste.

58 Choix fort de typographie. Utilisation de formes et de couleurs originales. Présence d animations illustratives. Mise en page qui évoque l idée d une graphiste qui sait expérimenter.

59 Environnement plus classique, mais avec encore une fois un choix de typo fort au milieu. Les couleurs froides (les mêmes que précédemment) évoque une technologie sans doute à la pointe. Ce que confirme la typo sans serif placée à côté du scooter.

60 Univers plus illustré. Typo importante. 2 couleurs. Site militant au vu de l illustration et humain. Le bleu est une couleur universelle et qui rassemble. Elle tend à s adresser au plus grand nombre.

61 Collaborer et partager Vous allez devoir collaborer avec votre équipe, et leur montrer votre état d avancement. Pour cela, il y a des méthodes simples.

62 MOODBOARD Couleurs Typographies Illustrations Planche de tendance avec des couleurs, des bouts de page web, des images pour discuter du feeling du site avec l équipe projet.

63 Vient du site :

64 Pas vraiment destiné à du webdesign, mais un moodboard pourrait ressembler à ça.

65 Style tile : Site final :

66 Site final après moodboards et autres.

67 Sur quels matériels?

68 Utilisation du mobile Il y a de plus en plus de mobiles et ce n est pas près de s arrêter. Il faut donc que le site soit lisible sur mobile.

69 Mobile first? Ca veut dire quoi, «mobile first»? Qu on commence par designer pour le mobile, et qu ensuite, on agrémente pour le desktop. Permet de limiter la taille des contenus, et de mieux adapter la lecture à internet, même sur desktop. Permet d aller à l essentiel, sans fioritures.

70 Designer pour plusieurs dimensions. Pas seulement pour le desktop. Puis réadapter pour les tailles plus grandes.

71 Vos outils

72 Les résolutions 72 dpi 35 dpi 5 dpi Ecran retina de l iphone 6 HD = 401 dpi Important de comprendre la notion de résolution, car aujourd hui tous les écrans, même d ordinateurs ont des résolutions différentes. Problématique pour les images en pixel car beaucoup moins bien défini. La typo est en revanche très lisible, car vectorisée.

73 Vectoriel Très léger Facilement manipulable Exportable en SVG, le format vectoriel web Permet la même qualité dans toutes les résolutions Bien pour les icônes, les illustrations Bitmap Fichier final lourd Difficile de manipuler les pixels Oblige à créer plusieurs images chaque résolution Bien pour les photos Le vectoriel : point s et courbes de bézier donc description mathématique très légère. Les polices sont faites en vectoriel. Bitmap : description pixel par pixel de la couleur, donc image plus lourde et moins maniable.

74 Logiciels de traitement graphique Photoshop Illustrator Sketch The Gimp Ink Des produits payants. D autres Open Source. Font sensiblement la même chose. Mais Photoshop et sketch sont particulièrement adaptés au webdesign (sketch plus que Photoshop d ailleurs pour des gros sites avec plein de pages, ce qui n est pas votre cas), grâce à certaines fonctionnalités d export très pratiques.

75 Logiciels d animation Edge Animate Flash Pro Photoshop Photoshop pour les gifs animés.

76 La prochaine fois : Comment on construit un site web de A à Z