Redesign Assignment
    11/8/17

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. 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:

Recent examples of bad "free" template or CMS sites:

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
  • an appropriate type of dynamic menu style; see our list here or the apy.com options
  • a form (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), or a jQuery gallery or image slider e.g. Nivo or Wow!
  • (OPTIONAL: 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.)
  • perhaps an FAQ page
  • perhaps a suggested links page, or area attractions
  • some level of RWD; you can try to adapt Gillenwater's media queries for tablets and phones, or the 960 grid demo, the Responsivenav.net menu or demos, etc. or use Bootstrap

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

4. Your order form must use a back-end PHP script to display the confirmation message and possibly send e-mail (e-mail may not be allowed on La Salle's servers). It should also use HTML5 input types (see Keith book or Rich Bradshaw link) and be adaptive for cell phone users.

5. Your products page or some other page needs to include a section using Flexbox.

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

7. Add your own favicon based on the company logo. Consider this specific Favicon Generator. Also try the Photoshop plugin described here.

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

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, Flexbox, jQuery/JavaScript, HTML5 and PHP.

11. Include a <!doctype html> and test cross-browser.

The site design, as always, must pay attention to the basic design principles. 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 Tuesday, Dec. 12, 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 brief description of how and where CSS3 and HTML5 are used
  • a description of how and where JavaScript, jQuery, other animation, and PHP are used
  • explanation of the site's file and directory structure
  • credits for all scripts/code (JavaScript, jQuery, RWD, CSS, PHP), text and images
  • what browser(s) is best used e.g. for CSS3, HTML5 content, basic layout, etc.

The completed site is due online Monday, December 11 (Email me the URL and be sure I have it at the exam; you can still use that day to finish up but don't change the home page URL.)

Here are the class's sites:

 
Majeed 1 Lexus 1 Leo 1 Sam 1
William 1 Anthony 1 Johnatan 1 Julia 1

 

Back to home page