Discuss the milestones to design a web site.

The students give their thought and we mark them down on the board.

Milestones

1. Needs Analysis

• Identify the objectives of the website (inform? sell? collect data?).

• Define the target audience (users, clients, partners).

• Analyze competitors and industry benchmarks.

• Determine constraints (budget, timeline, technical resources).

2. Specifications / Requirements Document

• Formalize the needs in a written document.

• Define:
  • Expected features (e.g., form, blog, e-commerce, member area).
  • Site structure / navigation.
  • Technologies considered (CMS, framework, custom development).

• Determine deliverables, milestones, and responsibilities.

3. Information Architecture

• Create the site structure (sitemap).

• Organize content by pages and sections.

• Define user journeys.

4. Visual and UX/UI Design

• Wireframes (functional black-and-white layouts).

• Mockups (graphic layouts with colors, fonts, visual identity).

• User Experience (UX): accessibility, flow, usability.

• User Interface (UI): design, typography, colors, graphic consistency.

5. Development

• Technical choices: HTML/CSS/JS, CMS (WordPress, Drupal), framework (React, Laravel…).

• Integrate mockups into code.

• Develop features (forms, databases, APIs, etc.).

6. Testing and Validation

• Technical testing: browser and mobile compatibility, performance.

• Functional testing: forms, navigation, links.

• UX testing: user feedback, usability.

• Bug fixing.

7. Launch (Deployment)

• Server configuration (hosting, domain, SSL certificate).

• Migration of files and databases.

• Post-deployment verification (checklist).

8. Maintenance and Evolution

• Performance monitoring (Google Analytics, SEO).

• Security and content updates.

• Continuous improvements (new features, optimization).

Project Specifications

1. Define the expected features

This is the list of everything the website should be able to do.

It’s not only about content, but also about interactive services and business logic.

Examples by website type:

• Showcase / Institutional website
  • Contact form
  • Photo / video gallery
  • News or blog section
  • Newsletter subscription

• E-commerce website
  • Product catalog
  • Shopping cart
  • Online payment (Stripe, PayPal, etc.)
  • Customer account management (profile, orders, history)

• Platform / Member space
  • Secure sign-up / login
  • Personal dashboard (messaging, settings)
  • User-generated content (post, comment, like)

• Cross-functional features
  • Multilingual
  • SEO optimization
  • Accessibility (WCAG)
  • Performance (lazy loading, cache)

Each feature must be prioritized: essential / desirable / optional.

This helps avoid scope creep.

2. Functional and editorial content inventory

1. List existing content (for redesigns)

• Current pages (with their URLs)

• Available texts

• Images, photos, videos

• Downloadable documents (PDF, reports…)

• Social media or other external content

2. Identify missing content

• New pages to be written

• New photos or visuals to produce

• New modules (e.g. FAQ, gallery, testimonials)

3. Analyze content quality

• Is the content still relevant or outdated?

• Tone and style (Is it adapted to your audience?)

• SEO optimization (keywords, H1/H2 structure, meta tags…)

• Accessibility (alt text, readability)

4. Prioritize content

• Essential content (presentation, services, contact)

• Supplementary content (blog, testimonials, newsletter)

• Optional content (resources, partners, etc.)

  Table

  • ID: unique number for each content
  • Page / Section: where it appears on the website
  • Objective (e.g. Inform, Sell, Build trust)
  • Topic: business-related purpose
  • Feature: linked functionality
  • Content type: text, image, video, PDF, form…
  • Keywords
  • Max length
  • Input method: hardcoded or CMS
  • Required?: essential, supplementary, optional
  • Existing content (Y/N)
  • Quality / Relevance: keep as-is, update, delete, create
  • Current content
  • Action to take: what to do
  • Owner: responsible person
  • Status: To do, In progress, Approved
  • Comments

  ID	Page / Section	Objective	Topic	Feature	Content type	Keywords	Max length	Input method	Required?	Existing content (Y/N)	Quality / Relevance	Current content	Action to take	Owner	Status	Comments
  1	Home	Inform	Agency overview	Banner + Intro	Text + Image	web agency, digital, custom	80 words	CMS (text block + image upload)	Essential	N	-	-	Write text + create visual	Julie	To do	Add marketing slogan
  2	About	Reassure	Who we are	Institutional page	Text + Photo	team, expertise, experience	200 words	CMS	Essential	Y	Needs update	Old text + 2019 team photo	Rewrite + new photos	Client	In progress	Review tone of voice

5. Define the site structure and navigation

This is the logical structure of the website’s pages. We create a sitemap, which is a hierarchical map of the content.

Once the content inventory is complete, you can organize content logically → only then does the tree structure (site map) make sense.

Example (web agency showcase site):

• Home

• About

• Services
  • Website creation
  • App development
  • Training

• Portfolio
  • Recent projects
  • Case studies

• Blog
  • Articles by category

• Contact

Rules to follow:

• Clarity: the user must instantly know where to find what they need

• Hierarchy: from general (main menu) to specific (subpages)

• Smooth navigation: clear menu, breadcrumbs, CTA buttons

• Mobile accessibility: hamburger menu or simplified structure

The sitemap is often represented with a tree diagram to visualize the architecture.

Next step: wireframing (functional mockups).