Design for Reading
(October 25)

To Do This Week

Multimodal Projects To Do:
Your group should have at least one section or chapter of text ready for formatting next week. This does not need to be fully edited, but it should have multiple paragraphs, headers, bullet points(?), footnote(?), placeholders for image or media content. Next week we will work on CSS design for reading.

Also, discuss how you will complete the writing and copyediting on a schedule for Nov 8th publication.


Blog Prompt: For deep and/or hyper attention, design is crucial. Design helps to focus attention and to distract with attention-grabbing elements. Based on the design readings above, how might you apply certain ideas or principles on the design of your multimodal project? Please quote from readings.

Class Notes

Multimodal Publication (small groups): 20%

For the Multimodal Project, you will be working in groups of 3-5 students. As a publishing team, you are to come up with a web-based publishing project that uses different media (text, image, video, animation, audio, interactive media, etc) to express, address and/or educate about a single topic. The topic could be a “how to” explanation or demonstration of skills, a collection of works of digital fiction or art that share a theme, a multimedia exploration of a moment or period of history, or an engaging resource of information around a topic. The final publication must…

  • Involve the collaborative efforts of each student in the group, with planned editing workflows and responsibilities
  • Address design issues around Hyper and Deep attention of readers
  • Design should include a designed cover of the “book” as well as media as illustration and/or interactive demonstrations of ideas
  • Take care in the quality, clarity and accessibility of text, media and web design
  • Be presented in a designed web interface
  • Have an about or masthead page with the roles of each student, resource, bibliography, date and other publishing information
  • Be promoted through DTC Slack channels with engaging multimodal messaging

  1. Project Word Doc: add bullets, figures, figcaptions, blockquotes for CSS styles later
  2. Convert Word doc to Markdown > Aspose – word-to-md,
  3. Check Markdown: fix issues with headings, spacing, italics, blockquotes, etc
  4. Macdown > HTML
  5. Open project template < ZIP>  in Sublime Text and paste the new HTML in the #main section (where the main chapter will go)
  6. Overview of template CSS stylesheet
  7. Identify content parts (within each chapter) of your publication – create new div ids if necessary
  8. How will visual hierarchy allow for deep and hyper attention? Number content parts in the hierarchy.
  9. CSS Grid and responsive design
  10. Apply CSS Styles: headings and subheadings, paragraphs, blockquotes, figures/images, lists, footer and header, menu, etc
  11. Typography – “rules”, use “ems”, choose font pairings, line-spacings, rhythm, difference/repetition | Summary of Rules
  12. Digital pagination/navigation – scroll vs cards, parts, chapters and sections
  13. Responsive layout, test on different devices
  14. Get in groups and share design ideas, select fonts and color schemes
  15. Share designed pages with class

Scroll effects:


Leave a Reply

Your email address will not be published. Required fields are marked *