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.
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.
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:
Phase 4: Final Retrotomorrow.com Web Page Prototypes
Final Home Page
Final Second Tier Page
Final Third Tier Page