The assignment is to create website style frames, using Adobe Photoshop CS6.

*Project must be submitted with following items: Research & Inspiration, Conceptual Sketches & Color Sketches, Photoshop Iteration , Word Document and Final Designs & PSD’s. You will be graded separately on each phase of your projects. You are required to submit all research, inspiration, sketches, preliminary comps, word document and final design as digital files placed in a folder on your DropBox called PS Styleframes.

Design Brief

Subject: Website Styleframes Design

Choose ONE of the three website design tutorials to design “style frames” (website page mockups). The tutorial will guide you through designing the “home page” of the website. You are required to design the HOME PAGE EXACTLY AS THE TUTORIAL STATES. Save the PSD and the JPG.

– THEN CHANGE THE HOMEPAGE DESIGN to represent YOUR NEW website. as well as TWO additional pages. Additional pages could be any of the following: contact page, photo gallery page, about us page or get involved page.

• For your additional two pages, keep the same logo, header, main navigation and footer. Change the layout of the other parts of the page.

Page Layout

1. Appealing to target audience
2. Consistent site header/logo
3. Consistent navigation area
4. Informative page title that includes the company/organization/site name
5. Page footer area — copyright, last update, contact e-mail address
6. Good use of basic design principles: repetition, contrast, proximity, and alignment
7. Balance of text/graphics/white space on page
8. Good contrast between text and background
9. Home page has compelling, interesting information above the fold (before scrolling down) at 1024×768

Color and Graphics

1. Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals
2. Color is used consistently
3. Color has good contrast with associated text
4. Color is not used alone to convey meaning (accessibility)
5. Use of color and graphics enhances rather than distracts from the site
6. Each graphic used serves a clear purpose

Content Presentation

1. Common fonts such as Arial or Times New Roman are used OR no more than one web font used. Make sure your using WEB SAFE FONTS.
2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
3. Fonts, font sizes, and font colors are consistently used
4. Content provides meaningful, useful information
5. Content is organized in a consistent manner
6. Information is easy to find (minimal clicks)
7. Content is free of typographical and grammatical errors
8. Content provides links to other useful sites
9. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/non-visited status

Miscellaneous:

• The website page design must contain all of the information that is normally found on a web page.
• The selection of type styles, typefaces and box package size and format should be consistent with the home page.
• The pages must demonstrate unity by using common themes that demonstrates they are from the same website.

Project Submission and Printout:

• The three website style frames must be uploaded to your blog, Flickr and all files placed on the class thumb drive. KEEP ALL ORIGINAL FILES. Create a new folder on DropBox for them.
• Word document, research, sketches, design iterations and final design in the following formats: .psd, .jpg and .doc should be uploaded to your DropBox and labeled as follows:  Last Name_First Name_Date_Project I_Photoshop Styleframes.
• The style frames will be turned in as a Adobe Photoshop file, a .jpg file and a pdf file. The written description and research for the project in Microsoft Word will be turned in .doc format and the project sketches will be turned in .jpg format.
• ALL OF YOUR WORK should also be placed on your website project page.

Items That Must Be Physically Turned In:

1. Paper print out of the project written description.
2. . psd, .jpg, .pdf and .doc files uploaded to your DropBox.
3. Adobe Photoshop Project III: Written Description

Requirement Summary

1. Your additional website style frames must use multiple Photoshop tools and procedures and may NOT be created only from text or images that have not been Photoshopped.
2. Additional Photoshop style frames must illustrate that they were designed and fit the shape of the home page and the style is consistent through out the pages.
3. A Microsoft Word document with the following information must be included with your final project II submission. It must include a written description explaining the Photoshop tools, principles, and elements you used in designing your product.
4. Create a folder on the class flash drive and label it: Last Name_First Name_Date_Project III_PhotoshopStyleframes. Inside of that folder, upload the following files:
5. The write-up should specifically define the what and why of each element designed and why you designed it that way.  The Word document will be graded both for content and grammar.

• . psd file
• .jpg file
• .pdf file
• .doc document

Adobe Photoshop Project II: Written Description Should Include:
Write a description of the website style frame design process and the thinking behind its design. The following items should be included in your project description: Remember to include your full name, date, project III and project title in the document. The content of the Photoshop Project Written Description must include the following:

1. The name of the website tutorial you followed and the url of the tutorial you followed.
2. Why did you select the colors you did for your additional style frames designs?
3. What research did you do to make the additional style frames designs fit the nature of the company and the home page?
4. What did you do to assure that the style frames would be consistent with the home page?
5. What elements are your center of interest on your additional pages and why?
6. Describe the flow throughout the various parts of your web page designs.
7. What elements did you use to create unity between the home page and the two additional pages you designed?
8. How successful do you think you were in meeting the design needs of a consistent and fluid website?
9. What Photoshop tools did you rely on most and why did you choose these tools?
10. What problems did you encounter while creating your style frames and how did you solve them?
11. What would you do differently, if you could start over?

NOTE: If you need help with Punctuation and Grammar Rules, review the Owl website, sponsored by Purdue University: http://owl.english.purdue.edu/handouts/grammar/index.html.

RESOURCES

• Wireframe Resources