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