EBOOK

The 6 principles of
learning design
This is a download from Design Academy’s crash
course on design. This document shouldn’t be
shared around but if it has somehow, (accidentally
of course) ended up in your hands, consider
signing up for the free course.

Join here: learndesigncourse.com

made by
Table of Contents

Why most people fail at learning design 3

How to learn design with minimal effort 9

A foolproof process for choosing colours 17

Overhaul your typography 23

Using imagery in your projects 33

Debugging your design 41

 LESSON 1

Why most people fail at learning

design
Design is often put on a pedestal.

If something is well designed, people seem to gravitate towards

it. The first reaction anyone has when they see a new website or a
product is (rightly or wrongly) focused on the design.

People trust good design. It makes a product or a service look

legitimate.

But when you’re first starting out, whether it’s a side project or you
want to add new features to a product or new sections to your
website, it doesn’t always make sense to hire a designer.

Why?

1. Hiring a (good) designer is expensive.

This is fine if you have a lot of revenue behind you, but if you’re
just working on a few side projects, or maybe you’re creating new
features at your company or even just redoing your own website,
you want to keep the budget as low as possible.

2. Hiring a designer takes time.

Not only to find a designer, but to commission the project, go
through feedback and amends, get invoices paid, contracts
signed.. the list goes on. 

3. Hiring a designer implies you know exactly what you want.

Often you want to experiment, test, work in sprints, change

3 DesignAcademy.io
 things. If you’re going to spend money on a designer, you’re un-
der pressure to have everything perfect before getting them on
board. 

It makes sense. You like good design, you don’t want to be

embarrassed of how your product or website looks, and you don’t
want to hire a designer. 

So what’s next? 

You learn how to design yourself!

I’ve spoken to a lot of developers who have tried to learn how to

design. The vast, vast majority have given up at least once, if not
more, citing “I’m just not creative”.

So in this lesson I’m going to be teaching you about why most people
fail at learning design and, more importantly, what you can do to
make sure that this time, you succeed. 

So what do people who fail at learning design have in common?

#1 They prioritise theory over practical

Ok, this one isn’t really the fault of the learner. Most books and
courses on design are theory-driven. They teach you concepts like
proximity, scale, colour theory, typography history. 

And granted, they’re useful theories to know. But they miss out on
how to actually apply these in your next project. There’s no use in
learning theory without having key ways to put it into practice. 

Knowing the difference between kerning and leading won’t make you
a designer (despite what designers may think).

4 DesignAcademy.io
 So put down those hefty design books, stick with me the next 6 days,
and I’ll show you some super practical tips that will make you a better
designer. 

#2 They try to do everything themselves

When I was in college studying design, I had a friend who was
consistently creating better looking posters than me. 

I felt it was unfair because he’d use stock websites to get a perfect
picture of a product, or a cool graphic to overlay onto his poster. 

And there I was, doing my own photography, trying to create my own

graphics and having the results sub-par and disappointing. 

There’s some merit in what I was doing. I was learning by doing.

Increasing my skillset. But the results just weren’t as good. 

There’s a lot to design. Typography, photography, illustration. You

can’t be good at it all. And you probably don’t want to be. You’re here
because you’re a developer who wants to make their products look
decent, not win any design awards. 

So if you can’t draw a straight line, don’t try to create your own
custom illustrations. My favourite place for design assets that I’ve
been a customer of for about 3 years is UI8 (Full disclosure: that’s an
affiliate link — that’s how much I love them) or even consider hiring
somebody from Dribbble to complete any illustration work you might
need. It’s not always as expensive as you might think (you can get
custom illustrations for around $30-$50). 

Sure, you’re potentially spending money (though I’ll be giving you a

bunch of free resources you can use too) but you’re saving time and
getting a better result. 

Don’t be a hero. Identify your weaknesses and get help.

5 DesignAcademy.io
 #3 They don’t work at it consistently
As with most things, you need to consistently be working at it to see
improvements. 

You don’t have to do a lot (and in the next chapter I’ll show you
how easy ‘working consistently’ can be) but if you can keep learning
design somewhere on your radar as much as possible, you’ll see
improvements. 

What you should NOT do is wait until you’ve got that killer project to
be learning design. Learn in small doses now and you’ll save yourself
being faced with the dreaded blank canvas syndrome. 

#4 They don’t get feedback (or they get the wrong type
of feedback)
Feedback on design is notoriously hard to get. Nobody wants to look
at your design and say “that’s rubbish!” so they usually go with the
standard “I like it!”. 

But getting feedback from people who haven’t seen your work before
is extremely valuable. 

I recommend getting a mix of designers input and non-designers

(preferably your target audience). 

• The non-designers will point out the higher-level look and feel
issues and also whether the actual content is working for them. 

• The designers will point out all the little details you’re missing.
They’ll provide the polish. 

Finding places to get feedback can be tricky. I highly recommend

joining some communities (Slack, Facebook) in your field to get

6 DesignAcademy.io
 feedback from non-designers. 

To get feedback from designers you can use websites like Dribbble
(however, this is known for having poor quality feedback) or this
Reddit group that offer critiques. 

If you end up signing up to my full course, we have a fantastic

community of people learning design and I’m in there every day
providing teardowns on work. 

When you do ask for feedback, make sure you’re specific. Don’t
just post something and say “hey guys and gals, whaddya think?”.
Spend some time thinking of 3-4 questions that you’d like to have
answered. 

For example, “Is the call to action impactful enough? Are you drawn
to it?” or “Do these colours clash?”. 

This not only gives you more useful, detailed feedback but it also
shows people that you’re OK with critiques. This means they’re
far more likely to point out anything that really stood out to them
without being worried about offending you. It’s a win-win!

#5 They give up too quickly 

The last reason most people fail at learning design is simply that they
give up. 

Design isn’t something you can learn in a day. It took me 6 years to

feel like I’m a decent designer but I made a lot of mistakes which
you’re not going to make. 

Design can be a frustrating subject to learn, but it doesn’t have to

be. In this eBook, you’re going to learn the most actionable ways to
improve your designs—minus all the fluff. 

7 DesignAcademy.io
 So with that in mind, here’s what’s going to happen:

1. I’m going to teach you practical ways you can improve your de-
sign. If you want to learn the theory you’re free to Google around
but I’ll only be teaching you the essentials to make you a better
designer.

2. I’ll be giving you a ton of free and premium resources that will

save you time and help you see for yourself how to design. 

3. I’m going to keep you accountable. You’ll get worksheets or exer-

cises to do at the end of each lesson to keep you on track. (Many
of you who have been through the email course will have already
done this, but I’ve provided the links in this eBook just in case).

4. If you consistently put into practice what I teach you, your designs
will improve. If you don’t, they won’t. Reading these emails aren’t
going to make you a better designer, taking action on them will. 

What I want you to do now

The first thing I want you to do is to send me your most recent piece
of design you did. It can be a landing page, a full website, a logo or
anything in between. 

I want you to have something that you can look back on so you can
see how far you’ve come. This is the single greatest motivator you
can get :-)

--> Send me your most recent design here 

8 DesignAcademy.io
 LESSON 2

How to learn design with

minimal effort
Do you know the only trait you need to become a good designer?

If you’re reading this, this is a trait you almost certainly have. 

It’s that you know good design when you see it. 

Yep, that’s it. That’s the only requirement to becoming a good

designer:

• If you can look at something and wish you had been the one to
create that. 

• If you know what looks good and what looks bad, but you just
can’t grasp how to get yours into that zone.  

• I had (and still have) the exact same problem. It’s not something
that you’ll ever get over, you’ll just learn to accept it and live with
it. 

You want proof? Here’s some of my early design work:

9 DesignAcademy.io
 OK maybe it’s not too terrible, but in my head, I wanted the above to
turn out like this: 

If you compare the two, you can see the similarities. Condensed fonts
were mixed with swirly ones, a cool icon. But I felt mine just looked
amateur. I couldn’t figure out where I was going wrong. 

I had good taste but I didn’t know how to replicate that in my own
work. 

I don’t know a single designer who has been what you’d

call a natural. 

If you go onto somebodies Dribbble profile, you won’t see all the
failed attempts, the horrific, embarrassing ‘experiments’. You’ll see the
shots they’ve selected to post up there. Even the work in progress
sketches look like they’ve been created by an amazing concept artist. 

It’s enough to make you feel like you’re not good enough, and that
you never will be.

To be a good designer, you need to nurture your taste, not just your
skills.

10 DesignAcademy.io
 If you put some time into nurturing your design skills, you will
become a better designer. 

If you can analyse why you like something, or why you don’t like
something else, you will become a better designer. 

You don’t have to spend hours following tutorials, you just need to
spend a few extra minutes to think about what is it about this design
that makes it so delicious. 

Let’s try this out

Let me show you what I mean. First you need a website you like. My
current favourite is Stripe:

What do I like about this?

• I like that they’ve used around 4 different colours for that gradient.
(I typically use 2 at max). 

• Those device mock ups are ridiculously simplified which not only
looks great visually but makes it easy to see the variety of brands
that use Stripe.

11 DesignAcademy.io
 • They use really large, light drop shadows.

• Their icons looks custom (but could easily be from an icon set
with a circular background and modified brand colours). 

• The ‘new’ badge has a background slightly darker than the back-
ground colour with fully rounded corners. 

• The actions have little icons (>) next to them. 

• As you can see, I haven’t gone into too much detail. I’ve just
looked and tried to figure out what it is about the design that
makes it look so polished. 

Then in my next project, maybe I’ll try making my drop shadows

bigger and lighter, or maybe I’ll put some icons on a lighter coloured,
circular background. 

Your task for this lesson

This lessons task is going to seem a little... simple. 

But we need to do this now because it’s going to come in handy later
on in the course (and frankly, throughout your whole career). We’ll
get into the nitty gritty of design starting from the next lesson. 

For now, we’re going to be completing 2 things:

1. We’re going to find somewhere to store inspiration — and make a

start in collecting it

2. We’re going to analyse our inspiration in comparison with our

current design

12 DesignAcademy.io
 1. Start collecting inspiration 

• Sign up to Dropmark or have some kind of system for collecting

inspiration. 

• Create a new folder for that design you sent me yesterday. 

• Go through some of the inspiration sources below and save at

least 5 websites you like (that you wish yours looked like!)

Where do you go to find inspiration?

Often, you’ll know off the top of your head some websites that you
really like. But if you can’t find a website that you like, here are my top
picks on where I go to find design loveliness:

Dribbble
In particular, I like most things that come from Balkan Brothers, Focus
Lab and PaperPillar.

LandBook
This is a great resource for seeing some gorgeous landing pages/
websites

13 DesignAcademy.io
 Little Big Details
This is a little bit UI, a little bit UX, and a little bit delightful fun.

CollectUI
This is similar to Dribbble, without the commenting. It has a nice
sidebar to filter by different ‘design challenges’ like file uploader
examples, or pricing tables. 

So have a scroll through and save any that you like and think would
work well for the design you’re currently working on. 

2. Compare your website to your inspiration

Remember that design you sent me yesterday? You did send it, right?

Well, now’s the time to start getting that to a stage you’re happy with. 

What I’d like you to do is to take the design that you sent me
yesterday, open it up, along with all your inspiration websites and
compare the inspiration to your website, one-by-one and note down
everything you like about the inspiration websites that you could
apply to your website. 

What do I mean by this? 

It’s easy for me to ask you to compare your website to another and
make some changes. 

But to leave it at that would be unfair to you. 

Why? 

Because, chances are, many of the things you like about other
websites simply aren’t easy to apply to your own. 

• You don’t like your colours. 

“But how do I choose a colour I like?”

14 DesignAcademy.io
 • The websites you like has beautiful illustrations.
“So I’m meant to just learn to draw overnight?”

• Your fonts look really bland and boring.

“But where do I find interesting ones that are still readable?”

These are all issues that can’t be solved by just... doing it. You are go-
ing to need some guidance. 

Fortunately, the next few lessons are going to cover exactly those
things. So you can relax.

Ignore the fact that you don’t like the colours. Ignore that you don’t
have the skills to create complex illustrations. Ignore the fonts. Ignore
anything that you feel is out of your current skill level. 

For now. Because we’ll fix those in a few days. 

What I really want you to look at are the other things. The less
obvious things. 

Things like:

• The font size, colour, and line height. How do they compare to

yours? Are they bigger? Is there more or less line height? 

• The space between elements. Between paragraphs, or content

blocks, or columns. 

• The alignment of different elements. Is everything left aligned or

centred? 

• Little accent details that you could copy like icons, or callouts, or
small splashes of colour. 

15 DesignAcademy.io
 Basically, tell me what you notice and what you can implement in
your next piece of design work. 

I don’t actually want you to implement any of this yet (unless you
really want to). For now, just notice the differences and get them
written down. 

You can use the worksheet below to store your answers. That way, I’ll
get to see what you’ve noticed and I can compare it to your website
you submitted before (I’m nosey like that). 

--> Click here to fill in today’s worksheet (oh, it’ll be so worth it!)

That’s it for Lesson 2—I told you it’d be easy! Next, we’ll be getting into
making some big changes on your website. 

For now, I can’t stress enough how important this lesson is. I would
rather you unsubscribe now, never read another course or book on
design but continue to notice and analyse good design than ignore
this task. I promise it’ll come in handy time and time again. 

16 DesignAcademy.io
 LESSON 3:

A foolproof process for choosing

colours
I have a confession to make. I still don’t get colour theory. And if
you’re anything like me, you don’t either. 

Back when I first started designing I used to sit with the colour wheel
next to me, trying to come up with great schemes for whatever
project I was working on.  

The results were mediocre at best.

 
Today’s lesson will teach you some of the best ways I’ve found to use
colour in your designs — without looking at the colour wheel.

First, find your inspiration

The best way to learn what colours go well together is to learn from
other people. (Are you noticing a theme, yet?)

You know when something is visually pleasing, you just don’t know
how or why it’s visually pleasing. 

Luckily you don’t have to. 

 
Colour inspiration is absolutely everywhere. But it is only when you
start using these colours in your own designs that you will start to
intuitively create great colour schemes. 

Nobody was born knowing the perfect hue to sit next to duck egg
blue (rhyming not intentional).
 
Try using websites which allow you to sort designs by colour like

17 DesignAcademy.io
 Dribbble and Lapa.ninja to find colour schemes that you like or that
fit the brand you’re working with. Then literally copy the exact values
they have used in your own designs. 
 
A word of warning: There’s a fine line between taking inspiration
from something you see online and copying it completely.

Either look for colour inspiration in illustrations, brochures or other

design work, or make sure you only take the colours from the
website.

So don’t also copy the layout, fonts and content. It’s bad, okay?  (That
is, unless you’re copying to learn. Copying in it’s entirety is a fantastic
way to learn how to design). 

So now we’ve got that straight, here are three easy ways you can pick
colours straight from your browser or Photoshop.

Applying colour to your design step by step

“Okay—but how do we apply this in a real life situation?” I hear you
ask. 

The trick is to build up gradually. Don’t go on ColourLovers, pick a

palette and attempt to apply it to your website. Instead, do what I do
(even now):

Step 1
Pick a colour, any colour. This is easy if you have an existing brand/
logo to work with. That’ll be the colour you’ll be using as your base.

If you don’t have that then pick a colour that you feel would work
with the type of website you’re designing. No need to be specific, just
choose red, green, blue, pink etc. whatever you fancy.

Step 2

18 DesignAcademy.io
 Go to dribbble.com/colors and select one of your shades from the
dropdown. (Or type in the exact HEX code at the top).

Or you can try lapa.ninja and use the dropdown at the top to select
your colour. 

Step 3
Browse through the results and try to spot some similarities. You’ll
probably notice that the best colour schemes are often really simple.

Usually the main colour—

big and bold. With plenty of
white around it. And finally
a small accent colour for
drawing attention.

In this case I noticed that my

favourite images had fairly
bright, saturated blue. with
hints of yellow which really
stood out. So maybe I could

19 DesignAcademy.io
 try blue as my main colour and yellow as my accent. 

Then, the dark grey in the horse image would be a great base for the
text.

So build on those 4 colours (Blue, White, Grey and Yellow) and if you
find you need any more, simply redo the above exercise. (From the
image above I see I could use a nice red or a green if needed).

Here is the palette we’ve now come up with courtesy of the

wonderful designers on Dribbble:

Try applying your new scheme to your website

Most websites only need one or two colours to start with. In fact, the
amount of actual, intentional colour on most well designed websites
is pretty small. 

Most colour comes from imagery. Things like photography, icons,

illustrations, and so on. Imagery is something which we’ll go
over in another lesson but I also cover it very extensively in the
Design Fundamentals course because it’s an area that I find a lot of
developers really struggle with. 

But for now, just know that the amount of colour you realistically
need to apply to your website is often smaller than you think. 

20 DesignAcademy.io
 Take a look at this hero image:

Now, if we remove the illustration, how much colour is actually being

used on the page? 

I can see:

• A pink button

• A blue button

• An icon for the logo

• The underlined word

That’s it! And many websites are exactly the same. If you take the
imagery out, there really isn’t much colour you need to apply to your
website.

So don’t get too hung up on colour. Use the method above and find
a couple of nice shades and try applying it in small amounts to your
website. You may be surprised how little you need. 

21 DesignAcademy.io
 Your exercise for this lesson
Now is where the real work begins. For this lesson, I’d like you to take
the design you submitted, use the process above to find a couple of
colours you like for your brand, and try applying it to your website. 

Then, fill in this short form and send me your updated design. We can
compare it to your first one and see if there’s been an improvement. 

Feel free to reduce the amount of colours on your design too. Maybe
make some spaces for imagery that you can source (which we’ll go
over in another lesson). Don’t use colour to replace imagery. It’s hard
to make that look effective. 

--> Send me your updated design here

22 DesignAcademy.io
 LESSON 4

Overhaul your typography

(PLUS 5 go-to font pairings for
you to use)
Ah, typography. Love it or hate it, there’s no denying that it’s a huge
part of the web. 
 
Without typography the internet would be a pretty boring place. And
since you’ll be using it a lot, it’s a good idea to learn how to make it
look great in the process.
 
New designers often think you needed decades of studying
and crafting your own typefaces before you could begin to use
typography meaningfully in your designs. 
 
Thankfully that’s nothing more than a myth.
 
As it turns out, you can dramatically improve your website’s look and
readability with just 5 quick and easy tricks. 

Trick #1: Have a few go-to fonts

You’ll get better results if you steer clear of default web fonts. Thanks
to Google Web Fonts and Typekit that’s not hard at all. There are
plenty of stunning fonts available for your use either for free or a low
cost.
 
The sheer amount of fonts in these services is overwhelming. The
trick is to pick out 3 or 4 fonts that look really good together. You can
use them over and over rather than trying to find new styles for each
project. 

23 DesignAcademy.io
  
As you’ll keep designing, you’ll come across more fonts you love. Just
add them to your own collection of favourite fonts and use them
when appropriate.

The way I do this is with a browser extension on Chrome called

WhatFont. Simply click on live text in any webpage and it will give
you the font name, size, line-height and colour. (Of course, you can
always go into Inspect, but this is just a lot faster).

So when you see a website that’s a joy to read–in about 3 seconds

you will know the secret to their success!
 
Below is a list of my personal go-to fonts to help you get started. Feel
free to use them until you build your own collection.

24 DesignAcademy.io
 Free
Open Sans - Probably the most universal font ever. Friendly and open,
can be used anywhere.

Merriweather - Sophisticated yet ‘light’ font with tons of weights.

25 DesignAcademy.io
 Roboto Slab - Not many weights on this one but it’s one of my
favourite slab-serif fonts. 

Premium
Proxima Nova - Super trendy. This font just oozes coolness.

26 DesignAcademy.io
 Calluna Sans + Freight Text Pro - Great combination here. These fonts
are friendly yet sophisticated.

Remember, there are some awesome fonts on the web but there are
also a ton of bad ones. When you choose a font make sure you find
one with many different weights (Light, Regular, Semibold, Bold, and
Italics as a minimum) as these will be the most versatile.

Trick #2: Decide your font sizes… with math! 

 
Have you ever wondered what font size your h1 tag should be? And
how to keep your h2 and body copy in perfect ratio? Or do you just
pick out random sizes hoping they’ll all look proportional? 
 
Guessing is OK if you know what you’re doing but there is an easy
way to determine your font sizes and make sure they look great every
time.
 
It’s called a modular scale.
 
In short, a modular scale gives you a list of sizes that you can use
which are all directly proportional to each other.
 
You don’t even have to figure out how to calculate the sizes because

27 DesignAcademy.io
 there’s an awesome online tool called Type Scale that can do it all for
you.
 
Simply choose which ratio you find the most appealing and you can
see your font sizes in action. Doesn’t get easier than this!

If you want to learn more about the modular scale here is a good
article that will get you started.

You’ll hear me talk a lot abut how the ‘rules’ of design will get you 80-
90% of the way there. But the extra 10% will need to come from you
directly. 

Sometimes the modular scale can produce results that just don’t
work with your design. If you use it and it still doesn’t look right, don’t
be afraid to tweak it.

It’s much better that you’re learning to see the issues in design than
just blindly following these rules. They’re there to get you started, but
trust your eye if you think it doesn’t look right. 

Trick #3: Give your fonts some breathing space 

 
I almost never stick with the default line height for fonts. It’s too close
for online reading. And words that look bunched up are harder to
read and look less inviting. 
 
A good rule of thumb is to keep your line height at 125% (or 1.25em)
of the font size. So a 16px font would have a 20px line height.

Often, I go as far as 150% (1.5em) of the font size giving the above a
24px line height. 
 

28 DesignAcademy.io
 See how it looks here:
 

125-150% is a great rule to start with. But just remember that as your
font size goes UP, the line-height should go DOWN. So start with
150% for the smaller fonts, and move down to 125% as the font size
gets larger. 

Trick #4: Break up text with different styles

Don’t be afraid to use different weights, italics, block quotes, and
subheadings in your work. The idea for any web page is to make it
easily skimmable. You want to get the gist of the website with only a
quick glance at the content. 
 

 
Take a look at the image above and see which one you’d rather read
(you know, if they were words rather than grey blobs...)

29 DesignAcademy.io
 Here are a few things you can try: 

• If you have a killer sentence, pull it out and make it a full width
block or a block quote. 

• Decorate headings with smaller subheadings in your accent

colour. (Use a small font size, with some letter spacing if using all
caps)

• If you have a paragraph that can be broken down into 3-4 points,
consider making these into a feature block set. 

This is why it’s so important to read your content first – dig out
anything that you can use to design with. Designing paragraphs on
their own is hard. Designing smaller blocks of content is much easier. 

Typography is a big subject. And it’s usually the first stumbling block
for developers. Having some go-to fonts in your arsenal (use mine as
a starting point, but over time create your own) and a few quick tricks
to help make your typography more readable is going to really help
you. 

If you can make fonts look good, you’re 3/4 of the way to becoming a
good designer. Some of the nicest websites are typography only. 

30 DesignAcademy.io
 Overall, typography is a big subject. And it’s usually the first stumbling
block for developers. Having some go-to fonts in your arsenal (use
mine as a starting point, but over time create your own) and a few
quick tricks to help make your typography more readable is going to
really help you.

In the Design Fundamentals course, we spend a whole module on

typography alone. I’ll take you through the methods I use to choose
typefaces for any kind of project, pair them with others, and how to
‘design’ typography. 

But for now, these tips should get you going. Use the fonts I
suggested or find your own (don’t forget to note down nice
typography you see on other websites) and you’ll be well on your way
to having beautiful typography on your website. 

Over to you… 
For this lessons exercise, we’re going to overhaul your typography.
Here’s what I’d like you to do: 

1. Have a read through your content on the design you’ve been

working on and see if there’s anything you can do to make it more
readable. 

For example, can you pull out a few key features and use them
as a design element? Are there any quotes you can use as a full
width block? 

2. Next, take a look at your font choice. Are you happy with it? If so,
great! Move onto the next step.

If not, will one of the recommendations from this lesson be better

suited? Try a couple out and see what you think. Or use typ.io to
find even more typography inspiration. 

31 DesignAcademy.io
 3. Use your inspiration to typeset your typography. Go back to your
inspiration folder from the first lesson and try copying some of
their styles (just the styles, not the font itself) and see what kind of
a difference that makes. 

So change your h1 size, line-height, and colour to match those

on the inspiration website and keep moving down until all your
typography is perfectly typeset. 

4. Finally, submit your design here so I can see how your updated
typography looks! 

32 DesignAcademy.io
 LESSON 5

Using imagery in your projects

There are four main types of imagery used in web design: 

• Photography

• Illustration

• Icons

• Screenshots 

With the exception of screenshots, none of these need to be created

by you or anyone on your team. 

All you need to do is source them (which means knowing where to

look) and maybe do a bit of light editing to make them fit with your
brand. 

It sounds easy, but sourcing quality imagery alone can sometimes be

the most time consuming part of your project. And the thought of
editing anything is enough to fill you with dread. 

Now I can’t go over every aspect of sourcing and editing imagery

in this lesson (The imagery module is actually the biggest in the
entire course) but by the end of this email, you’ll have some fantastic
resources that you can use and some tips of how to make them fit
within your brand.

Onward!

Where to find decent imagery

First, you need to know where to look for assets. Fortunately, I’ve

33 DesignAcademy.io
 done the hard work for you and combed through hundred of
different websites looking for only the best imagery to use in your
projects. Here are my top picks to find good quality imagery: 

Photography
Burst (free) 
There are a ton of free stock photography websites but this is my
favourite because it has the most useful photography in areas like
business and software. 

Stocksy (premium)
Stocksy is expensive. But the quality is fantastic. For projects where
we have the budget, I always go straight to Stocksy. 

Moose (free & premium)

Moose is a new website who shoots their own photography (rather
than relying on contributors). You can even request your own photo
and they’ll go out and shoot it for you. They have a free plan but the
images are tiny (100x100) - the paid plans are a monthly fee so this is
great if you use photography regularly.

Illustrations

34 DesignAcademy.io
 unDraw (free)
unDraw is a great website where they provide completely free (no
catch) illustrations for your projects. They’re high quality and you can
even edit the colours in the browser so they match your branding.

Isometric (premium)
This is a great illustration set from UI8. Isometric illustrations are really
trendy right now and whereas I can’t say how long the trend will last,
these are super high quality, beautiful images.

35 DesignAcademy.io
 Dice (premium)
Illustrations of people are hard. I’m not sure why, but you don’t find
many around. Yet illustrations of people can add a very humane
aspect to your website. This is a great set that’ll help you do exactly
that. 

Icons

Linea (free)
Free icon sets that are large enough for most websites or apps are
really hard to find. Most free icon sets come with sometimes as few as
6 icons in. This one by Dario Ferrando has over 730 high quality icons. 

Picons Thin (premium)

Picons Thin is a lovely icon set. Each icon has been carefully crafted

36 DesignAcademy.io
 and they always look great. The only downside is that when they say
thin, they mean thin so you can’t use them too small. 

Neptune (premium)
This is another great icon set from UI8. These are sort of a hybrid
between icons and illustrations — so they look great for things like
feature blocks. 

If you’re using screenshots 

Screenshots are a whole other ballgame because unless someone
else has designed the app already, you’re going to need to design
those too. 

In the full course I’ll show you exactly how to create gorgeous
screenshots for your marketing website but for now the most
important thing to remember is to only show the most relevant
information. 

That means, whatever you screenshot is describing, make sure

that’s the focal point of your image. You can block other parts of the
screenshot out in a stylistic way to make sure you’re only showing
what users need to see right now. 

37 DesignAcademy.io
 Using imagery in your projects
Now we’ve spoken about sourcing imagery for your projects, it’s time
to move onto the fun part: using it! Here are some tips to help you
make the most of your imagery:

#1 Source high quality imagery

The most important thing to do is to make sure you are sourcing
high quality imagery. Sometimes this isn’t possible. If you have lower
quality imagery which you need to use, try to keep it at a smaller size
(this doesn’t necessarily mean it won’t stand out — images tend to
always stand out).

If you have bad imagery, it’ll affect your whole design so try to stay
clear as much as possible. 

#2 Invest in at least one versatile icon set 

As I mentioned before, free icons sets aren’t very versatile. If you were
to only invest in one thing, make it a large icon set. 

You can use it for every project you work on and it’ll come in handy
time and time again. 

#3 Edit icons to match your brand 

When you’re using icons and illustrations, edit the colour to match
your brand colours. It makes a huge difference and it makes it look
completely bespoke. 

In the course, I’ll show you exactly how you can edit your illustrations
into many different styles (you’ll need some vector software, but I’ll
provide free alternatives if you work in the browser). 

38 DesignAcademy.io
 #4 Don’t use icons to replace imagery 
Icons should be small. They shouldn’t be pride of place in a design.
They’re meant to enhance content, not be the content.

If you have a large space you need to fill either don’t fill it (see my next
point) either use photography, or buy illustrations.  

#5 If you’re really stuck for imagery, go super minimal

Some websites don’t lend themselves well to lots of imagery. This is
OK. 

It’s much better to have a super minimal (but well designed) website,
than a busy one with a ton of imagery that doesn’t make sense and
clutters up the page. 

Overall, imagery can be hard to get right. But it doesn’t have to be as

painful as you might have thought. 

I hope this lesson has helped you to see high quality imagery as
something that’s obtainable rather than a distant dream. 

39 DesignAcademy.io
 Your exercise
So now you know what I want you to do. Take a look at the imagery
in your design. Can you use any of the resources above and find
anything better? 

Or do you even need the imagery at all? Maybe your website will
work better if you keep it super clean and minimal. 

Take a stab at editing your images and upload your design here. By
now, we should really be getting somewhere and tomorrow we’ll be
talking about the last step in the process: debugging and polishing it
off. 

40 DesignAcademy.io
 LESSON 6

Debugging your design

Did you know, copying people is how I learned to design. 

And I studied design both at college and university for 5 years. 

I’ve read books on design, subscribed to blogs, taken courses but

copying is still what taught me to design. 

At first I was ashamed of this. Copying is shameful. And creativity is

meant to be unique. 

But then I realised it’s how everyone learns how to design. Whether
they admit it or not. 

It’s the way everyone learns almost anything. 

Think about when you were learning to write. Did you read theory
on letterforms? The difference between cursive and non-cursive
handwriting? 

No. Your parents or teacher would write a big letter ‘A’ and you would
copy it. And you’d continue to copy until you could write on your
own. 

Then when you could write on your own, you’d start developing your
handwriting style. 

But you had to learn the letterforms before making them your own.

41 DesignAcademy.io
 To be a good designer, you don’t need unique ideas
A lot of you want to learn design so you can create something
that looks visually interesting, different and doesn’t contribute to
the homogeneousness of the web. 

And that’s awesome. Honestly, it is. I applaud you for wanting to stand
out.

The problem is, before you can start creating unique designs, you
have to learn how to design.

Before having beautiful, cursive handwriting, you have to learn how

to write the alphabet. 

And this is exactly what we’re going to be doing today.

Actually, no it’s not. You see, I used to ask people to find a website
they liked and copy it as perfectly as possible.

But after the first thousand people who went through this course —
only 9 actually did this exercise and sent it to me. 

I still think copying a design is one of the fastest ways to learn, but
you’re busy. You’re probably working on your own projects which
you want to design for, rather than feeling like you’re wasting time
recreating something that can never be used. 

So I’ve changed my mind. 

Remember that list you made back in lesson 2? About all the little
things that you noticed in a nicely designed website but didn’t see in
yours?

Well, now I’d like you to go back to that list, have a quick once over

42 DesignAcademy.io
 and see if there’s anything else you can add (I bet there will be, you’ll
see how much you’ve improved already!) and start applying them to
your website. 

I wanted you to do this now, rather than at the start because now
we’ve got the ‘big’ parts of design out of the way (the colour,
typography, imagery) so it leaves us free to focus on the little details. 

And it’s the little details that make a great design. 

Here’s what I want you to do: 

1. Use one of the inspiration websites and find a website that’s sim-
ilar to yours. Not similar in industry or niche, but similar in struc-
ture (e.g. a mobile app website, or an e-commerce website). 

2. If your screen is large enough, have this open side by side with
your website. Now scroll down both and think about what makes
the inspiration website so great. 

3. Use a combination of this, and the list you made in lesson 2 and
go over some of the details of your website. 

43 DesignAcademy.io
 Maybe add some extra space (definitely add some extra space — it’s
the #1 issue I see) between elements. Check the typography. Look for
any little details that you may have missed that you can apply to your
website.

Because this is what design is all about. 

It’s not colour theory, or understanding the anatomy of a letter. It’s

about combing through your design and finding all the bugs.  

Yes, it may take a while. And yes, some bugs might be bigger and
more time consuming than others. But if you stick at it and keep
copying the details of other websites, you’ll start to learn about why
certain things look good, and why others don’t. 

I can tell you about how alignment is super important until I’m blue
in the face, but until you notice the difference for yourself, you’ll
probably just think I’m exaggerating (I’m not, by the way). 

So have a go and see what you come up with. Over time you’ll need
to rely less and less on looking at other websites for inspiration. Like
learning to write, your style will come eventually, you’ve just got to
learn the letterforms. 

--> Submit your final design here and give yourself a big pat on the
back! 

44 DesignAcademy.io
 Congrats!
You finished the course! I hope it’s been helpful. If
you have any questions about learning design, my
inbox is open. Email me at [email protected]
anytime :-)

Want more? Join the full course!

made by

45 DesignAcademy.io