4.28 | on-ground | favicons

Due Today: Progress on P2 development, 10–15 digital explorations of social media post, Warmup 6

For Today: Discuss Favicons + Webflow Hosting + Final Assignment Submissions + P2 Self-Evaluation + P1/P2 Videos

Favicons

• For P2, we will be creating one size favicon: 32px x 32px
• File formats: .png
• “Save for Web & Devices” 32px PNG file (make sure transparency is checked).
• In Webflow: upload through the Settings > General tab in Webflow.

click to expand

Favicon Resources:

• Read Create a favicon for your site in 8 steps & create your own favicon
• Favicon Gallery

 

P2 Presentation Mockups

Mockups Please prepare a PDF of 2–3 pages, formatted for 11″x17″, which can be presented in either portrait or landscape orientation. These mockups will not only be displayed in the hall but can also be scaled down (later) to 1920×1080 pixels for your Flux Submissions in the Fall, ensuring a seamless transition from print to digital. Each mockup should include (reference Download: MOCKUP FILES for folios and inspiration):

• your full name
• Project 2: Event Website
• Assistant Professor: Cass Reese
• Course: Web Design
• Term: Spring 20##
• To provide context, integrate a brief, descriptive sentence about your concept within the design. (Reference our last blog)
• Screenshot all work on the server in its developed form before creating mockups. As an alternative to taking a screenshot of your live website, you may want to install a screen capture plugin on your browser.

You should upload JPEG to your Medium for viewing & PDF to D2L for downloading.

P1 + P2 Presentation Videos: Creating a Scrolling Website Preview in After Effects

5pts (2.5pts each)

You will create a short, polished video for project that simulates scrolling through your website. Rather than recording your screen, you’ll use motion design techniques to control pacing and create a smoother, more intentional experience.

You will import your full-page website screenshot (use this plugin) into After Effects and animate its vertical position over time. This allows you to guide the viewer through your design in a way that feels fluid and deliberate.

What you’ll do:

• Create a vertical composition (1080 × 1920)
• Import your full-page screenshot
• Animate the Position of the image from top to bottom using keyframes
• Apply Easy Ease (F9) to smooth the motion, or right click (Keyframe Assistant)
• Adjust timing so each section of your site is visible for ~2–3 seconds
  • Think of your animation like a guided scroll.
    We should have enough time to read or understand each section before moving on.
    • Hero / intro → can sit a little longer (2.5–3s)
      • Include a slight pause at the beginning and end for a more natural flow
    • Dense content sections → also longer
    • Simple transitions / dividers → shorter (1.5–2s)

Goal:

Your final video should feel smooth and intentional, not like someone manually scrolling. Think of this as presenting your website, not just showing it.

Optional refinement (demonstrated in live session):

We will briefly look at the Graph Editor to shape motion curves and create a more natural acceleration and deceleration.

Exporting Your Video

Once your animation is complete, you will export your video directly from After Effects.

Steps:

1. Go to File → Export → Add to Render Queue
2. In the Render Queue:
   • Click Output Module (usually says “Lossless”)
   • Change Format to H.264 (render as QuickTime (Lossless) 720p or 1080p if this is missing)
3. Click Output To and choose where to save your file
4. Click Render

Your video will export as an MP4, ready for upload to D2L.

Due next Wednesday, May 6th (@midnight)

• Final P2 Submission – What to Submit:
  • Publish your final Webflow site. Upload your published website link to D2L Project 2 assignments folder.
  • P2 Presentation Mockup + Scrolling Video
    • Upload your final presentation mockup 2-3 pages. Consider including your social media kit on a separate page mockup.
    • Upload your final presentation video (keep under 1 minute).
  • P2 Social Media Kit
    • Upload your 5 finalized social media promotional assets.
    • Include all file types (JPG or PNG) in a clearly labeled folder.
  • P2 Self-Evaluation
  • Ensure all of your process work is on Medium in one story.

Important:

• Instead of 3 separate folders, I will create ONE folder for everything above (P2 Final Submission: Link, Mockup PDF, Social Kit, Self-Eval)
  • Upload everything at once by the deadline—this includes your website, mockup, video, and social media kit, process work.
  • Missing pieces will result in points deducted.
  • No work will be accepted past Thursday at midnight.
• I will create one additional folder for P1 + P2 Videos