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.

6090707.png

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.
 

35.png

Desktop 1880x1600 

14.png

Projector 6200x3500 

15.png