Partage
  • Partager sur Facebook
  • Partager sur Twitter

[HTML-CSS] Retours sur mon portfolio

    2 juillet 2024 à 11:14:22

    Bonjour, je viens de terminer mon portfolio, j'ai besoin de retours sur l'ux pour améliorer la navigation.
    J'aurais une ou deux questions en particulier à poser après que vous l'ayez vu !

    -> Lien du portfolio

    Document (alexrz912.github.io)

    -> Lien du repo github si nécessaire

    AlexRz912/portfolio-v2 (github.com)

    La page d'accueil est dans app/views/homepage/index.html !

    Merci d'avance pour ceux qui se seront amusés a tester.

    -
    Edité par AlexRz 2 juillet 2024 à 13:46:17

    • Partager sur Facebook
    • Partager sur Twitter
      2 juillet 2024 à 13:46:51

      Asmitta a écrit:

      Bonjour, github permet d'heberger des sites web(GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.). Ce serait plus aisé pour nous si ton site etait en ligne.


      Yes, du coup, je viens d'apprendre comment héberger sur github, c'est fait ! Merci.
      • Partager sur Facebook
      • Partager sur Twitter
        2 juillet 2024 à 14:00:23

        Alors je viens de visiter et voici mes remarques:

        • Ce n'est pas agreable à voir premierement, beaucoup de couleurs. Tu peux donner plus de place au site lui meme qu'aux images de tes realisations(bon je sais si j'explique bien)
        • J'ai mis un moment avant de me rendre compte qu'il fallait cliquer pour ouvrir un projet, je scrollais depuis(pour rien) en cherchant une sorte de bouton special. Il faut donc revoir cela, ton client(vu qu'il est la cible) ne devrait pas souffrir autant.
        • Un portfolio ne presente pas seulement les projets mais aussi l'auteur de ceux ci. Donc tu aurais pu te presenter, parler de tes experiences et de tes aspirations, developper tes competences(un peu comme dans un CV) puis apres presenter tes projets
        Je vais m'arreter là.
        • Partager sur Facebook
        • Partager sur Twitter
          2 juillet 2024 à 15:18:07

          Asmitta a écrit:

          Alors je viens de visiter et voici mes remarques:

          • Ce n'est pas agreable à voir premierement, beaucoup de couleurs. Tu peux donner plus de place au site lui meme qu'aux images de tes realisations(bon je sais si j'explique bien)
          • J'ai mis un moment avant de me rendre compte qu'il fallait cliquer pour ouvrir un projet, je scrollais depuis(pour rien) en cherchant une sorte de bouton special. Il faut donc revoir cela, ton client(vu qu'il est la cible) ne devrait pas souffrir autant.
          • Un portfolio ne presente pas seulement les projets mais aussi l'auteur de ceux ci. Donc tu aurais pu te presenter, parler de tes experiences et de tes aspirations, developper tes competences(un peu comme dans un CV) puis apres presenter tes projets

          Je vais m'arreter là.


          1: Je veux bien que ce ne soit pas agréable visuellement, je peux effectivement réduire la taille des cards pour laisser un peu plus respirer et choisir une autre couleur que le vert explosif que j'ai mis sur les titres.

          2: Qu'est ce que tu proposes pour corriger le tir ? Cela me parait difficilement concevable que ce ne soit pas évident parce que le curseur change au survol et que ça fait partie du paysage d'internet comme un call to action. Je peux rien faire rapidement de ce côté là sans plus de détail.

           (edit: J'ai une idée à tester: je penses que ce serait bien que l'image s'agrandisse à l'intérieur de son cadre au survol mais je te demande quand même ce qui selon toi, est à mettre en place pour qu'un composant qui n'est pas un button soit rapidement identifiable comme tel)

          3: Oui, je compte me présenter dans about me, je préfère que les projets soient mis en avant.

          -
          Edité par AlexRz 2 juillet 2024 à 15:33:00

          • Partager sur Facebook
          • Partager sur Twitter
            2 juillet 2024 à 15:47:32

            Bonjour,

            1. pour le point 2 d'Asmitta, c'est que paradoxalement les liens sont trop gros. Donc quand on arrive sur la page, statistiquement on a la souris sur un des éléments et ce n'est pas clair. Je pense que mettre un lien à part, au-dessus de l'image si tu veux, avec un design clair (un aspect de bouton, avec fond coloré, par exemple), ça permettra de mieux s'y retrouver.
            2. Dans la page des projets, le rouge des liens n'a pas un contraste suffisant. Voilà le retour de Axe DevTools :

              l’élément a un contraste de couleurs insuffisant de 3.19 (couleur d’avant plan : #cb5858, couleur d’arrière plan : #303030, taille de police : 12.0pt (16px), graisse : normal). Contraste de couleur attendu : 4.5:1

            3. Pense à mettre des textes alternatifs sur tes images.
            4. Un lien vers la page d'accueil, et/ou un menu de navigation, serait appréciable.
            5. Le <title> doit avoir un contenu pertinent, pas juste « Document » ;)
            6. <br> n'est pas là pour faire des sauts de ligne multiples : utilise plutôt des paragraphes, et joue avec ses marges pour créer l'espacement.
            7. Utiliser des fichiers css différents par composant c'est très bien mais attention, ils ne sont pas indépendants. Typiquement le style du <a> dans https://github.com/AlexRz912/alexrz912.github.io/blob/master/app/assets/css/components/navbar.css s'appliquera à tous les liens du site, pas seulement ceux de la navbar. Change ton sélecteur (ou met ce sélecteur dans un fichier commun si le design est ok pour toi).
            • Partager sur Facebook
            • Partager sur Twitter

            Pas d'aide concernant le code par MP, le forum est là pour ça :)

            [HTML-CSS] Retours sur mon portfolio

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown