Slide 1

Slide 1 text

DIY DESIGN Think Like A Designer When Creating Your Site

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@marktimemedia DESIGN MYTHS

Slide 4

Slide 4 text

@marktimemedia Design is WHAT A SITE LOOKS LIKE

Slide 5

Slide 5 text

@marktimemedia Design is PROBLEM SOLVING

Slide 6

Slide 6 text

@marktimemedia ONLY DESIGNERS Can Design

Slide 7

Slide 7 text

@marktimemedia EVERYONE Can Design!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@marktimemedia WHY? A designer’s secret weapon:

Slide 11

Slide 11 text

@marktimemedia EFFECTIVE, ATTRACTIVE SITES

Slide 12

Slide 12 text

@marktimemedia EFFECTIVE SITES How well does the site accomplish your goals and how easily can people use it?

Slide 13

Slide 13 text

@marktimemedia WHY DO PEOPLE VISIT WEBSITES?

Slide 14

Slide 14 text

@marktimemedia VERB A word that represents an action or state of being

Slide 15

Slide 15 text

@marktimemedia BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP SHARE COMMENT LIKE

Slide 16

Slide 16 text

@marktimemedia WHY ARE PEOPLE VISITING YOUR WEBSITE?

Slide 17

Slide 17 text

@marktimemedia Your website has a SINGLE PRIMARY VERB

Slide 18

Slide 18 text

@marktimemedia YOUR PRIMARY WIN

Slide 19

Slide 19 text

@marktimemedia CLEAR CALLS TO ACTION

Slide 20

Slide 20 text

@marktimemedia BUTTONS Obviously Clickable Using Plain Language (not being cute/clever) BUY NOW SPEND YO MONEYZ!

Slide 21

Slide 21 text

@marktimemedia FORMS VS Easy To Use & Not Asking Too Much

Slide 22

Slide 22 text

@marktimemedia CONTENT VS Easily Scannable, Directed, & Precise

Slide 23

Slide 23 text

@marktimemedia BE PREDICTABLE

Slide 24

Slide 24 text

@marktimemedia ESTABLISHED PATTERNS

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@marktimemedia ATTRACTIVE SITES How well does the site match your brand and follow good design principles?

Slide 27

Slide 27 text

@marktimemedia VISUAL HIERARCHY

Slide 28

Slide 28 text

@marktimemedia WHICH IS MOST IMPORTANT?

Slide 29

Slide 29 text

@marktimemedia WHICH IS MOST IMPORTANT?

Slide 30

Slide 30 text

@marktimemedia WHICH IS MOST IMPORTANT?

Slide 31

Slide 31 text

@marktimemedia WHICH IS MOST IMPORTANT?

Slide 32

Slide 32 text

@marktimemedia FONTS & TYPOGRAPHY

Slide 33

Slide 33 text

@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.

Slide 34

Slide 34 text

@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.

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

@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/

Slide 38

Slide 38 text

@marktimemedia COLORS

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@marktimemedia CONSISTENCY (what is clickable?)

Slide 41

Slide 41 text

@marktimemedia CONSISTENCY (what is clickable?)

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@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?

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@marktimemedia ALIGNMENT & SPACING

Slide 46

Slide 46 text

@marktimemedia LESS IS MORE Fewer elements with more breathing room VS (yes, even including ads!)

Slide 47

Slide 47 text

@marktimemedia CLEAR RELATIONSHIPS

Slide 48

Slide 48 text

@marktimemedia CLEAR RELATIONSHIPS

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

@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

Slide 51

Slide 51 text

@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/

Slide 52

Slide 52 text

@marktimemedia SUMMARY

Slide 53

Slide 53 text

@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

Slide 54

Slide 54 text

@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/

Slide 55

Slide 55 text

@marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/diy-web-design