︎

DSD-3743-A
Interaction and Communication II

Projects
Lectures
Schedule
People
Resources
Library

School of Visual Arts
209 E 23rd St, New York, NY 10010
(506 Studio)
Tuesdays, 6:30-9:20pm
Spring 2023

Anthony Zukofsky
azukofsky@sva.edu

Last updated: March 16, 2023

About the site

PROJECT 6
An Event

Parsons School of Design, Recoginition Ceremony, HAHA Services, 2021.
QUESTION
How might you develop a web experience that changes over time?
OVERVIEW
A website is a medium that is intended to present changing content and form. Web technology allows users to easily switch the content and provides interactions that create visual changes over time. Considering a life of a website after it is launched, designers need to consider this technological condition for their design.

In this assignment, we will be taking this challenge as a creative context and explore how to embrace and expand changes as a part of your design.
ASSIGNMENT
Choose an event. The event could be already existing or fictional, but has to be a time-based happening(s): an exhibition, a music festival, etc. Create a single-page website that informs the viewer about the event reflecting its progress.

Think about what events’ changing points are over time, and how the website could have visual connections with these changes. The website must present at least three different states following the event’s timeline.

The series of these changes should be applied through the entire website as a cohesive visual direction, more than a few elements on the website. The outcome must include the basic information about the event (the title, the time, a description).
THINGS TO CONSIDER
  • What is the purpose for the website in relation to the actual event: advertisement, archive, or an event itself (a live performative space), etc.
  • Triggers to initiate the change: time, location, people, weather, etc.
  • Variables between the changes: how the website could be understood as a consistent / comprehensive visual container of the event but also create enough differences along the context of its change
  • Possible timeframes of change: 1 second, 1 minute, 1 hour, 1 day, 1 month, or some other schedule
PART 1: IDEATION, RESEARCH
  • Present three completely different events that you might be interested in developing for this experience. Along with your three ideas, you should present how each idea might change over time. Why does this event interest you? What research have you produced around this event? What content might you host on the website? How might this change over time? Are you using existing content or developing new content?
  • Remember your event can consist of the launch of an exhibition, a clothing release, a music festival, or even an NFT drop.
  • You should present your three ideas in Figma along with any supplemental research, content and conisderations to make your idea’s feel convincing.  
PART 2: WIREFRAMING, USER FLOWS, UX
  • Refine your idea that was selected in our 1:1 meeting. Remember you will be sticking with this concept for the next few weeks so you should be excited about it.
  • Develop a series of wireframes around the 3 states of your site (before, during and after the event) what content will exsist on all of these states? Will there be buttons? Will there be other pages? How will this progress through time? What is the timeframe before the states? It will be important to show what information is important as it progresses through time, remember a site is living so site information does not always need to be present.
  • Once you’ve landed on a series of wireframes that fits, you will begin designing your pages. You will present 3 differenet design approaches across your wireframed pages (again...before, during anda after the event). You will have 9 page designs in total to share. We will be designing for mobile first, please keep that in mind as you start visually executing your idea.
  • You will be presenting your process, wireframes, visual designs and any other research you find important in a Figma file for next week. Please find a presentation outline attached below.
  • Presentation Outline:
    1. Introduction: What is your idea?
    2. Process: What research have you done? Why did you select this idea?
    3. Wireframes: 3 mobile wireframes executions. What content is important?
    4. Approach 1: 3 mobile designs
    5. Approach 2: 3 mobile designs
    6. Approach 3: 3 mobile designs
PART 3: UI, VISUAL DESIGN
  • Based on the feedback that was given to you, it’s time to refine your single visual design direction and refining all screens needed to showcase your experience. For next week, you should have atleast 6 screens that showcase your experience along with another 3 screens that showcase how your experience changes over time (one minute?, one hour?, one day?) Begin thinking about treating your screens as a visual system, what elements can you use and reuse? How might your type system be utilized across your experience? How does your content changes over time? How might your typography or content also change over time? How might your UI work in tandem with your idea?
  • For our workshare next week you should come prepared with a presentation that outlines the following elements below.
  • 1. Introduction: What is your idea?
    2. Process: What research have you done? Why did you select this idea?
    3. Wireframes: 3-6 mobile wireframes executions. What content is important? Why is some content on the landing page and not on an internal screen?
    4. Type System: What typography are you using? Why? (Reference)
    5. Design Updates: 3 mobile designs (how your screen changes over time)
    6. Design Updates: 6 mobile designs (that showcase your full experience)
    7. Prototypes: How might someone actually use your experience? What interaction patterns are you implamenting?
PART 4: MOBILE, DESKTOP, PROTOTYPING
This is the final week we will be working on "An Event". It's time to bring this work over the finish line and have every element considered across the experience. Everything should be pixel perfect. For next week, you will be sharing a final presentation of your event for both mobile and desktop applications. Please find an outline for your final presentation outlined below.

  1. Introduction: What is your idea? Why did you choose this idea?
  2. Process: What research have you done? Why did you select this idea? What images or content inspired you? Why this event?
  3. Wireframes: 3-6 mobile wireframes executions. What content is important? Why is some content on the landing page and not on an internal screen?
  4. Type System: What typography are you using? Why? (Reference)
  5. UI Elements: What buttons are you using? What are various states? What sizes?
  6. Color: What is your color system? How is it being used across your experience and why?   
  7. Mobile Designs: 3-6 mobile designs (that showcase your full experience, along with a callout to how your experience changes over time)
  8. Desktop Designs: 3 desktop designs (how your experience changes over time)
  9. Prototypes: How might someone actually use your experience? What motion are you adding to your experience? What interaction patterns are you implementing? These should be completed in Principle. Remember, make it convincing!
SUGGESTED READINGS
ADDITIONAL LINKS AND RESOURCES
CREDITS
This assignment is a translation from Minkyoung Kim’s “Graphic Design for the Web” class at RISD. Thank you.