DIY Design: Think Like A Designer When Creating Your Site

DIY Design: Think Like A Designer When Creating Your Site

Learn the tricks designers use to make websites attractive and effective. We’ll teach you the Most Important Question designers ask their clients, and how you can use it to your advantage when doing it yourself. Then, learn practical ways to apply it to create attractive sites (using good design principles and simple rules for success) and effective sites (through basic exercises that help you develop and showcase your primary call to action).

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

June 08, 2016
Tweet

Transcript

  1. DIY DESIGN Think Like A Designer When Creating Your Site

  2. @marktimemedia I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.

  3. @marktimemedia DESIGN MYTHS

  4. @marktimemedia Design is WHAT A SITE LOOKS LIKE

  5. @marktimemedia Design is PROBLEM SOLVING

  6. @marktimemedia ONLY DESIGNERS Can Design

  7. @marktimemedia EVERYONE Can Design!

  8. @marktimemedia THEY DON’T WANT YOU TO KNOW! You’ll never guess

    this important question
  9. @marktimemedia THEY DON’T WANT YOU TO KNOW! You’ll never guess

    this important question
  10. @marktimemedia WHY? A designer’s secret weapon:

  11. @marktimemedia EFFECTIVE, ATTRACTIVE SITES

  12. @marktimemedia EFFECTIVE SITES How well does the site accomplish your

    goals and how easily can people use it?
  13. @marktimemedia WHY DO PEOPLE VISIT WEBSITES?

  14. @marktimemedia VERB A word that represents an action or state

    of being
  15. @marktimemedia BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP

    SHARE COMMENT LIKE
  16. @marktimemedia WHY ARE PEOPLE VISITING YOUR WEBSITE?

  17. @marktimemedia Your website has a SINGLE PRIMARY VERB

  18. @marktimemedia YOUR PRIMARY WIN

  19. @marktimemedia CLEAR CALLS TO ACTION

  20. @marktimemedia BUTTONS Obviously Clickable Using Plain Language (not being cute/clever)

    BUY NOW SPEND YO MONEYZ!
  21. @marktimemedia FORMS VS Easy To Use & Not Asking Too

    Much
  22. @marktimemedia CONTENT VS Easily Scannable, Directed, & Precise

  23. @marktimemedia BE PREDICTABLE

  24. @marktimemedia ESTABLISHED PATTERNS

  25. @marktimemedia ESTABLISHED PATTERNS Header: navigation, logo Footer: extra navigation, contact

    info, terms/conditions Contact Us: page/form easily accessible Search: let people find things their way Scrolling, Swiping: behave normally, don’t hijack Clicking: affordance, knowing something is “clickable" Icons & Metaphors: map pin, social icons, mail icon, etc
  26. @marktimemedia ATTRACTIVE SITES How well does the site match your

    brand and follow good design principles?
  27. @marktimemedia VISUAL HIERARCHY

  28. @marktimemedia WHICH IS MOST IMPORTANT?

  29. @marktimemedia WHICH IS MOST IMPORTANT?

  30. @marktimemedia WHICH IS MOST IMPORTANT?

  31. @marktimemedia WHICH IS MOST IMPORTANT?

  32. @marktimemedia FONTS & TYPOGRAPHY

  33. @marktimemedia LESS IS MORE Pick 1 Heading Font & 1

    Body Font This is My Heading Font This is my body font, which needs to work well in paragraphs at smaller sizes. Remember to evaluate this for legibility when used within larger blocks of text. Body fonts are generally set at 16px with 1.6 line-height to be readable on a large variety of devices.
  34. @marktimemedia DISTINCT/COMPLEMENTARY Pick fonts that are not too similar This

    is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes. This is My Heading Font This is my body font, for use in normal paragraphs at smaller sizes.
  35. @marktimemedia TYPOGRAPHY RULES Paragraphs – font-size: 16px, line-height 1.6 –

    45-86 characters/line – small bottom margin Headings – line-height: 1.2 Sub-Headings – larger top margin than bottom margin within content
  36. @marktimemedia VOCABULARY font-family: which typeface are you using? font-size: how

    big/small is it? font-weight: how heavy/light is it? font-style, text-decoration: italic, underline, strike Serif Sans-Serif
  37. @marktimemedia RESOURCES Google Font Pairing http://fontpair.co/ Typekit Font Pairing http://justmytype.co/typekit/

    Article: Line Length & Font Size https://www.smashingmagazine.com/2014/09/balancing-line- length-font-size-responsive-web-design/
  38. @marktimemedia COLORS

  39. @marktimemedia LESS IS MORE Pick 2-3 Colors plus neutrals

  40. @marktimemedia CONSISTENCY (what is clickable?)

  41. @marktimemedia CONSISTENCY (what is clickable?)

  42. @marktimemedia CONTRAST Make sure it’s legible Lorem ipsum dolor sit

    amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
  43. @marktimemedia VOCABULARY Hue: where is it on the color spectrum?

    Saturation: how vivid or dull is the color? Contrast: how much does it stand out? Opacity: solid or transparent?
  44. @marktimemedia RESOURCES Adobe Color https://color.adobe.com/ Color Safe Palettes http://colorsafe.co/ Random

    Accessible Color http://www.randoma11y.com/ Easy Color Classes http://clrs.cc/ Article: Psychology of Color https://www.entrepreneur.com/article/233843
  45. @marktimemedia ALIGNMENT & SPACING

  46. @marktimemedia LESS IS MORE Fewer elements with more breathing room

    VS (yes, even including ads!)
  47. @marktimemedia CLEAR RELATIONSHIPS

  48. @marktimemedia CLEAR RELATIONSHIPS

  49. @marktimemedia ALIGNMENT When in doubt, Align Top & Left VS

  50. @marktimemedia VOCABULARY Whitespace: how much “breathing room” does each element

    have? Grid: underlying structure that determines how everything lays out Padding: the space inside a block level element Margin: The space outside a block level element
  51. @marktimemedia RESOURCES Article: Why Whitespace Matters https://boagworld.com/design/why-whitespace-matters/ Article: Why Whitepsace

    is Crucial to UX Design http://www.fastcodesign.com/3046656/why-white-space-is- crucial-to-ux-design Article: Web Design Basics Guide https://99designs.com/blog/tips/web-design-basics-guide/
  52. @marktimemedia SUMMARY

  53. @marktimemedia Design is Problem Solving Be able to Explain Why

    you made a decision Know Your Win and have clear calls to action Follow Established Patterns for ease of use Less is More with colors, fonts, and content Use Visual Hierarchy to guide your audience
  54. @marktimemedia GENERAL RESOURCES Article: Design Principles of Successful Websites https://www.cleverism.com/web-design-principles-successful-

    websites/ Article: 10 Principles of Web Design http://www.nea.org/home/10-Principles-of-Basic-Web- Design.html Article: Web Design Tips & Hacks http://www.designforfounders.com/tips-and-hacks/
  55. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/diy-web-design