Deuxfleurs/design
24
1
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity
design/README.md

4.4 KiB
Raw Blame History

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