Faire une landing page complète

[AJuliette]

Issue en cours de rédaction, toute contribution est la bienvenue !

Résumé de l'issue

Compléter la landing page avec plusieurs sections présentant Women On Rails, le but du site ressources, le fonctionnement en open source, les autres réseaux de Women on Rails (peut-être y ajouter le contenu de la page help.js/ À propos ?)

Situation actuelle

Juste un encart avec un call to action

Situation souhaitée

Une landing page qui donne envie !

Ressources complémentaires

Des sites pour se donner des idées de design:

• https://www.vagrantup.com/
• https://middlemanapp.com/
• https://github.com/collections/github-pages-examples (explorer les landing pages)
• https://www.goodweb.design/

[morganbonhomme]

Hello Juliette ! Est-ce que cette issue est toujours ouverte ? Ca me dit de faire une landing page bien sympa ! Je ne sais pas si tu as déjà des idées / maquettes de comment tu vois la landing page ?

[AJuliette]

Hello ! Oui bien sûr elle est ouverte ! Merci de te proposer de contribuer ! :) Je ne me suis pas encore posée pour y réfléchir ou écrire, mais je sais qu'on a besoin d'une landing page pour que le site fasse un peu plus rêver ! Dans le style, j'aime bien celle de Tech interview handbook: des gros blocs de couleurs qui alternent. Après je suis ouverte à toute proposition si tu as une idée ! Je pense que ça serait pas mal d'y bouger la page qu'on a déjà "Qui sommes-nous ?". Puis j'aime beaucoup la section de tech interview Handbook qui explique tout ce que le site propose dans des petites cards. Donc un enchaînement comme ça:

Ça fait très sérieux en fait ^^" Peut-être moins de texte dans le troisième bloc et des illustrations undraw ?

Ça peut être un peu plus "funky" comme ça pour ce que permet de faire le site:

Ou comme ça:

(ça vient du site Mazars)

Après, avec le temps, j'aimerais ajouter des témoignages et un bouton pour sponsoriser mais ça sera quand le projet sera un peu plus avancé.

[morganbonhomme]

Pas de souci pour la contribution, je trouve le projet très cool ! Je suis moi-même en train de chercher un poste en dev JavaScript, et un site comme ça m'aurait bien aidé :) Mais du coup j'ai un peu le temps de vous aider. Je vais voir ce que je peux faire, est-ce que vous auriez déjà un petit slack ou discord pour discuter plus facilement ?

[AJuliette]

Merci pour ce retour ! Ben cool, parfait si tu as du temps pour nous aider et si tu peux valoriser ça dans ta recherche, c'est top :) On a un slack et un discord mais c'est réservé aux femmes, du coup je ne mets pas les liens d'invitation en public, tu peux envoyer un mail: womenonrails@gmail.com et je t'inviterai. Pour la landing page j'ai besoin de me poser un peu pour le wording, j'aurai plus le temps ce week-end, mais j'avais une idée pour la page d'index des articles du blog, tu pourras tout de suite l'attaquer si ça te dit, je rajoute l'issue et je te taggue dessus

[clodiap]

Hello :cat:

Il y a plein d'illustrations gratuites sur ce repo (rubrique "free") : https://github.com/MrPeker/awesome-illustrations#free-illustrations. Il y en a aussi ici mais faut trier, y a de tout ^^ : https://freesvg.org/. Et si il y a besoin de photos, il y a Pixabay et Unsplash.

[morganbonhomme]

@clodiap Merci je vais regarder ça !

[AJuliette]

J'aime bien sur le site de Zetoolbox qu'on puisse voir /cliquer sur tout plein de catégorie comme ça:

Mais c'est pas sur leur landing page, et je sais pas si sur la landing page ça serait lourd comme ça. Vous aimez, qu'est-ce que vous en pensez ?

[clodiap]

Ah oui moi aussi j'aime bien, c'est visuel, et ça pourrait être sympa même sur la landing, ça mettrait bien l'accent sur les ressources.

[AJuliette]

Ah ben justement, j'allais rajouter le site Brilliant.org, je viens de tomber dessus, ils ont des ressources et on peut les browser sur leur landing page et c'est pas mal en effet !

[AJuliette]

Et ce qui est intéressant sur leur landing page c'est que c'est vraiment consacré à leurs ressources et il y a juste en bas une sorte de "navbar" avec un "about" où on peut en apprendre plus sur la structure

[morganbonhomme]

Sur l'aspect pratique en revanche, il faudrait mettre les même catégories que celles déjà définies sinon on perd la cohérence ( donc trouver un job / s'informer etc...), sauf qu'il n'y a pas de page dédiée à ces catégories. Du coup il faudrait mettre les sous-catégories et ca risque d'être moins clair non ?

[morganbonhomme]

Ou alors il faudrait faire un bandeau avec une couleur forte par catégorie et là on mets les sous catégories en petits carrés

[AJuliette]

(Je fais des propositions hein) Sur cette page, ils ont un tab vertical avec des infos dedans, on pourrait les ranger comme ça ?

[clodiap]

Sympa ça, ça permet de ranger les sous-catégories :heart_eyes:

[AJuliette]

😍 Et sinon je viens de tomber sur cet outil pour faire des favicons stylées avec des emojis: https://formito.com/tools/favicon

[clodiap]

Trop chouette cet outil :heart_eyes: , je me disais qu'il allait falloir trouver tout un tas d'icones libres de droits ^^

[AJuliette]

J'ai trop d'idées pardoooooon SINON on pourrait faire un breadcrumb vertical comme ça avec les catégories: 1. Trouver un job 2. Pratiquer, etc, etc et dedans le titre puis en dessous les liens vers les sous-catégories

[morganbonhomme]

Pour les picto libres de droits, il y a flaticon J'aime bien les tabs !

[AJuliette]

Ok on part sur les tabs alors ! Il y en a sur infima mais quand je clique elles marchent pas ^^" C'est trop stylé flaticon je connaissais pas ! Elles donnent toutes trop envie !

[clodiap]

Sympa ce breadcrumb, ça donne envie de l'utiliser ^^, peut-être pour un CV type timeline ou une explication avec des étapes, arf y a trop de trucs à faire :dizzy_face: :joy: Sinon pour le site je plussoie pour les tabs, et :+1: pour flaticon aussi :heart_eyes:

[AJuliette]

@clodiap Si ça te tente, je me disais qu'on pouvait faire la page: Le processus d'embauche comme ça, avec un petit texte sommaire pour chaque étape

[clodiap]

Ah oui bonne idée :+1: , je vais créer l'issue

[morganbonhomme]

@clodiap @AJuliette J'ai fait une petite maquette pour les tabs sur Figma, vous en pensez quoi ?

[clodiap]

Bravo, ça prend forme :clap: C'est sympa, ça donne du dynamisme avec les couleurs :+1: Je pense qu'on se rendra mieux compte avec des icônes, mais peut-être qu'il faudra rapprocher les carrés du milieu afin que ça ressemble plus à la copie d'écran de zetoolbox ?

[morganbonhomme]

Plutôt un truc comme ça du coup ?

[clodiap]

C'est pas mal ! Je me suis permise de rajouter des icônes pour qu'on voit un peu plus ce que ça peut donner (j'espère que tu ne m'en voudras pas :wink: ) :

J'ai fait un autre essai en enlevant le fond bleu pour voir :

Avec la version dark :

Qu'est-ce que vous en pensez @AJuliette et @morganbonhomme ?

[morganbonhomme]

Trop stylé ! J'aime bien le fond blanc effectivement c'est plus clair, et plus facile à mettre en place côté dark. En revanche il faudrait qu'on trouve un moyen pour dire à l'utilisateur qu'il est dans la partie "trouver un job" . J'avais essayé des trucs sur le bouton en lui-même mais ca rendait moche. Je vais regarder un peu ce que font les autres :)

[clodiap]

Ah oui effectivement ce serait mieux si on voyait où l'utilisateur se trouve, j'avais mis le lien de la même couleur que la tab mais ça ne se voit pas assez. Je vais aller voir aussi ce qui se fait ^^

[morganbonhomme]

@clodiap Tu as refait ta maquette sur quel site ? J'aimerai bien reprendre tes pictos héhé

[clodiap]

@morganbonhomme J'ai rajouté les pictos sur Figma (voici le lien), ils viennent de Flaticon :cat:

[morganbonhomme]

Dac ! J'essaie de refaire une vraie maquette pour voir si on peut ajouter de la couleur ailleurs que dans les tabs :)

[morganbonhomme]

Pour la page d'accueil vous en pensez quoi dans l'idée ? Je trouve que ca manque de couleur et je me suis peut-être un peu chauffée sur la police du titre haha. Je me penche sur les tabs, ce serait une section juste en dessous :)

[morganbonhomme]

J'ai changé certaines couleurs :)

[morganbonhomme]

Et pour les tabs, je pense que la solution de @clodiap est cool, et pour savoir dans quel tab on est, on change l'opacité des boutons en :hover comme ici

[clodiap]

Ouah trop bien :heart_eyes: ! Et la typo est top ^^ ! +1 pour l'opacité des tabs en :hover

Et toi @AJuliette qu'est-ce que tu en penses ?

[AJuliette]

Ouaouh, bravo et merci de tout ce travail ! 😲

• Pour la banner d'en haut

J'aime beaucoup avec une illustration à droite. Pour la typographie du titre, je pense qu'il vaut mieux reprendre celle du logo pour pas que ça soit trop dissonant, la typo c'est: Intro / Black Caps Je mets le texte du logo que j'ai récupérés de la précédente équipe de Women On Rails, peut-être qu'on pourrait même le reprendre en fait ? 🤔


J'aime beaucoup le nouveau Call To Action, beaucoup plus visible, tu pensais à quelque chose pour le hover ? Pour l'illustration, je trouve qu'avec les couleurs ça rend la banner chaleureuse ! Par contre le style est très différent des illustrations en-dessous, ça ne serait pas harmonieux. Je me dis qu'il faudrait choisir une source d'illustration (soit undraw, soit Flaticon) et s'y "tenir" pour tout le site. Qu'est-ce que vous en pensez ?

• Le tab

Ça rend bien avec le fond blanc ! Pareil, pour un soucis d'harmonie, je mettrai une seule couleur pour les titres à gauche, une dans la gamme des couleurs du site:

• #1B998B
• #188a7d
• #178276
• #136b61
• #1ea899
• #1fb0a0
• #23c7b5

(J'avais fait la gamme avec Colorbox recommandé par Docusaurus https://v2.docusaurus.io/docs/styling-layout/#styling-your-site-with-infima) Et du coup les liens dans la même couleur que ceux du reste du site.

[morganbonhomme]

Merci les filles pour vos réponses !! :sunglasses:

• J'ai remplacé le logo, effectivement si on en a un officiel c'est toujours mieux !
• Pour le :hover je suis en train de finir un cours avancé de CSS, je pense pouvoir faire une anim un peu sympa (sans être too much of course)
• Sinon je suis d'accord que ca risquait de ne pas être du tout uniforme. En revanche je pense pas qu'une seule source soit adaptée pour les pictogrammes + l'image de page de garde (undraw & humaans pas top pour les picto vs Flaticon pas top pour la page de garde.) Du coup j'ai fait 2 tests pour les couleurs, je pense que ca reste assez cohérent. (L'alignement n'est pas parfait, mon ordi est suuuuper lent avec Figma c'est un peu l'enfer pour décaler les élements)

Le premier : juste les couleurs dérivées de #1B998B :

Le deuxième : j'ai tenté avec les couleurs de la palette ici.

[AJuliette]

Ohlala c'est magnifique 😭 Bravo et merci ! Je suis tout à fait convaincue par le deuxième jeux d'image avec des couleurs 👌 Actuellement je me renseigne beaucoup sur l'inclusivité et la diversité dans la tech (par exemple avec ce blog: https://betterallies.medium.com/) et je pense que c'est important de continuer la diversité de représentations dans les picto aussi :3 Par ailleurs on m'a déjà fait une remarque que le site donnait l'impression de n'être qu'à destination des développeuses alors que n'importe qui peut l'utiliser et contribuer en fait. Je viens de me dire qu'on pourrait rajouter dans la headline: "Un site collaboratif pour préparer etc etc" et du coup avec une image où il y a plusieurs personnes (dont des hommes). Les images que j'ai repérées qui ont un côté collaboratif:

<div style"display: flex">

[morganbonhomme]

Plutôt comme ça alors ?

[clodiap]

Effectivement pour la cohérence c'est mieux de garder le logo et les couleurs, même si la typo était chouette ^^ Ça rend super bien :+1:, bravo @morganbonhomme :clap:

[AJuliette]

Oui au top ! Juste du coup avoir des représentations de personnes pas que blanches dans les picto :3

[AJuliette]

Hello @morganbonhomme ! Je ne sais pas si tu as commencé à travailler sur la PR vu que tu avais un process cette semaine.

Je suis tombée sur ce design et je voulais voir ce que vous en pensiez avec @clodiap C'est sur ce site: https://synerghetic.net/services/

C'est le même principe avec l'index à gauche et à droite le contenu, je trouve ça beau et plus clair en grand comme ça. On reste sur le même principe, mais qui prend toute la page. Par contre sur le site ce n'est pas des tabs mais des anchors qui renvoient vers les éléments de la page, avec un effet parallax rapide. Qu'est-ce que vous en pensez: de faire l'index en grand et d'avoir des anchors plutôt que des tabs ?

[morganbonhomme]

Hello ! J'avais plusieurs process cette semaine alors j'ai pas eu le temps de me lancer sur la PR, donc on peut encore changer :) Effectivement c'est plus clair ! J'ai une remarque : (ca marche aussi avec les tabs en fait), est-ce que vous pensez pas que ce sera bizarre pour quelqu'un de cliquer sur un élément de la page d'accueil, ensuite d'arriver sur la page avec le template docusaurus, et si la personne veut changer de catégorie du coup elle a accès au menu docusaurus qui est le même menu que celui de la page d'accueil mais avec un style différent ?

[AJuliette]

Bravo pour les process ! :D Et oui argh très bonne remarque. Genre une landing page hyper travaillée et finalement un site très "doc".

Je me suis dit après coup que ce qu'ils avaient sur leur page c'était ce qu'on avait à droite sur les pages en fait, comme ça:

(Ça vient d'ici pour voir en ligne: https://women-on-rails.github.io/ressources/docs)

Donc peut-être reprendre le layout et du coup avoir que du texte ou de petites illustrations avec:

• un titre en grand
• une mini-phrase d'intro (je les ai faites en quelque sorte là: https://github.com/women-on-rails/ressources/projects?query=is%3Aopen+sort%3Aname-asc, mais bon elles sont un peu brut)
• les différentes catégories avec des illus plus simples

J'ai fait des tests

Avec couleurs:

Sans couleur pour être plus proche de l'espace doc mais c'est très minimaliste ^^"

[AJuliette]

Est-ce que ça fait trop différent / dissonant quand même ? 🤔 Sur le doc y a des collapses mais là c'est pour voir tout ce qu'on peut browser en quelques clics

Pour rappel le menu déroulant à gauche est comme ça:

[clodiap]

Hello :cat: C'est vrai que c'est beaucoup plus clair et aéré comme ça :+1: J'ai fait un essai pour voir ce que ça pourrait donner avec le menu des ressources mais en l'aérant un peu (j'ai modifié les espacements et les couleurs dans l'inspecteur) :

Ça aère un peu plus et ça permet de ne pas dépareiller de la page d'accueil et de garder les menus déroulants qui sont bien pratiques ^^

[AJuliette]

Merci @clodiap d'avoir fait l'essais ! Je ne suis pas convaincue par le vert sur le côté pour la navigation des ressources, sur la page d'accueil ça dynamise mais j'ai l'impression que si on met ça sur les pages docs ça serait trop distrayant.

Bon je suis désolée les filles, je nous ai dispersées... Je suis d'accord avec ta remarque @morganbonhomme, avoir deux types de navigation différents comme ça ça serait confusant. Ça marche bien sur le site que j'ai vu mais c'est parce que c'est un site vitrine en fait ^^"

Je pense que pour la page d'accueil, pour l'instant, ce qu'on pourrait faire de simple c'est de mettre les liens vers quelques pages, les plus pertinentes, au centre, directement, sans tab sur le côté en fait (pardon c'était moi qui l'avait proposé à la base >.<). En gardant le style des icônes proposées avec les couleurs parce que ça rend vraiment bien avec l'illustration du haut. Je pensais à garder comme pages:

• Découvrir le processus d'embauche en dév
• Trouver des offres
• S'entraîner aux tests techniques
• Faire un side-project
• Participer à l'open-source

Et / ou celles que vous pensez pertinentes. :3 Façon diversifytech en fait: https://www.diversifytech.co/ Où on voit d'un seul coup d'oeil ce qu'on peut browser.

Je pense mettre rapidement en place des analytics sur chaque lien, comme ça on pourra voir lesquels sont les plus cliqués et enlever de la page d'accueil les moins populaires. (Avec la mention: "Nos pages les plus consultées" au-dessus comme sur le site de base en fait que j'avais mis tout en haut: https://github.com/women-on-rails/ressources/issues/4#issuecomment-713432633)

J'aimais beaucoup le menu avec toutes les sous-parties des pages mais pour l'instant je ne vois pas comment l'intégrer et vous ? À part faire un sommaire / vue d'ensemble pour les catégories qu'on trouverait pour chaque dropdown en haut de la liste.

[AJuliette]

(Désolée pour la tartine 🍞 )