These days anyone can DIY their website or blog, but not everyone makes good design choices. What makes one site appear polished and professional and the other appear amateur? The answer: core design principles. In this session, you’ll learn the design principles professional website designers follow when designing sites and working with content and how you can apply them to your website to instantly uplevel the perception of your brand and business. These are the DIY web design tips that will have you thinking like a pro.

1. @jenniferbourn
#WCSD

2. @jenniferbourn
#WCSD
Let’s Talk
Typography

3. @jenniferbourn
#WCSD
Stick To The Basics
Archivo Narrow
Libre Baskerville
Merriweather
Franklin Gothic
Proxima Nova
Source Serif
Skip the novetly, cool, and hard to read
Garamond
Helvetica
Open Sans
Palatino
Rockwell
SourceSans
Gill Sans
Futura
Lato
Museo
Raleway
Roboto

4. @jenniferbourn
#WCSD
Use 2 Weights Of
The Same Typeface
Skip a weight or two — this is 100 and 700.

5. @jenniferbourn
#WCSD
Different Typefaces
Provide Visual Contrast
Just don’t use more than two.

6. @jenniferbourn
#WCSD
Similar Typefaces
Are A Mistake
Don’t use two typefaces of the same style.

7. @jenniferbourn
#WCSD
When In Doubt
Double The Size
Main headline is double the body copy size and
the subheadline splits the difference.
Body = 16pt H1 = 32pt H2 = 24 pt

8. @jenniferbourn
#WCSD
No
Light
Grey
Type
Rouge Group, use your harpoons and tow cables. Go for the
legs. It might be our only chance of stopping them. All right,
stand by, Dack. Luke, we’ve got a malfunction in fire control.
I’ll have to cut in the auxiliary. Just hang on. Hang on, Dack.
Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.

9. @jenniferbourn
#WCSD
Easy
To
Read
Rouge Group, use your harpoons and tow cables. Go for the
legs. It might be our only chance of stopping them. All right,
stand by, Dack. Luke, we’ve got a malfunction in fire control.
I’ll have to cut in the auxiliary. Just hang on. Hang on, Dack.
Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.

10. @jenniferbourn
#WCSD
Let’s Talk
Alignment

11. @jenniferbourn
#WCSD
Align
To
One
Axis Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you.
Princess, we’ll find Han. I promise. Chewie, I’ll be waiting for
your signal. Take care, you two. May the Force be with you.

12. @jenniferbourn
#WCSD
Align To One Axis
Yes, Lord Vader. I’ve reached the
main power generator. The shield
will be down in moments. You
may start your landing. Rouge
Three. Copy, Rouge Leader
Wedge, I’ve lost my gunner. You’ll
have to make this shot. I’ll cover
for you.
Princess, we’ll find Han. I promise.
Chewie, I’ll be waiting for your
signal. Take care, you two. May
the Force be with you.

13. @jenniferbourn
#WCSD
Align To One Axis
Red Leader Gray Leader Green Leader
Red Leader Gray Leader Green Leader

14. @jenniferbourn
#WCSD
Align
Left
Rouge Group, use your harpoons and tow cables. Go for the
legs. It might be our only chance of stopping them. All right,
stand by, Dack. Luke, we’ve got a malfunction in fire control.
I’ll have to cut in the auxiliary. Just hang on. Hang on, Dack.
Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.

15. @jenniferbourn
#WCSD
Rouge Group, use your harpoons and tow cables. Go for the
legs. It might be our only chance of stopping them. All right,
stand by, Dack. Luke, we’ve got a malfunction in fire control.
I’ll have to cut in the auxiliary. Just hang on. Hang on, Dack.
Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.
Rag
Right

16. @jenniferbourn
#WCSD
Rouge Group, use your harpoons and tow cables. Go for
the legs. It might be our only chance of stopping them. All
right, stand by, Dack. Luke, we’ve got a malfunction in fire
control. I’ll have to cut in the auxiliary. Just hang on. Hang
on, Dack. Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my gunner.
You’llhavetomakethisshot.I’llcoverforyou.Setyourharpoon.
Follow me on the next pass. Coming around, Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you.
I’ll meet you at the rendezvous point on Tatooine. Princess,
we’ll find Han. I promise. Chewie, I’ll be waiting for your
signal. Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really
nothing more we can do. And my joints are freezing up.
Never
Justify

17. @jenniferbourn
#WCSD
Avoid
Align
Center
Rouge Group, use your harpoons and tow cables. Go for
the legs. It might be our only chance of stopping them. All
right, stand by, Dack. Luke, we’ve got a malfunction in fire
control. I’ll have to cut in the auxiliary. Just hang on. Hang
on, Dack. Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator.
The shield will be down in moments. You may start your
landing. Rouge Three. Copy, Rouge Leader Wedge, I’ve
lost my gunner. You’ll have to make this shot. I’ll cover
for you. Set your harpoon. Follow me on the next pass.
Coming around, Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you.
I’ll meet you at the rendezvous point on Tatooine. Princess,
we’ll find Han. I promise. Chewie, I’ll be waiting for your
signal. Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.

18. @jenniferbourn
#WCSD
Rouge Group, use your harpoons and tow cables. Go
for the legs. It might be our only chance of stopping them.
All right, stand by, Dack. Luke, we’ve got a malfunction in fire
control. I’ll have to cut in the auxiliary. Just hang on. Hang on,
Dack. Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator.
The shield will be down in moments. You may start your
landing. Rouge Three. Copy, Rouge Leader Wedge, I’ve lost
my gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.
Don’t
Indent

19. @jenniferbourn
#WCSD
Easy
To
Read
Rouge Group, use your harpoons and tow cables. Go for the
legs. It might be our only chance of stopping them. All right,
stand by, Dack. Luke, we’ve got a malfunction in fire control.
I’ll have to cut in the auxiliary. Just hang on. Hang on, Dack.
Get ready to fire that tow cable. Dack? Dack!
Yes, Lord Vader. I’ve reached the main power generator. The
shield will be down in moments. You may start your landing.
Rouge Three. Copy, Rouge Leader Wedge, I’ve lost my
gunner. You’ll have to make this shot. I’ll cover for you. Set
your harpoon. Follow me on the next pass. Coming around,
Rouge Leader.
We’re ready for takeoff. Good luck, Lando When we find
Jabba the Hut and that bounty hunter, we’ll contact you. I’ll
meet you at the rendezvous point on Tatooine. Princess, we’ll
find Han. I promise. Chewie, I’ll be waiting for your signal.
Take care, you two. May the Force be with you.
You must come along now, Artoo. There’s really nothing
more we can do. And my joints are freezing up.

20. @jenniferbourn
#WCSD
Let’s Talk
Color

21. @jenniferbourn
#WCSD
2-3 Brand Colors

22. @jenniferbourn
#WCSD
1 Action Color

23. @jenniferbourn
#WCSD

24. @jenniferbourn
#WCSD

25. @jenniferbourn
#WCSD

26. @jenniferbourn
#WCSD
Let’s Talk
Images

27. @jenniferbourn
#WCSD
Make sure your content width is at least 600px.
Full Width Images
Best for social sharing

28. @jenniferbourn
#WCSD

29. @jenniferbourn
#WCSD
In February, the kids have an entire
week off school and we’re heading to
Hawaii for some fun in the sun. This
time we’re hitting the Big Island and
for the last few days of our trip, we’ll
be staying at Volcano house inside
Volcano National Park. Our mission is
to see hot, molten lava — we can’t wait!
I also can’t wait for macadamia nuts.
In
February, the kids have an entire week
off school and we’re heading to Hawaii
for some fun in the sun. This time we’re
hitting the Big Island and for the last
few days of our trip, we’ll be staying at
Volcano house inside Volcano National
Park. Our mission is to see hot, molten
lava — we can’t wait!
In February, the kids have an entire week off school and we’re heading to Hawaii for some
fun in the sun. This time we’re hitting the Big Island and for the last few days of our trip,
we’ll be staying at Volcano house inside Volcano National Park. Our mission is to see hot,
molten lava — we can’t wait! I also can’t wait for macadamia nuts. I love them. I love them
with chocolate.
While researching things to do on the Big Island, I found a macadamia nut farm tour,
which got me thinking of macadamia nuts, which got me thinking about White Chocolate
Macadamia Nut cookies, which then gave me the idea to make White Chocolate
Macadamia Nut Waffles.
White Chocolate Macadamia Nut Waffles. OMG. We even had strawberries in the fridge
already, so the only thing I needed at the store was the macadamia nuts — and I needed
to go to the store anyway because we were out of coffee creamer. So this was definitely
happening.

30. @jenniferbourn
#WCSD
Avoid Cheesy
Stock Images
No overly happy smiles and awkward poses.

31. @jenniferbourn
#WCSD

32. @jenniferbourn
#WCSD

33. @jenniferbourn
#WCSD

34. @jenniferbourn
#WCSD
Use Visual Cues
For Attention
Leverage eyes, arrows, and visual elements.

35. @jenniferbourn
#WCSD
Lord Vader, this is an unexpected pleasure.
We’re honored by your presence. You may dispense with
the pleasantries, Commander. I’m here to put you back
on schedule.
EMAIL ADDRESS
CALL TO ACTION
Break off the attack! The shield is still up. I get no reading. Are
you sure? Pull up! All craft pull up! Take evasive action! Green
Group, stick close to holding sector MV-7. Admiral, we have
enemy ships in sector 47.
It’s a trap!
All wings report in. Red Leader standing by. Gray Leader
standing by. Green Leader standing by. Lock S-foils in attack
positions. May the Force be with us.
We’ve got to be able to get some kind of a reading on that
shield, up or down. Well, how could they be jamming us if
they don’t know if we’re coming.

36. @jenniferbourn
#WCSD
Let’s Talk
Content

37. @jenniferbourn
#WCSD
Break
It Up
This is a Rebel that surrendered to us. Although he denies it, I believe
there may be more of them, and I request permission to conduct
a further search of the area. He was armed only with this. Good
work, Commander. Leave us. Conduct your search and bring his
companions to me. Yes, my Lord. The Emperor has been expecting
you. I know, father. So, you have accepted the truth. I’ve accepted
the truth that you were once Anakin Skywalker, my father. That name
no longer has any meaning for me.
Threepio, you tell that slimy piece of... worm-ridden filth he’ll get no
such pleasure from us. Right? Jabba! This is your last chance. Free
us or die. Move him into position. Put him in. What is thy bidding, my
Master? Send the fleet to the far side of Endor. There it will stay until
called for. What of the reports of the Rebel fleet massing near Sullust?
It is of no concern. Soon the Rebellion will be crushed and young
Skywalker will be one of us! Your work here is finished, my friend. Go
out to the command ship and await my orders. Yes, my Master.
If they don’t go for this, we’re gonna have to get outta here pretty
quick, Chewie. We have you on our screen now. Please identify.
Shuttle Tydirium requesting deactivation of the deflector shield.
Shuttle Tydirium, transmit the clearance code for shield passage.
Transmission commencing. Now we find out if that code is worth
the price we paid.

38. @jenniferbourn
#WCSD
Break
It Up
This is a Rebel that surrendered to us.
Although he denies it, I believe there may be more of them, and I
request permission to conduct a further search of the area. He was
armed only with this. Good work, Commander. Leave us. Conduct
your search and bring his companions to me. Yes, my Lord.
The Emperor has been expecting you. I know, father.
• So, you have accepted the truth.
• I’ve accepted the truth that you were once Anakin Skywalker
• That name no longer has any meaning for me.
What is thy bidding, my Master?
Send the fleet to the far side of Endor. There it will stay until called for.
What of the reports of the Rebel fleet massing near Sullust? It is of no
concern. Soon the Rebellion will be crushed and young Skywalker
will be one of us! Your work here is finished, my friend. Go out to the
command ship and await my orders. Yes, my Master.
Threepio, you tell that slimy piece of worm-ridden filth he’ll get no
such pleasure from us. Right? Jabba! This is your last chance. Free
us or die. Move him into position. Put him in.

39. @jenniferbourn
#WCSD
Use
Color
This is a Rebel that surrendered to us.
Although he denies it, I believe there may be more of them, and I
request permission to conduct a further search of the area. He was
armed only with this. Good work, Commander. Leave us. Conduct
your search and bring his companions to me. Yes, my Lord.
The Emperor has been expecting you. I know, father.
• So, you have accepted the truth.
• I’ve accepted the truth that you were once Anakin Skywalker
• That name no longer has any meaning for me.
What is thy bidding, my Master?
Send the fleet to the far side of Endor. There it will stay until called for.
What of the reports of the Rebel fleet massing near Sullust? It is of no
concern. Soon the Rebellion will be crushed and young Skywalker
will be one of us! Your work here is finished, my friend. Go out to the
command ship and await my orders. Yes, my Master.
Threepio, you tell that slimy piece of worm-ridden filth he’ll get no
such pleasure from us. Right? Jabba! This is your last chance. Free
us or die. Move him into position. Put him in.

40. @jenniferbourn
#WCSD
Let’s Talk
Design

41. @jenniferbourn
#WCSD
No Sliders
Sliders happen due to
lack of decision-making,
lack of clarity, and
lack of leadership

42. @jenniferbourn
#WCSD
Do The Expected
Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Left
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Right
Primary Menu . . . . . . . . . . . . . . . . . . . . . . Header
Value Proposition . . . . . . . . . . . . . Top

43. @jenniferbourn
#WCSD
Do The Expected
Call To Action . . . . . . . . . . . . . . . . . . . . . . Top
Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Header
Social Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . Footer
Admin Info . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Footer

44. @jenniferbourn
#WCSD
Honor Hierarchy
Low Visual Importance
Small size, bottom of page, low
contrast, text links, surrounded
by other elements

45. @jenniferbourn
#WCSD
Honor Hierarchy
High Visual Importance
Large size, top of page, high
contrast, buttons, video/images,
surrounded by white space

46. @jenniferbourn
#WCSD
Spacing Matters
What is thy bidding, my Master?
Send the fleet to the far side of Endor. There it will
stay until called for. What of the reports of the Rebel
fleet massing near Sullust? It is of no concern. Soon
the Rebellion will be crushed and young Skywalker
will be one of us!
Your work here is finished.
Go out to the command ship and await my orders.
Yes, my Master. Threepio, you tell that slimy piece of
worm-ridden filth he’ll get no such pleasure from us.
Right? Jabba! This is your last chance. Free us or die.
What is thy bidding, my Master?
Send the fleet to the far side of Endor. There it will
stay until called for. What of the reports of the Rebel
fleet massing near Sullust? It is of no concern. Soon
the Rebellion will be crushed and young Skywalker
will be one of us!
Your work here is finished.
Go out to the command ship and await my orders.
Yes, my Master. Threepio, you tell that slimy piece of
worm-ridden filth he’ll get no such pleasure from us.
Right? Jabba! This is your last chance. Free us or die.

47. @jenniferbourn
#WCSD
Critical
Reminders

48. @jenniferbourn
#WCSD
Clear Is Better
Than Clever
Always ask: Is this the easiest it can be?
Is it the simplest it can be?

49. @jenniferbourn
#WCSD
One Primary Call
To Action Per Page
A confused mind doesn’t buy.
Neither does a distracted mind.
Stay focused and keep visitors focused.

50. @jenniferbourn
#WCSD
Reduce Distractions
Simple is subconsciously perceived as beautiful.
Short Sidebars
Rethink Social Links

51. @jenniferbourn
#WCSD
Practice
Web Design
Avoid Web
Decoration

52. @jenniferbourn
#WCSD
Jennifer Bourn
jenniferbourn.com
bourncreative.com