“Cahier des charges” peut désigner plusieurs documents, mais si vous lisez cet article, c’est probablement parce que vous cherchez un modèle qui vous permettra d’expliquer votre projet web.
Un document que vous pourrez ensuite
Si c’est votre cas, vous êtes au bon endroit.
Nous offrons 4 modèles de cahier des charges. Choisissez simplement celui qui correspond à votre projet : vous pourrez ainsi télécharger un modèle à trou au format .docx (Microsoft Word) qui contient toutes les instructions nécessaires.
Si vous n’êtes pas certain du modèle qui vous correspond, continuez tout simplement la lecture de cet article pour découvrir un modèle “généraliste”.
Il vous faut : un site internet pour présenter votre entreprise, ses services ou ses produits. Vous voulez attirer des visiteurs et générer des prises de contact : obtenir des des demandes de devis, récolter les coordonnées d’acheteurs potentiels, etc.
Il vous faut : un site internet pour présenter votre organisation (association, école, groupe, entreprise, marque, etc.). Le site est un support de communication pour présenter vos valeurs, votre histoire, les équipes, etc…
Il vous faut : un site marchand pour présenter aux internautes votre catalogue de produits et les vendre directement en ligne.
Vous n’êtes pas certain du type de projet ou vous ne vous sentez pas encore prêt à compléter tout un cahier des charges ? Jetez un œil à notre bref projet : une version simplifiée du cahier des charges qui vous permettra de poser les bases.
Si vous n’êtes pas certain, continuez simplement la lecture de cet article pour découvrir notre modèle le plus générique.
Si vous n’avez pas trouvé votre bonheur parmi les modèles précédents, utilisez le modèle ci-dessous et adaptez-le à votre besoin.
***
Le cahier des charges commence ici :
Objectif : Présenter le commanditaire du projet.
Comment présenteriez-vous votre entreprise à un interlocuteur qui n’a jamais entendu parler d’elle ? Imaginez que vous êtes dans un ascenseur, avec moins d’une ou deux minutes pour décrire votre entreprise à un investisseur ou un partenaire potentiel. Quelles informations allez-vous lui transmettre ?
Indiquez toutes les informations qui vous paraissent pertinentes pour qu’un partenaire travaille avec vous. Par exemple :
Objectif : Expliquer le pourquoi du projet et ce que vous attendez du futur site.
Pourquoi ce projet ? Pourquoi maintenant ?
Plus largement, quel est le plan de votre entreprise dans les grandes lignes et quelle sera la place du site au sein de ce plan ?
Quels sont les objectifs du futur site, au-delà de l’objectif purement opérationnel “Mettre en ligne un nouveau site” ?
A. Notre site internet est une “carte de visite en ligne”. Nous avons simplement besoin d’être présent en ligne, pour rassurer nos clients, mais nous ne comptons pas particulièrement sur le site pour attirer du trafic ou pour générer des prises de contact.
B. Notre site internet est une “brochure en ligne”. Nous comptons sur lui pour convaincre les clients potentiels qui le visitent, par exemple lorsque nous participerons à un appel d’offre ou lorsqu’un client nous recommandera. Mais nous ne comptons pas sur lui pour générer des leads, nous faire connaître ou attirer des visiteurs.
C. Notre site internet est une source de leads. Nous comptons sur lui à la fois pour nous apporter des prospects et des clients potentiels (via les moteurs de recherche par exemple) ET pour convertir ces visiteurs en les invitant à la prise de contact.
Créer un site internet mobilise du temps, de l’énergie et du budget. Quels résultats concrets et mesurables en attendez-vous ? Sur quels critères allez vous juger que le site est une réussite ?
Exemple : Obtenir 9 prise de contact par mois d’ici 6 mois après la mise en ligne.
Objectif : Décrire le périmètre du nouveau site et de l’intervention du ou des prestataire(s).
Quelle sera la structure des contenus sur le nouveau site ? Comment les pages seront-elles organisées ?
Si vous avez des doutes, listez au moins les pages que vous souhaitez faire apparaître sur le nouveau site. N’hésitez pas à préciser que vous souhaitez être accompagné dans la définition de l’arborescence.
Indiquez si certaines pages seront construites sur le même modèle (exemple : toutes les pages de la rubrique “Nos services” seront construites sur le même modèle)
Précisez si les rubriques “parentes” de votre arborescence (les rubriques qui contiennent des pages ou sous-rubriques) ont leur propre page ou s’il s’agit simplement d’un nom qui apparaîtra dans le menu de navigation.
Exemple
Au plus vous pourrez être précis sur le volume et les types de pages, plus les réponses des prestataires seront précises.
Astuce : pour mettre en forme votre arborescence, vous pouvez utiliser une simple liste à puces (comme ci-dessus) .
Précisez quels contenus vous souhaitez pouvoir éditer vous même depuis l’espace d’administration du site.
Chaque prestataire a sa propre façon de fonctionner, mais voilà comment nous procédons à Impala Webstudio.
Niveau 0 : les contenus de votre site n’évolueront que très peu. Peut-être une dizaine de changements mineurs par an. Vous disposez d’un contrat d’accompagnement et il vous suffit de nous transmettre les changements pour que nous les réalisons pour vous.
Niveau 1 : vous avez la possibilité d’éditer vous-mêmes les blocs de contenus qui composent les pages de votre site. Modifier le texte, remplacer une image, voire si vous l’avez prévu dans le cahier des charges, la possibilité de substituer un bloc de contenu par un autre (Un bloc contenant un titre, un texte et une image est remplacé par un bloc contenant une vidéo par exemple).
Vous voulez éventuellement pouvoir ajouter et supprimer de nouvelles pages sur le site (en reprenant le gabarit d’une page déja existante) et modifier le menu de navigation vous mêmes.
Niveau 3 : vous pouvez construire vous-même de nouveaux gabarits de pages en réorganisant les blocs de contenus d’une page.
Cas particulier : la gestion des contenus pour un “espace” (exemples : espaces recrutement, blog, médiathèque, espace actualité, etc.) est décrite plus bas dans les Fonctionnalités.
Attention : plus vous souhaiterez un niveau d’administration élevé des contenus, plus le budget sera conséquent. Estimez aussi précisément que possible vos besoins en termes d’évolution des contenus.
Dites-vous que tout ce qui dépasse le fait de consulter du contenu ou de naviguer d’une page à l’autre constitue une fonctionnalité.
Soyez vigilant et prenez le temps de détailler le fonctionnement : il est fort possible que vous ayez une idée en tête et que votre prestataire s’en fasse une autre en lisant votre cahier des charges.
Quelques exemples
Avez-vous des attentes ou des besoins particuliers pour le cadre technique du futur site ?
Astuce : si ces termes ne vous disent rien, ne vous en inquiétez pas. Indiquez simplement que vous attendez une proposition de la part du prestataire quant au cadre technique à utiliser pour répondre au mieux à nos besoins et à notre budget.
Souhaitez-vous utiliser un Content Management System (WordPress, Drupal, Joomla, etc.) ?
Le site doit-il être optimisé pour prendre en compte la lecture sur mobile et tablette ?
Le site doit-il être relié à un autre service en ligne ou un logiciel que vous utilisez en interne ? (ERP, CRM, etc.)
Quelles sont vos attentes en termes de référencement ?
Quel outil de suivi et d’analyse du trafic sur votre site souhaitez-vous utiliser ? Nous conseillons au minimum Google Analytics (et nous vous recommandons de lui ajouter Hotjar si vous comptez sur votre site pour générer des prises de contact).
Il s’agit d’aider le prestataire à comprendre votre niveau d’attente par rapport au travail du ou des designers.
Malheureusement les termes en français (Design, Ergonomie, User eXperience, etc.) sont confusants et vous n’êtes pas certain de savoir comment exprimer vos attentes. Pas de panique, il existe des moyens simples de résumer vos besoins.
1/ Votre organisation dispose peut-être déja d’une identité visuelle formalisée (un logo, une palette de couleur, des polices de caractères, etc.)
2/ Ajoutez dans le cahier des charges (soit ici, soit en annexes) des exemples de sites dont vous aimeriez que le vôtre s’inspire. Attention, pour que la démarche fonctionne, il faut impérativement que vous cherchiez à comprendre pourquoi le design de tel site en particulier vous paraît pertinent.
Cette démarche est importante pour chiffrer votre projet : le niveau de design que vous attendez, le type de supports visuels utilisés (photos, illustrations, vidéos, etc.), le niveau d’animation et d’effets…. tous ces éléments vont jouer sur le budget final.
Ou trouver des exemples de sites ?
Croyez-en nos années d’expérience, c’est en réalité le risque numéro 1 que court votre projet.
Nous ne comptons plus les projets qui ont été mis en ligne avec plusieurs semaines de retard parce que les contenus n’ont pas pu être livrés à la date prévue. (Le record étant un retard de 13 mois sur la mise en ligne pour un site designé et développé en moins d’un mois par nos soins).
La rédaction des contenus n’est pas un sujet simple : en réalité, elle est plus susceptible de poser des problèmes que le développement ou le design.
⇒ Vous aurez besoin de la contribution (ou au moins de la relecture) d’un ou plusieurs de vos collaborateurs… qui devront dans le même temps assure leur travail quotidien.
⇒ Vous allez probablement vous y prendre à plusieurs reprises : les pages seront écrites, relues, corrigées, ré-écrites, corrigées à nouveau et à ce stade il sera alors nécessaire de revenir sur les maquettes validées plusieurs jours auparavant voire de revenir sur les développements.
⇒ La rédaction de contenus pour le web obéit à des règles très particulières : de lisibilité à l’écran, de SEO (référencement pour les moteurs de recherche) mais aussi dans la manière d’écrire les contenus main dans la main avec le designer.
A moins de disposer des compétences en interne ou d’être accompagné par un expert en communication digitale, nous vous recommandons au minimum :
Si vous décidez de nous confier votre projet, nous pourrons vous accompagner sur ce plan, qu’il s’agisse de vous aider à coordonner la création des contenus en interne, assurer les relectures et les optimisations ou prendre en charge la rédaction.
Particulièrement important si vous comptez sur le nouveau site pour générer des visites ou attirer du trafic.
Souhaitez-vous être accompagné ou conseillé dans votre stratégie web ? Quelques exemples :
Si vous avez opté pour un site web entièrement administrable, souhaitez-vous saisir vous-mêmes les contenus dans le nouveau site ? Ou voulez-vous recevoir un site web “clé en main” ?
Réaliser l’intégration vous-même est chronophage mais a le double avantage d’être gratuit et de vous familiariser avec l’espace d’administration des contenus. D’un autre côté, confier cette intégration à votre prestataire devrait vous permettre d’obtenir plus vite le nouveau site et avec un meilleur niveau de finition en termes de mise en page.
Souhaitez-vous recevoir une formation ou une documentation (fonctionnelle ou technique) sur le nouveau site ?
Avez-vous des attentes spécifiques quant à l’hébergement du nouveau site ?
Quelles sont vos attentes en termes de maintenance du site (garantir les mises à jour de sécurité, etc.), de suivi (réparation des bugs révélés après la mise en ligne) et d’évolutions (nouvelles fonctionnalités, ajustements, etc.) pour les mois qui suivront la mise en ligne ?
Objectif : Préciser vos attentes quand au pilotage, à la méthodologie ou à l’organisation du projet
Le projet sera-t-il mis en ligne progressivement, par lots ? Quel calendrier envisagez-vous pour chacun de ces lots ?
Souhaitez-vous adopter une méthodologie particulier pour réaliser le projet (Agile, Cascade, etc.) ou attendez-vous que le prestataire vous détaille l’approche qu’il envisage ?
Combien d’interlocuteurs représenteront votre entreprise ? Gardez en tête que plus ce nombre est élevé, plus les frais de Gestion de Projet risquent de s’accumuler. A l’inverse, si votre prestataire n’a affaire qu’à un seul interlocuteur, mais que celui-ci n’a aucun pouvoir décisionnel, le projet risque de prendre du retard en raison des allers-retours provoqués et de l’effet de goulot d’étranglement de l’information produit.
Objectif : Préciser vos attentes quand à la réponse du prestataire.
Indiquez vos attentes par rapport à la réponse du prestataire :
Précisez éventuellement les critères sur lesquels vous opérerez votre sélection parmi les prestataires contactés. Si vous avez des questions particulières, c’est le moment de les indiquer.
C’est une Ola Design qui vous le dit : le cahier des charges est la clé si vous voulez avoir une chance de réussir votre nouveau site.
Ce document est très important pour 3 raisons.
Ola Design, nous vous aidons à surpasser vos attentes.
Un intranet est aujourd’hui un outil d’information et de services indispensable pour la communication interne d’une entreprise. C’est une porte d’entrée qui permet de consulter l’actualité de votre entreprise, d’accéder à tous vos outils internes (messagerie, agenda, outil de rendez-vous, etc.) et de télécharger un bon nombre de documents utiles au quotidien de vos collaborateurs.
Vous êtes bien entendu libres de proposer le contenu que vous souhaitez sur votre intranet, mais certains documents sont attendus par la communauté. Par exemple, toutes les informations concernant les ressources humaines, les informations juridiques, financières et institutionnelles doivent être disponibles.
Pour accroitre le nombre de connexions sur votre intranet, postez-y vos actualités. Prévoyez une section « actualité interne » où vous pourrez publier tous vos articles. Vous pouvez également utiliser des mots clés pour chaque article pour les regrouper selon des thématiques.
Si vous voulez mettre en place un intranet, n’oubliez pas que pour emporter l’adhésion de tous, il devra s’adapter à l’utilisateur et non l’inverse. N’hésitez pas à solliciter des panels d’utilisateurs pour construire le projet. Faites une enquête interne pour recenser les besoins et les attentes des utilisateurs. Une fois l’intranet en place, accompagnez le changement et mettez en place des tutoriels pour expliquer comment l’utiliser et surtout pourquoi l’utiliser.
Si vous souhaitez que vos personnels s’approprient rapidement l’outil, il ne faut pas hésiter à offrir des fonctionnalités uniquement sur votre intranet : annuaire interne, moteur de recherche, agenda partagé, chat interne, forums, vidéothèque, photothèque, etc. Il ne faut pas hésiter à innover à travers vos outils et vos services. Une phase de test est souvent recommandée pour ajuster l’intranet une fois qu’il est en ligne. Vous pouvez aussi mettre en place un chat en direct pour que les collaborateurs puissent vous faire leurs suggestions d’amélioration directement.
LE RESULTAT FINAL
Je vais donc vous fournir ici le template complet avec tous les fichiers nécessaires ainsi que les plugins utilisés.
Il est impossible de vous dire quoi insérer à quelle ligne étant donné le nombre de modifications effectuées. C’est pour cela que je fournis des fichiers commentés. J’ai donc inséré des commentaires pour chaque modification de façon à expliquer le fonctionnement. Chaque modification par rapport au theme de base depuis lequel je suis parti (TwentyTen) est commentée et expliquée. J’explique plus bas dans l’article, à l’aide de screenshot, comment paramétrer les différents plugins dont je me suis servi dans le tutoriel.
Toujours en rappel, vous pouvez vous procurer le magazine Hors série spécial création de blogs de Oracom pour mieux comprendre ce que j’ai réalisé dans les différents fichiers.
Voici le template une fois terminé et les fichiers sources :
Dans l’article suivant vous pourrez télécharger tous les fichiers du template commentés.
Si vous voulez comprendre mieux le démarrage pour ensuite faire la suite du template je vous conseille de vous procurer le magazine.
Je vous laisse cependant un aperçu du début du tutoriel ici ou directement consultable ci dessous :
Pour ceux qui ne connaissent pas, Nucleo est une bibliothèque d’icônes. Dans notre métier, nous nous servons de plus en plus d’icônes pour représenter une action, accompagner un texte, etc. Mais Nucleo n’est pas une simple bibliothèque d’icônes.
Nucleo a tout plein d’options qui vous feront gagner un temps précieux au quotidien.
Effectivement, depuis Nucleo il est possible d’exporter une ou plusieurs icônes (en même temps !) en PNG, en SVG ou en HTML.
L’avantage de l’export en HTML c’est que l’outil nous fournit directement un code html avec les balises svg qui nous permet d’intégrer directement l’icône dans nos intégrations web.
Nucleo App c’est également 8263 icônes réparties dans 29 catégories.
Il est possible d’obtenir chaque icône en line icon, en pleine ou bien même en flat en couleurs. Sur les deux premiers types il est possible de définir deux couleurs pour l’icône. D’une manière générale, on peut arrondir les coins des icônes, choisir l’épaisseur des traits, la taille des icônes (et en plus selon la taille 16px, 24px, 32, 48px, 64px, l’icône est différente et adaptée à sa taille).
On peut taper dans la barre de recherche des mots clés afin de trouver plus vite son bonheur.
On peut même choisir la couleur de fond d’affichage des icônes ce qui permet de les voir en conditions quasi réelles de votre projet.
La création des projets est une autre fonctionnalité que j’adore. Elle permet tout simplement de créer des projets et d’y glisser des icônes dedans. Ce qui va permettre de sélectionner toutes les icônes d’un projet et les exporter d’un seul coup. Si suite à une modification il faut les exporter dans une autre forme, on peut le faire en 2 clics pour toutes les icônes d’un coup.
En plus de tout ce que propose Nucleo, il y a une application Mac qui est disponible. Cette application est vraiment pratique pour la partie UI. On peut directement drag n drop les icônes depuis l’application vers photoshop par exemple.
N’hésitez pas à aller tester cette application. Vous l’adopterez très facilement !
Comme je vous en parlais dans un précédent article, vous avez de nombreux outils à votre disposition pour créer un site internet gratuitement.
Créer votre site est une chose, mais le contenu et la manière d’orienter vos projets en est une autre. Voici donc quelques conseils que je me permets de vous donner, sur la base de mon expérience personnelle.
Par exemple, si vous souhaitez vous orienter sur de l’UI design, il sera important de mettre en avant vos projets d’UI design. Il se peut que vous ayez de très beaux projets print ou autre à montrer, mais un conseil, ne les montrez pas! Vous recherchez un poste d’UI Designer alors prouvez que vous en êtes un(e).
Si vous êtes encore hésitant sur votre projet professionnel futur, montrez de la largesse et afficher vos plus beaux projets (tous types confondus).
Vous serez tenté de mettre des belles images de vos créations les unes à la suite des autres. Mais vos projets doivent être présentés en étude de cas et non comme des galeries d’images. Un recruteur qui voit une très belle interface ne sera pas forcément intéressé. Cependant s’il voit une étude de cas qui répond à une problématique client, il le sera forcément plus.
Vous devez montrer que vous savez résoudre des problèmes grâce à vos compétences, que vous savez satisfaire un besoin client.
Il est très important de mettre l’accent sur une navigation simple, intuitive et mobile. Ce qui permettra à la personne qui consultera votre site, de passer d’un projet à l’autre de manière fluide.
Aujourd’hui, un outil comme Wix.com (qui a dépassé les 90 millions d’utilisateurs dans le monde) vous permet de créer simplement votre site et de vous concentrer sur son contenu. Il vous permet de partir d’un des nombreux templates présents (plus de 500) et de le personnaliser en quelques clics.
Votre site s’adapte aux écrans de tablettes et de smartphones automatiquement et vous pouvez ajouter votre propre code HTML pour aller encore plus loin. C’est une solution simple, facile à utiliser et qui peut être une alternative envisageable si vous ne savez pas coder !
Même si certains de vos projets ne sont pas ceux dont vous êtes le plus fier, vous avez très certainement aidé un client à atteindre son objectif. Et cela plaira aux recruteurs que vous tentez d’attirer.
Il est très facile de repérer les projets qui ont été réalisés dans le cadre scolaire ou bien même les redesign de sites célèbres, les posters typographiques, les fausses applications mobiles. Donc éviter à tout prix de présenter des projets de ce type et concentrez-vous sur vos projets réalisés.
Votre intervention sur un projet aura toujours une incidence particulière. Il est très intéressant de pouvoir comparer un projet avant et après votre intervention. Ce qui va permettre, par exemple, d’exprimer en chiffres le nombre de nouveaux utilisateurs d’une application suite à une refonte graphique, le nombre d’inscriptions à une newsletters suite à un changement d’UI pattern, l’achat d’un produit suite à une campagne d’inbound marketing, etc.
Montrez que vous avez atteint certains objectifs de conversion fixés par le client. Ainsi, vous montrez qu’au-delà de vos compétences graphiques vous savez répondre aux problématiques que votre client rencontre.
Et pour finir, n’hésitez pas à montrer à quel point vous êtes passionné par ce que vous faites. Prenez le temps de créer une partie vous concernant dans votre portfolio. Il est toujours intéressant de voir votre parcours, comprendre ce qui vous passionne dans ce métier, votre vision des choses. Parce que c’est aussi votre personnalité qui vous démarquera de la concurrence.
Un portfolio est quelque chose de très personnel et vous représentant, alors laissez ressortir votre style et faites vous plaisir (c’est bien le seul site où vous n’aurez que vos propres contraintes).
N’hésitez pas à réagir si d’autres points essentiels vous viennent à l’esprit. Nous pourrons en discuter!
Voici donc, notre sélection testée et approuvée dans le labo web de Majjane.ma :
Au style minimaliste, cette extension transforme votre « nouvel onglet » en une page utile: vous pouvez y insérer les tâches que vous voulez réaliser et les cocher/supprimer une fois achevées.
Elle rend également votre navigation esthétique et plaisante : Chaque jour, une nouvelle image s’affiche avec une citation pour vous inspirer.
Pocket, c’est l’extension qui permet de sauvegarder des articles, des pages web, des photos ou encore des vidéos, pour les consulter plus tard.
La prochaine fois qu’un article ou un site vous plaisent mais que c’est trop long, ou que vous n’avez pas le temps de les consulter? POCKET !
Checker Plus for Gmail est particulièrement utile pour ceux/celles qui envoient et reçoivent des mails à une cadence quotidienne. L’extension, brillante par sa simplicité, vous notifie lors de la réception d’un nouveau mail, vous affiche le nombre des non-lus, et vous défile une barre qui vous permet de visualiser la liste de vos mails, sans pour autant devoir rentrer à chaque petit instant sur votre boite de réception, pour vérifier.
Et voilà du temps épargné!
4- FEEDLY: VEILLE D’INFO, SUR UN TABLEAU PERSONNALISABLE
Feedly, est un agrégateur de contenus décliné en version web (extension) et téléchargeable sur Mobile (application). Par son interface simple et personnalisable, Feedly vous permet ainsi d’organiser votre veille d’informations. Vous n’avez qu’à choisir les sources de votre choix (sites, blogs, etc.), et sélectionner les thématiques selon lesquelles vous voulez les classer. Et puis, Feedly se charge du reste!
L’ensemble des informations est présenté sous format ‘’magazine’’ avec les actualités les plus importantes en tête de page.
Rapportive est une extension extrêmement utile pour les professionnels du domaine : commercial, RP, ingénieurs d’affaires ou toute autre activité qui implique la gestion des contacts.
Comment ça fonctionne? Rapportive parcourt votre LinkedIn, Facebook et Twitter, à la recherche d’informations sur le destinataire du mail, et affiche dans une barre latérale, toute l’information qui lui correspond: photos, parcours professionnel, tweets récents, etc.
Pour les « multi-tâches » qui jonglent entre plusieurs onglets – Linkedin, Youtube, Twitter, Gmail…- PanicButton, est un excellent outil pour cacher tous vos onglets ouverts et les récupérer plus tard, en cliquant sur l’icône de l’extension.
Veillez à l’utiliser à bon escient, par contre! ?