20 Graphic Design Hacks You Need To Know
Summary
TLDRThis video script offers 20 design hacks to elevate amateur designs to a professional level, covering typography, layout, spacing, and color. It addresses common beginner mistakes and provides solutions like using a single versatile typeface, adhering to a typographical system, and setting appropriate line heights and kerning. The script also emphasizes the importance of using a 12-column grid for layouts, responsive design, and choosing harmonious colors. These hacks aim to streamline the design process, allowing creators to focus on high-level design work.
Takeaways
- π§ Amateur designs often use conflicting typefaces and lack a typographical system, while professional designs choose one versatile typeface and use size, weight, and spacing for contrast.
- π Professional designs utilize a typographical scale system like the minor third, major second, or four pixel system for consistent sizing across various elements.
- π Beginners should limit text width for better readability, with a recommended max width between 600 and 800 pixels depending on the text type.
- π Adjusting line height is crucial for better text readability; larger headings should have a lower line height, while paragraphs should have a higher line height.
- πΌ The 'bloom technique' for kerning adjusts the spacing between letters based on size, with headings closer together and smaller text spaced further apart.
- π Beginners often misuse weights, but a simple rule is to make large text bold and small text thin to enhance visual weight and contrast.
- π¨ Avoid designing on a free-form canvas; instead, use a consistent layout grid with an even number of columns, preferably 12 for maximum flexibility.
- π Column widths and gutters should be divisible by four or eight pixels for easy scaling and design consistency.
- π Responsive design is essential; adjust the number of columns based on device breakpoints to ensure the layout adapts smoothly from desktop to mobile.
- π Consistent section padding, often set to the gutter width, helps in maintaining a sleek, grid-like pattern across the website.
- π Choosing colors for design involves softening pure colors by adjusting saturation or lightness, and using harmonious color systems like monochromatic or analogous instead of harsh complementary contrasts.
- βͺοΈ On colors, or text colors, should be carefully chosen based on the background color's lightness, with adjustments to saturation and lightness to ensure readability and professionalism.
Q & A
What is the main purpose of the video?
-The main purpose of the video is to teach viewers how to enhance their designs to look professional by covering 20 design hacks related to typography, layout, spacing, and color.
How many design hacks does the video cover, and what are the four main categories they are divided into?
-The video covers 20 design hacks, which are divided into four main categories: typography, layout, spacing, and color.
What is the first typography mistake discussed in the video, and how can it be corrected?
-The first typography mistake discussed is the use of conflicting typefaces. It can be corrected by choosing one versatile typeface and using size, weight, or spacing to create contrast instead.
What is a typographical system, and why is it important for beginners?
-A typographical system is a mathematical rule for selecting type sizes that ensures consistency and ease of scaling within a design. It is important for beginners because it helps avoid random size choices and makes it easier to create new sections without starting from scratch each time.
What is the recommended line width for readability in design?
-The recommended line width for readability is between 600 and 800 pixels, depending on the type of text being used, with headings closer to 800 pixels and paragraphs closer to 600 pixels.
Why is it a mistake to use 'Auto line height' in design, and how can it be improved?
-Using 'Auto line height' can make text look jumbled, with headings too far apart and paragraphs too close together. It can be improved by manually decreasing the line height as the text size increases, typically setting paragraphs between 125 to 150% of the font size and largest headings around 80 to 90%.
What is the 'bloom technique' for kerning, and how does it work?
-The 'bloom technique' is a method for adjusting the spacing between letters (kerning) based on the size of the text. It works by having smaller text 'open up' more, meaning more spacing, and larger text be closer together, resulting in better readability and visual appeal.
What is the recommended approach to using weights in typography for beginners?
-For beginners, the recommended approach is to make large text bold and small text thin. This helps headings grab more attention and adds visual weight to the design, enhancing contrast and readability.
Why should beginners avoid designing on a free-form canvas, and what is the suggested fix?
-Designing on a free-form canvas can lead to inconsistent spacing and a disjointed look across a website. The suggested fix is to use a layout grid with a set number of columns to maintain consistency.
What is the recommended number of columns for a layout grid, and why?
-The recommended number of columns is 12 because it is highly divisible, allowing for easy division of the design into halves, thirds, fourths, and sixths, which is ideal for maintaining consistency and flexibility in design.
What are some common mistakes made by beginners when setting gutter widths, and how can they be corrected?
-Common mistakes include having no gutters at all or setting gutters to the same size as the columns. They can be corrected by setting gutter widths to 50% or less of the column width, using numbers divisible by four or eight pixels for consistency and a balanced look.
How can beginners ensure their designs are responsive?
-Beginners can ensure their designs are responsive by setting breakpoints for laptop, tablet, and phone sizes and adjusting the number of columns based on these breakpoints, allowing for a reshuffle of the design rather than a complete remake for different devices.
What is the recommended approach to setting section padding for consistency in layout?
-The recommended approach is to set section padding to the same value as the gutter width, which creates a sleek look as everything fits together in a grid pattern. If more visual separation is desired, the padding can be increased while following the same rules used for columns and gutters.
What is the common mistake made by beginners regarding spacing between items in a section, and how can it be fixed?
-The common mistake is using linear spacing, which is the same amount of space between every item. It can be fixed by using a height equal to or greater than the gutter width between containers and half of that width for components within the same container.
How can beginners create a visual hierarchy in their sections?
-Beginners can create a visual hierarchy by using size and position to draw the eyes towards primary elements in the design. Important elements should take up more visual weight, and the general rule is that elements you want to notice first should be larger or more prominent.
What is the issue with treating dynamic components as static when it comes to spacing, and how can it be resolved?
-Treating dynamic components as static can lead to poor clipping or wrapping because they have fixed widths. The issue can be resolved by setting static spacing around elements in a dynamic area, using specific pixel values for the spacing between objects.
How can beginners handle spacing in static areas with dynamic content?
-In static areas with dynamic content, beginners can use dynamic spacing, which fills the space depending on the number of items in the container. This can be achieved by using auto layout options in design tools like Figma to update spacing based on the number of items.
What is the common mistake made by beginners when choosing colors, and how can it be avoided?
-The common mistake is choosing pure colors (e.g., pure white, pure black, pure red) which can be visually jarring. It can be avoided by 'knocking back' colors, softening them by adjusting saturation or lightness towards the center, making them easier on the eye and more harmonious.
Why should beginners avoid designing their color system around complementary colors?
-Complementary colors, while they can work, are the hardest to match and can overwhelm the eye if not used sparingly. Beginners should instead use monochromatic or analogous color systems, which are less harsh and more likely to produce harmonious results.
What is a simple hack for choosing accent colors in a design?
-A simple hack for choosing accent colors is to take the main color and adjust the hue while keeping the same lightness and saturation values. This can create a cohesive color system that works well together.
How can beginners ensure their on colors are professional and not cheap-looking?
-Beginners can ensure their on colors are professional by following the Material Design three hack, which involves keeping the hue but changing the saturation and lightness depending on the background's lightness. For light backgrounds, increase saturation and remove lightness; for dark backgrounds, add lightness and decrease saturation.
Outlines
π¨ Design Professionalism and Typographic Hacks
This paragraph introduces the video's aim to differentiate between amateur and professional design and to provide 20 quick design hacks to achieve a professional look. It covers the importance of typography, layout, spacing, and color, and how to avoid common beginner mistakes in these areas. The speaker uses Figma to demonstrate these hacks, starting with six typography tips, such as avoiding conflicting typefaces and establishing a typographical system for consistent sizing and weight.
π Layout Consistency and Responsive Design Techniques
The second paragraph delves into layout hacks, emphasizing the importance of consistency and the pitfalls of free-form canvas design. It suggests using a 12-column grid for maximum divisibility and flexibility, choosing divisible numbers for column widths and gutters, and setting breakpoints for responsive design. The speaker also addresses the common mistake of designing unresponsive layouts and the need for consistent section padding to create a sleek, grid-based design.
π Enhancing Readability with Spacing and Hierarchy
The focus of this paragraph is on spacing hacks to improve content readability within sections. It discusses the drawbacks of linear spacing and the benefits of using gutter width as a reference for spacing between containers and components. The paragraph also touches on creating hierarchy in layouts to guide the viewer's attention, the importance of treating dynamic components with static spacing rules, and the challenge of handling static areas with dynamic content.
ποΈ Color Selection Strategies for Visual Appeal
In the fourth paragraph, the speaker shares color hacks to overcome common mistakes in color selection. It advises against using pure colors and instead suggests softening them by adjusting saturation or lightness. The paragraph also corrects the misconception about complementary colors and recommends using monochromatic or analogous color systems for better harmony. Additionally, it introduces a method for quickly creating a color system by varying the hue of the main color and discusses the importance of choosing the right on-colors for text to ensure a professional appearance.
Mindmap
Keywords
π‘Typography
π‘Contrast
π‘Layout
π‘Spacing
π‘Color
π‘Responsive Design
π‘Visual Hierarchy
π‘Kerning
π‘Line Height
π‘Gutters
π‘On-Colors
Highlights
Difference between amateur and professional design can be identified by contrast, organization, and overall aesthetics.
20 design hacks are introduced to achieve a professional look in less than a minute each.
Typography, layout, spacing, and color are the four main categories covered by the design hacks.
Avoid conflicting typefaces; instead, use one versatile typeface for better contrast and organization.
Implementing a typographical system like the 4-pixel scale ensures consistency in design sizing.
Limit text width for better readability, with a recommended max width between 600 to 800 pixels.
Adjust line height to improve text readability and visual separation.
Linear kerning can make text illegible; use the 'bloom technique' for better letter spacing.
Use bold for large text and thin for small text to enhance visual weight and contrast.
Designing on a grid with consistent columns avoids common beginner mistakes in layout consistency.
Using 12 columns is recommended due to its divisibility, allowing for flexible design adjustments.
Setting gutter widths to 50% or less of column width prevents designs from looking too spread out.
Responsive design involves adjusting column numbers based on device breakpoints for a seamless layout.
Consistent section padding using the same values as gutters creates a sleek, grid-like pattern.
Avoid linear spacing; instead, use gutter width or half for spacing between design elements.
Creating hierarchy in design sections by using size and position to emphasize primary elements.
For dynamic components, use static spacing around them to maintain a consistent look.
In static areas with variable content, use dynamic spacing to adjust based on the number of items.
Avoid using pure colors; instead, soften them by adjusting saturation or lightness for better harmony.
Complimentary colors are not always the best choice; consider monochromatic or analogous color systems.
Choosing accent colors can be simplified by adjusting the hue of the main color while keeping lightness and saturation constant.
For on-colors, adjust saturation and lightness based on the background to ensure readability and professionalism.
Transcripts
let me ask you a question what is the
difference between an amateur design and
a professional one if you put the two
side by side you could probably tell
which one was bad and which one was good
but why is the Pro Design good and more
importantly how can you create that
professional look for your designs well
in this video I'm going to show you 20
design hacks that take less than a
minute each and will make your design
stand out as truly professional these
hacks cover everything from typography
how to create better layouts how to
space elements and how to pick colors
super easily so once you learn these you
don't have to waste the mental energy
trying to Tinker around get your designs
to look good you can finally focus on
the big picture stuff and do the kind of
work that senior designers do so here we
are in figma I've got the 20 design
hacks laid out right here and these 20
hacks are going to correct some of the
most common beginner mistakes that I see
all the time now I've broken this down
into four categories typography layout
spacing and color and I've designed an
example section for each of these four
categories so you can visually see the
difference these hacks will make in your
designs so we're going to start off with
six typography mistakes that beginners
make and hacks you can use to correct
them and we're going to be working on
this example section so let's get
started the first and most common
mistake I see from beginners is using
conflicting type faces this usually
happens because they don't know how to
create contrast using size weight or
spacing so they think a bunch of
different type faces will give them the
contrast they want but 99% of the time
this just makes your designs look
amateur and unorganized so The Simple
Solution here is to just choose one
versatile type face there are dozens of
great choices and it's really going to
depend on your project but it's hard to
go wrong with a nice sand serif like
inter circular or in this case I'm going
to be using Guist and instead of using
typ faces to add contrast we're going to
add them in more subtle and professional
ways you see the reason beginners think
their typography lacks contrast is
because they're not using a
typographical system when I first
started designing this is what I do I
just pick sizes at random that I thought
looked right and not only did the
designs look bad but it's hard to make
new sections you know because I had to
start from scratch every time I wanted
to pick a new weight pick a new size
pick a new font anything like that I
just had to start from scratch every
time I was building a new section so now
I use a proven typ of graphical system
like the minor 3D the major 2 or the
four pixel system that I'm showing you
here you can go to types scale.com if
you want to generate scales quickly you
can check out the minor third and the
major 2 but I'll give you a brief
rundown basically instead of picking
sizes at you know random you follow a
mathematical rule that stays the same
all the time this way you know what
sizes correspond to what part of your
design and you can create new sizes
easily you just scale it up or down my
personal favorite and the one I
recommend for beginners is the four
pixel system where you start with a 16
pixel paragraph and you increase the
size by four pixels every step until you
get your biggest
heading another really common beginner
mistake is letting your text take up way
too much width it's hard to read and
honestly after a while it just gets
really frustrating so you want to say
your max with so that it's easy to read
experts like Robin Ren say a good Max
width is between 600 and 800 pixels
depending on the kind of text you're
working with for headings closer to 800
pixels is good for paragraphs and
smaller text sizes you want to lean
closer to that 600
Mark almost every beginner I've seen use
figma is going to leave this Auto line
height on but this is a huge mistake
when you use Auto line height you're
going to make your text look like a
jumbled mess the headings are going to
be too far apart and the paragraphs are
going to be too close together so the
hack here is to decrease the line height
as the text gets bigger generally
paragraphs will be between 125 to 150%
of the font size and your largest
headings will be sitting around 80 to
90% of the font size depending on the
type face but this is going to really
visually separate text to create more
contrast and also make it way easier to
read a big typography mistake a lot of
beginners make is linear kerning if you
don't know kerning is the spacing
between letters it's this little thing
right here so when it's too close or too
far apart your text can look illegible a
lot of newer designers don't even bother
trying to figure this out and they just
keep it linear meaning every font size
has the same caring but this is a
mistake for the same reason you don't
want to have the same line height titles
will look too big and small text will be
harder to read so there's a really
interesting hack to correct this that I
call the bloom technique after flowers
opening up over time basically the
smaller your type gets the more it opens
up so your heading should be closer
together usually around netive 1 to 3%
and your small Tech should be spaced out
more at around positive 1 to 2% and
everything else is sort of in
between the last typography mistake I
see a lot of beginners make is using
weights wrong a lot of beginners don't
know when to use what kind of weight so
usually they just sort of default to
using the regular weight all the time
and try not to think about it too much
but there's a super simple hack you can
use uh most of the time and that's to
make large text bold and small text thin
that's because you want your headings to
get more attention so they're red first
therefore they need to take up more
visual weight this also elevates the
contrast of our design and makes it
easier on the eyes and less confusing
for
visitors next upep I want to show you
six layout hacks that have helped me
tremendously when designing websites so
we're going to fix this example section
that makes six beginner mistakes with
some super simple and effective layout
hacks this is by far the most common
mistake I see new designers making and
that's designing on a free form canvas
when you use a drag and drop tool like
figma or Squarespace you have to be
extra careful to make your designs look
consistent across and within sections
nothing ruins the look of a website
faster than inconsistent spacing luckily
the fix is insanely simple in figma all
you have to do is go over to the layout
grid and select columns you can
literally set this to any number and as
long as you stick to it your designs
will look 10 times better but we're
going to go even deeper the rest of the
section will show you exactly how to
build build great
layouts once begin to start using
columns they make a lot of weird
mistakes the first mistake is using an
odd number of columns it can seem to
make sense there's a lot of stuff that
you're going to want to Center but it
turns out that there's actually a
correct number of columns you almost
always want to have and that's going to
be the most divisible number so you see
I cannot divide or break up this section
very easily into very many divisible
things I'm going to be dealing with a
lot of half numbers and 4.5s and 2.5S
and all that sort of stuff unless I use
12 columns so that's basically the hack
is to use 12 columns the reason is
because it's a very divisible number you
can split your design in half you can
split your design in thirds fourth six
and still have the freedom to Center
something if you want it's the perfect
system so you should almost always use
it for desktop and you can stay away
from the more esoteric Design Systems
like five or nine
columns once you've got your 12 columns
in place how big you supposed to make
them them well I've seen beginners
choose a lot of weird options like 125
95 or 75 pixels or something like that
but in general the more divisible your
number the easier it is to design
complex things within and between
columns so 45 and 100 aren't as
divisible say 48 or 96 pixels so if you
want a super easy hack for setting
column withth just set it to a number
divisible by four or eight pixels I
recommend you getting started with 72
because it's divisible by so many
numbers these four or eight pixel
systems you can see scale you can scale
Your Design up or down and still deal
with nice whole numbers and if you
design around a 75 pixel column you'll
have to split pixels in half for
somebody to take up half the
section while we're on the subject
beginners also make some odd choices
when setting the space between columns
the first mistake I've seen is having no
gutters at all uh very weird but you'd
be surprised people do it all the time
the second mistake I see is setting your
gutters to the exact same size as the
columns this is mistake too because it
just makes your design look too spread
out so how do you actually go about
setting your gutter widths well the
solution is pretty easy you can just set
it to 50% or less of your column so long
as the number is also divisible by four
or eight pixels so for 72 pixels I'd set
my gutters to 36 or 32 pixels but I
might even go as low as 24 if I wanted a
really tight design it's better to think
about gutters like Blank Space columns
and pick a size that gives you all the
blank space you want but not more
another big mistake I see all the time
is building unresponsive designs
beginners usually design for desktop
first and then just squish the design
for tablet or mobile luckily there's a
super easy hacks to fix this all you
have to do is pick break points for
laptop tablet and phone then you change
the number of columns based on these
break points so for a laptop or larger
you have 12 columns then for a tablet
you shrink down to six columns then for
a phone you go with one column this way
you don't need to remake everything you
can just reshuffle it using responsive
design the last mistake I see beginners
making all the time with their layouts
is not setting up a consistent
intersection padding so this may seem
like a small thing but it's you know
actually huge because it's the thing
that visually separates ideas on your
page a super simple hack to set your
section padding is to just set it at
whatever your gutter is set to this
gives your website a Sleek look because
everything fits together in a grid
pattern and if you want to increase this
for more visual separation you certainly
can so long as you follow the same rules
used for your column and gutters like
setting it to something divisible by
four or eight pixels and that you keep
it the same for every
section next up we've got four spacing
hacks that are going to help you with
the content inside of your section so
we're going to be fixing this section
which makes four mistakes with some
simple and Powerful hacks the first and
most common spacing mistake that
beginner designers make is linear
spacing linear spacing is when you have
the same amount of space between every
single item in a section and this makes
your designs harder to read but luckily
there's a super easy fix all you have to
do is use a height equal or greater to
your gutter width between containers so
these are two containers and half of
that width on components inside of the
same container so this superhe heading
and this heading and this paragraph are
items in the same container so our
gutter here is 32 pixels so that's how
much we'll separate our containers by
and half of that would be 16 so that's
what we'll set our intersection spacing
to be a quick side note this doesn't
apply to elements inside of components
like an icon in a button or a menu item
we have separate spacing rules for those
which we'll cover in a
minute just like with the typographical
system your sections need hierarchy as
well but all too often beginners learn a
basic layout and just run it into the
ground so that's where we get this
problem which is linear sizing when each
section in a layout is given equal
importance and visual weight the hack
here is to use size and position to draw
the eyes towards things that are primary
in your design in this case we want to
draw the Eyes First towards the heading
then to the text and finally to our
graphic which supports both but the
general rule is very simple important
things you want to notice first should
take up more visual
[Music]
weight this next mistake focuses on the
space between elements in Dynamic
components things like buttons or rows
in a table that expand to fill the space
a lot in so Huff I see designs that are
clipped or wrapped poorly because
designers treat these as static
components with fixed widths but the fix
is actually insanely simple whenever you
have elements in a dynamic area the
spacing rules around them are static so
you set auto layout to this and you set
a pixel value that is static to the
spacing between objects so when you have
a button with an icon you don't set the
width to an absolute number you set it
to hug the contents and use a specific
pixel value between elements in this
case we're going with 24
pixels but what do you do when the area
is static but the content is liable to
change this most commonly applies to
menus cards or user generated content
the problem is that you can't add a
pixel rule when you don't know how much
space to leave between each item the
hack here is to dynamically fill that
space depending on how many items are in
your container so unlike Dynamic areas
which require static spacing static
areas need Dynamic spacing so in figma
you can use the auto option over here to
dynamically update the spacing based on
the number of
items color is the thing I struggled the
most with as a beginner before I learned
these four super simple color hacks that
help me pick the right colors every
single time so we're going to be working
on this section to fix common color
mistakes with these super useful hacks
one of the most common color mistakes I
see beginners make is always choosing a
Pure Color Pure White pure black pure P
red pure blue all these colors all the
way at the corner of your Color Picker
these colors just really limit you and
they're just visually jarring it's hard
to look at a lot of pure color for a
long time especially colors like pure
red which just dominat so much visual
attention that they strain your eyes
really quickly the easy solution to this
is to just knock a color back basically
it means to soften a color by moving its
saturation or lightness towards the
center so left and right is saturation
up and down is lightness black becomes
off black white becomes offwhite pure
Reds become easier on the eye pure Blues
become more complex and as an added
bonus uh colors work better together
when they have more in common like this
Center space so it's a super simple
trick to make a design look 10 times
more
professional I'm going to share an
embarrassing secret with you I used to
use complimentary colors all the time I
did that because I thought complimentary
meant the the colors worked well
together it wasn't until I read the
color design file by Leslie gettis Brown
a long time ago that I understood the
complimentary colors are actually the
hardest to match now I'm not saying that
they can't work but you shouldn't design
your color system around harsh contrast
like blue and yellow or red and green
unless you use one of those colors very
sparingly a half blue half yellow design
is likely to overwhelm the eye so a
simple way to choose secondary brand
colors is to use monochromatic or
analogous color systems in instead
they're both less harsh than the
complimentary color system and you're
likely to get much better results if you
focus on colors that naturally work well
together as opposed to colors that
naturally oppose one another you should
also play around with the light and
saturation when choosing a secondary
color so a dark red might look better
with a desaturated blue than a bright
blue on this design specifically we're
going to remove the harsh yellow but
keep most of the lightness value leaving
us with this subtle off-white once you
have your main colors worked out it
could seem hard and confusing to choose
accent colors a lot of beginners default
is sort of choosing them at random and
seeing what sticks but the odds you'll
pick the right color combo at random are
zero you need a system for at least
beginning to pick accents that you can
work off of so I'm going to show you a
super simple hack that I learned from
some amazing designers this is a hack
that I use all the time when I need to
create a color system quickly all you
have to do is take your main color and
move the Hue around until you find an
accent that you love like that's how I
created the design spoke color system
where I was trying to go for a candy
colored kind of design they're all the
same lightness and saturation values but
with different Hues I would say this
works about 85% of the time and when it
doesn't it's usually because a purely
monochrome system works
better your design is made up of three
kinds of colors you have your brand
colors your accents and finally your on
colors that sit on top of your design
most beginners do absolutely nothing for
these colors they just use white if it's
a dark background and black if it's a
light background but on colors are
important because they're what the user
actually focuses on you can mess up a
background color but if you mess up the
text that sits on top of that background
Your Design will look cheap and
unprofessional so when picking out on
colors I like to follow the material
design three hack which is to keep the
Hue but change the saturation and
lightness depending on whether the
background is light or dark if it's a
light background I remove lightness and
increase saturation and if it's a dark
background I add lightness and decrease
saturation this creates a more
professional and realistic look even if
the on color is really close to pure
black or Pure
White so I hope you enjoyed this video
if you did YouTube thinks you'll like
this one so you should probably check it
out
5.0 / 5 (0 votes)