PROJECT 3

Craigslist

For this project you will be redesigning and developing https://orlando.craigslist.org. You may choose any item out of the "For Sale > Auto" section. Construct the site based on a minimum of six pages and MUST INCLUDE: Home, Category, Single Product, Post. You will need to incorporate @font-face for your headings in the site and implement a CSS3 technique such as border-radius, text-shadow, etc.


Research & Planning


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 a sub page (4 pages total). You may design your comps for a monitor that is up to 1024px wide. However, when designing your comps, this time you MUST increase your canvas size to 1200px x 1000px so we can visualize your intentions for the background of the web page AND so we can see how you intent to use additional content. In other words, we DON'T just want to see a paragraph on each page. Be sure to keep in mind the top fold of your page. 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:


Technical Requirements

You must demonstrate your proficiency with HTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:


Design Comps (190 pts)    

Design comps due by specified date, quality, design and correct number/type of comps completed. Failure to submit all requirements can result in a zero.

     
Design Considerations      

Design Improvements
Color scheme
Typography
Style & Use of imagery/graphics
Top fold / Hero section
Navigation
Content Organization
Target audience
Gallery Design
Concept - the "idea" behind your design.

     
 
File Organization (30 pts)    
Proper naming conventions (15 pts)    
File organization (separate directories for assets, images, css) (15 pts)    
 
File Optimization (15 pts)    
Appropriate file size, file format, image quality      
 
Technical Considerations (85 pts)    

Site contains a minimum of six pages
Functional links
CSS navigation
Links to pictures (all pictures appear - no ? marks)
Email link (with predefined subject)
Proper use of HTML/CSS syntax
Proper use of CSS Positioning
CSS formatting. Name all CSS rules.
Page titles
Alt tags and height/width applied to all images
Validate your entire web site
Optimize/shorthand CSS
Build a web form
CSS3 Techniques
@Font-Face implementation
Style your menu page so that it is printable

     
 
Presentation (30 pts)    

FTP site (Do NOT FTP source files (photoshop, illustrator, flash)
Presented project in a professional manner
Effectively communicated concepts
Participated in class critique & assessment of projects

     
Total: (350 pts)    
 
 
Responsive      

The responsive section counts as the fourth project. Using the RWD Bookmarklet as the presentation and grading tool the total points will be divided evenly (275/4). Each layout must fit the screen (no horizontal scrolling) and have an updated design to fit the four screens sizes.

     
iPhone Portrait (68.75 pts)    
iPhone Landscape (68.75 pts)    
iPad Portrait (68.75 pts)    
iPad Landscape (68.75 pts)  
 
Total: (275 pts)