DTC 355

Project 4

Multimodal Narrative Website

In a team, build a responsive website for a work of integrated writing and media. The narrative can be a story, a digital essay, a biography, but must be storytelling focused. Your site should have a designed navigation bar with at least two pages: the main page and an about page with information about you the author, along with an artist statement. You may break up your narrative into multiple pages with links in the nav bar if you wish. For example, if your topic is a band or musician, you might want to break up the article into pages of different periods or albums.

Along with the text, you should illustrate your page with images and/or other media, like audio, video, or gif animations. Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content. You may use AI tools like Chat-GPT, Bard, Midjourney or Dall-e-2 for image, text generation and some coding. Using these tools are not to replace your own ideas, but to extend and realize them. You are NOT required to use AI tools at all, but increasingly these tools will be used in the workplace so you might start to get some experience with them. It will also make this project fun!

Your grade in this assignment will be based on your effort and thoughtful consideration of:

  • teamwork and collaboration
  • thoughtful application of your ideas
  • responsive design
  • visual hierarchy
  • typography
  • color
  • layout
  • HTML and CSS syntax and formatting
  • integrated media (images, sound and/or video*)

In the about page, include a one paragraph statement about the project. What was the nature of the assignment? Describe the project idea you settled on and why. Describe the specific learning processes, challenges and/or outcomes in making this website. Also include information about any AI tools used. This statement is for your team to properly document your work for your portfolios.


Duration: 3 weeks
Phase 1: Design Concept
  • Create a new design file in Figma named 'lastname-firstname-narrative'.
  • In that one design file, create complete designs of your website for both mobile and desktop.
  • If necessary, you may add a third design for tablet.
  • The design must have:
    • A minimum of two pages for each screen size: one for the narrative and an About page. You can absolutely have more than 1 page for your narrative, though.
    • A custom font
    • All content planned and clearly accounted for in the design. While I don't expect you to have every piece of media done, I do expect it to be very clear and easy to understand the design intention and approach.
    • A clearly defined color palette tested for accessibility
    • Clear visual structure and hierarchy of information
    • Application of design principles covered in class (alignment, proximity, repitition, etc.)
    • A combination of at least two forms of media, such as text, image, video, sound, and animation.
  • You should apply all concepts learned in the class so far.
  • Remember you will be graded on the quality of your design for this project.
  • Add h.slocum@gmail.com to your Figma file.
  • Create a publicly shareable Figma link and paste it into the Slack turn-in.
Phase 2: HTML and Responsive Structure

Write the HTML and CSS needed for your project's basic responsive structure. Your grade in this assignment will be based on your understanding of the fundamentals HTML (semantic markup, folder structure), responsive design (responsive units, media queries), and layout.

  • Create a project folder called 'narrative'
  • Create your file organization: you should have an index.html file, a css folder, and an img folder, and appropiately named HTML files for the other site pages.
  • Using semantic HTML, write the HTML needed for your design.
  • Be sure to include a mobile menu if needed.
  • Apply the neccesary CSS media queries to make the basic structure of your website is responsive.
  • All pages and content must be present.
  • Add different colored borders in the CSS so you can clearly see the HTML's structure.
  • VALIDATE YOUR CODE.
  • Do not include additional CSS for this assignment. If you opt to move forward with your CSS, please copy your files so you can leave the responsive structure alone for this turn-in.
  • Once your HTML and responsive CSS structure is applied, upload your project to the server via FTP.
  • Push your latest files to your team repository.
  • Share your project URL in the Slack turn-in.
Phase 3: Final

Finalize your project, adding all CSS and incorporating feedback from previous phases. Your grade will be determined by error-free code, responsive design, 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.
  • You should have at least 1 custom font.
  • Your site should look as close as possible to your intended design.
  • Your CSS must be clean, formatted, and organized.
  • You should incorporate feedback from prior turn-ins.
  • VALIDATE YOUR CODE.
  • Push your latest files to your team repository.
  • Upload your final project to your server space.
  • Paste the project URL in the Slack turn-in thread.