By now you need tp have decided on the site to redesign for your final project. I want this to start with the existing company logo, but from there you need to design the site. 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:

this internship site

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

• a Google Site
• SquareSpace
• WordPress

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; consider a gallery either from Bootstrap or the jQuery and CSS demos in Week 12 (Nov. 13-15); see point 3. below
• product pages showing examples of various types. These can pop up in a separate window
• a required form (for takeout, or to join the mailing list, etc.) which for us will submit the visitor's information, display a confirmation page, and send an e-mail
• a map and directions page using Google maps
• a history/about us page
• a tour of the business or products, either as images with Lightbox, HighSlide or a jQuery or a pureCSS gallery
• a page such as "News and events," menus, or "Publications" that can access an XML file and populate a <div> or an iframe on the page; this could be classes held, publications for sale, etc.
• a Google calendar of events
• [I'll demo a link to a database of employees that will bring up a PHP page for each employee, if we have time]
• an option for the user to select an RSS feed
• perhaps an FAQ page
• perhaps a suggested links page, or area attractions
• other technologies as needed such as social media widgets, HTML5 elements
• components from Bootstrap or jQuery that include responsive design
  

3. The home or other page needs to display an appropriate animation, such a jQuery slide show (Nivo is still an option (now links to non-WordPress version; we will also demo the Wow! slider free version).

4. Your contact/order form must use a back-end PHP script to display the confirmation message and (possibly) send e-mail. It will also use HTML5 input types (see Keith book) to 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 andr/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. Try this generator.

8. The entire project should have a unified feel, including the forms page. You can use <table> as appropriate, but otherwise this needs to be a pure CSS site. You must include at least three CSS3 features (don't forget @font-face).

8.The site will make use responsive design techniques (Gillenwater, Bootstrap, or Flexbox) to adapt content for tablets and smart phones (can be demo-ed on home page only).

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

10. The website needs to include use of CSS3, JavaScript (jQuery), Flexbox and PHP. Some form of DHTML or pure CSS dropdowns is recommended. Options to come.

11. Include an HTML5 doctype (<!DOCTYPE html>) and test cross-browser.

12. For now, start working on a site plan and on storyboards for individual pages. We will take an interim look Nov. 6. This means that you need to have set up a site plan (can be sketched on paper) so that you know what the pages will contain, AND a working HTML mockup of the home page so that color scheme, type treatment, overall "look and feel," navigation and page structure can be critiqued.

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.

Here are the class's sites (let me know which one you are working on):