Interactive Media Arts @ NYUSH
Here is a link to my dancing cat: http://imanas.shanghai.nyu.edu/~sls741/class_js_intro/
To iterate on this, I think it would be fun to loop through different captions, or to allow the user to input their own caption, upon clicking the Change Caption button.
Here is a link to my portfolio: https://imanas.shanghai.nyu.edu/~sls741/portfolio/index.html.
I noticed a couple of times that I had to do a hard reload (Cmd + Shift + R) in order for my updated styles to show. So try that in case the styles do not seem updated!
Since I am in the somewhat weird position of being a senior taking comm lab, I did not run into any issues with styling my portfolio. If anything, I hit more of a creative block. So, this blogpost will focus on my idea behind my layout choice and my process. (Also, please don’t worry if this post intimidates you! I have been writing CSS since 2015…)
Layout:
I wanted to provide a simple and easy to navigate layout that clearly takes the user down two separate paths: 1) My research-related work vs. 2) My design-related work. The reason I want to make this distinction is because I have come to a point in my career where I have shifted my focus from design to research.
Process:
display and positiondesign:flex; it is also important to define elements, such as flex-direction, justify-content, align-items, width and height
<div> needs to know how big it is and where it exists in relation to other divs in order for you to easily manipulate itmargin, padding, background-color, color, font-family, and font-weight:hover interactions such as manipulating opacityLet’s dig into one of the hover styles that I implemented. For the line that animates under “Research” and “Design”, I used the following code:
.hero .design a::before,
.hero .research a::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.hero .design a::before {
background-color: rgb(74, 48, 77);
}
.hero .research a::before {
background-color: rgb(177, 113, 121);
}
.hero .research a:hover::before,
.hero .design a:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
There are multiple things going on here. First of all, I am using the pseudo element ::before in order to create the line (read more about pseudo elements here). Since I did not want any content, I defined it as empty "". As I mentioned before, the element needs to know its position and size, so I defined position, width, height, how far from the left and bottom it should appear in relation to the text.
I also define visibility:hidden; as I did not want the line to show to begin with, and I will manipulate the visibility in the hover styles. In addition to visibility, because I want the line to appear as if it’s growing, I then must transform the element by scaling it up. So, first, we must define the initial state as transform:scaleX(0);, and then, we simply change this to transform:scaleX(1); in the hover styles. Lastly, the transition property makes the animation smooth by defining the transition-timing-function as ease-in-out.
Next steps:
In her article, Scaturro discusses ways in which the fashion industry utilizes technology. She argues that we can put some of the blame on technology for environmental and ethical challenges (474):
“Technology is in part to blame for the environmental and ethical fallout of fast fashion consumption; there is now biotechnological interference with the environment, a profusion of detrimental textile manufacturing byproducts and waste entering the ecosystem, and of course, a vast amount of energy needed both to make and to take care of all the clothing produced.”
However, I actually disagree with Scaturro. I do not believe we can blame technology. The fault lies in the users of the technology. While I agree that we clearly need to make more conscious design, production, and purchasing choices, we should not blame technology as a facilitator. Instead, we should take responsibility for our actions.
Scaturro claims that “In many ways, technology is a prime enabler to society’s fashion consumption addiction and at the root of many of its negative consequences” (474). While this is true, we should instead blame the agents who decided to use the technology in order to keep the momentum of fast fashion going, feeding into the consumer addiction.
As she writes about cotton, Scaturro comes to the conclusion that (479):
“Environmentalists, public figures, and fair-trade advocates need to seek ways to appropriate and subvert the current technological practices for maximum positive and ethical impact. This means the development of trusting, synergistic, and interdisciplinary relationships between designers, independent scientists, engineers, manufacturers, and the public and private sectors with the goal of creating effective technologies that minimize the negative human and environmental impact of producing cotton and other fibers.”
This paragraph also supports my argument that we should not blame the technology itself, but rather the creators or users of it. Note her use of the term “technological practices” and the phrase “creating effective technologies”.
I like Scaturro’s reference to eBay and Etsy and the example of “how to convert an old jacket and sweater into the JackSweat” (486). Next time I want to “throw something away”, I’ll take a closer look and see if I can repurpose the pieces to create something new!
First of all, I love that McCloud decided to write about comics using its own medium!
In the first few chapters, McCloud introduces us to various drawing techniques used by artists to convey meaning. I particularly enjoyed when he discussed the phenomenon by which we view objects as extensions of ourselves, such as a hat or a car: “the vehicle becomes an extension of our body. It absorbs our sense of identity. We become the car” (38). I can definitely relate to this, as someone who rarely—almost never—misplaces things that I own (I will almost always know where something is). Before this reading, I had never really thought of comics or cartoons as deeply as McCloud discusses them and the different styles through which artists can communicate different messages, touching upon the psychology of their audience.
I also understand why McCloud decided to draw himself in such a simple style, as mentioned on page 36. My immediate reaction to the more detailed and realistic drawing of himself was “Oh, that’s what he looks like?”, and for some reason, for just a second, the tone of the narrator’s voice felt like it had changed–it felt more biased.
As someone who does not read comics, reading “Understanding Comics” was not only an adventure into McCloud’s mind, but also an exploration of how he utilizes the medium to convey his message. I was impressed not only by his artistic skills, but also by his use of space–and references to human psychology–in order to tell his story.
Payne’s essay confirmed a lot of the material that I researched and read about in preparation for our topic presentation on textiles. However, I did learn a few new things:
I also liked that Payne emphasized the challenge that designers face: they might have a great idea, but oftentimes budget limitations impact their designs. This is applicable throughout various industries. I myself have been faced with this challenge. For example, a UX designer cannot merely think about how to make the product useful and usable, but they also have to take into account the goals of the business, clients, internal stakeholders, and technical feasibility.
Understanding the entire life-cycle of a product as well as making ethical design choices is becoming all the more important for all kinds of designs. I am happy to see that more and more people seem to be concerned with creating change in the fashion industry.