Responsive Web
Tool
VS Code Studio
Duration
May 2020
Institution
Parsons School of Design
Instructor
Simone Cutri
Scope
Conceptualization
Responsive coding
Inspection
Presentation
The responsive web project contains three versions responsive for three different device sizes: desktop, projector, and mobile. Each version showcases a unique perspective.
Concept
In 2019, I changed my career from fashion design to interaction design.
Despite this, I do persist on the fundamental philosophy that every field of design is interrelated. The means of this project are to connect the two fields of design, physical and digital, in an interactive yet harmonious way. The three different fashion projects of mine are designed and incorporated into a responsive web, symbolizing the interrelation between physical arts and digital arts.
Website
Process
The excitement of interaction is that different device suggests different user habits and hence interactive purposes. There are three class presets, #mobile, #projector, #laptop, that are of different device widths. By setting the conditions of (minimum device width) and (maximum device width) in {media only screen}, only one class is displayed and two others are hidden. The purpose of this style is to make the repository responsive so that different contents could be displayed as the screen size changes. In other words, each content page is made to be the best suit to the specific device and its unique interactive functionality.
Desktop 1880x1600
Projector 6200x3500
