Changement d'interface pour notre site

De Octet.ca

Cet article contient les informations pour refaire l'interface de notre site.

Sommaire

[modifier] Les 10 sites web qu'on aime.

[modifier] Miguel

  1. ONF (couleurs sobres, peu de catégories pour beaucoup de contenu)
  2. synonymes.com (page simple pour un outil simple. Élégant)
  3. Cinéma Montréal (même commentaires que ONF.ca)
  4. Mediawiki (comme ici!). Liens reliés à l'interface et à ses fonctionnalités à gauche et en haut seulement. Séparation claire. Sobriété.

[modifier] Wayne

Je vais pas passer 25 heures sur stumbleupon pour trouver, mais quelques pages pas mal :

  1. Ruby — Jeu de couleurs le fun et divisions claires
  2. TechEBlog — Feel léger
  3. Almost Fearless — Simple et efficace; palette
  4. Headcase Barbers — Subtilités de gradients et clarté
  5. Sheriar designs — Respire, j'aime l'union entre header et colonne

[modifier] Spécifications générales

  • 3 colonnes; contenu au centre
    • La colonne de gauche est optionnelle et si elle est présente, est liée au contenu de la page elle-même (par exemple, navigation ou liens externes); colonne de droite plus orientée sur autres contenus du site et outils génériques
  • Largeur infinie (complet comme sur [1] ou partiel comme sur [2])
  • Doit entrer sur un écran de 1024px de large;

[modifier] Éléments pour page d'accueil

Voir http://ptaff.ca/ pour savoir de quoi on jase.

  • Logo et slogan
  • Citation latine
  • Derniers-nés
  • Fils de nouvelles
  • Sphères
  • À propos

[modifier] Éléments pour footer

Voir le bas de page de http://ptaff.ca/humidex/ Les éléments là (à partir de la date de création) devraient tous s'y retrouver:

  • Date de création
  • Date de mise à jour
  • Liste de liens
  • Conformités W3C
  • Note de copyright

[modifier] Éléments nécessaires à la page intérieure

  • Styles pour niveaux de titres h1, h2, h3, h4, h5, h6;
  • Style pour figure (graphique dans une boîte; photo avec légende);
  • Style pour table des matières avec ancres;
  • Style pour tableau (avec en-têtes et titre);
  • Style pour changer de langue
Outils personnels