Maquette de l'accueil

Pour cette étape du projet, vous devez concevoir la maquette de la page d’accueil de votre client.

Chaque membre de l’équipe doit créer sa propre maquette de la page d’accueil.

Allez consulter les ressources et références en onglet dans notre équipe Teams pour vous inspirer par des site web qui gagnent les honneurs, pour voir les tendances actuelles etc. Requis minimum

Voir les requis pour l'accueil, le pied de page et l'entête. Voir aussi le premier requis du groupe "Généraux" concernant une bannière, elle devra être dans votre design d'accueil.

En plus des requis minimum

Vous devrez repenser l’accueil, son contenu, ses sections et non seulement copier le contenu et les sections de l'accueil du site qui est présentement en ligne. Votre travail est d'améliorer l'accueil actuel qui présente des problèmes graphiques et de contenu.

Posez-vous ces questions:

• comment présenter l’organisme en entrée de site?
• comment capter l'attention du visiteur et lui donner le goût d'aller plus loin dans le site?
• comment s'assurer que l'information que le visiteur recherche soit facilement trouvable?

Allez voir d’autres page d’accueil d’autres organismes pour vous inspirer. Voici quelques exemples pour vous inspirer mais je m'attends à ce que vous fassiez vos recherches en dehors de cette liste :

• Fondation David Suzuki
• Nature Québec
• Revivre
• Equiterre
• Craque Bitume
• Moisson Montréal
• Fondation Dr. Julien
• La cantine pour tous
• Jeunesse j'écoute
• Fondation Véro et Louis
• Ruban Rose
• Fondation Canadienne du cancer
• Fondation des jeunes de la DPJ

RAPPEL: Comment faire refonte et proposer des améliorations notables pour le site web de votre client?

1. Refonte complète du design graphique : Moderniser le design avec une palette de couleurs plus actuelle, une typographie plus claire et lisible, et une mise en page aérée qui utilise efficacement les espaces blancs. Des éléments visuels comme des images de haute qualité et des icônes modernes pourraient également rendre le site plus attrayant.
2. Amélioration de la navigation : Revoir la structure de navigation pour qu’elle soit plus intuitive. Organiser le contenu par grandes thématiques avec des menus déroulants clairs et logiques. Ajouter une barre de recherche efficace en haut de chaque page pour faciliter l'accès à l'information.
3. Optimisation mobile : Adapter le site pour qu’il soit totalement responsive, c’est-à-dire qu’il s’ajuste parfaitement à la taille de l’écran utilisé. Cela inclut une réorganisation des menus, une taille de police adaptée et des boutons de navigation suffisamment grands pour être facilement cliquables sur un écran tactile.
4. Hiérarchisation du contenu : Appliquer une hiérarchie visuelle plus forte avec des titres clairement distincts des sous-titres et du corps du texte. Utiliser des tailles de police et des styles différents pour guider l’utilisateur dans la lecture et faciliter la compréhension des informations.

La palette de couleur doit être harmonieuse. Vous pouvez utiliser des outils tel que Coolors.

Pensez au public ciblé par votre client. Utilisez la psychologie des couleurs pour guider votre message.

Si vous utilisez plus d'une famille de polices de caractères, lisez cet article qui vous aide à coordonner différentes polices de caractère ensemble. Requis La maquette doit être réalisée à partir du logiciel Figma. La maquette doit respecter les requis client. Particulièrement ceux généraux, de l'entête, du pied de page et évidemment de l'accueil. La maquette doit présenter la page d'accueil dans 3 résolutions différentes afin de montrer comment elle s'adapte sur:
- mobile (375px)
- tablette (768px)
- ordinateur classique (1400px). Remise: Une version PDF de votre maquette. Remise Inclure dans un seul dossier le moodboard (PDF), le guide de styles (PDF) et la maquette (PDF). Renommez votre dossier de travail 📁 au format suivant:
[nom de famille]_[prénom]_design_582-518MO
ex: ouellet_marie-michelle_design_582-518MO Compressez ensuite votre dossier de travail en fichier zip 🗜 Remettez dans Devoir En plus du dossier, remettre lien vers votre fichier Figma en ligne (n'oubliez pas le paramètre: anyone with the link can EDIT), voir procédure ci-bas: