Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Background: Bob\'s Small Time Grocery liked your proposal, but they are not sati

ID: 3917034 • Letter: B

Question

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.

Explanation / Answer

First section:

User Experience design-benefits:

              For delivering the good quality product the user experience design benefits are the important sector Experience about the user is the important task for the delivering the good product.

Increased customer satisfaction:

           Needs to create a best experience for the customers to create a best experience of BOB, small time grocery. This will make them happy and feels comfortable opposite is also true Must not give the very worst for the customers once they feel frustrated about the small time grocery then they will not believe the thing which is provided by BOB They un satisfied customers will not give the positive comments about the grocery their family and the relatives of them They will often complaint about this, Make very clear on satisfying the needs of the customers.

Reduced cost in support of ownership:

            If any of the product is produced then that is having the easy way of learning to design Less support only required for that kind of products . The qualified designs are helpful for reducing the entire cost and the ownership cost in that way it requires only less documentation.

Increased Sales:

          If the customers happy and satisfied about the delivered products, then they will share the close circles like their family and their friends They can also provide their review comments about the grocery in online It is providing the very good experience, which is helpful in constructing the positive feedback about the Grocery.

Second Section:

Research:

          Good and the meaningful interviews are required for collecting the requirements of the customer Interviews are obliging in collecting more than a few information about the product Most of the significant requirements for pleasing the customers are also taken from the interview Important questions are asked in the interviews that is improving the quality .

          Response rate is also huge in these aspects It is developing the relationship to the customers A kind of the SUFFICIENT INFORMATION is collected at the time of the interviews for supporting the good product Prototypes are the earlier approach it is constructing the product then tasting is taking place if any of the rework is required then that is also clarified Repeatedly rework is required until the product is accepted that is the prototype, which can he finally applied for the entire product system.

Third:

Principles of responsive design:

      The responsive design which is having a critical path and that requires to tickle about the difficulties faced an the tablets mobiles and the desktops It requires a proper design for design pattern plans The modules are also very meaning toll for the reusable modules which is helpful in the response of the layout that reaching several devices which is not implemented earlier before.

Relative units:

       Canvas must be a mobile sae® or desktop or any of the thing which is placed in between The density of the pixels is also varying The flexible units are required 50% wide range of screens is needs to he implemented.

Flow:

     If the size of the screen which is smaller then it starts for taking up more vertical space which can be placed at bottom of push down which is called as flow. Sometimes which must be trickier for grasping the design aspects with points and the pixels used in the points.

Max and Min values:

      Some of the contents are taking up the entire width of the screen same as the mobile device, but holding the same kinds of contents, which are stag the entire width of the TV, screen which has made less in sense.

Break points:

     These are helpful for changing the already defined points, which coda,. three columns in the desktop in the mobile it, holds ody one column The properties of the CSS are changed from I break point to the another one .