NADIA ISLAM


HME
GRAPHIC DESIGN / 3D VISUALIZATION

BRAND DESIGN

A look into the colors, logo, typography and other considerations of the brand identity

#686F12

Main Brand Color

#495113
#8A951C
#E3E585

Primary Color Family

#00605D
#027D6D
#02B3A0
#ABE4D3
#AF5626
#D4682E
#F7906D
#FFC49A
#E19D00
#F8BA00
#FFD64F
#FCF5B4
Secondary Color Families
#1C220F
#333826
#4A4E40
#606457
#787A6F
#8E9087
#A5A79F
#BBBCB6
#D2D3CF
#FFFFFF
Neutrals

Color Palette

Olive green is an alluring color, especially due to its ability to revitalize the mind and eye. To accompany and contrast this deep neutral, bolder mid-tone colors of a similar caliber were carefully tested and chosen. Started with a double split complementary and customized the palette such that the overall ensemble of colors imbues warmth and gives a feel of muted pastels. 



Typography

Proxima Nova is the primary font used on this website, as it is a clean, classic sans serif typeface that allows for greater legibility.

This font has a large range of weights and styles, though only four are mainly utilized across the site. Its uniform strokes and simplicity complements the lightheartedness of the brand's soft and muted color palette.

Aa

proxima nova

Primary Typeface

Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Semibold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Logo

The design is simple and straightforward, with the intent to use geometry to create my initials, utilize main brand colors, and ensure scalability from thumbnail size to larger applications, if needed. The animation on the left illustrates the creation of the logo in a few steps.

Accessibility

In the way design of the physical environment requires thoughtful consideration and precision for all users, the same should strived for the digital sphere. For this reason, it was important to test the color contrast ratios between all combinations of the color palette to ensure legibility. 

Certainly all the lightest (light greys and white) and darkest colors (dark greys and black) yielded high contrast values when paired. There were quite a few mid-tone colors combinations that passed. Below are a few examples of some combinations from the palette that achieve level AA and AAA contrast, as well as some that fail the contrast requirements. 

EXAMPLES OF PASSING CONTRAST RATIOS
3.55
AA Large
4.54
AA
3.65
AA Large
4.89
AA
12.30
AAA
3.60
AA Large
4.08
AA Large
3.24
AA Large
3.82
AA Large
4.33
AA Large
4.08
AA Large
3.61
AA Large
7.64
AAA
3.28
AA Large
3.94
AA Large
3.80
AA Large
EXAMPLES OF POOR CONTRAST RATIOS
light on light
1.11
1.92
dark on dark
This is not fun to read.
1.06
This hurts my eyes.
1.06
1.12
No more screen time for me.
Get me an ophthalmologist
1.01
And eye drops
1.07