PROJECT 1
Freedom Ride Website
For your first project you will be redesigning a 6-10 page web site for FreedomRide.com. You will be building out a redesign that will be implemented into Wordpress as an actual live project. You can download the assets for this project by accessing them here. One student's design will be selected and used for the actual live website.
Research & Planning
Complete the research & planning portion of the project and turn in on the final project due date. Your process book will need to be posted initially with your research and inspiration on Sept. 10:
- Process Books: You must complete a process book for this website that you will work on throughout the project. You will post your initial research, sitemap and wireframes/roughs.
- Research: Research examples of good design - get inspired! A minimum of five examples of research must be posted before the initial design critique. Design examples are not limited to Web design. Your Process Book MUST be provided in webCT under Project 1 Discussions. Make comments on the Process Book progress you provide. Write what you feel about the design is strong. All research must be good design examples, and not just examples of web sites similar to the project topic.
*How to take a screenshot
Mac Users - CMD + Shift + 3 will enable you to capture an image of your entire screen
CMD + Shift + 4 will cause a crosshair will appear on your screen that will allow you to drag across a specified area of your screen you wish to capture an image of. Once complete a pdf will appear on your desktop.
PC Users - A Print Window key on your keyboard may be used to copy an image of your screen to your clipboard. Once complete, simply open an image editing program, open a new file, paste the screenshot into the new file and save your file. - Site Map: Although the site we are designing is rather simple, please create a basic site map including all pages of the navigation as well as appropriate links. Each page will represent a rectangle in your site map, with links to other pages connected via lines. This site map can either be hand drawn or created on the computer. Additionally the site map should clearly outline the information and content that is planned for each page. A sitemap has already been provided which you can implement and modify as you need for the site.
- Interactive Elements: As part of this project you will need to research and plan for the implementation of a javascript/css-based piece such as JQuery or MooTools to build out a slideshow for your homepage or an interactive gallery. You will need to post five examples of some ideas you'd like to implement on your project under Project 1 Discussions. Post the name of the example, a link to view it and a brief summary of what it does. You will select one out of your examples to use in your final project.
Comprehensive Designs
Once these initial steps have been completed, you are ready to mock up your site design. You may use Photoshop (or your design program of choice) to create your comprehensive designs. Your designs comps should closely resemble your plans for your final functional design. It should be work you'd be proud to show a client. For this project you are to propose a minimum of two concepts for the home page and two concepts for the gallery page (4 pages total). You may design your comps with a maximum width of 960 pixels. You must ftp your design comps by the project design comp due date. Keep in mind the following web design factors when designing your project:
- Color scheme
- Typography
- Style & Use of imagery/graphics
- Top fold - Ensure the important elements (logo, navigation, calls to action, etc.) are in the top 350-450px of the page
- Navigation - is it usable? Have you considered rollover effects?
- Content Organization. Group relevant topics together, use columns rather than having one huge body of text.
- Text. Text areas generally should never be longer than 365px wide. (Line length article: Web style guide) Use headings & subheadings to help emphasize areas of interest.
- You must present the Meet the Horses page as a concept. Present your ideas so that we can visualize how the user will interact with the gallery. You must include appropriate details for each piece of artwork as it is available.
- Target audience
- Concept - the "idea" behind your design.
-
to recieve the full credit for concepts you must present both a home page and Meet The Horses page design comp of each concept. The comps for concept 1 & 2 should be different concepts
Technical Requirements
You must demonstrate your proficiency with Dreamweaver, XHTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:
- Your site must contain a minimum of six pages.
- Name your HTML files and images descriptively.
- Your home page must be named "index.html".
- Use all lowercase letters for naming, and avoid special characters and spaces (except for hyphens and underscores, which are OK).
- File optimization. (appropriate file size, file format, & image quality)
- Put your images in an /images/ subfolder to keep your site organized.
- Check all your links and pages to ensure they work correctly before you are done.
- All pages should have descriptive and unique page titles
- All images must have alt tags and height/width declared
- Navigational elements must have rollover effects (javascript or CSS)
- Correct use of html/css syntax
- Proper use and set up of CSS Positioning
- The site must demonstrate proper CSS formatting. Name all CSS rules (NO .style1, .style2, .style3)
- Utitlize your interactive element into the site.
- Your host directory for this project is p1
| Deadlines | (30 pts) | ||
Process book research |
|||
| Design Considerations | (55 pts) | ||
Design Improvements |
|||
| File Organization | (7 pts) | ||
| Proper naming conventions | (3 pts) | ||
| File organization (separate directories for assets, images, css) | (4 pts) | ||
| File Optimization | (8 pts) | ||
| Appropriate file size, file format, image quality | |||
| Technical Considerations | (65 pts) | ||
Site contains a minimum of six pages |
|||
| Presentation | (10 pts) | ||
FTP site (Do NOT FTP source files (photoshop, illustrator, flash) |
|||
| Total: | (175 pts) | ||