Web Design Professional Project
Pretend that a client of yours has asked you to create a four-page website using all your own original art work. The client wants the site to include an animation. You can imagine any type of site you like.
You will be using all of the skills and technologies that you learned in your courses to build a website and artwork from the ground up, documenting each part of it as you work.
Please make sure that ALL artwork is unique and original (created by you). The important part is to show off your skills as a web designer, but also to have fun doing it!
- Case Study (summary from pretend interview with client) as Word document or PDF.
- Project Scope (well structured) as Word document or PDF.
- Color Palette labeled with RGB values as PNG file.
Original Art Files
- Create a Photoshop file that is a design mockup of your home page. Make sure to name your layers and slices.
- Create at least three images for a slide show on your home page or one of the other web pages on your site. You can save these images in one PSD file or in three separate PSD files.
- Create an Animate Ad to use in the final site template that has self-timing. You may have it repeat or play once. You may also make it user interactive.
- Create an HTML home page based on your design mockup. Make sure to use relative URLs to images and other pages. The page layout and design should be done with CSS.
- Include the ad you made in Animate on one of your pages on the site. Make sure the ad works in your browser and is HTML5 compliant.
Here a sample of a home page:
Folders are organized into Original Art, Documentation, and Final Site subfolders.
- You can name your files differently, but please use the names shown above for the folders.
- The Final Site folder will serve as the root folder, which the instructor will use to test your site.
Testing your Website
- View the source in your browser and review the code there. This shows you the HTML that your PHP code generated.
- Make sure your code starts with a DOCTYPE declaration, preferably <!doctype html> . There should only be one DOCTYPE declaration per page.
- Validate the code by copying it and pasting it in the W3C Validator. If you get any errors, review them and try to fix them before submitting the project.
- Do you have any broken links?
- Do the src attributes for all your internal links, stylesheets, and images use relative paths?
- Do all your pages have titles?
- Are you using CSS (and not HTML) for formatting? For example,
- Don't use
<p>tags to create vertical space.
- Don't use deprecated tags (e.g.,
<b>) and attributes (e.g.,
- Don't use
- Does your design work well in different dimensions. Resize your browser window to different sizes to make sure.
- Does your slideshow work?
- Does your Animate ad work? Is it HTML5 compliant?
- After you have completed all of the requirements of the project, create an archive (zip file) of your entire project "topic" folder. You can use WinZip, or whatever compression tool you prefer to create the .zip file.
- Email the file to email@example.com.
- If you are having trouble sending the project attachment via email we suggest using a file sharing service such as Dropbox, Box.net or Google Drive.
- Please allow 10 business days for us to review the exam submission.
- You must complete the project before the expiration date of your course. We estimate it will take about 30 hours. Be sure to leave yourself enough time.
- IMPORTANT: Please be sure to complete ALL the requirements of the project before submitting it. If for any reason you are not able to complete one or more of the requirements and wish to submit without that portion complete, please explain that in the email when you submit the project. If a project is incomplete and there is no explanation as to why, it cannot be graded.
Your grade will be calculated based on the following categories, with the amount that each category contributes to your overall grade:
- Case Study: 10%
- Project Scope: 10%
- Color Palette: 5%
Original Art Files: 25%
- Photoshop Design Mockup: 15%
- Animate Ad: 5%
- Home page is valid: 5%
- Home page links work and use relative paths when possible: 5%
- No deprecated tags or attributes: 5%
- Files organized sensibly: 5%
- Design looks like design mockup: 5%
- CSS is used for design and layout: 5%
- Animate ad included, is HTML5 compliant and works in the browser: 5%
Folder Structure: 10%
- Folders organized according to project requirements: 10%
This project is meant for you to use your own skills and knowledge. This means that we expect the work to be your own work. We also expect that you will want to look some stuff up. Please feel free to use your course textbook and the course content to help you along. You may also use the Internet as a source of help, especially for looking up documentation and errors.
Note that the instructor is not a resource during this project. The purpose of the project is to evaluate how well you can do without access to the instructor.