Skip to content

📅 SAISON C Semaine 1 Épisode 2 - Web Design

Aujourd’hui, nous continuons notre exploration de la Saison Expert JavaScript avec un focus sur le Web Design et la Gestion de Projet. Ces notions sont essentielles pour concevoir des interfaces utilisateur efficaces et organiser le travail de manière optimale.

La journée a été riche en apprentissages et découvertes de nouveaux outils, avec des concepts clés pour la conception d'interfaces et la gestion de projets.

📚 Notions du jour

  • Web Design :
    • Zoning
    • Wireframes
    • Mockups
    • Prototype
  • Gestion de projet :
    • Agile ou Waterfall
    • Outils agiles (Kanban)
    • Diagramme de séquence

🎨 Web Design : Les Fondamentaux

Le Web Design est une discipline cruciale pour créer des interfaces utilisateur intuitives et esthétiques. C'est un métier à part entière. Mais il est intéressant pour un développeur d'en avoir des bonnes notions afin de comprendre les attendus d'un projet et pouvoir parler le même langage avec les web designers d'une équipe.
Aujourd’hui, nous avons abordé plusieurs étapes clés du processus de conception.

1️⃣ Zoning

Le zoning est la première étape de la conception d'une interface. Il s'agit de découper l'espace disponible en zones fonctionnelles pour organiser le contenu de manière logique.

Exemple de zoning pour le projet Oquiz :

Zoning d'un quiz

Bonnes pratiques :

  • Hiérarchiser l'information pour guider l'utilisateur.
  • Équilibrer les espaces pour éviter la surcharge visuelle.
  • Adapter le zoning aux différents appareils (desktop, mobile).

2️⃣ Wireframes

Les wireframes sont des maquettes basiques qui représentent la structure d'une page sans couleurs ni images. Ils permettent de se concentrer sur la disposition des éléments et la navigation.

Exemple de wireframe pour le projet Oquiz :

Wireframe d'un quiz

Outils recommandés :

  • Whimsical
  • TLDraw
  • Wireframes.cc
  • Figma

3️⃣ Mockups

Les mockups sont des maquettes plus détaillées qui incluent des couleurs, des images et des typographies. Ils donnent une représentation visuelle plus fidèle du produit final.

Exemple de mockup pour un formulaire de contact :

Exemple mockup

Image by freepik

Outils recommandés :

  • Figma
  • Penpot
  • Adobe XD

4️⃣ Prototype

Un prototype est une version interactive d'un mockup. Il permet de simuler l'expérience utilisateur et de tester la navigation avant le développement.

Les prototypes avec Figma.

Outils recommandés :

  • Figma (avec les fonctionnalités de prototypage)

📊 Gestion de Projet : Méthodologies et Outils

La gestion de projet est essentielle pour organiser le travail et livrer des produits de qualité. Aujourd’hui, nous avons exploré différentes méthodologies et outils.

1️⃣ Agile ou Waterfall

Il existe deux principales approches pour la gestion de projet : Agile et Waterfall.

Waterfall (Cycle en V) :

  • Approche linéaire : Chaque phase doit être terminée avant de passer à la suivante.
  • Phases : Recueil des besoins, conception, développement, tests, déploiement.
  • Avantages : Structure claire, documentation complète.
  • Inconvénients : Peu flexible, difficile à adapter aux changements.

Agile :

  • Approche itérative : Le projet est divisé en petites itérations (sprints).
  • Phases : Planification, développement, tests, rétrospective (répétées à chaque sprint).
  • Avantages : Flexible, adaptable aux changements, collaboration continue.
  • Inconvénients : Nécessite une bonne communication, documentation parfois légère.

Exemple de sprint Agile :

Sprint 1 :
- Développement de la page d'accueil
- Création des wireframes pour les projets
- Tests utilisateurs

Sprint 2 :
- Développement des pages de projets
- Intégration du formulaire de contact
- Tests et corrections

2️⃣ Outils Agiles (Kanban)

Les outils agiles comme un Kanban permettent de visualiser le travail et de suivre l'avancement des tâches.

En général dans une équipe c'est le rôle du Product Owner de réfléchir à toutes les tâches à mettre dans le Backlog avant de les réaprtir entre les différentes équipes.

Exemple de tableau Kanban :

À faire (Backlog) En cours En revue Terminé
Développer la page d'accueil Tester le formulaire Rédiger user stories Créer wireframes
Déployer le site Designer les mockups

Outils recommandés :

  • Trello
  • Jira
  • Notion
  • GitHub Projects

3️⃣ Diagramme de Séquence

Les diagrammes de séquence sont utilisés pour représenter les interactions entre les différents composants d'un système au fil du temps.

Exemple de diagramme de séquence :

exemple diagramme de séquence

exemple from edrawmax

💡 Ce Que J’ai Appris Aujourd’hui

  1. Web Design :

    • L'importance du zoning pour organiser l'espace de manière logique.
    • Comment créer des wireframes pour structurer une page.
    • L'utilisation des mockups pour visualiser le design final.
    • La création de prototypes pour tester l'expérience utilisateur.

  2. Gestion de Projet :

    • Les différences entre les méthodologies Agile et Waterfall.
    • L'utilisation des outils agiles comme le Kanban pour suivre l'avancement.
    • La création de diagrammes de séquence pour représenter les interactions système.

⌨️ Challenge du jour : "O'vitrine" – Web Design et Diagramme de Séquence

📋 Présentation du Challenge

Aujourd’hui, nous avons continué à travailler sur le projet O'vitrine. L’objectif était de concevoir des wireframes, un mockup, et enfin un diagramme de séquence pour la fonctionnalité de prise de contact.

🎯 Objectifs du Challenge

  1. Créer des wireframes pour les pages suivantes :

    • Consulter la liste des projets
    • Consulter les détails d'un projet
    • Prise de contact via un formulaire
    • Ajouter un nouveau projet
    • Administrer les projets existants

  2. Réaliser un mockup à partir d'un des wireframes.

  3. Créer un diagramme de séquence pour la fonctionnalité de prise de contact par mail via un formulaire.

📌 Étapes Réalisées

1️⃣ Wireframes

Pour réaliser un wireframe j'ai utilisé l'outil Figma. La prise en main n'est pas évidente. Je l'ai déjà utilisé pour le projet O'Chat mais j'étais un peu rouillé. Comme cela m'a pris beaucoup de temps à réaliser (tout le monde n'est pas Web Designer 😅) je n'ai pu faire que le wireframe pour la page d'accueil en version mobile.

Exemple de wireframe pour la page d'accueil (mobile) :

Wireframe pour la page d'accueil sur mobile

2️⃣ Mockup

J'ai ensuite continué avec le mockups à partir du wireframe réalisé précédemment. Ce coup-ci, comme j'avais passé pas mal de temps sur le wireframe j'ai voulu essayer un outil IA pour réaliser le mockup. J'ai testé Stitch. Je lui ai fourni le wireframe en exemple et lui ai demandé de générer un mockup à partir de là. Après quelques retouches mineures le résulat est assez bluffant.

Exemple de mockup pour la page d'accueil (mobile) :

Mockup pour la page d'accueil sur mobile

3️⃣ Diagramme de Séquence

Enfin j’ai conçu le diagramme de séquence pour représenter la fonctionnalité de prise de contact par mail via un formulaire avec PlantUML. Voici ma proposition de diagramme.

Code PlantUML pour le diagramme de séquence :

sequence_diagram.puml
@startuml Formulaire de contact

skinparam actorStyle awesome
actor Visiteur as v
participant "Page de contact" as page
participant "Formulaire de contact" as form
database Database as db
collections Prospects as p

v -> page : accède à la page de contact
v -> form : rempli le formulaire de contact
form --> v : retour si erreur de remplissage
form -> db : vérification si l'e-mail existe déjà
db --> v : retour si l'e-mail existe déjà
db -> p : si nouveau e-mail, enregistrement
db -> v : message de réussite

@enduml

Explications du diagramme :

  • Acteurs : Visiteur interagit avec le système.
  • Participants : Page de contact, Formulaire de contact, Database, Prospects.
  • Séquence :
    1. Le visiteur accède à la page de contact.
    2. Il remplit le formulaire de contact.
    3. Si erreur, retour pour correction.
    4. Vérification si l'e-mail existe déjà.
    5. Si nouveau, enregistrement dans la base de données.
    6. Message de réussite envoyé au visiteur.

🖥️ Rendu final du diagramme :

Diagramme de séquence pour le formulaire de contact

💡 Ce Que J’ai Appris avec ce Challenge

  1. Web Design :

    • L'utilisation de l'outil Figma pour réaliser les wireframes et mockups.
    • L'intégration des wireframes et mockups dans le processus de conception.

  2. Gestion de Projet :

    • L'utilisation de PlantUML pour créer des diagrammes de séquence.
    • La création de diagrammes de séquence pour représenter les interactions système.