---
tags: ACIT-2811
---
<style>
a {
text-decoration: underline;
}
.markdown-body h1:first-of-type {
margin-top: 24px;
}
.markdown-body h1 {
margin-top: 64px;
}
.markdown-body h1 + h2 {
margin-top: 32px;
}
.markdown-body h2 {
margin-top: 48px;
}
.markdown-body h3 {
margin-top: 48px;
color: goldenrod;
}
.markdown-body h4 {
margin-top: 36px;
}
.exercise {
font-size: 150%;
font-weight: bold;
color: rgb(227,112,183);
}
.note {
color: red;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
}
.spacer {
height: 18px;
}
.flex {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
}
#td {
background-color: #008a00;
}
#royal {
background-color: #006AC3;
}
#scotia {
background-color: #ad0000;
}
#tangerine {
background-color: #ea7024;
}
#rei {
background-color: #1f513f;
}
#mec {
background-color: rgb(43, 102, 56);
}
#fenty {
background-color: #f3e1db;
}
#yellow {
background-color: #ffcc00;
}
#blue {
background-color: cornflowerblue;
}
#magenta {
background-color: #ff66cc;
}
#red {
background-color: rgb(234,50,35);
}
#green {
background-color: rgb(96,178,88);
}
#d-red {
background-color: rgb(171,157,50);
}
#d-green {
background-color: rgb(158,149,82);
}
</style>

# ACIT 2811 - Session 6

### Color Theory

Colors can quickly communicate many things to a product's users:

#### Brand Identity

The following squares are the primary brand colors of four banks in Canada, can you name any of them? The fourth color is an online bank - is there a difference between it and the others, and if so why would that be the case?

<div class="square" id="td"></div>
<div class="square" id="royal"></div>
<div class="square" id="scotia"></div>
<div class="square" id="tangerine"></div>

#### Product Type/Category

Contrast the colors used by two outdoor companies, REI and MEC, with a color used by Fenty, a cosmetics company.

<div class="square" id="rei"></div>
<div class="square" id="mec"></div>
<div class="square" id="fenty"></div>

#### Mood

What attributes would you associate with the following colors, and what brand/product do you imagine would use them?

<div class="square" id="yellow"></div>
<div class="square" id="blue"></div>
<div class="square" id="magenta"></div>

#### State

Color can also communicate the state of a system, e.g. success or failure, but we should not rely on color alone. For accessibility reasons, icons and/or text should be used in addition to color to communicate state to users.

Below are two colors commonly used to communicate state, red and green. Below _those_ are how the very same colors would look to someone with Deuteranopia, red-green color blindness. Statistics vary, but in some parts of the world as much as 10% of the population suffers from red-green color blindness!

<div class="square flex" id="red">R</div>
<div class="square flex" id="green">G</div>
<div class="spacer"></div>
<div class="square flex" id="d-red">R</div>
<div class="square flex" id="d-green">G</div>

#### Color Harmony

Color Harmonies can help us derive a color scheme (two to four related colors) for a product from a single base color. The choice of color harmony to apply to a base color depends on the type of product and its audience – a lower contrast method like analogous may be more appropriate for a conservative product, for example.

Once a base color and color harmony is chosen, achieving the right balance of colors is the key consideration for a successful design. The base color should be the most prominent, any contrasting colors should be used sparingly, and in most cases a neutral color like white or black should be used for the background.

As an example, below is a section of BCIT's homepage. Note the amount that the various colors are being used. What do you feel is the base color? The accent color? What is the color harmony being used?
<br>

### Color Models

Humans can see three colors; red, green, and blue. These are referred to as ==primary== colors. Mixing two primary colors in equal amounts results in three ==secondary== colors; cyan, yellow, and magenta.

### Color Terminology

__Hue__: A pure color without tinting or shading, represented on the color wheel as primary (red, green, blue), secondary (magenta, yellow, cyan), and tertiary.

__Shade__: A pure color mixed with black

__Tint__: A pure color mixed with white

### Typography

Typography is a critical aspect of product design. Well-designed type can communicate content clearly and reinforce brand identity. Like color schemes, effective typography must consider the type of product and its audience.

A full understanding of typography is beyond the scope of this course, but knowing [basic terminology](https://creativecloud.adobe.com/discover/article/typography-101-a-crash-course-of-terms-to-know), understanding typefaces and [how to pair them](https://zellwk.com/blog/typefaces/), and learning [by example](https://www.typewolf.com/) will greatly improve a product's usability and appeal.

### Note on Accessibility:

For both the color scheme and typography of a product, accessibility is crucial. Contrast between colors, particularly background and foreground colors of text, must be sufficiently high for users with visual disabilities. Additionally, design elements must not cause fatigue or discomfort to the eye for regular users.

<br>
<p class="exercise" id="ga4">Group Assignment Part 1: Color Scheme and Typography</p>

Before updating your wireframes, identify a base color and color scheme for your product using [Adobe Color](https://color.adobe.com) or any similar color wheel tool. <span class="note">Note: Only two colors are required for your color scheme - white and black can be used **in addition** to these two colors.</span>

Once you have a color scheme chosen, use Adobe's built in [Contrast Checker](https://color.adobe.com/create/color-contrast-analyzer) to ensure that you will have sufficient contrast for text. For full marks you must pass all three tests at AAA (the strictest) level, so ensure you change the settings as per the screenshot below:


<br>

Additionally, you must choose two fonts, one for headings and titles, and one for body text.

<p class="note">For part 1 of this group assignment, submit a txt/word/pdf file to the Learning Hub containing a screenshot of your color scheme and a short paragraph on the thought process behind it. Also include the names of your two chosen fonts.

<br>
<br>
<p class="exercise" id="ga5">Group Assignment Part 2: High Fidelity Wireframes</p>

For the high-fidelity wireframes, you must apply your typography and color scheme to your existing low-fidelity wireframes. These high-fidelity wireframes will serve as a finished representation of how your product would look in the real world, and will be used as part of your final presentation.

For full marks your high-fidelity wireframes must, at a minimum, fulfill the following requirements:

* Both colors must be represented, in appropriate amounts
* Your chosen fonts are used throughout
* Image placeholders are replaced with real images (any appropriate stock images may be used)
* All UI elements (buttons, dropdowns etc.) are styled, using colors from your color scheme (or black/white)
* All UI elements that are actionable/clickable are clearly indicated as such (buttons, underlined links)
* Navigation must be consistent across pages

<span class="note"><b>IMPORTANT NOTE</b>: you do not need to create any text content apart from links and headings necessary to give your wireframes context - placeholder text like</span> [Lorem Ipsum](https://loremipsum.io/generator/) <span class="note"> for body text is sufficient</span>

See an example below for the difference between low-fidelity and high-fidelity wireframes


## Tasks To Complete Before Next Class

- [ ] Submit part 1 of the [Group Assignment](#ga4)
- [ ] Begin part 2 of the [Group Assignment](#ga5)