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

Phase 1: Creative brief, mood board, and sketch

The first phase of this project involved the following steps:

  1. Writing a creative brief outlining the scope of the project
  2. Creating a mood board with color and style ideas for the website
  3. Creating a site map for the website
  4. Drawing sketches of the web page design.

Creative Brief

project creative brief


Mood Board

website mood board



project site map

Initial web page design Sketches

website 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:

web page mockup

Phase 4: Final Web Page Prototypes

Final Home Page

final home page prototype

Final Second Tier Page

final second tier web page

Final Third Tier Page

final third tier web page


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s