Réflexions et ressources liées à l'identité visuelle de Deuxfleurs
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
ADRN e2324670a0 ajout idee contenu pour le site par Quentin 6 months ago
assets reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'. 7 months ago
inspirations idee puces password a la ghost in the shell 1 year ago
lab reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'. 7 months ago
maquette ajoute export maquette png 7 months ago
notes ajout idee contenu pour le site par Quentin 6 months ago
ronce nouvelle version de l'illustration de Ronce 7 months ago
LICENSE.md reoarganised stuff; deleted the charpente submodule; the blueprint folder is now 'lab/top-nav.html'. 7 months ago
README.md edited README - après, j'arrête, promis. 7 months ago

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