HYPERIMAGE PROTOCOLS

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.