L3.DA3 Digital Design
===

###### tags: `Penninghen` `numérique` `design` `digital` `plan` `ressources`

:::info
- **Location:** Salle G
- **Groupe:** A, B et C
- **Date:** 20 sept. 2023 ↣ 17 jan. 2024
- **Agenda**
1. [Cours 01/14](https://hackmd.io/@53zcaqCtSGa7X0eDpB1zKw/SJWXHAvwH) 20.09 `120min`
2. [Cours 02/14](https://hackmd.io/rvMZSffTReG0HNNup7jwBg?both) 27.09 `120min`
3. [Cours 03/14](https://hackmd.io/@53zcaqCtSGa7X0eDpB1zKw/ry5PC6YuH) 04.10`120min`
4. [Cours 04/14]() 11.10 `120min`
5. [Cours 05/14]() 18.10 `120min`
6. [Cours 06/14]() 08.11 `120min`
7. [Cours 07/14]() 15.11 `120min`
8. [Cours 08/14]() 22.11 `120min`
9. [Cours 09/14]() 29.11 `120min`
10. [Cours 10/14]() 06.12 `120min`
11. [Cours 11/14]() 13.12 `120min`
12. [Cours 12/14]() 20.12 `120min`
12. [Cours 13/14]() 10.01 `120min`
12. [Cours 14/14]() 17.01 `120min`

- **Contact:** <[e-mail]>

:::

:dart: Objectifs
---
- Acquérir les compétences et aptitudes digitales
- Découvrir et appréhender l'univers du numérique
- Concevoir un prototype fonctionnel de votre site
- Être sensible aux enjeux environnementaux que posent le numérique et s’y préparer.

---

:calendar: Plan des cours
---
### [Cours 01/14](https://hackmd.io/A6WWjaudQeGn3rwM8r6KRg): Présentation générale
- Les différents supports de la connaissance
- Les évolutions technologiques et culturelles
- Les outils du numérique

### [Cours 02/14](https://hackmd.io/rvMZSffTReG0HNNup7jwBg): Les interfaces
- Les interfaces au cinéma, l'évolution des interfaces
- Qu’est-ce que l’UX ? qu’est ce que l’UI ?
- Architecture de site, navigation (logique de zoning, wireframes), templates, responsive design
- Prise en main de Adobe XD (possibilités et ressources)

### [Cours 03/14](https://hackmd.io/ryCVD37TRpuhlv7ddTNoxQ): Créer l'architecture de son site
- Déterminer le nombre de templates
- Dessiner l'arborescence et concevoir ses wireframe
- Approfondissement d'Adobe Xd

### [Cours 04/14](https://hackmd.io/6eCViDnBQ2G8rdqINpK7mA): Approfondissement d'Adobe Xd | pré-rendu
- Du wireframe au design digital
- Adaptive design, Responsive design et fluide design.
- L’accessibilité
- Accompagnement des projets

### [Cours 05/14](https://hackmd.io/6eCViDnBQ2G8rdqINpK7mA): Approfondissement d'Adobe Xd
- Explorer la passerelle avec l’iPhone
- Présentation de différents plugin pour faciliter sa conception
- Accompagnement et suivi des projets

### [Cours 06/14](https://hackmd.io/6eCViDnBQ2G8rdqINpK7mA): Approfondissement d'Adobe Xd
- Animation sous Adobe Xd
- Accompagnement et suivi des projets

### [Cours 07/14](): Approfondissement d'Adobe Xd
- Comment bien collaborer avec un développeur
- Les différents livrables et le suivi de développement
- Design system / Style Guideline
- Accompagnement et suivi des projets

### [Cours 08/14](): Approfondissement d'Adobe Xd
- Présentation de projets
- Suivi de projet
- Finalisation du prototype

### [Cours 09/14](): Restitution, et correction
- Correction collective
### [Cours 10/14](https://hackmd.io/Yh5fk3BnSAK-iLex0pnZcA): Sujet: Sobriété numérique
### [Cours 11/14](): Suivi de projet
### [Cours 12/14](): Suivi de projet | pré-rendu
- Présentation de projets au tableau
- Correction collective
### [Cours 13/14](): Suivi de projet
### [Cours 14/14](): Restitution, et correction

---

## Logiciel à utiliser
[Adobe Xd](https://www.adobe.com/fr/products/xd.html)

### Plug In
https://github.com/AdobeXD/xd-awesome

https://designcode.io/angle-xd
http://opencolor.tools/features.html
https://overflow.io/
https://rotato.xyz/#home-section
https://www.getstark.co/pricing/index.html

### Kits d'interface
https://www.adobe.com/fr/products/xd/resources.html#panel-3

---

:mag: Ressources
---
### Inspirations
https://fontsinuse.com/
http://www.webdesignertrends.com/
https://www.awwwards.com/
https://www.itsnicethat.com/
https://radicalweb.design/fr

### Typographies

#### open source
https://v-fonts.com
https://usemodify.com/
https://www.axis-praxis.org/
https://open-foundry.com/
http://letterror.com/index.html
http://velvetyne.fr/
https://fonts.google.com/

#### fonderies traditionnelles
https://www.frostype.com/
http://brutatypes.com/
https://www.generaltypestudio.com/
https://typefaces.pizza/fr
https://www.fostertype.com/
https://camelot-typefaces.com/
http://www.aisforapple.fr/fonts
https://www.swisstypefaces.com/
https://extrabrut.shop/
https://radimpesko.com/
https://www.fatype.com/
https://kilotype.de/
https://optimo.ch/
https://lineto.com/
https://fonts.floriankarsten.com/
https://forgotten-shapes.com/
https://www.205.tf/
https://www.productiontype.com/
https://novatypefoundry.com/
https://www.milieugrotesque.com/
https://www.etc.supply/
https://www.emigre.com/
https://familytype.co/

### Photos
https://unsplash.com/
https://uifaces.co/

### Icônes
https://feathericons.com/
https://streamlineicons.com/
https://thenounproject.com/
https://iconify.design/

### 3D
http://threedscans.com/

### Divers
[Glossaire](https://sidewaysdictionary.com/)
[lecture sur écran](https://eduscol.education.fr/numerique/dossier/archives/lecture-sur-ecran/modes-de-lecture/papier-ou-ecran-quelles-differences)
[Institute for the future of the book](http://www.futureofthebook.org/)

:::info
À voir :mega: https://2020.ethicsbydesign.fr/
:::

---

:books: Bibliographie
---
*An Essay on Typography,* Eric Gill, J. M. Dent, 1931
*Espèces d’espaces,* Georges Perec, Éditions Galilée, 1974
*Design et humanités numériques,* Anthony Masure, Éditions B42, 2017
*Die neue Typographie,* Jan Tschichold, 1928
*Grid systems in graphic design,* Josef Müller-Brockmann, Niggli, 1981
*Histoire de l’écriture typographique,* Yves Perrousseaux, ADVERBUM, 2006
*L’âge du Faire. Hacking, travail, anarchie,* Michel Lallement, Le Seuil, 2015
*L’écriture sans écriture,* Kenneth Goldsmith, Jean Boîte Editions, 2018
*Le Degré zéro de l’écriture,* Roland Barthes, Seuil, 1953
*Le détail en typographie : La lettre, l’interlettrage, le mot, l’espacement, la ligne, l’interlignage, la colonne,* Jost Hochuli, Éditions B42, 2015
*Le trait : Une théorie de l’écriture,* Gerrit Noordzij, Ypsilon Editeur, 2010
*Le petit manuel de composition typographique : Version 3,* Muriel Paris, 2008
*L’Espace littéraire,* Maurice Blanchot, Gallimard, Paris, 1955
*Les Trois Écritures, Langue, nombre, code,* Clarisse Herrenschmidt, Gallimard, Paris, 2007
*Le vertige du funambule : Le design graphique entre économie et morale,* Annick Lantenois, Éditions B42, 2013
*L’œuvre ouverte,* Umberto Ecco, Points, 2015
*Mauvais temps. Anthropocène et numérisation du monde,* Gérard Dubey et Pierre de Jouvancourt, Éditions dehors, 2018
*Max Bill / Jan Tschichold, La querelle typographique des modernes,* Hans-Rudolf Bosshard, Jost Hochuli, Éditions B42, 2014
*Pendant la lecture,* Gerard Unger, Éditions B42, 2015
*Petite philosophie du design,* Vilém Flusser, Circé, 2002
*Post-digital print, La mutation de l’édition depuis 1894,* Alessandro Ludovico, Éditions B42, 2016
*Sociétés, services, utilités : A quoi tient le design,* Pierre-Damien Huyghe, De l’incidence éditeur, 2018
*Typography: A manual of design,* Emil Ruder, Niggli, 1967
*Vertige de la liste,* Umberto Eco, Flammarion, 2009
*Une machine comme moi,* Ian McEwan, Jonathan Cape Edition, 2019

:camera: Filmographie
---
**Netflix** : Abstract - design numérique
**Netflix** : Derrière nos écrans de fumée