La page d'Audrey : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(ÉTAPE 4. En zoom.)
(ID. Cliques et apparitions)
 
(19 révisions intermédiaires par le même utilisateur non affichées)
Ligne 10 : Ligne 10 :
 
==== '''ÉTAPE 1. Composer l'écran avec les scrolls.''' ====
 
==== '''ÉTAPE 1. Composer l'écran avec les scrolls.''' ====
  
[http://work.pratiquesnumeriques.be/2021-2022/scrolls/audrey/grid.html SITE] . Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire. Ceci dit, il y a deux résultats sur la page qui me plaisent : en haut à gauche, il y a des lettres qui apparaissent derrière d'autres ; et en bas à droite, où un scroll passe au-dessus d'un autre scroll. Les mots que j'ai choisis sont tirés des titres de chansons de M.I.A : RELOAD, BORDERS, POWER, WARRIORS, NOIZE, XXXO, PLANES, JIMMY, BIRDS, GALANG, BANG, GOLD, PAPER, INTERNET, TEQKILLA, EXODUS, STEP. On s'en fout mais je voulais parler de M.I.A.
+
[http://work.pratiquesnumeriques.be/2021-2022/scrolls/audrey/grid.html SITE] . Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire. Ceci dit, il y a deux résultats sur la page qui me plaisent : en haut à gauche, il y a des lettres qui apparaissent derrière d'autres ; et en bas à droite, où un scroll passe au-dessus d'un autre scroll. Les mots que j'ai choisis sont tirés des titres de chansons de M.I.A : RELOAD, BORDERS, POWER, WARRIORS, NOIZE, XXXO, PLANES, JIMMY, BIRDS, GALANG, BANG, GOLD, PAPER, INTERNET, TEQKILLA, EXODUS, STEP.
  
 
===='''ÉTAPE 2. Exploiter la superposition.'''====
 
===='''ÉTAPE 2. Exploiter la superposition.'''====
  
[http://work.pratiquesnumeriques.be/2021-2022/scrolls/audrey/grid2.html SITE] . J'ai essayé d'exploiter l'idée des lettres qui apparaissent derrières d'autres, pour créer quelque chose de plus graphique, voire utile ? Je ne sais pas. Dans tous les cas, j'ai joué avec des couleurs différentes. Et j'ai découvert qu'avec le scroll qui va vite, on lit mieux le mot derrière. J'apprécie ce truc-là, je vais essayer de voir jusqu'où je peux aller dans cette idée.
+
[http://work.pratiquesnumeriques.be/2021-2022/scrolls/audrey/grid2.html SITE] . J'ai essayé d'exploiter l'idée des lettres qui apparaissent derrière d'autres, pour créer quelque chose de plus graphique, voire utile ? Je ne sais pas. Dans tous les cas, j'ai joué avec des couleurs différentes. Et j'ai découvert qu'avec le scroll qui va vite, on lit mieux le mot derrière. J'apprécie ce truc-là, je vais essayer de voir jusqu'où je peux aller dans cette idée. Les phrases surréalistes sont des phrases tirées d'un cours.
  
[[Fichier:Grid2.png|400px|vignette|gauche|<center><sub>ÉTAPE 3</sub></center>]] [[Fichier:Grid4.png|400px|vignette|droite|<center><sub>ÉTAPE 4</sub></center>]]  
+
[[Fichier:Grid2.png|400px|vignette|gauche|<center><sub>ÉTAPE 3</sub></center>]] [[Fichier:Grid4.png|400px|vignette|droite|<center><sub>ÉTAPE 4</sub></center>]]
  
 
===='''ÉTAPE 3. Que faire avec la superposition ?'''====
 
===='''ÉTAPE 3. Que faire avec la superposition ?'''====
Ligne 24 : Ligne 24 :
 
===='''ÉTAPE 4. En zoom.'''====
 
===='''ÉTAPE 4. En zoom.'''====
  
SITE . Je me suis concentrée sur l'aspect composition de typographie là, voir ce que ça peut apporter. En réalité, quand on scroll super vite aussi sur le site, ça créé une espèce d'animation qui n'est pas dégueulasse mais que je n'arrive pas à enregistrer... <br><br><br><br><br>
+
[http://work.pratiquesnumeriques.be/2021-2022/scrolls/audrey/grid4.html SITE] . Je me suis concentrée sur l'aspect composition de typographie là, voir ce que ça peut apporter. En réalité, quand on scroll super vite aussi sur le site, ça créé une espèce d'animation qui n'est pas dégueulasse mais que je n'arrive pas à enregistrer... <br><br><br><br>
  
 
== Texte — Faire interagir avec un texte ==
 
== Texte — Faire interagir avec un texte ==
Ligne 56 : Ligne 56 :
 
And if you long to never die
 
And if you long to never die
  
Baby, plug in, upload your mind
+
Plug in, upload your mind
  
 
Come on, you're not even alive
 
Come on, you're not even alive
Ligne 72 : Ligne 72 :
 
Submit</syntaxhighlight>
 
Submit</syntaxhighlight>
  
[[Fichier:Text1.png|400px|vignette|gauche]]
 
  
===='''ÉTAPE 1. Faire apparaître ligne après ligne'''====
+
{|
 +
|-
 +
! [[Fichier:Text1.png|400px|sans_cadre|centre]] !! [[Fichier:Superposition.png|400px|sans_cadre|centre|superposition]] !! [[Fichier:Superposition2.png|400px|sans_cadre|centre|superposition2]]
 +
|-
 +
| <br>1. Là, j'ai commencé par créer une simple page où quand on clique sur une ligne du texte, la suivante apparaît quelque part. C'est moi qui choisis où elle apparaît mais j'aimerais faire en sorte qu'elle se place de façon random. J'aimerais aussi faire en sorte que la taille de la police grossisse petit à petit. || <br>2. Bizarrement, j'ai super vite réussi à faire le bazar. Mais ça me saoule, le texte sort de la fenêtre et c'est pas ouf... J'ai fait en sorte que les lettres grossissent aussi au fil des clics. Un autre problème : les superpositions qui n'aident pas à la lecture des phrases. J'ai donc appliqué une ombre pour aider à la lecture mais bof convaincue. || <br>3. Pour vraiment appuyer le côté angoissant, je vais partir sur un design de pop-up : déjà, ça va permettre de mieux lire les phrases mais c'est aussi plus sympa. J'avais aussi mis un truc de couleurs aléatoires mais ça ne me plaisait pas donc je l'ai enlevé.
 +
|}
  
Là, j'ai commencé par créer une simple page où quand on clique sur une ligne du texte, la suivante apparaît quelque part. C'est moi qui choisis où elle apparaît mais j'aimerais faire en sorte qu'elle se place de façon random. J'aimerais aussi faire en sorte que la taille de la police grossisse petit à petit.
+
Le site : [http://work.pratiquesnumeriques.be/2021-2022/texts/audrey/ POWER]
 
 
===='''ÉTAPE 2. Emplacement random et taille qui grossit'''====
 
 
 
Bizarrement, j'ai super vite réussi à faire le bazar. Mais ça me saoule, le texte sorte de la fenêtre et c'est pas super chouette...
 

Version actuelle datée du 15 décembre 2021 à 14:31

Scroll — Créer un site web qui exploite l'utilité du scroll

ID. Superposition et scrollbars

L'idée est de créer un grid avec énormément de scroll qui se superposent pour créer un effet plutôt graphique. J'avais déjà créé un site avec cette idée dans le cadre du cours de Web2Print, mais plutôt dans la perspective de l'imprimer. Ici, ce serait vraiment dans la perspective de fonctionnalité amusante.

ÉTAPE 1
ÉTAPE 2

ÉTAPE 1. Composer l'écran avec les scrolls.

SITE . Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire. Ceci dit, il y a deux résultats sur la page qui me plaisent : en haut à gauche, il y a des lettres qui apparaissent derrière d'autres ; et en bas à droite, où un scroll passe au-dessus d'un autre scroll. Les mots que j'ai choisis sont tirés des titres de chansons de M.I.A : RELOAD, BORDERS, POWER, WARRIORS, NOIZE, XXXO, PLANES, JIMMY, BIRDS, GALANG, BANG, GOLD, PAPER, INTERNET, TEQKILLA, EXODUS, STEP.

ÉTAPE 2. Exploiter la superposition.

SITE . J'ai essayé d'exploiter l'idée des lettres qui apparaissent derrière d'autres, pour créer quelque chose de plus graphique, voire utile ? Je ne sais pas. Dans tous les cas, j'ai joué avec des couleurs différentes. Et j'ai découvert qu'avec le scroll qui va vite, on lit mieux le mot derrière. J'apprécie ce truc-là, je vais essayer de voir jusqu'où je peux aller dans cette idée. Les phrases surréalistes sont des phrases tirées d'un cours.

ÉTAPE 3
ÉTAPE 4

ÉTAPE 3. Que faire avec la superposition ?

SITE . Bah là maintenant, j'ai décidé de focus beaucoup plus sur la superposition mais plus graphique. Là, j'ai changé de font pour voir ce que ça donne et je pense peut-être créer une animation ? Ou alors agrandir le tout pour se concentrer que sur une portion et pouvoir créer de nouvelles fontes. Le texte est un extrait de « Ceux qui partent d'Omelas » d'Ursula K. Le Guin.

ÉTAPE 4. En zoom.

SITE . Je me suis concentrée sur l'aspect composition de typographie là, voir ce que ça peut apporter. En réalité, quand on scroll super vite aussi sur le site, ça créé une espèce d'animation qui n'est pas dégueulasse mais que je n'arrive pas à enregistrer...



Texte — Faire interagir avec un texte

ID. Cliques et apparitions

J'avais envie de créer un site où le texte interagirait avec la souris. Pour ce faire, il faut utiliser JavaScript. Je ne l'ai jamais fait, mais il faut bien passer par là. Je me suis inspirée de ce magnifique site qu'est Studio Push et en réalité, j'aurais aimé faire la même chose niveau interaction mais je sais pas comment faire. Le texte que j'ai choisi est les paroles de "We Appreciate Power" de la chanteuse Grimes. Ca parle d'intelligence artificielle, et j'aime beaucoup cette artiste, donc pourquoi pas. Je l'ai un peu épuré en enlevant les répétitions.

We appreciate power

What will it take to make you capitulate?

Simulation, give me something good

God's creation, so misunderstood

Pray to the divinity, the keeper of the key

One day everyone will believe

When will the state agree to cooperate?

People like to say that we're insane

But AI will reward us when it reigns

Pledge allegiance to the world's most powerful computer

Simulation: it's the future

And if you long to never die

Plug in, upload your mind

Come on, you're not even alive

If you're not backed up on a drive

Neanderthal to human being

Evolution, kill the gene

Biology is superficial

Intelligence is artificial

Submit


Text1.png
superposition
superposition2

1. Là, j'ai commencé par créer une simple page où quand on clique sur une ligne du texte, la suivante apparaît quelque part. C'est moi qui choisis où elle apparaît mais j'aimerais faire en sorte qu'elle se place de façon random. J'aimerais aussi faire en sorte que la taille de la police grossisse petit à petit.

2. Bizarrement, j'ai super vite réussi à faire le bazar. Mais ça me saoule, le texte sort de la fenêtre et c'est pas ouf... J'ai fait en sorte que les lettres grossissent aussi au fil des clics. Un autre problème : les superpositions qui n'aident pas à la lecture des phrases. J'ai donc appliqué une ombre pour aider à la lecture mais bof convaincue.

3. Pour vraiment appuyer le côté angoissant, je vais partir sur un design de pop-up : déjà, ça va permettre de mieux lire les phrases mais c'est aussi plus sympa. J'avais aussi mis un truc de couleurs aléatoires mais ça ne me plaisait pas donc je l'ai enlevé.

Le site : POWER