Redesign Assignment
    11/22/11

By now you should have been well into the design for your final project. This should start with the company logo, whether you redesign it or not. You might consider redesigning the logo somwehat for the Web version, if it needs work. Here are two resources about logos: issues in their design, and design that stems from a logo : Dmitri's Design Lab (note the whole process here; in particular, see Lesson 10, and more on logos in Lesson 19).

Objective

The goal of this project is to produce a website that will include all components of digital media development which you have learned during your studies. The project will allow you to tap your creative talents, demonstrate your Web development, include scripting components and present a professional project. This project should be directed towards your portfolio.

The Project Description

You have been hired by the managers of a company who have noticed that their Web site looks woefully inadequate compared to other peer businesses such as:

Moshulu, perhaps, or Grille3501 (note the DHTML Fireworks menus that have a z-index problem) and Le Castagne.

What do you need to do?

1. Examine the logo (if there really is one) and decide how you might redesign it, and how it will inform the design decisions for the rest of your site.

2. Based on the existing site, decide on basic information that your site should contain, most likely

  • a home page that needs to briefly but fully explain the site and what users can do there
  • drop-down menu pages showing examples of various types. These can pop up in a separate window.
  • a form (for takeout, or to join the mailing list, etc.) which will use PHP to submit the visitor's information, display a confirmation page, and send an e-mail (that depends on what the servers will allow)
  • a map and directions page using Google maps
  • a calendar using Google calendar
  • a history/about us page
  • a tour of the business, either as images with Lightbox, HighSlide or cooliris, (my demo), a Photosynth virtual tour (PC only) or a jQuery gallery or image slider
  • a "News and events" page (or "Publications") that will access an XML file and populate a <div> or an iframe on the page; this could be classes held, publications for sale, etc.
  • (Optional) a link to a PHP page pulling from a database of employees on the DArt server (csc-srv1.lasalle.edu). You can post the rest of the site on the alpha and link to DArt for the PHP if you prefer.
  • (OPTIONAL) a CSS style switcher based on the webbedenvironments examples (see this PowerPoint or this)
  • an option for the user to select an RSS feed (OPTIONAL)
  • perhaps an FAQ page
  • perhaps a suggested links page, or area attractions
  • other technologies as needed such as Snap Shots—there will be jQuery somewhere in the site

3. The home or other page needs to display an appropriate animation, such as an embedded Flash file, or a jQuery slide show.

4. Your order form must use a back-end PHP script to display the confirmation message and send e-mail (e-mail may not be allowed on La Salle's servers).

5. Add <meta> tag and/or robots.txt file to stop crawling by bots.
<meta name="robots" content="noindex,nofollow" />

6. Add your own favicon based on the company logo. Consider the IconForge free trial. Also try the Photoshop plugin described here.

7. The entire project should have a unified feel, including the forms page. You can use <table> as necessary, but should try and make this a pure CSS site. You can consider the CS5 starter pages if you haven't already, or a grid system.

9. The website should be about 6-8 pages in length. It should be a professional site that captures the identity of the company.

10. The website must include use of CSS layout and styling, some of which is CSS3, jQuery, XML and PHP.

11. Include a <!DOCTYPE > of at least XHTML 1.x transitional. Consider <!doctype html>

The site design, as always, must pay attention to the basic design principles (see your critique assignment from week 1). It also must have "real" content with correct grammar and spelling. Images should be optimized and credited on the page. Scripts can be credited in comments, as required by the writer.

By noon on Thursday, Dec. 15, you must hand in hard-copy documentation of the process of site creation to me in Olney 157 or my mailbox in Olney 141. This is to include the URL of the site and:

  • a screen shot of the original site's home page, with other screen shots as needed
  • a brief explanation of the new design and logo that relates to audience (who are the targeted users?), design principles, and problems with the old design
  • a description of how and where CSS3 is used
  • a description of how and where DHTML, jQuery, other animation, XML(CSS/XSLT) and PHP are used
  • a sketch of the site's flowchart or structure (main sections only)
  • explanation of the site's file and directory structure
  • credits for all scripts/code (JavaScript, DHTML, CSS, PHP, CFML), text and images
  • what browser(s) is best used e.g. for CSS3, HTML5 content, basic layout, etc.

The completed site is due online Wednesday, Dec. 14.

Here are the class's sites:
Kara 1, 2 Shannon 1 John 1 Marvel 2 Brian 1
Matt 1, 2 Logan
2		 Kass 2 Ryan
1		 Greg 2

 

 

 

Back to home page