︎
︎Back to Design for Web & Screens
Spring 2022 ︎ SUNY Purchase College︎ (DES3800) Design for Web & Screens

Project:
menu re-do


Background

This project is meant to start not with technical jargon, industrial trends or the like. It is meant to increase your sensitivity to the experiences with screens that are suffused into your daily experience. We’ll start by taking stock of your experiences with apps, games and websites and taking pause with them, and extrapolating that “pause” into a presentation.



Objective(s)

    • Increase your sensitivity to the experiences you have with apps and the web on a day-to-day basis
    • Extrapolate your sensitivity into ideation (for how to solve a perceived issue).
    • Extrapolate your sensitivity into production (a presentation and proposed solution).

Final Submission/Requirements

    • A final presentation (.PDF, PowerPoint, KeyNote, Google Slides) on your solution, and the issue you initially observed, and your research process.
    • A prototype an animation, XD file or series of images that clearly demonstrates your proposed solution in action. This prototype must be quickly comparable to the initial condition.
    • A folder containing all your screenshots, screen recordings, and writing for idea generation.
    • A folder containing all your research to justify your solutions.

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 le me know.)
    • Work with someone in New Media to code a working interactive version of your proposed solution.
    • Model your proposed solution as an interactive cardboard sculpture.
    • Hire someone on Fiverr to present your presentation for you in class, or record voice over.
    • Create a video informercial for your proposed solution.

Process 

  1. Awareness.  First find a menu system, a weird interaction, something where you feel slightly annoyed, confused, flustered or as if you’ve “messed up” by not interacting with correctly. It can be from a website, a game, or an application. It can be one you like and have just accepted, one you know you hate but have never thought about, an old version of iTunes, a new version of iTunes, Windows 95, the HUD from DOOM, etc. The more specific your idea is, it will probably/generally be better.
  2. Research. Look at other similar apps or games and how they approach this issue. Does it even come up because the other app is less complex in general? Does your solution require a more robust remodelling? Depending on how popular your source is (say Apple’s iOS) attempt to find the designer talking about their solution.
  3. Prototype. Sketch out and mockup versions of your new proposed interface, it should include imagery for all button states. Create at least three different styles or options for your prototype and a working prototype of some component of it. The point is there should be a point of view of some kind. These prototypes don’t have to be final artwork, but try to create at least one image that creates a sufficient “impression” of your direction. 
  4. Presentation. Put all the previous steps together and lead the class through how you got to your final steps. Make the steps clear for the viewer. Be ready to take questions and have your idea interrogated. 

Grading Rubric 

A note that all intermediary steps are to be submitted as separate pass/fail assignments.
    • 33.3% ︎︎︎Strength of initial identified issues ︎︎︎
      • How clear is it that you took the time to really examine the screens you look at on a daily basis? 
    • 33.3% ︎︎︎Thoughtfullness and clarity of solutions ︎︎︎
      How in-depth did you research your possible solutions? How did you create and examine prototypes?
    • 33.3% ︎︎︎Execution of presentation ︎︎︎
      How do you encapsulate the process you’ve gone through? How does your presentation look? 

Relevant Dates

    • 2022/01/31 ︎Introduction!

      For next week:
      Have at least five ideas for interface or interactivity issues with a website, app, video or the like and be ready to present them for class. Identify your potential sources and take screenshots or screen recordings to demonstrate the issue. Be ready to present and discuss them with the class.

    • 2022/02/07  ︎ Research

      For next week:
      Take one of your ideas and begin to research around it. Look at other similar apps, games or websites and see if they have the same issue or have “solved it” by some means? What makes the given context different (ie Magic the Gathering vs. Hearthstone,  Team Fight Tactics vs. Super Auto Pets)? Propose at least three different visual solutions and be ready to show them in class.

    • 2022/02/14  ︎ Prototype

      For next week:
      Start/continue working on your presentation and more finalized version of your prototype. This may require you to use After Effects, Adobe XD. Be ready to show your progress and explicate your plans for next week.

    • 2022/02/21  ︎ Presentation

      For next week: Finish your presentation and be ready to show it in class!

    • 2022/02/28  ︎ Critique

      For next week: We’ll assign 3 people to write and design written reviews for the other people in the class.

    • 2022/03/07   ︎ Review Writing 


︎Back to Design for Web & Screens