Exercise 6

For this exercise, I have used the Javascript libraries p5.Sound, Scene Manager, and Polar to create a mini click-through story about two doves. To accomplish this I gathered a variety of bitmap images from Wikimedia Commons (credited in the sketch) and altered/edited them together depending on the needs for each scene. I also used two sound effects sourced through Pixabay that trigger when the user clicks the screen. More details on these sounds and how they were used are also included in the 'Help' page of my sketch.

I began by sketching a storyboard in a notes application, then figuring out how to translate each scene in-sketch with the Scene Manager library. I used the Polar library to create the portal which generates in Scene 4. Polar allows for streamlined commands that generate radial geometric patterns and animations. I felt that this would be a great tool to develop the lily pad portal as it was aesthetically in line with my vision while being an economic means of coding such a pattern.

The main page for Scene Manager can be found here
Likewise, information on p5.Sound is available here
Lastly, the main page for Polar is located here
Run Exercise 6
Sketch code for Exercise 6
Scenes code for Exercise 6

Project 4

For this project, I created an interface structure which explores the concept of a 'portal' in a software context, specifically the idea of a patient/health portal, as a literal apparatus for fantastical interfacing. I was interested in creating a structure which expanded upon ideas about theatrification and interface as a means and end unto itself as we had discussed in our lectures; and I sought to find the interweavings of fantasy, obsolescence, and absurdity in the context of containers for storing and navigating forms of knowledge. Building off this approach, I wanted to explore how the properties of simulation and mimicry present in skeuomorphism could become pushed to their logical extremes in a manner which called such pointed attention to their theatricality and surreal imitation that they became their own visual language separate from their literal reality or the things which they suggest. I liken this to the concept of a phone becoming aesthetically transformed into being a "Thing" as discussed in Reading 3 from Lev Manovich. I also played with the ideas of creating a mash-up by taking the elements of software design most seemingly iconic in mobile and web design for my references, as well as combining structural interfaces that are designed to logically contain and express medical data with the highly stylized internet magic of early interfaces and their fascination with gloss, bubbles, and highly beveled and textured containment.

I created all of the bitmap images myself in Photoshop, treating them as I would a collection of sprites for a digital game. I then was able to load them into my scenes and place them as either pure imagery or button sprites through the use of the p5.play library. I also collected sound effects through Pixabay. A total of five sounds have been used: two background themes and three notifications for different button presses. To make the program feel alive and responsive each button sounds when pressed, as well as jumping up or down by a few pixels when the mouse is hovered over it to communicate that it is a pressable asset. To trigger/enable the background sounds that are set for the splash page and 'About' page one may press any key. They can press any key again to pause the music as well.

Currently, the two buttons in the bottom left of the 'Home' screen and the "Messages" section are demonstrations to show how the software will function responsively and can lead to a more expansive model. These don't currently lead to additional pages but are meant to provide idea of the interface 'treatment' that we have discussed.

As a whole, I find myself very proud of what I've made. Knowing that I needed to scale the scope of my work to effectively communicates the aesthetics of this interface in the given time, I feel I've developed a demonstrable model of the program's aesthetic and conceptual effectiveness while giving myself a sufficient skeleton to build out and populate richly and iteratively. I also enjoyed working with the various libraries available for p5.js and I already have projects in mind that I can accomplish now that I have these skills.
In terms of difficulty, my biggest challenges were largely time and scope. I always want to make a massive, grandiose project with as much of the work done from scratch as possible, and of course most often the weeks-long giant I can imagine when I approach a project from a blue-sky perspective will not come have every possible bell and whistle on the first pass. I don't consider this a negative, rather I feel motivated to keep iterating on this process and building on the ideas that I've been able to model in this project.

Background Sound 1 here
Background Sound 2 here
Button Sound 1 here
Button Sound 2 here
Button Sound 2 here Lastly, the main page for Polar is located here

Scene Manager is available here
p5.Sound is available here
p5.Play is available here

Run Project 4
Sketch Code for Project 4
Scenes Code for Project 4

Elevator Pitch: Imagine a grand tome of arcane knowledge- digitized for the modern user. The Patient Portal is a literal portal interface that takes the infrastructure of a health tracker as a container for arcane knowledge. What is it tracking? What has it archived from the deepest corners of the universe and why does it keep sending you pop-up notifications in languages long since lost to the mortal tongue? The Patient Portal emanates the early two-thousands internet-as-wizardry aesthetic found in obsolete software and is full of cryptic information that it isn’t sure it wants you to know.

Final Proposal: The Patient Portal is an exercise in which the concepts of interface design as aesthetic and experiential ends are taken to their absurd extreme. The goal of this project is to develop a work that is a form of interfacing for its own sake, using the concept of the ‘portal’ in a web design/software context and expanding it into old ideas about portals, magic, and theory. The portal is most commonly in practice as an apparatus to receive information about one’s health, and this relationship between healing, containing knowledge, and the development of ways to interact with the world through constructed forms of physical and metaphysical interfaces is one which is inherently applicable to old concepts of magic and medicine. I will be exploring the concept of theatrification in the development of visual language systems/mash-ups by creating an interface with the underlying structures of its software inspiration (mobile and web health portal design, as well as the structure of health/fitness tracking software) while building out the aesthetics of older interface models that serve as analogs for the imagery we associate with things like spell books, old dungeons, and magical realms. There are many ways in which these aesthetics become theatrical and responsive to their content; for example there is a range of possibilities for the conflation of obsolescence, ancient-ness, and navigational fantasy. My approach to simulation and design structure (flat v. skeuomorphic) is to develop aesthetically rich pages that build off of these accepted visual cues of fantasy through visuals and largely skeuomorphic design aesthetics to conflate the purposes of these styles- in simulating fantasy and calling attention to the work’s own skeuomorphism the software actually enforces to the user the evidence of its own impossibility.

Pre-Production- Wireframe Pages:

Wireframe 1- Splash Page:


Wireframe 2- Main Page:


Wireframe 3- About Page:
*Note: this shows the structure of the "About"/"Help" page; however this general structure will also be used for information pages with some reshuffling of elements to suit specific needs as necessary


Aesthetics- Three Mood Boards: