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
- Complete the research & planning portion of the project (initial research, sitemap and wireframes/roughs). These should be presented in a pdf and uploaded to the Project 3 discussion area on Blackboard.
- 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. 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.
- Wireframes: You must complete a wireframe of your website (minimum 6 pages). All wireframe screens can be created on the computer and should indicate your overall organization of graphical elements. Include in your wireframes design considerations such as typography, graphical elements, motion, etc. Your wireframes should include consideration for navigational elements. Think about not only how the navigation is placed but also think about functionality & usability. Post your wireframes in a post on Blackboard under Project 3 Discussions. More information on wireframes here and here.
- 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.
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:
- Color scheme
- 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 your menu page as a concept.
- Target audience
- Concept - the "idea" behind your design.
- Print style sheet design. You will place an emphasis on ensuring a print style sheet is created for the menu page.
to recieve the full credit for concepts you must present both a home page and menu page design comp of each concept. The comps for concept 1 & 2 should be different concepts
You must demonstrate your proficiency with HTML & 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 page titles
- All images must have alt tags and height/width declared
- Correct use of html/css syntax
- Proper use and set up of CSS Positioning
- Use at least one CSS3 technique
- Use @font-face in your website
- The site must demonstrate proper CSS formatting. Name all CSS rules (NO .style1, .style2, .style3)
- Validate your entire web site with w3.org
- For this web site you must create a print style sheet which prints and looks professional when printed. Print a copy of the menu page that has a decent amount of content to show your efforts.
- Use proper organizational methods in your html & css. Optimize/Shorthand your CSS to reduce CSS code.
- Your host directory for this project is p3
|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.
|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
FTP site (Do NOT FTP source files (photoshop, illustrator, flash)
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)|