HYPERIMAGE PROTOCOLS

Publish a rough draft of your website.

Diagram your website spatially, using the same conventions from assignment 1: isometric, black & white, 20" x 20".

Prepare a mockup of your final presentation which includes a brief overview of your individual projects from assignment 1, a demo/walkthrough of your website, and a slideshow with any supplementary research or context on your site.

Organize your site research and documentation into a website which represents the space through its structure, aesthetics, and patterns of interaction in addition to its contents.

Feel free to reuse concepts and components from your Assignment 1 projects.

If you haven't already, consider purchasing a Claude Code subscription for the remainder of the semester and installing the plugin.

Consider using prebuilt JavaScript libraries for more complex functionality. Some examples:

• Leaflet: simple maps (GIS)
• MapBox: advanced & 3D maps (GIS)
• D3: data visualization (Excel)
• P5: vector graphics & animations, image & video processing (Adobe Creative Suite)
• Three: 3D graphics & animation (Blender, Unity)
• Howler: audio

Complete this survey regarding the date and format of the final review.

Document and research your chosen site

Visit the site and take photos, video, audio. You can try additional methods like photogrammetry and LIDAR scanning as well. Look online for records, documents, news, maps, satellite photos, etc.

Organize your documentation and commit it to you GitHub repo.

prepare a presentation on your site

How does it relate to your projects from Assignment 1? How can you adapt elements from those websites to describe it? What can you say about it using a website that would be difficult or impossible with only drawings and models?

Feel free to include any initial ideas on how you might transform the site for your final projects.

Develop your final project websites. Incorporating all the content you want to include and having a strong concept and aesthetic is more important than a site that is 100% polished, but it should be functional.

There are more slots for desk crits on Wednesday, or let me know if you'd like to check in at a different time.

If your site's URL has changed, make sure to update it on the sign-in sheet.

Publish your final (or nearly final) site by 10:00 AM so the critics can visit it prior to the review.

Prepare a short slideshow to introduce your project and website. Focus on the background and concept of the original concept rather than presenting images that we can look at online. You can also include any references or precedents that informed your site design.

I've decided we can skip plotting your diagrams for this review after all, and just have plots for both assignments on display for the final review. It's still part of the assignment though, so you include them in your presentations and upload them to the root folder of your GitHub repos.

Keep presentations under 3 minutes. Send me a link (even if it isn't finished) by 12:00 so I can pre-load it on the presentation laptop.

Send me a link to your presentation (even if it isn't finished) by 12:00 so I can pre-load it on the presentation laptop.

Develop and publish an updated draft of your website. This will be our last meeting before the midterm (though Iill be available for remote feedback in between).

Decide on your final concept and overall architecture, so you can focus on production and details in your final week.

Create a new diagram of your website. Use Rhino this time: develop the diagram in 3D space, using parallel projection.

Consider incorporating the actual 3D geometry of your project, with the site's views of it as cameras, or windows. Or try thinking of your web pages not as flat, but as stacks of layered elements.

Include the diagram in your repo so it gets uploaded to GitHub along with your site.

Prepare a short slideshow to introduce your project and website. We'll have approximately 10 minutes total per student, so try to keep the presentation under 3 minutes.

Focus on the background of the project and the concept of the website rather than the specific details of the completed proposal.

Add me as a collaborator on both your main GitHub repo and genre exercises. My username is zchrywht.

I'll give feedback on your projects in the repo's “issues” tab. You can also use this tab to describe current problems you're having that I might be able to help with.

Submit any questions or topics you'd like covered in next week's demos.

Complete or revise at least one of the genre exercises from last week (gallery, interface, game) or some combination of them.

Take the “genre” element seriously. How does this medium structure information? What are its typical color palettes, typefaces, symbols? What patterns of interaction does it afford?

You can incorporate your own projects into this exercise, but don't be limited by them. Focus on structure, user interaction, and aesthetics, borrowing placeholders from elsewhere for anything you're missing.

Format and process all the content you'll be using for your website.

Resize and compress all your images and videos. These sites will be on screens 1920p x 1080p. With a couple possible exceptions none of your content needs to be bigger than that, and a lot of it can be smaller.

Take out any blocks of text that could be incorporated into the site itself instead.

Consider edits like making solid backgrounds transparent, or making color adjustments.

Go through any composite images (renderings, collages) and think about deconstructing them into elements that could be used independently, especially if you have access to the original photoshop files.

Gather any external resources that could support your project, either by incorporating them directly or using external hyperlinks.

Organize all your content in your project folder and commit it to your repo.

Sketch out a new website diagram using Illustrator or Rhino.

Draw the "space" of the your site without using the actual content from your project. Try developing a symbolic language for representing different types of media, the connections between pages, ways of interacting with the site.

Look at the site as if it were itself an architecture project. What is its relationship to the project you're trying to represent?

Use only black and white.

Commit this diagram to your repo.

Pick a narrative genre that feels relevant to the goals and general mood and subject matter of your project. It can be from any medium--film, television, video games, art, illustration--as long as it comes with an established visual and graphic vocabulary.

Collect images and text from your chosen genre. Look for ambient, environmental, and atmospheric content, rather than specific events or characters. If your project includes video, collect some of that as well.

Find at least two fonts that fit your genre. You'll want at least one stylized “display” font and one readable “book” font.

As you work with this material, treat it as raw sensory experience. Don't worry about the interpretation of the content itself, just how it's presented and interacted with.

Start a new project folder with a new GitHub repo. Use your collected content to make each of the following, broadly evoking a style/medium (other than “website”) appropriate to your genre.

• Gallery: a straightforward organization of your content on a single web page with minimal user interaction.
• Interface: a structured and interactive system for navigating content across multiple pages.
• Game: a mode of interaction which strategically restricts access to content for rhetorical effect.

Deploy your new project with a home page that links to each exercise.

Here are some examples of how you might approach each category:

Film Noir

• Gallery: the front page of a 1940s newspaper.
• Interface: a filing cabinet with drawers and tabbed folders containing documents.
• Game: a site you have to navigate while being chased by an “enemy” mouse, which returns you to the home page if you get “caught.”

Nature Documentary

• Gallery: a National Geographic article.
• Interface: a scientific database structured like an evolutionary tree.
• Game: a page where links are hidden in particular regions in an image of a forest, requiring close inspection to be discovered.

Home Renovation Reality Show

• Gallery: before & after clip reel with captions.
• Interface: real estate listing app.
• Game: home selection & customization simulator which limits you to a given budget.

Continue developing your website, considering feedback from last week's pinup.

Make sure it's successfully deployed and that images and other media are formatted appopriately for the web.

Take whatever is most effective about your current draft and push it further. Cut any elements of your original project that work against your site's central concept.

Begin to get familiar with JavaScript using the resources above, or others of your choice.

If your site already uses JavaScript, bring it to a place where you have a good grasp on how it works: either by learning more about the language, or simplifying your code.

Find a website or two, or other interactive digital media, that do something interesting which relates to your project.

We'll take some time at the end of our next session for everyone to present their references to the class.

Continue to plan and diagram your project on the Miro board.

Organize it into pages, organize those pages into "divisions" (divs), trace the hyperlinks between them.

Try to represent web-specific affordances (such as page responsiveness to resizing) in the diagram, even if it isn't one of Miro's functions.

Create a first draft of your website and deploy it using GitHub pages. Prepare a short (3-minute) presentation. Think about:

• What can you do on the web that you couldn't do when you first presented this project?
• How can you use the language of the web critically, deliberately, and unconventionally?
• How do these decisions reinforce, transform, and expand your project?

Some additional comments:

• You don't have to include the entire project, especially not right away. Just focus on developing an interesting concept for how the website and content work together.
• Try to avoid forcing the site to adhere to the aesthetics or spatial paradigm of other media. Experiment with--or just allow--things like spatial discontinuity, visual heterogeneity, collage and layering, responsiveness and graphical indeterminacy, etc. etc.
• Asking an AI for code snippets or to review code you've already written is fine, but be careful not to let the project reach a point where you no longer understand it and can't make delibrate changes to continue developing it.

On the same Miro board from last week, rearrange your project into a first-draft mockup of a website.

How many pages are there, how do you move between them?

How are images, text and other media organized?

If you didn't present your project last week, prepare to do so for this class using your updated Miro layout.

In VS Code, begin building the website for your project.

See how close you can get to your mockup from the Miro board.

Choose a project to translate to the web for Assignment 1. Some things to consider:

• The quantity and variety of available material. Is there a range of media types, drawings, diagrams, animations, research?
• Does the project have a clear critical or conceptual core that will be creatively generative in this new format?
• Does the project have an intrinsic relationship to technology or digital media that might inform the concept of your website?
• Was your project somehow limited by its original presentation format?

Once you've chosen your project:

• "Pin it up" on this Miro board.
• Create a slideshow (if you don't already have one) and place a link or PDF on the Miro board as well.

As your revisit the project, consider the implications of these two formats.

• How is the 2D space of the Miro board different from from the linear progression of the slideshow?
• How does the virtual space of the Miro board differ from the physical space of the wall?

Prepare a brief (2-3 minute) personal introduction and overview of your project, including why you chose it for this project.