A Chirping Colorful Review of Web Design Usage

laughing okay okay so we are gonna get

started and welcome to a chirping

colorful review of web design usage so

we are gonna talk about how we

incorporate birds with colors for web

design and I'm Sarah I am a first year

masters student at the University of

Michigan studying information and data

analytics and this is Angela she is also

a first year masters student studying

user experience and design and getting a

certificate in health informatics this

is Alyssa she she is also a first year

masters student studying information and

data analytics at the University of

Michigan and this is Vallon also a first

year masters student studying user

experience research and design but she

is also a bird expert and worked in

agriculture for over 10 years she's

worked at the Brookfield Zoo the Detroit

Zoo and the Shedd Aquarium here in

Chicago so she is very passionate about

our feathered friends and will talk

about how she uses birds as her

inspiration for web design

so if you don't already know color

theory is a way to organize colors into

a logical structure and the most

commonly known structure of color theory

is the color wheel which helps us to see

colors in relation to one another so

looking at the color wheel we can see

for example that red is similar to

orange and purples so the color circle

is based on the primary colors so that's

red yellow and blue and thank you and

the color wheel was originally developed

by Sir Isaac Newton on in 1666 and since

then scientists and artists alike have

studied and designed numerous variations

of this concept and there's a lot of

differences of opinion and debates about

the validity of one format over another

and so that continues to provoke debate

but in general it's just a very good way

to see colors and relations colors in

relation to one another

so now we'll look a little bit more into

the different color palettes um and so

first we'll talk about the primary

colors which we've already mentioned are

red blue and yellow and these are the

colors that are used to make secondary

colors so those are when two primary

colors are mixed together which are well

known as purple green and orange so and

when the tertiary colors are for one

primary color of either red blue and

yellow and then you pick one of the

secondary colors or to create a tertiary

in terms of what's design when you're in

Adobe or you're looking at a color

palette you can use the different RBG's

and see in my case I just learned that

ryb is for physical objects and we

usually use the Pantone matching system

so PMS for the tents and tones and

shades when you're looking at the color

palettes you use it with the they have

it in Adobe when you open up the color

palettes and you can use it with the

black in the tanks so tints are the

achromatic colors of light grey and

black when you use any of the primary

second

or tertiary colors you can pick one for

our exam only to use to read when you

act like it's actually called 10th so

it's more of the pastel color so it

turns out to be pink and for our tone

it's you add great into it and so it

becomes a dark red maroon color and then

for shade it's more like a shadow

concept so if you think of it in a

logical term with physical objects when

we're walking around with white the

shadow is black so when we add it it's

going to be a darker color cover it so

building it out of web development here

are a few websites that you can go on to

if you're not great with colors color

mind it is really great because it shows

you all the palette colors of the

different versions that you want with

the hex colors so that you can pull and

copy and paste it into your codes

colorful gives you the color palettes

for the text so if you're not sure what

backgrounds work or not you can toggle

around with the bars and you can see the

hex numbers are the hex codes and then

they'll tell you if it's accessible or

not for your websites for a.w caption CC

you might need to have a lock and

account for it but they also have an

additional aspect of providing you with

the harmonies

choose the different harmonies that

we're going to show you eventually and

then you can also add it on to as an

extension for your chrome so you can do

it on your Chrome browsers for an

eyedropper or color palette if you like

something else on somebody else's

website for a particular color and I'll

show you the hexes and as well as if you

have a MacBook you can also go into the

App Store and download the the

eyedroppers too so you can use it for

across platforms if you have a

particular color from your photos that

you want to use on your website and now

we're going to practice and balance

going to start talking about bird so

you'll learn a lot of new fun facts that

isn't really related to web site

development but we can practice with the

colors and the harmonies that we're

going to introduce and we'll have

examples by ELISA for some websites that

are do's and don'ts so yeah I am NOT a

color expert I do not pretend to be but

I know a lot of different species of

birds so when I have an assignment that

revolves around the color selection or

web pages I will think of what emotion I

want to evoke and then I will pick a

picture of that bird and I will throw it

into the color Pickers that Angela

previous mint previously mentioned and

then I have a cheaters way of getting a

color palette that is attractive and

follows all the rules that we're going

to talk about so I'm gonna start with

the birds on the top row the first is

the red crested croco it is actually the

national bird of Angola Krakow's are one

of the only family of families of birds

where their colors actually contain the

pigment that you're seeing so that is

actually a red and green bird if you

were to take one of its red feathers for

example and put in a glass of water it

would turn the water pink it would

actually flat out the the colors the

eclectus parrot which is the next one

yeah that is actually a

male and female pair the female is on

the left the male is on the right for

many many years bird experts actually

thought that these were two separate

species which made breeding them in

captivity very difficult because they

had a collection of all females and then

a collection of all males and they

didn't realize it so that is a level of

high it's called high sexual dimorphism

where there's a huge difference between

how the male appears how the female

appears and then the last bird is our

golden pheasant it is native to China it

is very popular in zoos and aviaries the

females are a very drab Brown only the

males or this color and although does

that brightly color they're very hard to

see in the wild because they're quite

elusive and despite how brightly colored

they are they blend in very nicely in

the dense vegetative environment that

they're that they live in and so tying

back into the colors this is called

t-square harmony and the Tryon economy

the tribe harmony is only the pheasant

because you can see from the triangle

wherever you rotate it on the color

wheel those are the three colors that

you would combine it with other palette

so the subject has the Triads whereas

the other two has the square

triads where the points means bottom row

we're gonna start with a resplendent

Quetzal native bird of Guatemala you

might see a green and red bird but it's

actually brown the feathers structure

within the within the bird interacts

with the language away where it only

allows green pigment to escape with the

Kingfisher which you'll see examples of

other blues and birds that I'm going to

show you although that is a very vibrant

and pretty blue again it's actually not

there zero there is ZERO blue pigment in

that feather

however the tan feathers underneath that

is an actual coloration of the feather

and in this bird's case towards it quite

well as a way of camouflage rats

hovering above water and the and its

intended prey camps in the water can't

see the the brown it breaks up very

nicely and then this cute little bird at

the end is a paradise Tanager as

colorful as this bird is it might be a

surprise that males and females are both

this color oftentimes females will be a

little more dull during nesting because

of the nesting suit of the nesting

responsibilities and they want to be

able to blend in however both male and

female share in nest responsibilities so

they're just like heck with they will

both be brightly colored although this

bird is slightly smaller than a sparrow

they were collected quite a bit to use

for ancient civilization headdresses so

you'll see these headdresses that are

quite elaborate and you've all these

little feathers tacked on and they all

came from those little birds and you're

like this big so then these birds kind

of have a split complementary harmony

which means it's got a primary color and

a secondary color with a secondary

complement so wherever you rotate around

for the color wheel you'll be able to

see that it matches a similarity of

these kind of colors all right so next

we're gonna talk about websites that

probably this one doesn't use colors as

well as you know we wanted to and it has

a lot of the moving image and colors as

used on this website so they probably

wants it to go for the shop track there

right like edits working it's like

everybody knows that that is how it is

um but putting aside the other design

choices that they made let's just look

at the colors they probably want to use

the square harmony if they would like a

lot of colors try a split complementary

so if you're not trying to like make

this kind of website lenses look at the

ones that works

so I have two example purses like

Coachella then uses red and blue and

some green and it's very similar to this

little goodie right here what's the name

again paradise can injure her just

Tanager

they split complementary harmony and it

blends very nicely and the bottom

Nintendo website uses blue red yellow

and the green like really the square

harmony that they're using and it

blended really well they uses like grits

to make sure that all the colors that

are using I like match together

so if I wanted to work on a website that

was maybe more soothing I might think of

some birds that are in cool tones and go

for more of a single color theme so the

bird portion we have the Victoria Crown

pigeon and the hyacinth macaw the

Victoria Crown pigeon is actually the

world's largest species of pigeon it's

about the size of a turkey but it only

weighs 4 pounds so it's really big but

still really light and it isn't the same

family as the the pigeons that you see

out in the street very closely related

but I would probably argue the city

pigeons are a little smarter and then

the hyssop macaw who's next to it go

blue

right is the largest species of parrot

it has a wingspan of about four feet so

when its wings are open wingtip to

wingtip that is four feet and does

anyone remember what I said about the

color blue earlier on birds it's usually

correct yeah so this bird is actually

black if you removed if it didn't allow

for that pigment to escape you would

just see a plain black bird well not

playing black is actually really pretty

than feathers

anyway I digress so yes and so then

these kind of birds are closely

measuring monochromatic harmony as

Fallon has mentioned

more of a cool color so monochromatic

can work for cold and warm colors warm

colors are usually on the other side of

the spectrum of the wheel so this one

for now it's just the different shades

of blue basically and then with the

bottom row we have starting closest to

me the silver breasted broadville it's a

very serenely colored bird that is

native to Thailand Myanmar and Vietnam

Vietnam very slight sexual dimorphism

between males and females and that the

female looks just like the male except

there's a very faint silver ring around

its neck the violence startling also

called the Amitha stalling Starling or

violation Starling there are lots of

common names for this bird is a very

common African bird and again this

lighting on the back it's not really

that that purple color it's actually

more I want to say that's more like an

olivey color but with how the feathers

interact with the light releases this

incandescent pigment

there's also with its white belly it

serves as a form of camouflage so when

it is up in the trees you can't really

see it very well and it's the birth you

don't typically see on the ground

finally one of my favorites is the lilac

breasted roller this very vibrantly

colored bird has a very interesting

courtship display where it'll fly about

itself to pitch and roll or fall to the

ground and just kind of spiral down so

the color is really flash and then they

will save themselves at the very last

second before crashing into the ground

then do it again

so these type of birds we've grouped it

into analogous heart analogous harmony

task colors that are together two to

four of the colors in the color wheel so

for these it's the purple and then the

midnight purple blue and the blue and

the light blue so again any time you

rotate it with tuna four of the colors

together

they're known as and now we're good

harkening all right so this I think most

people know is Craigslist and there's no

clashing of colors no usage of too many

colors in fact there's no use of color

harmony like at all I think it looks a

little boring to me

so to avoid designing a website that

looks like this cuz I think crixus

already took this as their trademark so

I don't know let's look at examples that

uses blue white and gray color and to

make you more like alive or more

interesting so down here who'll do

anything uses monochromatic color

harmony gradient looks well done and

easy to the eyes it is easier to get the

colors right on the color picker when

you're using the monochromatic harmony

because it's actually just like one

color and you move the slider to choose

like the shades or the tint and then

canva up there uses analogous color

harmony there's a little bit of pink and

purple to blend in with the blue and the

green just like the lilac breasted

roller and it looks really nice really

pretty they're all next to each other on

the color wheel yeah

all right so now to get into some more

neutral Birds which you might think is

it might mean boring but there you can

actually do a lot with with the colors

but I'm gonna talk about the bird port

portions so the Great Egret is a very

common bird you can actually you can see

them in the Chicago area if you ever are

by any waterways it's a very slow flier

it'll only do two wing beads per second

and can cover ground or air at about 25

miles an hour

kind of what I said earlier with the

amethyst Starling even though this is a

solid white bird it camouflages really

well when it perches in trees those

feathers it doesn't turn the bird green

but it absorbs that green and they just

you wouldn't know that a two and a half

foot tall bird was sitting there and

then with the go away bird this is

actually closely related to the Red

Cross at Rocko that we showed you

earlier it has called the go away bird

because it has it has a call that sounds

like a crying infant and something that

it is known to do in Africa is it'll

follow hunters around and right before

the hunter goes into for the kill will

call and scare the prey away and gets

away and then the hunters are just like

go away this is a true story it's the

baby

um and then as far as where the color

goes although it looks kind of drab

depending on how the light hits it it

can actually turn it into kind of these

peachy pinkish tones I'm so very pretty

bird and then okay and then finally so

you have this neutral color palette and

then you can do accents in the colors or

what the colors just get a little bit of

a pop so with the king penguin people

here penguins they think black and white

bird whatever but with king penguins

they have these really nice splotches of

orange right behind the eye and the

above the chest and this plays a lot

inmate selection in fact a nasty group

of researchers took a bunch of king

penguins and covered those oranges with

black and wouldn't you know if they

weren't selected to breed that year by

their potential mates

so it's not to be very important in mate

selection and then with the lavender wax

bill down here very tiny bird again but

it has that pop of red the thought

behind that is if a predator were to go

after this bird it's going to focus more

on the tail which although it's tragic

for virtual it's lose its tail it's most

likely we were able to get away grow

that tail back in and recover and as you

can see we've been dressed up and

accented harmony just to revisit I had

initially talked about a chromatic

harmony so you can see this bird for the

go away bird is a good example of black

gray and white which he can also do

tensed shades and the other color that I

can't remember right now but you can see

that all kinds of harmonies isn't just

focused on one type you can actually

combine them so you can always think

outside of the box but if you want to

sound smart to your clients you can

always use these harmony colors to talk

about it with them for your website

designs and usually artists like to

pinpoint something so if you're

interested in birds and you like a

particular feather or a particular image

you can always base that off with the

harmonies in and go to the recommended

color palette all right so this is Yale

School of Arts website yeah the actual

university granted is a wiki where

anybody that has a log in can change

their content so I feel like it's

intentional in a way they want to make

it like this like it's probably for

comedy ISM

um but yeah but we can agree that they

don't have color harmony when they're

making this right never have that

so in this admission section they're

using colors that may benefit from

neutral how many I like the accent that

I'm using they have like neutral colors

in the background like like and why and

then sell the pop of color like red or

green so now let's look at some of the

websites that use this color harmony

successfully okay so this is to it site

and interestingly we all dress the

mutual colors so maybe this is probably

why shell raven and zara you know like

but it's not the era they probably use a

lot of like mutual harmony because it

looks gonna clean and you can direct

your audience attention to what you want

them to look at so like fjällräven gel

robin however you say it um that's like

great white at the back and then the

other way that the model is wearing is a

maroon so they've extended on the outer

where we as when we open the website you

can see it right away really great nice

pretty I love it and then Sarah here

uses a chromatic harmony where it's like

black white and gray to make it really

clean looking and really pretty in my

opinion yeah right okay so that

concludes our presentation on color

theory and birds so hopefully something

will come up on trivia someday know the

answer and now we're gonna open it up

for any questions on birds or color

theories so if you have any questions

so the question was how would we use

colors for emotional responses yes we

didn't really quite dive into it further

but with the color wheel you can use the

warm colors and the cool colors on the

left and the right side so usually warm

colors you think of sunny so those kind

of emotions would be warmer toned colors

and then if you're you want like a calm

meditative version or more nature it

would be kind of you you would move the

color wheel a little bit so that it

shares a little bit of the warm tones

and the cool colors with the harmonies

Mars so with the analogous martini you

could use that for a meditative to type

but if you want something super

destructive it's usually a warm color

because it it also notes angerness

it depends on how would you feel but

usually that's kind of how we we base it

off you start off with the warm and

and the cold colors

I guess the question I'm thinking is

like around trending so I know with web

design I think a lot is around

photography or layout or hover action

are you guys seeing future trends

emerging that you were kind of leading

people towards or video kind of

recommending and this kind of curious if

there's things

on the horizon from a color theory that

I just don't you know come in contact

the only way I can respond by I

personally can respond to that because

again I this my pursuing this degree

it's a career change for me and I am

like I said I'm not messing eye color

theory expert but I know what I'm

familiar with and that's like if you are

passionate about like a location or food

or the colors are associated with that

like follow what evokes joy in you soil

for me personally like when I often get

assignments I will

I definitely fall back on my previous

training as a bird person and that has

worked I'm not suggesting that for

everyone but I'm not sure like as a yeah

I like globally other than to say do but

evokes to I or pick you know pick trends

or fellow trends that resonate with you

outside of that I don't have any other

advice it also depends on fashion and

culture we returned back into I guess

like the 1991 close trends so like

colors kind of repeat repeat in some so

I think last era was like more pink and

black and harmonies and stuff

so if you see like Zara and everything

they trend it with that kind of color

harmony and the place that offers that

as well all right yes what is the

resource that it has been very useful

or not like you

would be those three websites with the

color tools and usually it's just lots

of practice and going through it and

having constructive feedback I'm a

freelance graphic designer so usually

going through that you can just learn

from it or going through the examples of

websites to get inspiration wouldn't you

- with your experience as a graphic

designer

when you're working with

sending designer clients and getting

feedback

if they're not responding to something

or if it's colored like what's typically

the first thing that you didn't kind of

tweak or change based on I don't like

this or make it pop like if you're

getting kind of a feedback revise what

are some things that you can do

specifically target color or do you

start with something else different

iterate on design good question so the

question was asking what as a freelance

graphic designer what how do i start off

with picking the colors i usually start

off with black and white because black

and white is known to be of all colors

and it's easier for the client to focus

on the text and the the way the visual

looks like and then from that point I go

on to Phase two and provide them

different versions of colors so the

colors of cool colors warm colors and

give them different versions of that

once they've picked out from the black

and white what they want so usually just

have them focus on what they want for

the symbol or the type the typeface that

they want for their logo designs and

then go and move it into the color

aspect of the palettes

and one more question for about birds

why because like most other animals

meaning as fish is an exception but most

of our animals six hits and have more

missed drag colors why is it that bird

specifically to have such wide variety

and brightness of colors sex it honestly

so you'll see different cut like color

palettes in different geographic

locations and across most species that

it is the male's job to show off it is

the female's job to pick the male who

shows off the best and it also

correlates with what the predator

population is of that island so our area

so for example New Guinea you see if

you've ever watched a documentary maybe

not so numbers but just nature you'll

see these birds of paradise where they

do some crazy stuff but their feathers

and with their bodies where if they were

to do that and say North America they

probably get eaten by a coyote or you

know raccoon so in areas that are were

isolated like island so New Guinea

Hawaii trying to think of other like

deep and the Animas of all got a Nile a

bit like deep in the Amazon you're gonna

see these like really crazy colors and

really crazy courtship behaviors because

they don't have to worry as much about

being or for some yeah as being obvious

to predators I do not have a good reason

why some species are so sexually

dimorphic and others are not like

especially in the o'clock despair that I

showed you have a very vibrant male

you've a very vibrant female that is

unique among birds why that deal of I

don't know it is an island species so

again it probably has to do

that lack of predation because if you

are very colorful and you're making a

fool of yourself you're probably gonna

get eaten but it turned in here if

you're in an area where there are no

predators you can evolve and get some

Flair going and you know get some

dancing going I mean some of the dances

these are just the picture something

that dances these birds - it's

incredible this I'm not making any sense

which is that that's kind of a candle

does that answer your yeah okay good all

right

questions yeah a nice one