Deuxfleurs
/
design
19
1
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
Réflexions et ressources liées à l'identité visuelle de Deuxfleurs
60 Commits
1 Branch
1 Tag
46 MiB
CSS 74%
HTML 26%
 
 
Go to file
Vincent 4496999653 Autocollants et planches 2023-11-04 18:18:34 +01:00
assets Logo en svg et meilleur résolution en png 2022-11-12 22:50:48 +01:00
autocollants Autocollants et planches 2023-11-04 18:18:34 +01:00
inspirations idee puces password a la ghost in the shell 2021-02-16 23:03:50 +01:00
lab reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'. 2021-11-30 13:11:47 +01:00
maquette ajoute export maquette png 2021-11-30 13:17:25 +01:00
notes ajout idee contenu pour le site par Quentin 2022-01-02 16:23:04 +01:00
ronce nouvelle version de l'illustration de Ronce 2021-12-02 15:00:40 +01:00
LICENSE.md reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'. 2021-11-30 13:11:47 +01:00
README.md edited README - après, j'arrête, promis. 2021-11-30 13:20:34 +01:00

README.md

Laboratoire du futur site web de Deuxfleurs

Organisation du dépôt

Ce dépôt nous suit depuis un bout, et c'est donc un petit merdier plein de trésors inespérés (hum).

  • maquette/ contient des exports de notre maquette, créée sur Penpot (demandez-nous les accès si vous voulez).

  • ronce/ contient tout ce qui concerne Ronce, la graphiste qui nous a dessiné l'image dans les arbres.

    Toutes les versions de illustration-ronce sont sous licence, ne l'utilisez pas sans autorisation. Nous avons l'autorisation de l'utiliser pour le site de Deuxfleurs.

    feuilles_brush.abr est une brush de l'illustration, qu'elle nous a filé au cas où on veut du bitmap assorti sur le site.

  • lab/ contient des mini-projets sous forme de pages web, qui sont des idées graphiques qu'on pourrait inclure au site final.

    top-nav.html contient une bonne partie du HTML qu'on attendrait dans la version finale. Hésitez pas à copier-coller.

  • assets/ contient les assets (css, fonts & images) qui sont utilisés dans lab/.

  • notes/ contient des notes au format texte. N'hésitez pas à y ajouter vos recherches.

  • inspirations/ contient des assets graphiques qui nous ont inspiré pendant nos recherches graphiques.

Notes

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 (lab/)

  • 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.

  • Top Nav : Comment il se comporte ce menu, avec l'image pleine page quand on débarque sur le site ? Eh bah on sait pas, c'est moche dans tous les cas :D

  • Couleurs : Ronce a proposé quelques couleurs dans assets/images/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 & Ressources