Final Project wireframes...sort of

I wanted the site to resemble a storybook so I decided to wireframe in Photoshop. But in doing so, I realized that I will have to go back and simplify the site in consideration for users with slower connections. For the pages I was thinking of using the z-index to place a “dirty layer” of smudges (as a gif file) over a div that is filled with a color determined by css so I can change the paper color on the fly.

The book cover in the splash page will be made smaller and then when the user clicks on it, the inner page for the book will fill the screen. The book tabs will work via JavaScript. (The images still need some cleaning up.)


The "Plot" page will resemble the homepage.

The "places" page will resemble the "characters" page. I will use rollovers for the character pictures like when we did the ecommerce site.

For the actual page with the character descriptions, the bottom will have a div containing thumbnails of other characters that the user can scroll through. The div will be via an include file since it will be there for all character descriptions.


I haven’t decided on the Feedback section, whether it is a comment section or a form sending emails to me.

Final Project Idea

As for my final project, I am going to build a site to keep friends, family, and random strangers apprised of the storyline I’m working on (Yes...I’m one of many people attempting to write a novel). The site will have a storybook feel with the inclusion of media in the form of amateur computer animation involving profiles of the characters and descriptions of plot. I will be using tabs supported by PHP, the display of random images, interactive mini games for users (with the help of scriptaculous), a comments section, embedded players and so on.

This is the kind of computer animation I’m intending to use. (Scion of Altras is the story the site will be based on.)

Assignments 1 through 6

Assignment 1 Wireframe

Assignment 2 Petshop

Assignment 3 NYU Web Directory (I had a long entry about the trouble I had with the space created by the h4 tags. I learned how to fix the problem via Joanna's example in class, but I decided to leave the code as is for progression purposes. I can look back and smile and say "Oh, that was before I knew about 'margin 0 Auto' ")


Assignment 4 Shopping cart
For this one, I had help via code from a forum. I made things difficult by unnecessarily creating more than one form.

Assignment 5 E-Commerce site
I was able to complete this with the help of Jack's code and lots of id and class name changes

Assignment 6 E-Commerce + PHP
I broke up the page into "header" (banner ad and navbar), "skyscraper" (ad), and "footer" php files, and kept the main content as base.php. In terms of changes, there's the logo and the skyscraper that have changed. As I was dividing up the page, I realized that most of my changes would be occurring in CSS and not the individual .php pages I set up to aid in updating what would be theoretically be 100 of pages of a site. Down the line, learning how to switch between style sheets via php would be interesting.