Différences

Ci-dessous, les différences entre deux révisions de la page.

--- projets:design2011 [Le 13/06/2011, 22:44]
sam7 [Planning du projet] modif sam7
+++ projets:design2011 [Le 30/01/2012, 23:53]
xabilon [[EN COURS] Définir la mise en page]
@@ Ligne 1: / Ligne 1: @@
 ====== Design 2011 ======
-En 2010 Canonical a changé radicalement la charte graphique d'Ubuntu, passant vers des couleurs orange pour tout ce qui est communautaire, aubergine pour tout ce qui est commercial et gris pour tout ce qui est serveur. De même le logo a été modifié pour le rendre plus simple, monochrome sur fond uni. Afin que toutes les communautés et les sites puissent suivre et s'adapter, des documents ont été rédigés. [[http://design.canonical.com/the-toolkit/guides-for-websites/|Guide de design web]]
+En 2010 [[:Canonical]] a changé radicalement la charte graphique d'Ubuntu, passant vers des couleurs orange pour tout ce qui est communautaire, aubergine pour tout ce qui est commercial et gris pour tout ce qui est serveur. De même le logo a été modifié pour le rendre plus simple, monochrome sur fond uni et une police ubuntu a été créée.
-Nous devons essayer d'adopter nous aussi cette nouvelle charte graphique, à notre sauce bien entendu.
+Afin que toutes les communautés et les sites puissent suivre et s'adapter, des documents ont été rédigés et sont régulièrement améliorés : [[http://design.canonical.com/the-toolkit/guides-for-websites/|Guide de design web]] (pour ubuntu uniquement).
-Les discussions ont lieu sur la [[http://doc.ubuntu-fr.org/wiki/liste_discussion#coordination_des_sites_de_la_communaute_ubuntu_francophone|liste des développeurs web]], inscrivez-vous pour suivre et participer. Des réunions IRC sur #ubuntu-fr-devweb seront planifiées tout au long de l'année afin de faire le point et avancer.
+Nous devons essayer d'adopter nous aussi cette nouvelle charte graphique, et nous en inspirer pour réaliser notre futur thème. Mais avant tout nous devons définir des bases solides et rédiger un cahier des charges minimal encadrant ce futur thème.
+Les discussions ont lieu sur la [[:wiki:liste_discussion#coordination_des_sites_de_la_communaute_ubuntu_francophone|liste des développeurs web]], inscrivez-vous pour suivre et participer. Des réunions IRC sur #ubuntu-fr-devweb sont planifiées tout au long de l'année afin de faire le point et avancer.
 ===== Planning du projet =====
-  - Définir une mise en page globale (en suivant le guide et les indications ci-dessous) en réalisant des essais sur :
+  - **Définir une mise en page globale** (en suivant le guide et les indications ci-dessous) en réalisant des essais sur :
-    * La page accueil globale
+    * La [[http://ubuntu-fr.org|page accueil]]
     * une page liée à la page d'accueil
-    * La page accueil de Documentation
+    * La [[http://doc.ubuntu-fr.org|page accueil de Documentation]]
     * une page de Documentation
-    * La page d'accueil du Forum
+    * La [[http://forum.ubuntu-fr.org|page d'accueil du Forum]]
     * une page du forum (topic)
     * une page du forum (post)
-    * Le Planet FIXME autre : le planet par exemple ? faudrait pas l'oublier cette fois, non? Julientroploin\\
+    * Le [[http://planet.ubuntu-fr.org|Planet]]
-    * (autres ?)  FIXME autre : Et je me posais la question pour la boutique aussi... mais elle est un peu "à part" Julientroploin\\
+    * autre ?
-    *
   - Définir un thème graphique respectant les contraintes de mise en page pour la page d'accueil du site (en suivant la charte et le guide)
     * pour ubuntu
@@ Ligne 27: / Ligne 27: @@
     * pour lubuntu
     * pour edubuntu
-FIXME : si l'on respecte la charte graphique, vu le nombre limité de couleurs ... je crains qu'il soit inutile d'envisager de faire autre chose qu'une seule variante quelque soit la version d'ubuntu utilisée ... ça risque d'être la fin de ces déclinaisons :( sam7\\
   - coder ces différents thèmes pour nos outils (peu importe l'ordre)
-    * Drupal
+    * www
     * Planet
     * Documentation
@@ Ligne 37: / Ligne 35: @@
     * autre?
   - Déployer ces thèmes au fur et à mesure de leur achèvement.
-FIXME : il serait sans doute préférable, vue le contexte de tout sortir en même temps sam7\\
-===== Nouveau logo ubuntu-fr =====
+==== [EN COURS] Définir la mise en page ====
+//mettre ici les liens vers vos maquettes de mise en page. N'utilisez pas de couleurs, noir, blanc et nuance de gris pour l'instant pour se concentrer sur l'apparence globale.//
+  * www
+{{http://yoboy.fr/design/design.png?200|Accueil par YoBoY}} {{http://pix.toile-libre.org/upload/original/1309119169.png?200|par sam7}}
+  * Documentation
+{{http://yoboy.fr/design/design_autre.png?200|Page de doc par YoBoY}} {{http://pix.toile-libre.org/upload/original/1309119380.png?200|Accueil doc par sam7}} {{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/theme_general1_doc.png?200|par xabilon}} {{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/theme_general1_docpage.png?200|par xabilon}}
+  * forum :
+{{http://pingaiz.free.fr/Fichiers/forum_v3alpha1.png?200|par xabilon}} {{http://pingaiz.free.fr/Fichiers/forum_v3_alpha2.jpg?200|par xabilon}} {{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/menu_forum_connecte.jpeg?200|par xabilon}} {{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/theme_general1.png?200|par xabilon}} {{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/theme_general1_reduit.png?200|par xabilon}} {{http://yoboy.fr/design/design_forum.png?200|Accueil forum par YoBoY}} {{http://yoboy.fr/design/design_forum2.png?200|liste de sujets par YoBoY}} {{http://yoboy.fr/design/design_forum3.png?200|posts par YoBoY}} {{http://pix.toile-libre.org/upload/original/1309119469.png?200|Accueil forum par sam7}} {{http://pix.toile-libre.org/upload/original/1309119536.png?200|post forum par sam7}}
+{{http://pix.toile-libre.org/upload/original/1314576344.png?200|discussion forum par samuncle}}
+  * Planet
+{{http://pix.toile-libre.org/upload/original/1309119586.png?200|Accueil planet par sam7}} {{http://pix.toile-libre.org/upload/original/1309775776.png?200|par JulienTropLoin}}
+  * Divers
+{{http://yoboy.fr/design/design_menu.png?200|Menu utilisateur par YoBoY}} {{http://yoboy.fr/design/design_menu2.png?200|menu unity par YoBoY}}
+{{http://pingaiz.free.fr/Fichiers/Maquettes_forum_v3/top-outils.jpg?200|Top-bandeau d'outils spécifiques fixe à la Facebook-like changeant ou vide selon les outils}}
+===== Les éléments souhaités =====
+==== S'inspirer des recommandations officielles ====
+Lisez le [[http://design.canonical.com/the-toolkit/guides-for-websites/|guide de design web]] avant tout et essayez de vous en inspirer, principalement dans les couleurs et l'esprit graphique.
+==== Nouveau logo ubuntu-fr ====
 Un nouveau logo existe depuis l'année dernière, mais est incompatible avec notre thème actuel. Ce qui fait que nous ne pouvons pas communiquer ouvertement sur ce logo.
-{{http://yoboy.fr/images/ubuntu-fr_logo2010.png}}
+{{http://yoboy.fr/images/ubuntu-fr_logo2010.png?300}}
-===== utilisation d'un menu unifié =====
-En haut de tous nos outils une barre unique et identique permettra de faire un lien entre tous les domaines existants dans notre communauté (ubuntu-fr, ubuntu-party, documentation, forum, planet, ...). On peut également y mettre le lien de connexion sur le site actuel, ou tout autre élément utile à tous les sites.
-Ce menu doit être neutre dans ses couleurs afin d'être réellement identique sur tous les sites.
+==== utilisation d'un menu unifié ====
+En haut de tous nos outils une barre unique et identique permettra de faire un lien entre tous les domaines existants dans notre communauté (ubuntu-fr, ubuntu-party, documentation, forum, planet, ...). On peut également y mettre le lien de connexion sur le site actuel, ou tout autre élément utile à tous les sites. Le contenu de cette barre n'étant pas défini, vous pouvez proposer des contenus types qui vous semblent pertinents.
-===== Adoption d'une grille de présentation =====
+Ce menu doit être neutre dans ses couleurs afin d'être réellement identique sur tous les sites et nom de domaines.
+  * un exemple : la barre en haut de tous les outils google
+==== Adoption d'une grille de présentation ====
 Une grille permet de clarifier et d'harmoniser l'apparence d'un site en définissant en amont tout ce qui est largeurs et espaces de mise en page. Nous restons sur un principe fluide afin d'offrir la taille maximale d'affichage, mais nous devons adopter un système de grille, et je pense que le 12 colonnes est le plus simple et permet déjà de positionner correctement en offrant une certaine souplesse. Un exemple en utilisant un tableau de dokuwiki.
 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
@@ Ligne 66: / Ligne 87: @@
   * [[http://www.designinfluences.com/fluid960gs/12/|des exemples live]]
-===== Suppression des colonnes de menus =====
+==== Suppression des colonnes de menus ====
 Les écrans sur lesquels nous consultons le web ont tendance à afficher des largeurs plus faible. Il est courant de penser que l'affichage actuel doit être compatible avec une résolution de 1024x768. Les smartphones et autres tablettes offrent même des définitions plus faibles qui rendent le surf sur des sites non adaptés très laborieux. Afin d'offrir le maximum de largeur quelque soit l'écran nous nous devons de supprimer les informations inutiles des colonnes de gauche et de droite et se concentrer sur un contenu de qualité en pleine largeur. De ce fait les menus doivent être reporté en haut ou en bas de page suivant leur intérêt.
-Bien sur l'adoption d'un système de grille peut sembler contradictoire, mais celui-ci est principalement utile pour les pages présentant de multiples sources d'informations, ou on ne parle plus de colonnes mais de blocs d'informations provenant de sources diverses et/ou mettant en valeur des éléments importants. Ces blocs d'informations sont utiles principalement pour les pages d'accueil des outils ou pour les pages spéciales de présentation d'ubuntu, de téléchargement, de contact, etc...
+Bien sûr l'adoption d'un système de grille peut sembler contradictoire, mais celui-ci est principalement utile pour les pages présentant de multiples sources d'informations, ou on ne parle plus de colonnes mais de blocs d'informations provenant de sources diverses et/ou mettant en valeur des éléments importants. Ces blocs d'informations sont utiles principalement pour les pages d'accueil des outils ou pour les pages spéciales de présentation d'ubuntu, de téléchargement, de contact, etc...
-===== Réduction du nombre d'images dans le thème =====
+==== Réduction du nombre d'images dans le thème ====
 Quoique les images permettent de faire d'agréables effets (ombres, inclusions, survol)... elles alourdissent le chargement des pages. De plus souvent elles n'apportent que peu visuellement, là ou une couleur uni ferait tout autant l'affaire. Nous nous devons de simplifier au maximum le thème et les fichiers nécessaires à l'affichage d'une page. Les éléments graphiques téléchargés devraient être du contenu offrant une information et pas juste une ombre sous un menu.
-===== Utilisation du meilleur du web =====
+==== Utilisation du meilleur du web ====
-Nous devons essayé de respecter au mieux les standards du web, et par conséquent utiliser au mieux HTML5, CSS3 et JS. Pour ce qui est de la compatibilité, une note pour les ordinateurs anciens est à prévoir. Les navigateurs supportés sont Firefox 3,6, firefox 4, IE 8 et + (avec quelques sacrifices), Chrome / Chromium, Safari (liste à compléter / modifier). Les autres, quoique nous nous devons de limiter au maximum les incompatibilités, ne seront en aucun cas des points bloquant pour mettre en ligne les thèmes et les erreurs rencontrées sur ce navigateurs seront corrigés dans la mesure du possible.
+Nous devons essayer de respecter au mieux les standards du web, et par conséquent utiliser au mieux HTML5, CSS3 et JS. Pour ce qui est de la compatibilité, une note pour les ordinateurs anciens est à prévoir. Les navigateurs supportés sont Firefox 3,6, firefox 4, IE 8 et + (avec quelques sacrifices), Chrome / Chromium, Safari (liste à compléter / modifier). Les autres, quoique nous nous devons de limiter au maximum les incompatibilités, ne seront en aucun cas des points bloquant pour mettre en ligne les thèmes et les erreurs rencontrées sur ces navigateurs seront corrigées dans la mesure du possible.
+Le site devra être accessible pour tous les utilisateurs.