The objectives of this project were to learn about new trends in web/interaction design, understand how they are used in industry, and construct a creative personal narrative using experimental ID (Interaction Design) techniques.
The State of Experimental Sites
As the web currently stands, most websites rely on basic principles of responsive design to deliver the same content across multiple platforms (desktop computers, tablets, smartphones). This process involves shifting the scale, layout, and interface elements (buttons, menus, etc.) to compensate for different screen sizes. The responsive delivery technique is used widely for commercial purposes; everything from online stores and large corporations to small businesses and non-profit organizations employ this content delivery method.
In contrast, there are experimental websites. These sites could be considered the “fine art” of the online world; they are not for commercial appeal, but for a very targeted and specific engagement with visitors. Many of these sites integrate a plethora of special effects, including animations, sounds, AI (artificial intelligence), and other advanced developer tools. However, there remains the problem of being able to experience these sites on mobile devices. While desktop computer browsers support these dynamic tools, mobile browsers currently do not support many of these applications. Today, over half of web visitors are using their phones, and the Word Advertising Research Center (WARC) estimates that nearly “three quarters of internet users will be mobile-only by 2025.” This becomes a substantial challenge for digital artists and designers who wish to reach visitors. Consequently, while I was doing visual research on-the-go with the convenience of my phone, I found myself frustrated/disappointed when creative sites wouldn’t even load because of the device I was using.
Creating a Displaced Space
When I created Displaced, I decided to take this otherwise inconvenient barrier and use it as a point of inspiration. It was a “back to basics” approach where utilizing mobile-friendly programming—typically used for commercial purposes—became a creative challenge. The outcome I arrived at could be classified as an online moving collage. Displaced is an experimental site where the experience visitors have depends on the device they’re viewing it on. There are three different versions: mobile portrait, mobile landscape, and desktop/tablet (there are different effects on desktop vs. tablet). Some elements change while others stay constant. Other things transform—including text—right before your eyes by simply rotating your phone (rotation lock must be off).
Unlike the experimental sites mentioned earlier, Displaced is meant to be seen on multiple devices; in fact, you need to access all of them in order to see everything it has to offer. Some users will be able to do so easily, others will not. The “barriers” here are intentional, in that the visitor must go out of their way to gain access to the entire story. I find this process necessary when learning about any event or experience, as one’s perspective may be limited/narrow when only heard from a single source.
The narrative I created is based on personal experiences, as well as my reaction to global issues surrounding adoption and immigration issues. The imagery is intentionally abstract and surreal, giving viewers the opportunity to “fill in the blanks” based on their own background. The following is an artist statement and short notation available on the site’s About page:
Discipline & Curricular Benefits
The cross-disciplinary nature of this project aligns with the university’s mission, specifically in the areas of helping students develop “intellectually, ethically, socially, and artistically.” It is applicable to many disciplines outside of design, including (but not limited to): Art History, Communication, Computer Science, History, Marketing, Philosophy, Political Science, Psychology, Sociology, and Women and Gender Studies.
I am employing the knowledge and skills gained during this project to my Interaction Design course, where we have utilized Webflow (the program I trained on and used to create Displaced).
Reflection
The process of creating Displaced and launching it to the public was a fulfilling and therapeutic experience. I aspired to transition from print work and brick-and-mortar exhibitions to an online platform that would be unique, engaging, and reach more people around the world. Another exciting aspect is that this project could continuously evolve over time, giving viewers motivation to return to the site to see what has changed.