Customer Styling

Directions

This assignment will be based on the following scenario about Bob's Small Time Grocery:

Background: Bob's Small Time Grocery liked your proposal, but they are not satisfied with how their colors look on your sample page. The customer gives you permission to experiment with multiple stylings and steer them towards clean and professional. They also do not want their logo, which also uses the company colors, to appear out of place on the site. You must provide a branding guide with different styling options and a suggested path forward. You must also update the styling sample page to reflect the new branding.

For this assignment, you will write a branding document that describes how you plan to style the customer web site and incorporate their colors (#00FF48 and #FF0000). You will also update the styling page from LP01 Assignment with new styling based on the new branding.

NOTE: You must Fork the CodePly page created in LP01 Assignments so you do not overwrite your previous LP01 Assignments page.

Writing Guidelines:

• Prepare a branding document that will be 2-3 pages in length
• Use a 12 point font (Arial or Times New Roman)
• Use single-spaced lines instead of double-spaced
• Use APA style citations for any references
• Cite any information referenced from another source
• Use correct sentence structure and grammar
• Use appropriate vocabulary and terms associated with the subject matter

Branding Document Components:

• First section called "Color Scheme" that contains your discussion about the colors for the web page. Research 3 color scheme combinations for the customer using Adobe Color Selector (https://color.adobe.com). As a starting point, you may enter either of the customer colors into the Adobe CC page to see what combinations are available with the various Color Rules. After you choose a color combination, paste a screenshot of the color palette swatches and the RGB codes for each proposed scheme into the Word document. Discuss your reasons for selecting these color combinations, such as emotions or perception. Select your favorite of the 3 color schemes and discuss how the customer logo will blend or contrast with the colors. Also, identify your primary color and two accent colors and where you will use each on the web page, e.g. header background, footer background, headings, etc.
• Second section called "Typography" that contains your discussion about the font typeface, size, and decorations. Using the customer's Open Sans font as the default font for the web page, select a serif font for headings. Discuss how a sans-serif font is better for body text and a serif font is better for headings.
• Third section called "Media" that contains your discussion about a background image for the page and overall use of content images. Select a background image from http://backgroundhost.com/. Explain how the background image blends or contrasts with the selected colors and the customer's colors. Copy and paste a thumbnail of the background image into the document. Explain how too many images on the page will detract from the user experience. Your reasons can include page load time, busy web page, confusing content, etc.
• Fourth section called "Animations" that contains your discussion of animations that will add value to the web site. Explain how too animations can detract from the user experience. For simplicity, propose that a single hover effect on the form submit button is sufficient. Also, explain that the button hover will show the accent color from the selected color scheme.
• Fifth section called "Recommendations" that contains a summary of all of your recommendations for colors, typography, and images for branding their web site.

Styling Page Components:

• Fork the CodePly page created in LP01 Assignment as the starting point for this page.
• The page must display the background image selected in the branding document.
• The header and footer areas must use the primary color as the background color.
• Text in the header and footer areas may need to use a white color (#FFFFFF) if dark text is not legible.
• Block quote text must use an accent color as the text color.
• The page must display level 1 heading elements with the heading text color from the selected color scheme.
• The form button must change background color to an accent color on mouse hover and the button text must be legible, i.e. dark text on a dark background is not legible.