CARP Project 1: Page Layout Rearrangement/Redesign using Photoshop

Complete project due: Sunday, September 11th
Preliminary layout due: Sunday, September 4th

Description

Use Photoshop to redesign the elements (in the provided Photoshop file below) for the web page layout for the group, Mudcat Blues Band. Your "redesign" should clearly demonstrate the design principles: contrast, alignment, repetition and proximity (CARP). It must be the same pixel width as the Photoshop file provided below. You must use the original text content but can use the alternative images, change the colors etc.

Here is a screen shot of the original design. Just use this for Assignment 3 and reference:
Mudcat Blues Band Home Page

Here is the layered Photoshop file you need to use. There are various text layers and photos/images (you do NOT have to use all the photos!). Keep it SIMPLE!
Use the following file (Note: this is a LARGE file! 7MB. If you have trouble downloading it, please e-mail me and I'll upload the basic file and the images separately):
Photoshop file for Mudcat Blues Band CARP layout

Requirements

Please read the following project requirements very carefully:

• Design: Demonstrate the Design Principles: Contrast, Alignment, Repetition, and Proximity.

• Dimensions: Use the pixel dimensions set in the Photoshop file. Your final jpeg design should be the same size as the original Photoshop file.

• Format: Develop your layout in the layered Photoshop document. Then save the final "rearrangement" as a jpeg image (keep the original Photoshop document too!). Upload the jpeg image to your homework site.

• Band logo: You can redesign the Mudcat Blues band name logo if you want. Remember to use contrast!

• Type/text: You cannot add, edit or delete any text. You CAN realign, resize and change the font, color and other attributes of any type in the layout.

• Navigation: You can relocate/redesign the navigation menu to improve the alignment and proximity in the design. It's ok to change the layout, color, font, size of the navigation labels.

• Photos: You should use at least ONE photo in the photoshop file. It is ok to resize (larger or smaller) to create strong alignment. Just remember to KEEP IT SIMPLE.

• Other graphic elements: Use rules or shapes to create a theme that demonstrates the repetition design principle.

• Background: The current background is black but it's fine to change the background color if you wish. In fact, you can select a new color palette for the entire design provided it's appropriate to the topic.

Procedure

You will follow these steps:

1. Evaluate the existing Mudcat Blues Band design in terms of the design principles and techniques described in Weeks 1 and 2. You will write a critique of the screen shot of the Mudcat Blues Band page design (Mudcat Blues Band Home Page) for Assignment 3 as part of your Week 2 homework (see the Week 2 homework page for detailed instructions).

2. Review the sites in the Week 1 lecture and links pages to get inspiration on how to apply the principles of Contrast, Alignment, Repetition and Proximity.

3. Open the provided Photoshop file and start work on your redesign:
   For CONTRAST: select an element (Type or photo or perhaps the two combined) to use as your focal point. Make it contrast with everything else. Also use contrast for emphasis in type.
   For ALIGNMENT: use the guidelines in Photoshop (drag from the top and side rulers) to set alignment edges to arrange your elements along. No element should be centered or "floating" on the page. Don't forget vertical alignment too -- elements at the top or bottom should share the same top/bottom margin.
   For REPETITION: use rules or a repeating shape to tie together the design elements. You can also use consistent typefaces and colors for repetition.
   For PROXIMITY: look at the design elements and decide which belong together as a group. Place them close together. Use white/negative space to separate elements that do not belong together.

4. When you have developed a PRELIMINARY layout, Save As... a jpeg image and upload to your homework site. (You can also upload your layered Photoshop file if you want me to provide "visual feedback" by rearranging the layout elements rather than just providing written comments.) Send me an e-mail with the direct link to your preliminary layout by the preliminary layout deadline. Make sure you keep the original layered Photoshop file (don't flatten the layers in the original file).

5. When you have received my feedback on your preliminary layout, work on finalizing your design. Then, Save As... a jpeg image.

6. Upload your final redesign jpeg to your server and link it to your homework index page. Email me the direct URL to your final redesigned page so I know you have completed the project and can find it easily: kthornley@santarosa.edu

7. Final thoughts: Keep it simple! Remember that you will be graded on the design principles (contrast, alignment, repetition and proximity) from week 1. Make sure you demonstrate them clearly!

Project Samples

Here is an example of redesigns from previous semesters (please note the original site is different from this semester):
Screen shot of the original sample design:
Fred Frapp Home Page

Student redesigns of the Fred Frapp Home page:
Redesign Sample 1
Redesign Sample 2

Research/
Inspiration

Here are some links to blues band web sites if you want some inspiration (these are not necessarily great designs!):
http://www.tajblues.com/
http://backyardblues.com/
http://www.ladyababyblues.com/
http://www.charliemusselwhite.com/
http://www.mojobluesband.com/
http://gordonbonham.com/

Due Date

Sunday, September 11th by midnight

Points

This project is worth 50 points + 5 points for the preparatory work:

Preliminary Layout (5 points) (Due Sunday September 4th)

Completed jpeg design (Design principles: contrast (10 points), alignment (10 points), repetition (10 points), proximity (10 points) and creativity/originality/following requirements (10 points) (50 points total).
(Due Sunday, September 11th)

Late work will be downgraded by 10% per week.