DTC 355

Module Overview:

Week 12 — Creative Web Projects

This week we wrap up the mock business website project with the final CSS turn-in. In class, we'll introduce the narrative project — a creative, multimodal website where you'll use everything you've learned to tell a story through code. We'll also have itake a look at using SVGs and JavaScript for those of your interested in exploring more interactivity.

Introducing the Narrative Project

The final project in this course is the multimodal narrative website — a team project where you'll build a responsive website that combines writing and media to tell a story. This could be a personal narrative, a digital essay, a biography, or any form of storytelling that interests you and your partner.

What makes it different

Unlike the business website, the narrative project gives you creative freedom. The business project focused on structured layouts, clear information hierarchy, and professional presentation. The narrative project is about expression — using design choices like color, typography, layout, and media to support the feeling and meaning of your content.

What you'll need to think about
  • What story are you telling, and who is it for?
  • Is your narrative linear (beginning to end) or nonlinear (reader chooses the path)?
  • What types of media will you use — images, video, audio, animations?
  • How does the design reinforce the narrative? Color, type, and layout should feel intentional, not decorative.
  • How will users navigate through the experience?
Creative web design in the wild

The web is full of projects that push beyond standard page layouts to create immersive, narrative-driven experiences. As you start thinking about your project, look at examples of creative web design for inspiration. Pay attention to how designers use scroll behavior, transitions, media, and layout to guide users through a story.

We'll look at examples together in class. Start thinking about your narrative idea and who you'd like to work with.

Finishing the Business Project

Use the remaining class time this week to finalize your mock business website. This is your chance to polish the details, fix any issues, and make sure your CSS is clean and consistent across all pages.

Final checklist
  • Are your global styles consistent across all pages?
  • Does your site respond well at every screen size?
  • Have you incorporated feedback from prior turn-ins?
  • Is your code clean, formatted, and well-organized?
  • Does the final site match your intended design as closely as possible?

Assignments

Due:Apr 13

Business: Final CSS

Finalize your mock business website, adding all CSS and incorporating feedback from previous phases. Your grade will be determined by error-free code, responsive design, globally considered CSS, and effective execution.

  • You must have an external CSS file for both your reset and your site styles.
  • Your site should be fully responsive on all screen sizes, using flex or grid.
  • You should have at least 1 custom font.
  • Your site should look as close as possible to your intended design.
  • Your code must be clean, formatted, and organized.
  • You should incorporate feedback from prior turn-ins.
  • Regularly test your site in the browser. You may find you need to make adjustments from your Figma design.
  • Do not forget to validate your code.
  • Upload your final project to your server space.
  • Push your files to GitHub.
  • Paste the project URL in the Slack turn-in.