C.R.A.P. DESIGN PRINCIPLES | Free Web Design Tutorial 2021 | Lesson 1

Summary

In this engaging second lesson of the free web design course for beginners, Brad Hussey introduces the CRaP principles—contrast, repetition, alignment, and proximity—essential for effective visual design in web development. He illustrates these concepts with examples from award-winning websites, emphasizing their importance in creating impactful, organized, and meaningful web layouts that enhance user experience.

Takeaways

• 🎨 **CRAP Principles**: The acronym CRAP stands for Contrast, Repetition, Alignment, and Proximity, which are fundamental principles in visual design, including web design.
• 🔲 **Contrast**: It is used to create impact, draw attention, and differentiate elements in a design. High contrast can make an element stand out, while low contrast can be more subtle.
• 🔄 **Repetition**: It is a design technique that reinforces a visual theme or motif, creating a sense of unity and guiding the viewer's eye through the design.
• 📐 **Alignment**: It refers to the organization of elements in a design to create a structured and coherent layout, which can improve readability and aesthetic appeal.
• 🤝 **Proximity**: It is the spatial relationship between design elements, which can indicate how closely related those elements are in terms of meaning or function.
• 🌐 **Web Design Application**: The CRAP principles are applicable to web design regardless of the tools used, such as HTML, CSS, or website builders like Webflow or Squarespace.
• 🏆 **Award-Winning Design**: The script uses examples from award-winning websites to illustrate how the CRAP principles are effectively used in professional web design.
• 📚 **Robin Williams' Influence**: The term CRAP principles was coined by Robin Williams, author of 'The Non-Designer's Design Book', which is a resource for understanding design principles.
• 🖌️ **Typography and Color**: Contrast in web design is often achieved through typography and color choices, where the difference between elements can affect readability and visual hierarchy.
• 📱 **Responsive Design**: The principles are emphasized in the context of creating designs that work well on various devices, as seen with the Apple website examples.
• 🔍 **Detail Observation**: Encourages viewers to observe and analyze award-winning sites and other designs to understand how the CRAP principles are applied in practice.
• 🛠️ **Principle Combination**: The CRAP principles can be combined in various ways to achieve different design outcomes, enhancing the overall effectiveness of a web design.

Q & A

What is the main focus of the video by Brad Hussey?

The main focus of the video is to teach the CRAP principles in web design, which stand for Contrast, Repetition, Alignment, and Proximity.

Who coined the term 'CRAP principles' in the context of design?

The term 'CRAP principles' was coined by Robin Williams, an author and not the actor.

What does the acronym 'CRAP' stand for in web design?

In web design, 'CRAP' stands for Contrast, Repetition, Alignment, and Proximity, which are four fundamental principles of visual design.

How does contrast in web design help in drawing attention to certain elements?

Contrast in web design, often achieved through typography or color choices, helps draw attention by creating a clear difference between elements, making them stand out and have a louder visual voice.

What is an example of a website that effectively uses contrast in its design?

Apple's website is an example that effectively uses contrast, particularly with its use of white backgrounds and black text to create a clear and impactful design.

What is the purpose of repetition in design?

Repetition in design serves to show intention, meaning, or purpose behind the repeated elements. It can create a sense of flow, draw attention to important elements, and embed them into the viewer's memory.

How does the repetition of visual elements on a website contribute to the user experience?

Repetition of visual elements contributes to the user experience by creating a flow that guides the user's attention and helps in organizing the site's content in a way that is easy to understand and navigate.

What is alignment in design and why is it important?

Alignment in design refers to the organization of elements in a way that they are positioned relative to each other, creating a structured and orderly layout. It is important because it helps in organizing information, making the design coherent and easy to understand.

Can you provide an example of how alignment is used in a website?

An example of alignment in use is on Apple's website, where products and information are aligned in columns, creating a neat and structured layout that is easy to follow and understand.

What is proximity in design and how does it help communicate meaning?

Proximity in design is the concept of how close or far elements are from one another. It helps communicate meaning by grouping related items together, showing connections, and providing a clear structure to the content.

How can understanding the CRAP principles benefit a web designer?

Understanding the CRAP principles can benefit a web designer by providing a solid foundation for creating visually appealing and functional designs. It helps in making intentional choices that enhance the user experience and communicate the intended message effectively.

Outlines

00:00

📚 Introduction to CRAP Principles in Web Design

Brad Hussey introduces Lesson 2 of a free web design course for beginners, focusing on the CRAP principles—Contrast, Repetition, Alignment, and Proximity. These principles, coined by Robin Williams, are fundamental to visual design and help designers create effective and appealing web pages. The lesson aims to demonstrate how these principles can be applied regardless of the tools used, such as web flow or HTML/CSS, and are showcased through examples of award-winning sites that exemplify the use of contrast in design.

05:01

🎨 The Power of Contrast in Web Design

The second paragraph delves into the principle of contrast, illustrating how it can draw focus and create impact in web design. High contrast, such as black and white, is highlighted as a way to make elements stand out, while low contrast can be used for a more subtle effect. Examples from sites like creativecosmos.com and apple.com are used to demonstrate the practical application of contrast, showing how it can organize the visual presentation and enhance the user experience by guiding the viewer's attention.

10:04

🔄 Repetition for Visual Flow and Impact

Repetition is the focus of the third paragraph, where Brad explains its role in design to show intentionality and meaning. By repeating elements like the iPad in Apple's design, the principle creates a visual flow that guides the user's eye and reinforces the importance of the product. The paragraph also discusses the importance of not over-repetition, which can lead to boredom, and the strategic use of pattern disrupts to maintain visual interest.

15:06

📐 Alignment for Organizational Clarity

In the fourth paragraph, alignment is discussed as a critical principle for organizing elements in a way that makes sense to the viewer. The text explains how alignment can create a grid-based structure, which is common in web design, and how it helps in differentiating and relating different parts of a website. Examples from Apple's website and minimalissimo.com demonstrate the use of alignment to create a clean and understandable layout.

20:08

🔗 Proximity to Enhance Meaning and Relationships

The final paragraph discusses the principle of proximity, which is about the spatial relationships between elements on a webpage. Proximity can indicate how elements are related or grouped, and it can affect the user's understanding of the content. The summary includes examples from Apple's site and other web designs to show how proximity can guide the user's journey through the site and help them make informed choices.

Keywords

💡Web Design

Web design refers to the process of creating the layout, structure, and visual elements of a website. It encompasses both the aesthetic appearance and the functional aspects of a site. In the video, web design is the central theme, with the instructor, Brad Hussey, teaching beginners the foundational principles of creating effective web pages.

💡CRAP Principles

The CRAP Principles are a set of design guidelines coined by Robin Williams, author of 'The Non-Designer's Design Book'. The acronym stands for Contrast, Repetition, Alignment, and Proximity. These principles are essential for creating clear, effective, and visually appealing designs. In the video, Brad Hussey explains each principle using examples from award-winning websites.

💡Contrast

Contrast in design is the difference between elements, such as colors or typography, that makes certain aspects stand out. It helps draw attention to focal points and can create impact. The video illustrates contrast with examples like black and white color schemes and the use of contrast on Apple's website to highlight products.

💡Repetition

Repetition in design involves the consistent use of elements to create a sense of unity and rhythm. It can be seen in the use of similar visual components or layout structures throughout a design. In the script, Brad uses Apple's product pages as an example of how repetition of images and layout patterns guides the viewer's eye and reinforces the branding.

💡Alignment

Alignment refers to the organization of design elements along a grid or axis, creating a structured and coherent layout. Proper alignment ensures that elements are positioned in a way that is aesthetically pleasing and easy to navigate. The video script mentions alignment in the context of how Apple's website organizes its product information in columns and grids.

💡Proximity

Proximity is the spatial relationship between design elements, indicating how close or far they are from each other. It helps in grouping related items and separating unrelated ones, thus enhancing the clarity of the design. The script uses the layout of Apple's website to demonstrate how proximity helps in organizing and comparing product specifications.

💡Typography

Typography is the art and technique of arranging type to make written language legible and appealing. It involves choosing typefaces, font sizes, and layouts to enhance the readability and visual impact of text. In the video, typography is discussed in the context of creating contrast, where font choices can affect the visual hierarchy of a web page.

💡Visual Design

Visual design is the process of creating visual elements that communicate a message or evoke an emotion. It includes color, imagery, layout, and typography. The video emphasizes the importance of visual design in web design, explaining how the CRAP principles contribute to effective visual communication on the web.

💡Awards-Winning Sites

Awards-winning sites are websites that have been recognized for excellence in design, functionality, and user experience. The script uses these sites as examples to demonstrate the application of the CRAP principles, showing how top designers utilize these principles to create impactful and cohesive designs.

💡Grid System

A grid system in web design is a framework used to structure and align content in a balanced and organized manner. It typically consists of rows and columns that help designers place elements consistently across the layout. The video script refers to the grid system when discussing alignment and how it contributes to a clean and professional look on websites like Apple's.

💡User Experience (UX)

User experience, or UX, is the overall experience a user has while interacting with a website, including how easy it is to navigate, the satisfaction derived from using it, and the overall emotional response. The CRAP principles are integral to enhancing UX by making sites more intuitive and visually appealing, as discussed in the video.

Highlights

Introduction to the CRAP principles in web design, a concept coined by Robin Williams.

CRAP stands for Contrast, Repetition, Alignment, and Proximity, fundamental principles in visual design.

Contrast is used to create impact and draw attention to certain elements through typography or color choices.

Examples of high contrast in web design, such as the use of black and white, are demonstrated.

Repetition in design shows intention and meaning, and can create visual flow and interest.

Apple's website is highlighted as an example of effective use of repetition in design.

Alignment in design organizes elements and contributes to the overall structure and readability.

The importance of grid systems in web design for alignment and organization is discussed.

Proximity in design communicates relationships between elements and contributes to the user's understanding.

Combining the CRAP principles can lead to various design outcomes and enhance visual communication.

The use of contrast in Apple's product presentation to highlight features and create a seductive appeal.

Award-winning sites are used as examples to illustrate the effective application of the CRAP principles.

The impact of pattern disrupts in repetition to draw attention and maintain user engagement.

How the CRAP principles are independent of the tools used in web design, such as HTML or CSS.

The role of contrast in differentiating products and creating a visual hierarchy on a webpage.

The subtle use of contrast in certain designs to mimic a delicate, high-quality experience.

The video encourages viewers to observe and learn from the CRAP principles in everyday design.

Invitation for viewers to share their thoughts on the video and suggest topics for future web design lessons.

Transcripts

hi everybody what's up this is the art

business and craft of web design and my

name is brad hussey and today

we're going to be doing lesson two of

our free

web design course for total beginners

sounds good let's do it

[Music]

hey again everybody brad hussey here and

um once again this is a free web design

course

and this is video number two called the

crap principles and

in this video we're going to learn a

principle that

is well you know what let's just share

my screen here and i'll show you

all about i got a little presentation

cued up

all right the crap principles in web

design

let me make this look a little nicer

great so what is

what is the crap what are the crap

principles well the crap principles

this is a term coined by robin williams

sorry little typo there

robin williams and not the actor and

author of the book called the

non-designers

design book feel free to check that out

on the bookstores

and it stands for contrast repetition

alignment and proximity

these are four principles in design

visual design but

in the context of this web design that

help you to understand

what makes design make sense

what makes it work what makes it good

and this as you can see like

these principles have nothing to do with

the tool you're using nothing to do with

you know web flow or squarespace

or anything like that you know or html

css it doesn't matter

what you're using contrast repetition

alignment proximity are all things that

can be applied

to to whatever you're using okay and so

let's

let's do use some examples to show why

these these principles help you to make

good sites so

the best way i know to show you uh how

these make sense is

to pull up some really good sites so

award winning sites people who are

really talented designers

and um win awards for the designs

not me i i think i submitted my site to

an award site

one time and let's just um

let's not go there okay so share my

screen again

um here we go screen boom so what we're

gonna do is we're going to start with

contrast

contrast is when

things have contrast when there's when

there's a clear difference between

uh elements and so in web design you

normally do that in like

your typography or your color choices

when you have colors

that are too close together like let's

say you have black and you have gray

that's not a lot of contrast black and

white lots of contrast

and so the contrast can kind of draw

focus towards

certain elements or it can create more

impact or it can have kind of a louder

voice versus something or visual kind of

communication

whereas something that has less contrast

and if that's an intentional choice it's

more

gentle and you might not want to draw

certain attention to certain areas so

i just looked at under uh

siteinspire.com

great website if you go to styles you

can just check out all these different

categories here

and i just chose black and white because

black and white typically

you're going to see some you're going to

see some contrast because

black and white uh let's see here

here's a good one uh we're going to go

to creative cosmos

15 and check this site out

look at this big contrast

looks like it's a german site and they

translated it thanks chrome

couldn't read german and you can see

there's a lot of contrast here black and

white

big bold lettering why who work

contact you know their logo their

branding here it's all very

bold and there's a lot of contrast it's

black

with white text and let me just make it

so you can see the screen better here

there we go even this background image

here like they've got these like

interesting style it's obviously an

interesting choice

but there's a lot of contrast happening

here

okay now we got a white screen with

black text that's cool

so that's another example of contrast

some strong contrast

i don't know what this does

negativelabs.com probably that's a

website by them

uh so that's just one example there

black and white now if i were to like

go to another one let's see here

you know who has good contrast i can

tell you right now apple.com

they are very good at contrast and

utilizing contrast for communicating

design uh they're all about simplicity

so we got white background here

very simple text black text

and contrast you see with these new

phones just like up front and center

and even with the colors on the white

there's less contrast here this kind of

fades

into the into the black or out of the

black and it's kind of that's meant to

create this

i don't know maybe seductive look and

for iphones for a lot of people it's a

very seductive item

you want to have that item and it's

exclusive and it's expensive

uh people like that but contrast so you

can see there's very clear use of

contrast here and the point of contrast

is to create kind of impact and to draw

attention

and to create structure if everything

was just kind of meshed into

everything then it would be hard to um

differentiate between items between

elements and

you know you could see they're using

contrast here if all of this was black

and there was no contrast

then you wouldn't know the difference

between it would be hard to visually

kind of organize the the watch with the

ipad air with the

laptop here same thing with this like

they they're

very clearly going with this

um high contrast choice

um now if i were to go to

here's another and you could play around

with this go to the site

siteinspire.comawards.com

with 3wz8www.ards.com

and you could just like search like

contrast

and see examples award-winning examples

of contrast

and you could just explore and see what

looks

what how contrast is used by really

talented designers

and how it you know look at the site not

just as a as a user but look at it as

like a designer or somebody who's

learning

design and how contrast is used to

differentiate between items and text and

and typography and organized um

organizing the site

so that's contrast now the next element

is

repetition so that's when you create

repetition um it

it shows that there's the more something

is repeated

it shows that there's there's a purpose

or an intention

or or meaning behind that repetition if

something just shows up once

that has a different impact design wise

than if something

shows up multiple times if some

something shows up

uh three times or something shows up

throughout your page

let's say a call to action for example

um

a button on your website that calls your

your viewer your user to action so let's

say it's a product page

uh repetition let's again let's go back

to the apple example because the

designers here they know what they're

doing and they're very good at this

so if i were to go to like the ipad

now repetition you could see it right

here repetition of the ipad

it's creating kind of it's creating

this um flow by repeating the elements

it shows that this

this is important now you can repeat

something and have it be bad

and have it look bad and have it make no

sense like if they repeated the word for

example

ipad air and they put ipad air ipad air

ipad air

ipad air it wouldn't really make sense

it would actually distract and

it wouldn't be very helpful but

repeating the visual element of the

actual product it's the product that

they want to draw attention to that they

want to capture your

your desire for they want you to to have

this now another thing that you can see

here that this

does is it actually makes me want to

scroll down the page right it's creating

this flow

flow where i want to follow it it's

almost like it's it looks like it's

falling or it's cascading down the

screen and i just

i can't help it but scroll okay

again and look at the simplicity here

and the contrast the white background

nothing in the background

and just ipad beautifully presented

um and then and repetition you're

repeating the ipad the ipad is showing

up in every frame here

there's nowhere that the ipad doesn't

appear so it makes

me you know it kind of embeds it into my

brain

that this is important okay

so this is repetition

and another thing of repetition it's not

just repetition of the visual element

it's repetition of this structure so if

you look at the structure here

you've got can you see can you see my

little cursor there okay look at this

so we've got this this section this is a

section

now there's another section here and

it's

a reversed layout so this

here's the first section text on the

left image on the right

so this is their balance balancing one

another out okay

and on the right side here is the image

but then below it

on the left side is the image and

they're both taking up about

60 to 70 of that section

and so there's repetition of the image

on one side the text on the other and

then they're switching that and then

they're repeating that back and forth

now look the image is on the right the

text is on the left

image is on the left text is on the

right do you see that pattern

that's repetition in in

in motion in play kind of in practice

that's what the word i was looking for

and

let's see here so that would be

repetition um maybe if we were to go to

awards.com

let's just like choose let's just look

at like the latest

award-winning site and let's see what we

can find

all right so this x podcast

exp i don't know it's the santro de

musique berg

versailles that's my best um

butchering of the french accent um

music and musicians at the royal chapel

okay

right here i can see that there's not a

lot of contrast and that's clear like

that's a choice this i got this kind of

peachy pinky color in the back that

fades up to the blue

but it's gentle it's very delicate kind

of like the art this art in the

background that you can see like with

the barack

kind of the the chapel and like the art

it's like the delicacy to it and so

there's not a lot of contrast on purpose

and so they're kind of mimicking

the the um the actual physical

experience and it's delicate

kind of high-end high quality now we're

going to enter there's contrast here

with the button however that's white

that really stands out there's contrast

okay now let's find some repetition

um let's see here

just kind of visual okay repetition i

can see repetition

here kind of it kind of works as

repetition

um repetition of the layout you could

see here we've got the layout here image

on the left text on the right

image on the right text on the left

repetition of these icons okay

oh and it goes across okay so there's

repetition here

a lot of contrast too as you can see uh

beautiful visuals

click and drag oh now this is cool okay

now that wouldn't fall under a principle

of the contrast repetition alignment or

proximity which we'll get to those other

two in a moment

this is more of um this is less of a

principle and just more of like a visual

kind of

accent it's not necessary for the

meaning of the site like if

they didn't have this feature it

wouldn't actually

it wouldn't take anything away um

it's not necessary for the design but it

is quite beautiful and it is an

intentional choice

um let's see we got more

repetition of these these full

background images with the art in the

background you can see

they're repeating it and what it's doing

so see there's another

accent there and then there's gonna be

another one there they're repeating that

down the page

and that's creating a repetition and

it's drawing attention and it's also

creating a pattern disrupt

okay when you have too many repetitions

of the same thing

then it's it because kind of blurs into

one another whereas

when you create a pattern disrupt in

your repetitions then you can draw

attention so for example

back to apple here they are creating

patterns

uh repetition here with the text image

image text text image image text but you

see how they're flipping them back and

forth each time

that's to create visual interest and to

great pattern disrupts okay now if they

kept doing this down the page

image text text image image text so on

and so forth and they kept doing it all

the way down

you'd actually get bored and then you

bounce off the page that's why they

created a pattern disrupt here they

changed

they changed the pattern okay now next

in our

design principles and the crap

principles is

alignment alignment is

another principle in design

where it's actually how you align

elements

how you align and this this goes for

anything that you interact with so your

phone the alignment of the notifications

the alignment of the icons on the screen

um if you were to have a book this is

just a notebook so

this this doesn't have any um i can't

give you an example of this book

but when you read an actual book or a

novel there's alignment of the text

there's alignment

of of the of how the text is organized

specifically in a magazine

there's gonna be alignment of different

sections a newspaper there's gonna be

alignment of maybe

the classified ads and the main article

maybe a secondary article

or maybe just kind of like a little

ticker at the bottom like there's going

to be alignment and that's

literally like the organization the

layout the alignment

of of what you see okay

and it's not just anywhere because if

it's anywhere

and it's just it looks like chaos and

there's no rhyme or reason to it

then that's going to be chaotic and it's

going to be hard to

understand and it's actually going to

create dissonance and your your viewer

your user is not going to be uh very

happy

okay so let's go back to the screen here

and just find some examples

of alignment

all right so here is apple again i just

got it pulled up alignment

one two three four look at these four

things the alignment these are all

columns this is a four

column layout and those are all aligned

perfectly the lines

here are aligned perfectly the images

are aligned no matter

even if the images are different size

products

it's still aligned here aligned at the

bottom the the title of the product is

aligned perfectly everything here

is aligned okay

the information is organized and aligned

in a way creating repetition okay and

contrast black and white here

to create more meaning for each of these

products

so we could take all this information

jumble it up and put it all over the

screen and it would make no sense

and nobody would buy ipads at least from

this website

but when it's organized in such a manner

and the alignment is in place the

contrast is there the repetition is

there

it actually creates a lot of meaning and

now i understand the specs of the pro

the air the ipad and the mini uh here's

here's some more alignments you got this

is a two column layout

one here on the left one on the right

that's the alignment

three column layout alignment everything

is on a grid

on the web with some exceptions

everything is on a grid it's all grid

based often 12 columns sometimes 16 or

18 24

but usually 12 and everything's on a 12

column

or at least a column based grid so

there's always the center there's always

columns there could be three columns

these three columns are going to be the

same as three columns elsewhere if they

use it

so so far i see a lot of two columns

there's a lot of repetition here and you

can see the alignment everything is

aligned

in these grids all these blocks are the

same height as well so there's alignment

lots of two columns here but you can see

here one two three four five this is a

five column here

so they're taking um this organizing

this content this information which is a

lot

and organizing it in five columns small

text

low contrast because they don't want to

draw too much attention to the footer

it's more for

secondary or tertiary information but

that's

that's um that's an example right there

perfectly

of alignment at work okay

um probably on other sites here if i

were to go to awards again

or maybe what i'll do is i'll go styles

see if there's a grid layout

perfect take off black and white here's

gonna be another example you're gonna

see a lot of grids here

let's go to

ah let's use this one

minimalissimo okay minimalissimo.com

okay it's um

alignment simplicity here contrast

alignment everything here's in a two

column grid we've got three columns

you can see the grid at use here at play

alignment down here

very simple that's alignment and it's

everywhere

and if this was just everywhere

disorganized and chaotic

because there was no grid and no

alignment then it would be a total mess

okay

so that's the other principle which is

alignment and the final principle is

proximity

when the proximity of an element or text

or

one thing to another that creates either

tension or meaning

or it creates uh and

communicates something so proximity is

how close or how

far something is um from one another and

you can combine these

using contrast and repetition using

contrast and proximity

alignment and proximity like there's

there's you combine these principles

in however many combinations do the math

i think it's four times four i don't

know

and you get lots of different

combinations and you play with these

things

so again we're going back to our tried

and true apple here we got

proximity the proximity of these in this

information here

shows that they are grouped together

this is clearly

because of the proximity of each of

these clickable items here interactive

items here

shows that there's there's meaning and

they're all related

and they are because if you maybe you

want the ipad air or no maybe it's the

mini i want i want to actually compare

it

and then here's some accessories so all

these are organized if these were just

peppered throughout the site it wouldn't

make any sense

and i wouldn't know how to get to these

different areas

proximity to from of this text right

here to the image shows

that there's connection uh that they're

that they're related

let's see some more proximity uh

proximity of these the proximity of each

of these

items are grouped together and it shows

that there's this this information has

meaning and it's related

the proximity uh of each of these specs

it's a compare

you want to be able to compare the ipad

pro to the mini so i could see really

easily

oh what if i want the mini i liked 3.99

but you know what the pro

would be nice because the big screen but

the price

so it's the organization and the

proximity of this information

gives it extra meaning

by simply putting this information in

this manner i can see that i'm meant to

compare

which product i won okay proximity

of this organization these are just

extra features uh kind of

to boost your confidence in per person

purchasing this thing

let's see here's a good example at the

footer of any website

proximity of all this information

together this is the footer the

proximity of

each of these menus show that this is

kind of tertiary

information on the site if you want to

be able to find extra stuff get more

resources

find discounts find a store you know

this that and the other thing the

proximity of this information

especially let's say this list shows

that okay this list

in proximity to this header shows that

everything under here

is shop and learn kind of related so i

want to shop and learn

music i want to shop and learn the ipod

touch gift cards accessories

and so on and so forth the proximity of

this information

that kind of at the bottom of the footer

copyright information privacy policy

terms of use these are usually grouped

together

and are in close proximity same as the

menu

if i were to go here where's their menu

so they've got their menu here the

proximity

of this information shows it's their key

uh

information this is their key navigation

okay

proximity of let's use the awards.com

site

the proximity of

each of these together i'm it's very

obvious that these are related but then

they don't all blend into one another if

i hover over one of these the proximity

of

say these interactive items like sharing

on social

i want to add this to my favorites i

want to go to the link

to view the site itself you know that

the proximity of that data information

in that box gives it meaning

and so that is those are rather

the principles the crap principles

contrast

repetition alignment and proximity you

can combine them you can use them in

different

in different areas but these are key

principles

whether you like it or not or whether

you realize it or not that every

website every good web designer worth

their weight in salt

um should be using and you may be using

them and not realize it and if you don't

realize it you might not be using it

very well

so crap contrast repetition alignment

proximity think about that every time

you start designing look at it

in your magazines and your books on

websites you'll start to notice it now

and maybe take notes and see what works

and what doesn't so with that

i hope that was a helpful video for you

and let me know in the comments below

um what you liked about this video what

you want to see next in this course what

you want to learn more about web design

and don't forget to subscribe

like the video leave a comment and we'll

see you in another video alright

cheers

[Music]

you