C.R.A.P. DESIGN PRINCIPLES | Free Web Design Tutorial 2021 | Lesson 1
Summary
TLDRIn 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
📚 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.
🎨 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.
🔄 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.
📐 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.
🔗 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.
Mindmap
Keywords
💡Web Design
💡CRAP Principles
💡Contrast
💡Repetition
💡Alignment
💡Proximity
💡Typography
💡Visual Design
💡Awards-Winning Sites
💡Grid System
💡User Experience (UX)
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
Посмотреть больше похожих видео
Beginning Graphic Design: Layout & Composition
30 Web Design Tips in 11 Minutes
5 laws of design layout & composition *golden rules*
MOOC Introducción al Desarrollo Web, parte 2 - 4.15 Usabilidad: principios básicos - Actívate
CSS Course | CSS Position Property | Complete Web Development Course Beginner to Advance Tutorial 21
Apps Pod 04 : Visual Principles for User Interfaces Parts 1&2
5.0 / 5 (0 votes)