Web Design and Development Assignment

Project Details

This is a 2-part project comprising both Web Design and Development. You are free to begin working on PART 2 of the project at any time provided you are able to submit PART 1 at the designated deadline of Jan 18.

PART 1 is where you will design a site for the preselected client, while PART 2 would be the final HTML/CSS conversion of those designs. It would be unwise to submit a highly complex design if you are unable to develop it in HTML/CSS.

All submissions need to be emailed to me at the address given in class no later than 12 midnight (Ateneo time) of the assigned date. Late submissions will not be accepted.

Part 1 (Jan 18)

DEADLINE: January 18, 2010 (12 midnight). Late submissions will not be entertained.

PROJECT DESCRIPTION: Design a site mock-up based on the attached client specifications (see download link below).  The submitted design must conform to the requirements of the client and exhibit the objectives of the project.

• Target resolution: 1024 x 768
• Save each design for a new page as a separate JPG file
• Designs need to be placed inside a mock-up “browser” of your choice. This makes it easier for the client to visualize how the site would look. No PDF submissions.

GRADING

• Grading will depend on your creative approach to the requirements and how accurate does it answer the needs of the client.
• You are allowed to use only images which are considered “royalty-free,” are owned by you, or those of which you have the consent of the owner to use.
• Trademarks or other copyrighted material of any third-party is off limits (unless owned by client).
• Bonus points will be given to properly commented HTML/CSS code.

Design 5 pages at minimum. These 5 pages need to be linked to each other when you start developing it.

Remember, an out of this world design is useless if your client can’t visualize it. Also, when it comes to web design, less is ALWAYS more.

OUTPUT: One (1) ZIP file containing all the JPEG files of the site mock-up.  JPEG files must be placed inside a single folder so as not to spill all over the place when unzipped. Folder will be named using your student ID no.

DOWNLOAD: AGI Web Design Brief

Part 2 (Jan 22)

DEADLINE: January 22, 2010 (12 midnight). Late submissions will not be entertained.

PROJECT DESCRIPTION: Develop the previously submitted JPEG files in HTML. All pages will be tested against Firefox 3.5 in Windows 7 for compatibility. All websites will be checked against the initially submitted JPEG files for accuracy.

OUTPUT: One (1) ZIP file containing all the files needed for the site to function (HTML/CSS, etc.). Files must be placed inside its own folder so as not to spill all over the place when unzipped. Folder will be named using your student ID no.

Things to remember

1. Web is not print. Before you place that fancy watermark, ask if it’s really necessary to even have it there.
2. Don’t forget to add your unit of measurement in CSS (px/em/%).
3. Use the right image format for the right image (GIF/JPG/PNG).
4. Alternatively, only use an image if there is no other way to prove your point
5. Before you center an element in CSS using margin, it must first have a designated width or else it won’t work.
6. Add negative space. It makes the content more readable and the site more easy on the eyes
7. Always include a link back to the Home Page
8. Typographical errors are the #1 source of headaches for code which doesn’t work. Before you start banging your head on the table, see if you typed everything correctly.
9. Design a neat and clear navigation.
10. Sites aren’t Rubic’s Cubes, where your visitors have stop everything and think before knowing what link to click.

If you have any questions, just leave  a comment below.