Retrotomorrow.com

For the final project of my web and interactive technologies class, I had to design my own custom website. I decided to do an informational website about retro-futurism, a design trend that involves depictions of the future made in the past. For this project, I focused on only one of many twentieth-century designers and dreamers who had interesting visions of what cities, transportation, and other aspects of life would be like in the years to come. I made prototypes of the home page, a second-tier page, and a third-tier page of a website that I named retrotomorrow.com.

Phase 1: Creative brief, mood board, and sketch

The first phase of this project involved the following steps:

Writing a creative brief outlining the scope of the project

Creating a mood board with color and style ideas for the website

Creating a site map for the website

Drawing sketches of the web page design.

Creative Brief

Mood Board

SITE MAP

Initial web page design Sketches

Phase 2: Wireframes

For the final project, we were required to design only three pages of the website: the home page, a second tier page, and a third tier page.

I made these wireframes in Adobe Photoshop.

Home Page

second Tier Page

Third Tier Page

Phase 3: Initial Mockups in Photoshop

During this phase, I used the wireframes from Phase 2 to create a mockup of the web pages using Photoshop. All of us were supposed to participate in a peer review and decide whether or not to modify the designs based on the feedback we got from our peers. Here is one mockup that I created for my project: