Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

UI/UX : les bonnes pratiques

Cette page traite de l’expérience utilisateur. Faire un site c’est top, le faire avec une bonne navigation et un visuel optimisé pour le rendre agréable aux visiteurs, c’est mieux !

L’UI/UX regroupent 240 règles. Voici quelques bases fondamentales sur lesquelles tu vas pouvoir te pencher lors de la création de ton projet.

Tu trouveras sur cette page :

Programmation HTML :

Les bonnes pratiques de programmation améliorent le référencement, donc la visibilité d’un site dans les moteurs de recherche.

 

Retiens les 3 primordiaux :

  • Le codage de caractères utilisé est UTF-8. Le code source de chaque page contient une métadonnée qui définit le jeu de caractères.
  • Chaque page contient un <title>… </title> dans son head
  • Un seul <h1>…</h1> par page.

<!DOCTYPE html> 

<html lang=« fr »> 

  <head> 

    <meta charset=« UTF-8 »> 

    <title>Titre dans l’onglet</title> 

  </head> 


  <body> 

    <header> 

      <h1>Titre du site</h1> 

    </header>

 

La charte graphique :

La charte graphique doit être cohérente sur l’ensemble du site.
Pour cela on utilise la règle des 3 couleurs.
  • Une première couleur dominante occupe 60% de l’interface.
  • Une seconde ajoutant de l’harmonie occupe 30%
  • La troisième, souvent plus perçante, occupe 10% et permet d’en accentuer les informations.
  • Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.

Nos textes doivent être lisibles. Cela passe par la couleur de celui-ci, qui doit avoir un contraste suffisant avec son arrière-plan.

 

Utilise avec prudence les dégradés, la transparence et les images en arrière-plan.

La page d'accueil :

  • La page d’accueil expose la nature des contenus et services proposés.
  • Il est possible de revenir à la page d’accueil depuis toutes les pages.

On peut mettre en place un menu, avec un onglet “accueil”, ou encore rendre le logo du site cliquable et redirigeant sur l’accueil.

<!– Menu –>
<nav>
  <ul class=« flex space-x-10 text-xl font-semibold »>
    <li><a href=« / » >ACCUEIL</a></li>
    <li><a href=« /batman » class=« active »>BATMAN</a></li>
    <li><a href=« /thor » class=« active »>THOR</a></li>
    <li><a href=« /hulk » class=« active »>HULK</a></li>
  </ul>
</nav>

 

  • Le header et le footer doivent se trouver au même endroit sur toutes les pages du site.

Les balises <header>…</header> et <footer>…</footer> seront toujours posées de la même façon sur toutes les pages, comporteront toujours le même design et les mêmes informations.

  • L’utilisateur doit pouvoir retrouver toutes les informations du site facilement.

On réfléchit toujours à ce que toutes les pages du site soient trouvables facilement.

Le corps du site :

La taille des éléments cliquables est suffisante.

Exemple : Les liens du menu ne doivent pas être plus petits que le curseur de la souris.

<header>
  <h1> Titre principal de la page</h1>
</header>
<main>
  <section>
    <h2>Titre d’un article</h2>
    <p>Paragraphe de l’article</p>
  </section>
  <section>
    <h2>Titre d’un second article</h2>
    <p>Paragraphe de l’article</p>
  </section>
</main>

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisés. 

Les styles CSS ne suffisent pas pour justifier l’importance d’un texte.

Les icônes doivent être accompagnés de leur intitulé.

<section>
    <ul>
      <li>
        <i class=« fa-brands fa-twitter »></i><span> Twitter</span>
      </li>
      <li>
        <i class=« fa-brands fa-facebook »></i><span> Facebook</span>
      </li>
      <li>
        <i class=« fa-brands fa-instagram »></i><span> Instagram</span>
      </li>
    </ul>
  </section>

Les images :

Chaque image, même décorative, est dotée d’une alternative textuelle appropriée.

<div class=« flex justify-center »>
  <img src=« HP-home.gif » alt=« Harry Potter » />
</div>

 

<a href=« index.html »>
 <img src=« ./static/images/logo.png » alt=« Accueil »/>
</a>

Chaque image-lien est dotée d’un texte décrivant l’information apportée.

Les liens :

Chaque lien est doté d’un intitulé dans le code source.

<li>

<a href=« index.html » title=« Retour à l’accueil »>Accueil</a>

</li>

<nav>
 <ul class=« flex space-x-10 text-xl font-semibold »>
  <li class=« hover:text-emerald-500 »>
    <a href=« index.html »>Accueil</a>
    </li>
    <li class=« hover:text-emerald-500 »>
      <a href=« got.html »>GOT</a>
    </li>
    <li class=« hover:text-emerald-500 »>
      <a href=« stranger.html »>Stranger Things</a>
    </li>
    <li class=« hover:text-emerald-500 »>
      <a href=« twinpeaks.html »>Twin Peaks</a>
    </li>
  </ul>
</nav>

Les liens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.

 

Dans cet exemple, tous les liens sont écrits en noir, ont la même taille, la même texture de gras. Et ils passent tous en vert au passage de la souris.

Le site n’applique pas le même style aux liens visités et non visités. 

Pour cela, utilise la pseudo-classe css :visited

 

a:visited {
color : #F8F8F8 ;
 }