PROGRESS - WEEK TWO

// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //
// PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS // PROGRESS //

In the wireframes I wanted to explore some of the ideas that were generated in the Crazy 8's. The one concept that I decided to flesh out further was the old computer system/ folder concept.

Through my wireframe I want to emulate the old file systems used in both mac and windows systems as well as MS paint, the old raster graphics editor for window systems.

In my sketch not only did I include this notion of folders but also tabs as a way to track which pages the user has visited. The other elements scattered throughout the page were positioned to add interactive features that would keep the user engage and more likely to explore the website in its entirety, these features included a pen tool, paint tool and a photo gallery.

This sketch ultimately formed the basis and the structure from which my website would be created around.

Following the creation of the Crazy 8's and wireframe sketches in class the process of physical realisation of the website began.

I resonated with this idea of using old interactive medias as the structure for my design, however, due to my current coding abilities being limited I felt that recreating a CD player or old console like a gamecube using code was outside my reach. In light of this fact I settle of using this concept of an windows/ mac old folder system as the basis for my design.

To realise this design that I went about first creating three pages:

- Welcome Screen

- Subject "folder"

- Assignments "folder"

The "Welcome"/first page of the website is very basic with only a singluar icon of a computer situated in the center of the page with the link to enter. The computer icon is meant to symbolise this idea of the old macintosh and windows computers, setting the scene for the aesthetic of the website.

The next page, Subjects, leans further into this old computer system aesthetic with these folder icons and tabs at the top of the page. The "tabs" at the top of the page serve as a way the user can navigate the website and go back to previous pages. Additionally, the folders have been coded so that they are draggable further reaffirming this idea of folders in computer system.

The last page, Assignments, is for the most part is the same as the subject page with the only difference being that there are three folders indicating each of the three assignments to completed within the subject of interactive media.