Screen-Based Media
You have now advanced to developing a screen-based media piece that is inspired by your editorial. Please make use of the information you gathered for the editorial and make necessary edits to compartmentalize and/or focus the communication based on the type of exposé, structure, and time conditions of the medium.
What aspects of your editorial narrative are conducive to on-screen or online interactivity? Consider the possibilities and affordances of the technologies behind your chosen media.
+ Motion: How can you expand on the existing content? In a 90 to 120 second video (including sound/audio), develop an emotive and exciting interpretation of your editorial. Make use of Adobe After Effects to design your time-based solution.
+ Interactive: Static and dynamic elements of the editorial can become responsive attributes to support and strengthen the message. Visual elements can react to spatial dynamics and/or users’ interaction (movement of the scroll, clicks, rollovers) can manifest the message of your editorial to communicate at a deeper and more engaging level. Make use of Adobe XD to design a working prototype of your interactive solution.
Read excerpt from “Design is Storytelling” by Ellen Lupton here >
Read excerpt from “Interdisciplinary Interaction Design” by James Pannafino >
Screen-Based Media Preparations
Process + Inspiration
MOTION/
Storyboards are a set of stills that represent ideas for time-based pieces. A storyboard is read left to right (representing the unfolding of time), and does not include all of the frames of a sequence, but a set that can describe a “narrative arc” (beginning, middle, and end.) Storyboards can be made as pencil sketches or using “keyframes.” Keyframes are stills that represent a point in time in the piece and are more fully visualized in terms of the design (often created on the computer.) (See page 8 Lupton PDF.)
Relevant & Inspirational Links:
Rebecca Mendez, Instant
Designer Danny Yout discussing the designing of the Six Feet Under Title Sequence & Final Title Sequence
Ericsson Keynote Film
Ericsson Keynote Animatic (made from storyboard)
FITC Opening Titles
Who Directed The Shower Scene In Psycho
Tools:
MotionStudies_Storyboard_Example
Storyboard Template for Sketching
*
INTERACTIVE/
A site map is a model of a website’s content designed to help both users and search engines navigate the site. (See page 18 of Pannafino PDF.)
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. (See page 20 of Pannafino PDF.)
Relevant & Inspirational Links:
Plastic Air
17 Delightfully Interactive Websites You’ll Want to Steal – JustInMind
Hand-Held Himalayas
Museums should activate multiple senses, not just the eyeball | Ellen Lupton | TEDxMidAtlantic
1000 Hands | Media Space London
Augmented Museum
The Smart Crossing
Museums Test New Technology
Meet Vincent Van Gogh | Interactive Van Gogh Exhibit
Salesforce Video Wall
Digital Interactive Kiosk at Citigroup Center
Nexen Media Wall
Tools:
A persona is a representation of an audience/user, usually based off of user research and incorporating user goals, needs, and interests. Personas allow the designer to have a greater understanding of the audience/user at the outset of the design process and as a tool used in the design process. Personas can: build empathy for the audience/user., develop a focus for the site/product being developed, assist in making important design, organizational and functional decisions.
“A persona is a character sketch that represents a particular segment of the target audience…With personas website designers can focus on how the website will be used instead of how the technology should work. Instead of asking how a feature should work, the designer can ask, ‘What would Francis do?'” (Mulder, 2006) Personas are in-depth character sketches, which not only describe research goals and behaviors, but also some personal characteristics.”
Closer Look At Personas / Smashing Magazine >
Multimedia Examples
Rebecca Mendez — Circumsolar Series
Migration 1
Migration 2
Migration 3
Bi/Polar
ACM-GD Student Work
BOOZY by Mathilda Galano
Indie Gaming by Bianca Pereira
Other Inspiration