Project:
Remapping

Background

Webpages connect different quantums of information or media. Increasingly, this information becomes commodified or pockmarked with means for commodification (ads, subscription services, pop-ups for mailing lists). Additionally, websites and apps become standardized experiences with many of the same features, making them indistinguishable from one another, except perhaps by the demographics that use them and the underlying algorithms. This project will explore both the technical aspects of web design and development while examining it as a means of expression.

For this project you’ll take an experience, place or thing and remap it to a website. This could be as expressive and poetic or didactic and explanatory as you’d like. For example, if your desire is to be a web designer or developer, you might create a mini-website that promotes a conference in a more traditional way. You could also create a site that attempts to explain a dream you had and tries to show your impression of the passage of time in that dream or the complication of a space that looks like your middle school but has a chair from your childhood home. These are not necessarily mutually exclusive from each other; a “weird” dream website could be viral marketing for a summer blockbuster movie, but I encourage you to explore what is true for you.

Objectives

Gain greater facility and confidence with web design and development
Understand and explore different means of site navigation
Understand the translation process from idea to code.
Explore the web as a means of self-expression; be that for expressly “commercial” or poetic means.

Requirements

Clear wireframe sketches for a website explaining how pages will link together (digital or “analog”)
Functional prototype of this site in Adobe XD
Final functioning website

Final Deliverables

A folder containing the following items:

A link to your final website
A subfolder with all code and media for your website
A link to your Adobe XD prototype
A sub folder with all wireframe sketches
A sub folder containing all mockups

Folder Structure

For this project you must adhere to the following folder structure (outlined below). If your project doesn’t fit this model please make sure to have a discussion with me to make sure that is clear.

If you cannot upload visual residue of your progress, or it would be redundant with a deliverable provide some kind of a text file or update as to why for a given week.

All progress updates are expected by 11:59PM on the Wednesday before the class. You’ll have to rearrange things for the first week.

📁Weekly progress

︎︎︎📁 Week 1 (03/16/2023)
︎︎︎ 📁 Week 2 (03/30/2023)
︎︎︎ 📁 Week 3 (04/06/2023)
︎︎︎ 📁 Week 4 (04/13/2023)
︎︎︎ 📁 Week 5 (04/20/2023)
︎︎︎📁 Week 6 (04/27/2023)

📁 Deliverables

🌐(link to final website)
🌐(link to Adobe XD Prototype)
︎︎︎ 📁 Code + Media
︎︎︎ 📁 Wireframes + Sketches
︎︎︎ 📁 Mockups

Project Steps

For this project, I will not make explicit deliverables due on specific days. I will make suggestions and encourage people to be more ambitious or simplify, slow down or hurry up, but you will not be allowed to move forward without completing the previous step satisfactorily. The steps are as follows:

Sketched proposal of your website
Functioning prototype of your website in Adobe XD
Progress update on your website in development before the final critique (this may require you to go back and rethink your prototype or asset production)

Considerations

“Secrets” are okay ︎︎︎ If you want to do something with jumpscares or the site is part of some ARG and you need to be discrete about what you are doing, I might ask that you show me what you are doing or planning but if you’d like to “hide” some of this from the class for effect that is okay.
Simulation is okay ︎︎︎ We will not be going over server side programming (like PHP, Ruby on Rails, etc.) These are typically the technologies used in order to create databases where you can create users and automate some of your page layout. If your idea would be to create, for example, a fictional social media website that allows you to “look at” aspects of your dreams. You could make a website that advertises or promotes this or you could create a website that simulates what the user experience is like.
Correlation is not success ︎︎︎ You might incorporate transitional animations in your website prototype that you can’t yet achieve or slightly simplify your site to make it work in code. The point is to understand this translation process and less to make everything translate 100% to code.

Examples

The old Radiohead website︎
This is from ~1997. Some of the type sizes may not hold up, you might have to zoom in. I encourage you to look at this and consider this was the web presence of a commercial successful musical group.

Old Myspace

This is dating me, but besides being a formative social media website, MySpace also allowed a unique level of self-expression because of bad programming. While this existed in some other websites or services like AOL Hometown, this became a bit of a cottage industry before the homogenization of services like Facebook.

Comic Con Website︎
This website is somewhat more technologically sophisticated than what we’ve done in class, but consider the simplicity of the information it must convey (prices, times, etc.) in relation to how it relates an experience to the user.

April Greiman Design Quarterly Poster (1986)︎

Not a website but a really powerful piece that marks the onset and possibility for expression of digital tools. Additionally it is a great example “remapping” an idea (one’s understanding of one’s self) to a different form.

Grading

Concept (33.3%)
This includes both the expression of your idea visually and your ability anticipate or research the technological issues you may face.
Process (33.3%)
This includes how you face technical challenges, confront conceptual issues and how you sketch, articulate and continue to develop your idea.
Execution (33.3%)
Where did you start your project and where did you end up? Was your project reasonably ambitious? How is your attention to detail with spacing and other visual elements.

No Shuriken Mode Challenges

(Please note that, doing these do not guarantee a better grade or extra credit by any fixed or demonstrable amount, but if you’re doing or approaching these things, you’re probably doing well. The point is that, like not using shurikens in Shadow Dancer, it is more difficult, and increases your proximity to the material. All this being said don’t hurt yourself and consider your other assignments and mental and physical health. Additionally, if you are not feeling challenged by the class or an assignment, and these suggestions are not sufficient for you, please let me know.)

Create a mobile or other responsive version of your website
Work with someone else in the class to create a larger “ARG-type” experience that connects to an “easter egg” in an animation assignment or “erroneous” link in the spreadsheet
Create a rudimentary “Choose Your Own Adventure” game based on a childhood experience you rehash in your mind frequently.

Relevant Dates

03/09/2023 ︎︎︎ Introduction
03/16/2023 ︎︎︎ Adobe XD demo & Initial check-in (ideas, technical considerations)
03/30/2023 ︎︎︎ Check-in (Adobe XD prototype should be in production)
04/06/2023 ︎︎︎ Check-in (website should be underway)
04/13/2023 ︎︎︎ Check-in
04/20/2023 ︎︎︎ Check-in (final progress check-in before critique)
04/27/2023 ︎︎︎ Websites due! Critique and writing assignment
05/02/2023 ︎︎︎Writing review and re-stagings

︎Back DMD 2

Project: Remapping