Ce cahier des charges est à destination de l'équipe de conception et de développement d'un service web. Tout ce qui n'est pas spécifié dans ce cahier des charges doit faire l'objet de propositions durant les phases de conception ou de développement, et doit être validé par le commanditaire pour pouvoir être intégré au produit fini.
- Gérer un projet digital en équipe avec une méthodologie de gestion de projet ;
- Produire des maquettes desktop & mobile et des prototypes d'interfaces Web ;
- Intégrer des pages Web en utilisant des technologies front-end :
- Utiliser les langages HTML & CSS ;
- Manipuler un framework front-end (Bootstrap) ;
- Publier un site en ligne ;
Vous devez concevoir et développer un outil de communication numérique de type site web sur le thème de l'« éco-TIC ». Le site web s'articule autour de 2 axes et doit proposer :
- des informations de sensibilisation à destination du grand public (de préférence visuelles : infographies, animations - les informations textuelles doivent être autant que possible réduites) ;
- des préconisations de pratiques et des solutions à destination du grand public.
« L'informatique durable, l'informatique verte, le numérique responsable, ou encore le green IT (appellation officielle en français : éco-TIC) est un ensemble de techniques visant à réduire l’empreinte sociale, économique et environnementale du numérique.
Dans le domaine des technologies de l'information et de la communication (TIC), elle conçoit ou recourt à des écotechniques afin de diminuer les impacts que les TIC font subir à l'environnement au cours de leur cycle de vie.
L'informatique durable participe au développement durable par l'écoconception de produits et services numériques, la conception de systèmes d’information durables ou l'optimisation et le changement de modèles d'un TIC. »
Source : L'article Wikipédia « Informatique durable »
- Un dossier de conception ;
- Un repository Github avec :
- une branche par page ;
- une branche main fusionnant le travail réalisé sur chaque branche ;
- une board de gestion et de suivi de projet de type kanban, contenant des cards spécifiant :
- la tâche à réalisée,
- la date de démmarage de la réalisation de cette tâche,
- les ressources humaines allouées,
- la date de fin de réalisation ;
- Un site web fonctionnel, hébergé sur un serveur, consultable en ligne et indexable par les moteurs de recherche ;
- 01/03/2020, 13h30 :
- Livraison du produit fini.
- Lucas
- Sonia
- Thierry
- Procédez à l'élection d'un « Chef de projet » qui sera en charge de la coordination des différents acteurs sur le projet ;
- Créez sur Github un repository du nom de votre projet dans l'organisation « Bourg-en-Stress » pour héberger les versions de vos travaux ;
- Créez une team et invitez les collaborateurs à en faire partie, puis dans les settings du repository, ajoutez la team comme collaborators ;
- Créez un « Project » de type kanban lié au repository et listez, organisez et répartissez toutes les tâches.
Se former :
- Trouvez des informations sur le thème choisi :
- informations textuelles ;
- informations chiffrées ;
- Identifiez des acteurs communiquant sur le sujet ;
- Si possible, réalisez un benchmark de site de sensibilisation et de prescription sur ce sujet ou sur d'autres sujets ;
- En vous appuyant sur les résultats de vos recherches, dégagez des axes de problématisation et définissez un périmètre bien défini, qui n'a pas forcément besoin d'être très ambitieux (un sujet restreint mais traité de façon exhaustive vaut mieux qu'un sujet large qu'on se contente de survoler)
- Parmi les résultats de vos recherches, sélectionnez des informations pertinentes sur lesquelles vous souhaitez communiquer, organisez-les et hiérarchisez-les sur un support de présentation ;
- Recherchez sur le web des illustrations, des graphismes et des visuels libres de droit que vous pourrez exploiter dans la phase de conception graphique (ex. : photos, dessins, icônes)
- Soumettez le résultat de ce travail au commanditaire pour validation ;
- Définissez l'arborescence de votre site web (déterminez le nombre de pages, structurez et hiérarchisez les informations dans vos pages Web).
Se former : Réalisez un benchmark digital
- Définissez l'identité de votre site web :
- son nom
- son logotype (créé à partir d'une image au format vectoriel par exemple récupéré sur le web et personnalisé en utilisant le logiciel professionnel de traitement d'images Adobe Illustrator)
- son thème, sous forme d'un petit paragraphe de présentation (vous l'intégrerez par la suite dans la )
- Définissez votre palette chromatique
- Choisissez vos typographies (en prenant en compte la problématique de l'optimisation pour la lecture sur écran)
Se former : Créez et appliquez une charte graphique
- À partir de différentes sources de données big datas, créez des infographies statiques de Data Visualisation ;
- Élaborer une animation destinée à des sites web desktop et mobile à l'aide d'une application d'animation de type Adobe Spark (ou Crello) ;
- En utilisant le logiciel professionnel de traitement d'images Adobe Illustrator, réalisez des illustrations vectorielles (éléments d'interface, pictogrammes) ;
- En utilisant le logiciel professionnel de traitement d'images Adobe Photoshop, effectuez des retouches, des recadrages, des sélections, des corrections colorimétriques, des photomontages, appliquez des effets spéciaux
⚠️ Utilisez les différents éléments en respectant la législation des droits d'auteurs⚠️ Optimisez le poids et la qualité, sélectionnez le format d’enregistrement et définissez la taille des réalisations⚠️ Adaptez les réalisations aux différents supports de diffusion
Se former : Maîtrisez les risques juridiques liés au numérique
- Concevez un UI KIT, ou identifiez un UI KIT libre de droit réalisé par un graphiste et adaptez-le selon votre charte graphique. Il peut contenir :
- des éléments de navigation ;
- des boutons ou des Call To Action ;
- des champs textuels ;
- des icônes au format vectoriel ;
- l'encadrement des illustrations et photos (par exemple circulaire, carré arrondi) ;
- des exemples de charts pour la dataviz ;
- un exemple de card ;
- un exemple de slideshow ;
- tout autre élément de mise-en-forme que vous serez susceptibles d'exploiter durant la phase de conception graphique de votre site web.
Exemples d'UI kits : blogduwebdesign.com
- La rédaction des spécifications fonctionnelles de votre site web dépend de votre travail antérieur : pages, hiérarchisation des pages, navigation, etc. : vous devez donc contribuez à l'élaboration du cahier des charges en rédigeant et complétant vous-même la partie « Spécifications fonctionnelles ». Bon courage ! 😏
Se former : Rédigez les spécifications fonctionnelles de votre projet
- Utilisez un logiciel de PAO/DAO (par exemple Adobe Illustrator, Pencil Project ou simplement PowerPoint) pour réaliser des schémas (zoning, wireframe) de l'interface, illustrant la position et le contenu des différents éléments (navigation, entête, contenu, pied de page)
- Déclinez vos schémas pour différents types de périphériques (desktop & mobile)
- Anticipez l'interactivité de vos pages Web (tracez des liens entre les éléments de vos schémas : tel bouton conduit à telle page, etc.)
Se former : Réalisez le zoning et le wireframe d'un site web
- Utilisez Adobe Photoshop pour créer les versions des maquettes pour l'affichage desktop et mobile, sur la base de vos wireframes ;
⚠️ N'oubliez pas de prendre en compte les problématiques d'accessibilité et d'ergonomie⚠️ N'oubliez pas non plus de concevoir la page de Mentions Légales
Se former : Concevez un contenu web accessible
- Utiliser Adobe XD pour transformer vos maquettes en prototype interractifs
- Faites valider par le formateur votre prototype
Se former :
Le dossier de conception doit contenir :
- Cadre du projet
- l'objectif
- le contexte du projet
- présentation de l'équipe de réalisation (compétences et tâches attribuées)
- le public cible
- le(s) support(s) cible(s) (par exemple smartphone, ordinateur)
- la prise en compte des normes et la législation en vigueur (ex. : mentions légales, droits d'auteur, droit à l'image, données personnelles)
- Charte Graphique & UI KIT
- Éléments de benchmark significatifs
- Spécifications fonctionnelles
- Arborescence
- Wireframes
- Maquettes Desktop
- Maquettes Mobile
- Maquette page « Mention légale »
- Spécifications techniques
- Technologies utilisées pour l'intégration (HTML / CSS / Bootstrap)
- Référencement naturel : sitemap.xml, robots.txt
- HTML ;
- CSS ;
- le framework Bootstrap ;
- Git ;
- Github ;
Se former : Rédigez les spécifications techniques de votre projet
Lorsqu'un nom est suivi d'un slash, c'est qu'il s'agît d'un dossier, sinon c'est un fichier, et à l'exception de la licence, les fichiers ont une extension.
- index.html
- pages/
- [nom-de-page].html (à part la page index.html, toutes les pages se trouveront dans ce répertoire)
- legal-notice.html (la page de mentions légales)
- assets/
- images/
- icons/
- [nom-de-l-icone].png
- [nom-de-l-icone].svg
- pictures/
- main/ (pour des images communes à toutes les pages)
- [nom-de-page]/ (pour des images spécifiques à une pages)
- icons/
- styles/
- main.css (le style commun à toutes les pages du site)
- [nom-de-page].css (du style spécifique à une page en particulier)
- scripts/
- main.js (scripts utiles au fonctionnement général)
- [nom-de-la-fonctionnalité].js (script dédié à une seule fonctionnalité du site)
- images/
- .gitignore
- robots.txt (et humans.txt si vous le souhaitez)
- sitemap.xml
- README.md
- LICENCE
Pour savoir quoi mettre dans les fichiers :
- Traduisez fidèlement votre UI KIT dans la page main.css ;
- Utilisez le framework front-end Bootstrap pour structurer votre développement de pages Web ;
- Développez votre site Web dans une logique mobile first : les pages sont intégrées en version mobile puis adaptées pour la version desktop
- Utilisez des balises HTML sémantiques
- Prenez en compte les problématiques d'accessibilités et de référencement naturel (textes alternatifs sur les images, title sur les images et les liens, etc.)
- Utiliser l'outil de transfert de fichiers Filezilla pour héberger les fichiers sur le serveur
- Gérez les droits des fichiers et des dossiers
- Renseignez le fichier robot.txt et placez-le à la racine du site
- Testez les pages en ligne dans différents navigateurs et sur différents périphériques
- Soumettez le site aux moteurs de recherche (par exemple en utilisant la Google Search Console)
- Apportez les améliorations pour optimiser les performances (ex. : temps de chargement, rapidité d'affichage)
- Soumettez le site réalisé à votre commanditaire :
- Prenez acte des retours du commanditaire ;
- Apportez d'éventuelles modifications suite à ces retours.