Web 2: Content Management & Animation

projects ( 50% of final mark )

• weeks 1 - 3: animated gallery with modal ( /50 )
• weeks 4 - 7: animation project ( /50 )
• weeks 7-10: CMS website ( /50 )

• weeks 10 - 15: animated SPA ( LIA /100 )

exercises ( 40% )

quick exercises to learn skills and techniques

• exercise 1.1 file management
• ex 1.2 web2/ figma planning
• ex 1.3 web2/ homepage
• ex 1.4 photo selection & exports
• ex 1.5 Figma planning
• ex 1.6 pseudo code
• ex 1.7 Capyskills

resources

• CapySkills grid
• GitHub repository: web 2
• Bruce's Web2 figma
• Capyskills Figma ( mobile first )

inspo

• Kin's Figma example
• Camille: Capyskills example
• Lison's Figma
• Myriam's homepage
• Tuphi's homepage
• Zoë's Web 2 page

project 1: animated gallery with modal

Create an animated gallery with a modal, for displaying large, single images.

Your gallery must meet the following criteria. Use this as a checklist:

• mobile first design
• responsive design
• semantic HTML
• required elements:
  • header
  • title (h1)
  • your name
  • nav
  • footer
  • gallery of thumbnail images
  • short description
• 24 images
  • 12 of your best images from last semester
  • 12 new images chosen from a minimum of 4 new subjects, 120 photos, varying techniques learned in Photo 1
  ****
  • image thumbnails must be max 400px on the long edge, jpg 40%
  • large images must be max 1600px wide or 900px high, jpg 70%
• functionality ( think javascript ):
  • click a thumbnail to open a large image in a modal
  • click a button to close the modal
  • click outside the modal to close the modal
  • partially screen the underlying site when viewing the modal
• bonus: load your images from a .json file
• add a simple animation when opening the modal
• animate the images using opactiy or transform
• bonus: animate an element on page load or create a subtle, looping animation

a ( web ) design workflow / process

Almost more important than learning how to design and develop websites is to establish a workflow or process for design-based projects

• description: describe your project
• research other similar sites for content, design and functionality
• mood board, create a design document with layouts, fonts, colours and forms
• wireframe your layouts
  • mobile first
  • responsive
  • progressive enhancements
• define semantic HTML
• define CSS styles
• prototype

here is what Gemini AI returned me when I put in the above info asking if there was anything I was missing:

Web Design Process Workflow

A structured approach to moving from abstract ideas to concrete technical plans.

1. Phase 1: Discovery & Strategy

   Goal: Define the "Why" before drawing pixels.

   • Project Definition: Define the audience, primary goals, and success metrics.
   • Research & Inspiration: Conduct competitive analysis and collect visual references (UI patterns).
   • Content Strategy: Gather real headings and copy. Design should frame the content, not replace it.

2. Phase 2: User Experience (UX) Structure

   Goal: Focus on flow and structure without visual distractions.

   • Information Architecture (IA): Create a site map to define how pages link together.
   • Wireframing: Sketch low-fidelity layouts. Create versions for both Mobile and Desktop viewports.
   • Accessibility Check (A11y): Define the logical reading order (DOM order) early on.

3. Phase 3: User Interface (UI) Design

   Goal: Bring the visuals to life.

   • Style Guide: Define the color palette, typography scale, and component library.
   • High-Fidelity Mockups: Apply styles to wireframes in Figma.
   • Interactive Prototyping: Link frames to show hover states, transitions, and navigation flow.

4. Phase 4: Technical Hand-off

   Goal: Prepare the design for development.

   • Semantic Mapping: Label Figma layers with HTML tags (e.g., <nav>, <section>).
   • CSS Architecture: Plan class naming conventions and define CSS variables for colors/fonts.
   • Interaction Specs: Document the logic (e.g., "Add class .is-active on click").

Here is a YouTube tutorial from UI Collective. It may be a bit advanced, but also give you a good idea of some professional concerns, tips and techniques.

exercise 1.1: file management

clean up your files on your local drive ( SSD? ) and web server

• remove all files that are not used on your website
• remove duplicates
• remove / resize all images that have not been properly resized and exported for the web
• remove all duplicates
• make sure your files follow the file naming conventions ( see Figma file )
• anything else?

We will be revisiting this around midterm and at the end of the semester

Some of you may wish to delete everything you have online and reupload your local files once properly organized. Once you make sure you have a local copy of all your files, delete your fiels online. Do NOT delete your public_html folder, just everything in it. Delete any files above your public_html folder that you uploaded. Do NOT delete folders that are not yours i.e. .cache & logs. There may be others. Delete .vscode folders!!

due: week 1

ex 1.2 web2/ figma planning

Create a figma file with the following:

• your name
• description of the page / site / project
• some inspo
• moodboard including typography, colours, mobile-first & responsive layouts
• define semantic HTML
• note any specific CSS styles needed

due: week 1

If you want to add some info on how you learn best, or how I might help you, you can add it here. Or you can MIO me or just ask to speak.

ex 1.3 web2/ homepage

Create a homepage for web2/ located in a web2/ folder in your home directory. Your homepage should have the following

• web2/index.html file
• web2/css folder and style.css file in that folder
• semantic html including tags such as header, footer, nav, section, article, p, a
• content:
  • title ( i.e. Bruce's Web 2 )
  • your name
  • external links to 582futura.com, your root home page, your web Figma files / project
  • navigation or links to your exercises and projects ( many options for this )
  • 3 or more examples of your work i.e. photos, illustrations, layouts etc

due: week 2

ex 1.4 photo creation, selection & exports

Take & select 24 photos ( approximately ) for use in your animated gallery with modal.

• take 100 or more photos from which you will select 12, using Lightroom
• select 12 photos from those you took for Photo 1
• export thumbnails
• export large sized photos
• these should be located in a folder such as web2/photo-gallery/images/. You can prepend/postpend file names i.e. thumbnail-dsc1012344.jpg or organize into subfolders ie web2/photo-gallery/thumbnails/

you will show me your photo selection in Lightroom and your folders

due: week 2

ex 1.5 animated photo gallery with modal Figma planning

Similar to your web2/ homepage planning, but with some interaction pseudo code:

• your name
• description of your photo gallery project
• some inspo
• moodboard including typography, colours, mobile-first & responsive layouts
• define semantic HTML
• note any specific CSS styles needed
• write pseudo code ( ex. 1.6 )for user interaction when they click a thumbnail image

due: week 1

ex 1.7 Capyskills

Create a Figma page / project to track your Capyskills progress

• choose a Capyskills competency to work on
• self evaluate your level according to the grid
• create SMART goals to improve
• provide evidence of your present level
• share this with a mentor / teacher
• once you feel you have achieved the next level, provide evidence
• share again with a mentor / teacher
• set a new goal

due: week 2 and ongoing througout your career

Bonus: add a note about your goals and aspirations. i.e. What are you hoping to learn / accomplish over the next few years. Focus on 582 Multimedia, but it can be other objectives as well.

Where would you like to be in 5 years? In 10 years?

mental health links

• mental health infographic
• Station Student Mental Health