COEN 268 HW1 - COEN 268 homework 1 PDF

Preview

Summary

COEN 268 homework 1...

Description

The app that I studied is HealthView, which belongs to Health domain, as for the colors rules mentioned in material design, here are the rules that the app follows:

1. The areas marked as red follows the rule that “Apps can use additional colors to convey categories that are outside of your main color theme. They are still a part of your full color palette.” In our case, 3 additional colors are used: Steps, data indicating number of steps and “Go Premium” sections use color of blue; Distance and walking distance data sections use color of orange; Calories and data indicating amount of calories burned use color of red.

2. This app follows the rule that “To maintain visibility of elements and legibility of text, you can adapt the different color schemes for dark and light themes.” In this app, light theme and dark theme uses different color scheme to maintain legibility.

3. This app follows the rule “When an app’s top or bottom app bar color is the same color as the background color, they blend together, placing emphasis on an app’s content instead of its structure.” As highlighted in red, the app bar color and background color are both white, however, there is a line that can separate app bar and app’s content so that users can identify app’s content better.

4. This app follows the rule to use different colors to distinguish between the front and back layer. This app uses white color for the backdrop’s back layer, and uses its dark primary variant for typography and iconography. Additionally, additional blue color is used for letting users purchase premium.

5. This app follows the rule that “Important text, like tabs and headlines, can use your primary or secondary color.” This app uses secondary color of black to accent and call attention to those important health data.

6. This app follows the rule that “Buttons, chips and selection controls can be emphasized by applying your primary or secondary color to them.” This app uses white color as background color and green color as an accent for the selection controls.

7. This app follows the rule “Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable.” In this app, the background color is white, and this app uses red, orange and blue color for its icons, therefore making icons legible and identifiable.

Here are the rules that the app does not follow at all, or at least does not follow strictly:

1. The area highlighted as red above does not follow the rule “Apps that use white text must have backgrounds that are accessible against white text. Apps that use black text must have backgrounds that are accessible against black.” strictly. According to this rule, since we have white background color, it will be better if we have black text color to reinforce legibility. However, this app has grey text color, thus legibility is weakened.

2. Different themes do not have different primary colors, which does not follow “Alternative colors can be used to theme different parts of an app.” rule. We have the same white primary color for all three themes, thus does not help users to better locate themselves.

3. This app does not follow the rule “bottom sheets, navigation drawers, menus, dialogs, and cards can incorporate color to create contrast between other surfaces” strictly. Bottom sheets and app’s background color are very similar....