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:

  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

 

SITE MAP

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

360-Guanlao-final-project-phase2_Page_1-opt

second Tier Page

360-Guanlao-final-project-phase2_Page_2-opt

Third Tier Page

360-Guanlao-final-project-phase2_Page_3-opt

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 Retrotomorrow.com 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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s