Summary
Using HTML and CSS skills introduced in class and online, you will create a small multi-page and multimodal (integrated multimedia) web narrative.
Multimodal Narrative– 15%
This project is for you to use the skills you have learned so far in this course to create a multimodal narrative that combines writing with integrated multimedia in a well-designed, functional and responsive website. The term “narrative” is used loosely. This can be any work of media writing – documentary, fiction, journalism, mock journalism, personal essay. However, the text should be a minimum of 1000 words and in the form of multiple paragraphs with a header title and sub-headers for different sections (optional). The media should support and be integrated with the text.
- Research your idea, gather material.
- Sketch out your site designs on paper or with Figma.
- Create the HTML with responsive structure with placeholder images and lorem ipsum text.
- Create the images/media and a minimum 1000 words copy-edited text to fit your design sections. AI tools are optional.
- Apply principles of Visual Hierarchy in the CSS design to the site.
- Add content text and media
- Refine the design to reinforce the hierarchy for the content and navigation through the various texts, media and pages.
- In needed, add interactive effects with small bits of JavaScript using an AI coding tool. Best to use CSS animation.
Navigation:
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. You may break up your narrative into multiple pages with links in the nav bar. For example, if your topic is a band or musician, you might want to break up the narrative into pages of different periods or albums.
Design:
Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content.
Media:
Along with the text, you should illustrate your page with images and/or other media, like audio, video or gif animations. I do encourage you to 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!
Grading Criteria:
Your grade in this assignment will be based on your effort and thoughtful consideration of:
- responsive design
- visual hierarchy
- typography
- color
- layout
- HTML and CSS syntax and formatting
- integrated media (images, sound and/or video*)
- narrative design – integrating design for story
*note: if you are not hosting video on the server and using YouTube or Vimeo, you will want to use the “embed code” from the Share button of those platforms. Just paste the code into your HTML and stylize the “embed” tag as you would any other element. To make the <video> or <embed> elements responsive, just set their widths to 100% in the CSS.
Ideas:
- an article about a real or fictional business that tells the story of a product or service
- a sequential article on how to make or do something
- an article about an important issue or topic
- a current or fictional news story
- an article about a character, a work of art/media or a moment in history
- a personal or family background essay
- a work of multimedia journalism
- a multimedia biography of friend, family member, artist, sports figure, historical figure, etc
- psa or message site
About Statement with your Project:
Include in the “about” page 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 you to properly document your work for your portfolio.
Specific Requirements:
Your project should have the following components:
- a project folder called “narrative” that contains an “index.html” as the default home page, other HTML pages, an external CSS stylesheet (“styles.css”) and a folder with media
- at least two HTML pages. for example, the narrative page (“index.html”) and an about page (“about.html”)
- a clear, designed navigation bar on each page
- at least three pieces of media integrated with the article’s content (image, video and/or audio)
- the “narrative” project folder uploaded to the server –
- be coded by hand in a basic text editor. don’t use pagebuilders, visual editors, or online sitebuilding tools/services to create your HTML
- you may use AI Tools as described in class. if you do, you should include this in your project statement
- be coded with proper and easy-to-read formatting in HTML and CSS, as reviewed in class. Use tools such as the W3C Validator. and the HTML Beautifier. to check your code.
- use visual hierarchy design principles reviewed in this course
- use common HTML5 elements such as header, footer, nav bar, etc.
- use images and media intelligently on each page. make sure you have permission to use images and media. you may use AI tools to generate text and images. BUT you must proof-read and edit to make sure the text generated reflects your ideas, not the machine’s.
- use at least one font loaded from Google Fonts. or other online font sources.
Deliverables
The only deliverable is the URL to your functioning web site submitted on Canvas. The project folder should be “narrative.”
Grading Considerations
The Multimodal Narrative Project will be graded on the following aspects:
- 20%: the creativity and originality of your multimodal narrative:
- a well-written narrative with no spelling or grammar errors
- thoughtful integration of media with text
- 40%: the usability and appearance of your web pages:
- the nav menu works consistently on all pages
- links go to their intended pages
- images and fonts load correctly
- images are sized well
- text and content are formatted correctly
- text is grammatically correct with no spelling mistakes
- visual attractiveness and style with applied visual hierarchy
- originality: how different does it look from class demos?
- 40%: the accuracy, neatness, and organization of your files and code:
- HTML and CSS code is formatted and indented well
- the syntax of code is consistent in terms of spaces, letter case, etc.
- code has useful comments where appropriate
- all media have “alt tags” to describe the image, video or audio
- files are organized well:
- one HTML file per web page and one external CSS file for the entire site
- HTML, CSS, and image files are meaningfully named – all lowercase with no spaces or symbols
- Remember: you can use tools such as the W3C Validator and the HTML Beautifier. to check your code!