Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Design Principles To DIY Like A Pro Slide 1 Design Principles To DIY Like A Pro Slide 2 Design Principles To DIY Like A Pro Slide 3 Design Principles To DIY Like A Pro Slide 4 Design Principles To DIY Like A Pro Slide 5 Design Principles To DIY Like A Pro Slide 6 Design Principles To DIY Like A Pro Slide 7 Design Principles To DIY Like A Pro Slide 8 Design Principles To DIY Like A Pro Slide 9 Design Principles To DIY Like A Pro Slide 10 Design Principles To DIY Like A Pro Slide 11 Design Principles To DIY Like A Pro Slide 12 Design Principles To DIY Like A Pro Slide 13 Design Principles To DIY Like A Pro Slide 14 Design Principles To DIY Like A Pro Slide 15 Design Principles To DIY Like A Pro Slide 16 Design Principles To DIY Like A Pro Slide 17 Design Principles To DIY Like A Pro Slide 18 Design Principles To DIY Like A Pro Slide 19 Design Principles To DIY Like A Pro Slide 20 Design Principles To DIY Like A Pro Slide 21 Design Principles To DIY Like A Pro Slide 22 Design Principles To DIY Like A Pro Slide 23 Design Principles To DIY Like A Pro Slide 24 Design Principles To DIY Like A Pro Slide 25 Design Principles To DIY Like A Pro Slide 26 Design Principles To DIY Like A Pro Slide 27 Design Principles To DIY Like A Pro Slide 28 Design Principles To DIY Like A Pro Slide 29 Design Principles To DIY Like A Pro Slide 30 Design Principles To DIY Like A Pro Slide 31 Design Principles To DIY Like A Pro Slide 32 Design Principles To DIY Like A Pro Slide 33 Design Principles To DIY Like A Pro Slide 34 Design Principles To DIY Like A Pro Slide 35 Design Principles To DIY Like A Pro Slide 36 Design Principles To DIY Like A Pro Slide 37 Design Principles To DIY Like A Pro Slide 38 Design Principles To DIY Like A Pro Slide 39 Design Principles To DIY Like A Pro Slide 40 Design Principles To DIY Like A Pro Slide 41 Design Principles To DIY Like A Pro Slide 42 Design Principles To DIY Like A Pro Slide 43 Design Principles To DIY Like A Pro Slide 44 Design Principles To DIY Like A Pro Slide 45 Design Principles To DIY Like A Pro Slide 46 Design Principles To DIY Like A Pro Slide 47 Design Principles To DIY Like A Pro Slide 48 Design Principles To DIY Like A Pro Slide 49 Design Principles To DIY Like A Pro Slide 50 Design Principles To DIY Like A Pro Slide 51 Design Principles To DIY Like A Pro Slide 52
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

5 Likes

Share

Download to read offline

Design Principles To DIY Like A Pro

Download to read offline

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Design Principles To DIY Like A Pro

  1. 1. @jenniferbourn #WCSD
  2. 2. @jenniferbourn #WCSD Let’s Talk Typography
  3. 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. 4. @jenniferbourn #WCSD Use 2 Weights Of The Same Typeface Skip a weight or two — this is 100 and 700.
  5. 5. @jenniferbourn #WCSD Different Typefaces Provide Visual Contrast Just don’t use more than two.
  6. 6. @jenniferbourn #WCSD Similar Typefaces Are A Mistake Don’t use two typefaces of the same style.
  7. 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. 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. 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. 10. @jenniferbourn #WCSD Let’s Talk Alignment
  11. 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. 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. 13. @jenniferbourn #WCSD Align To One Axis Red Leader Gray Leader Green Leader Red Leader Gray Leader Green Leader
  14. 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. 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. 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. 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. 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. 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. 20. @jenniferbourn #WCSD Let’s Talk Color
  21. 21. @jenniferbourn #WCSD 2-3 Brand Colors
  22. 22. @jenniferbourn #WCSD 1 Action Color
  23. 23. @jenniferbourn #WCSD
  24. 24. @jenniferbourn #WCSD
  25. 25. @jenniferbourn #WCSD
  26. 26. @jenniferbourn #WCSD Let’s Talk Images
  27. 27. @jenniferbourn #WCSD Make sure your content width is at least 600px. Full Width Images Best for social sharing
  28. 28. @jenniferbourn #WCSD
  29. 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. 30. @jenniferbourn #WCSD Avoid Cheesy Stock Images No overly happy smiles and awkward poses.
  31. 31. @jenniferbourn #WCSD
  32. 32. @jenniferbourn #WCSD
  33. 33. @jenniferbourn #WCSD
  34. 34. @jenniferbourn #WCSD Use Visual Cues For Attention Leverage eyes, arrows, and visual elements.
  35. 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. 36. @jenniferbourn #WCSD Let’s Talk Content
  37. 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. 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. 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. 40. @jenniferbourn #WCSD Let’s Talk Design
  41. 41. @jenniferbourn #WCSD No Sliders Sliders happen due to lack of decision-making, lack of clarity, and lack of leadership
  42. 42. @jenniferbourn #WCSD Do The Expected Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Left Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Right Primary Menu . . . . . . . . . . . . . . . . . . . . . . Header Value Proposition . . . . . . . . . . . . . Top
  43. 43. @jenniferbourn #WCSD Do The Expected Call To Action . . . . . . . . . . . . . . . . . . . . . . Top Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Header Social Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . Footer Admin Info . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Footer
  44. 44. @jenniferbourn #WCSD Honor Hierarchy Low Visual Importance Small size, bottom of page, low contrast, text links, surrounded by other elements
  45. 45. @jenniferbourn #WCSD Honor Hierarchy High Visual Importance Large size, top of page, high contrast, buttons, video/images, surrounded by white space
  46. 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. 47. @jenniferbourn #WCSD Critical Reminders
  48. 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. 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. 50. @jenniferbourn #WCSD Reduce Distractions Simple is subconsciously perceived as beautiful. Short Sidebars Rethink Social Links
  51. 51. @jenniferbourn #WCSD Practice Web Design Avoid Web Decoration
  52. 52. @jenniferbourn #WCSD Jennifer Bourn jenniferbourn.com bourncreative.com
  • CharlotteChao

    Nov. 23, 2020
  • EvaEriksson16

    Feb. 27, 2020
  • JohnWalker18

    Apr. 17, 2018
  • rpbest

    Apr. 15, 2018
  • scottnsd

    Apr. 15, 2018

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.

Views

Total views

1,743

On Slideshare

0

From embeds

0

Number of embeds

32

Actions

Downloads

34

Shares

0

Comments

0

Likes

5

×