Deuxfleurs/design
24
1
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity
Réflexions et ressources liées à l'identité visuelle de Deuxfleurs
45 commits 1 branch 1 tag 46 MiB
CSS 74%
HTML 26%
Find a file
ADRN cfc1c598db ajout Fira Sans, amelioration du blueprint
2021-10-18 00:53:55 +02:00
assets ajout Fira Sans, amelioration du blueprint 2021-10-18 00:53:55 +02:00
blueprint ajout Fira Sans, amelioration du blueprint 2021-10-18 00:53:55 +02:00
charpente@a418d30371 added skeleton of the site 2021-10-17 18:36:38 +02:00
inspirations idee puces password a la ghost in the shell 2021-02-16 23:03:50 +01:00
lab rassemblement des assets, import CSS de Space Mono dans son fichier 2021-10-18 00:31:09 +02:00
notes branches et canopee 2021-02-02 22:36:36 +01:00
ronce added skeleton of the site 2021-10-17 18:36:38 +02:00
.gitmodules added charpente submodule 2021-10-17 16:44:51 +02:00
LICENSE.md added skeleton of the site 2021-10-17 18:36:38 +02:00
README.md blueprint 2021-10-17 16:37:04 +02:00

README.md

Laboratoire du futur site web de Deuxfleurs

Les tests graphiques sont dans /lab, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre !

Objectifs techniques

  • Responsive mobile-first design.
  • Media queries CSS : Des images envoyées adaptées à la taille des viewports.
  • Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.)

Idées graphiques

  • Branches et canopée : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.

    • ronce/feuille brush.abr contient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.

  • Parallax : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).

  • S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.

  • Couleurs : Ronce a proposé quelques couleurs dans /lab/gimp/branches-et-canopee.

    un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.

  • Elements <code>:

  • Des champs de password avec des grosses puces funky.

    Inspiration visuelle de Ghost In The Shell (Stand Alone Complex) S01E08 (cf. inspirations/images/ghost-in-the-shell_sac_s01e08).

    Guide pour le faire avec CSS.

Inspirations